Merge pull request #8 from codefordus/frontend

Frontend
codefordus · Jul 28, 2016 · 2613a64 · 2613a64
2 parents 48e011d + 06fae9d
commit 2613a64
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 27 deletions.
diff --git a/.bowerrc b/.bowerrc
diff --git a/www/css/style.css b/www/css/style.css
@@ -1,42 +1,97 @@
 /* Empty. Add your own CSS if you like */
 
+ion-content.scroll-content {
+background-color: #DCDCDC;
 }
 
 
+button.ng-binding.disable-user-behavior {
+	width: 40%;
+	font-size: 25px;
+	border-style: inherit;
+	border-radius: 10%;
+	margin-left: 30%;
+	margin-top: 3%;
+	color: #FFFACD;
+	background-color: #DAA520;
+
+}
+
+div.col1.ng-binding{
+	background:#DCECFC;
+	border-radius: 5%;
+	padding: inherit;
+	font-size: 35px;
+	margin: 1%;
+}
+
+i.fa.fa-clock-o{
+	font-size: 25px;
+}
+
+div.col2.ng-binding {
+	background:#85C1E9;
+	padding: inherit;
+	border-radius: 5%;
+	font-size: 35px;
+	margin: 1%;
+}
+
+i.fa.fa-road{
+	font-size: 25px;
+}
+
+div.col3.ng-binding {
+	background: #ECFCDC;
+	padding: inherit;
+ 	border-radius: 5%;
+	font-size: 35px;
+	margin: 1%;
+}
+
+i.fa.fa-bicycle{
+	font-size: 25px;
+}
+
+
+div.col4.ng-binding {
+	background:#82E0AA;
+	padding: inherit;
+	border-radius: 5%;
+	font-size: 35px;
+	margin:1%;
+}
+
+i.fa.fa-globe{
+	font-size: 25px;
+}
+
 img {
 	width: 100%;
 	height: auto;
-	
+
 
 }
 
 div.ng-binding {
 	display: block;
 	width: 100%;
-	height: 57%;
+	height: 40%;
 	text-align: center;
-	font-size: 31px;
-	position: relative;
-	top: 25mm;
-	background-color: #ffffff;
-
-
+	font-size: 35px;
+	top: 20%;
+	padding-top: 30px;
 }
 
 img.disable-user-behavior {
-	position: relative;
 	top: 10%;
 	right: 3%;
 }
 
-ion-header-bar.bar.bar-header.bar-assertive {
-	background: #ca232c;
-}
-
 map {
   display: block;
   width: 100%;
-  height: 60%;
+  height: 85%;
 
 }
 

diff --git a/www/index.html b/www/index.html
@@ -9,6 +9,9 @@
     <link href="css/style.css" rel="stylesheet">
     <link href="css/leaflet.css" rel="stylesheet">
     <link href="lib/ion-floating-menu/dist/ion-floating-menu.css" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
+    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
+
 
  <!--   <! IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
     <link href="css/ionic.app.css" rel="stylesheet">
@@ -34,19 +37,26 @@
   </head>
 
   <body ng-app="starter" ng-controller="MapCtrl">
-    <ion-header-bar class="bar bar-header bar-assertive">
- 	  <h1 class="title">CycleDorf</h1>
-     </ion-header-bar>
     <ion-content scroll="false">
       <map on-create="mapCreated(map)"></map>
-      <div>
-        {{ timer }}<br>
-        {{ current_track_distance }}<br>
-        {{ firedb_tracks }}<br>
-        {{ firedb_time }}<br>
-        {{ firedb_driven }}<br>
-        <img ng-click="start()" src="./img/Button.png">{{ status }}
+      <div class = "row">
+        <div class = "col1">{{timer}}
+          <i class="fa fa-clock-o"></i>
+        </div>
+        <div class = "col2">{{current_track_distance}}
+          <i class="fa fa-road"></i>
+        </div>
+      </div>
+      <div class = "row">
+        <div class = "col3">{{firedb_tracks}}
+          <i class="fa fa-bicycle"></i>
+        </div>
+        <div class = "col4">{{firedb_time}}
+          <i class="fa fa-globe"></i>
+        </div>
       </div>
+      <button ng-click="start()">{{ status }}
+      </button>
     </ion-content>
   </body>
 </html>