View/Weight/index.view

@@ -115,8 +115,10 @@
 </div>
 <div class="row col-lg-1">
 	<div class="col">
-		<table>
+		<h3>Last 10 readings</h3>
+		<table class="alternatingRows">
 			<tr>
+				<th>Date</th>
 				<th>Weight</th>
 				<th>BMI</th>
 				<th>Fat %</th>
@@ -124,7 +126,7 @@
 			<?php
 				$last10=array_slice($readings, count($readings)-10);
 				foreach ($last10 as $reading){
-					echo '<tr><td>',$reading->Weight,'</td><td>',round($reading->Bmi,1),'</td><td>',$reading->Fat,'</td></tr>';
+					echo '<tr><td>',date("d/m/y", strtotime($reading->Timestamp)),'</td><td>',$reading->Weight,'</td><td>',round($reading->Bmi,1),'</td><td>',$reading->Fat,'</td></tr>';
 				}
 			?>
 		</table>

css/style.css

@@ -288,3 +288,17 @@ p:first-child {
 .row.col-sm-4 > .col {
   width: 25%;
 }
+table.alternatingRows tr:nth-child(1n) {
+  background: #eeeeee;
+}
+table.alternatingRows tr:nth-child(2n) {
+  background: #e0e0e0;
+}
+td,
+th {
+  padding: 3px;
+}
+td.number,
+th.number {
+  text-align: right;
+}

javascript.js

@@ -89,6 +89,13 @@ $(function(){
 		if (postFunction!==undefined && window[postFunction]!==undefined)
 			window[postFunction]();
 	});
+	
+	$("td").each(function(){
+		var elem=$(this);
+		if (/^[+-]?\d+(\.\d+)?$/.test(elem.text())){
+			elem.addClass("number");
+		}
+	});
 });
 
 

less/style.less

@@ -5,7 +5,7 @@
 * {
     box-sizing: border-box;
 	outline: none;
-	
+
 	transition: background-color 0.2s ease;
 }
 
@@ -35,9 +35,9 @@ nav {
 
 	dt, dd{
 		&:hover, &.active{
-		   background: @control;
-		   cursor: pointer;
-		   cursor: hand;
+			background: @control;
+			cursor: pointer;
+			cursor: hand;
 		}
 	}
 
@@ -65,7 +65,7 @@ h2{
 
 h3{
 	margin-bottom: 10px;
-	
+
 	:first-child{
 		margin-top: 0px;
 	}
@@ -77,7 +77,7 @@ hr{
 
 table{
 	border-collapse: collapse;
-	
+
 	input[type=text], textarea{
 		width: 100%;
 	}
@@ -96,7 +96,7 @@ form{
 	button, input[type=submit]{
 		border:none;
 		background:@control;
-		
+
 		&:hover{
 			background: @control2;
 		}
@@ -125,7 +125,7 @@ p:first-child{
 	box-shadow: -2px 0px 0px 0px @control inset;
 	z-index: 400;
 	overflow-x: hidden;
-	
+
 	.header{
 		z-index: 401;
 	}
@@ -138,7 +138,7 @@ p:first-child{
 #nav-container{
 	overflow: auto;
 	width:100%;
-	
+
 	dl {
 		margin: 5px 0 0 0;
 	}
@@ -147,7 +147,7 @@ p:first-child{
 #main{
 	padding-left:280px;
 	padding-top:64px;
-	
+
 	>*{
 		padding-left:20px !important;
 	}
@@ -183,17 +183,17 @@ p:first-child{
 		tr>td{
 			vertical-align: bottom;
 			padding:0;
-			
+
 			&:last-child{
 				text-align: right;
 			}
-			
+
 			>*:not(:first-child){
 				margin-top:20px;
 			}
 		}
 	}
-	
+
 	button{
 		border-radius: 50%;
 		display: inline-block;
@@ -222,7 +222,7 @@ p:first-child{
 	margin-top:-115px;
 	margin-left:-115px;
 	color:white;
-	
+
 	> div{
 		margin-top:40px;
 		text-align: center;
@@ -237,7 +237,7 @@ p:first-child{
 	padding:0 !important;
 	overflow: hidden;
 	box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.8);
-	
+
 	>*{
 		line-height:64px;
 		font-size:24px;
@@ -259,7 +259,7 @@ p:first-child{
 
 	span{
 		display: inline-block;
-		
+
 		&:not(:first-child):before{
 			margin:2px 10px 0 10px;
 			width:6px;
@@ -301,7 +301,7 @@ p:first-child{
 	padding:10px;
 	padding-left:40px;
 	color:#fff;
-	
+
 	ul{
 		margin: 0;
 		list-style: square;
@@ -340,4 +340,24 @@ p:first-child{
 			width:25%;
 		}
 	}
+}
+
+table.alternatingRows{
+	tr{
+		&:nth-child(1n){
+			background:@control;
+		}
+		
+		&:nth-child(2n){
+			background:@control2;
+		}
+	}
+}
+
+td, th{
+	padding:3px;
+	
+	&.number{
+		text-align: right;
+	}
 }