UI format changes

assets/css/style.css

@@ -247,7 +247,7 @@ body {
 }
 
 .driver {
-  display: flex;
+  /* display: flex; */
   align-items: flex-start;
   opacity: 0;
   position: relative;
@@ -257,15 +257,17 @@ body {
 }
 
 .driver__image {
-  width: 150px;
-  height: 100px;
-  border-radius: 50%;
-  background-size: 85px;
+  /* width: 400px; */
+  height: 200px;
+  /* border-radius: 50%; */
+  background-size: 40%;
   background-repeat: no-repeat;
   background-position: center;
   border: 3px solid white;
   /* box-shadow: 0px 5px 12px rgba(0, 0, 0, 0.12); */
-  margin-right: 1.5rem;
+  /* margin-right: 1.5rem;
+ */
+ margin: auto;
 }
 
 .driver__content {
@@ -276,6 +278,7 @@ body {
   font-weight: 700;
   font-size: 1.6rem;
   margin: 0.5rem 0;
+  text-align: center;
 }
 
 .driver__table {
@@ -336,4 +339,19 @@ body {
 .a-no-link{
   text-decoration: none;
   color: initial;
+}
+
+.driver__table > tbody> tr > td:has(small){
+  text-align: right;
+}
+.driver__table > tbody> tr > td:has(small)::after{
+  content: ":";
+}
+
+.center{
+  text-align: center;
+}
+
+.bold{
+  font-weight: bold;
 }

assets/js/leaderboard.js

@@ -67,7 +67,7 @@ tableRow.forEach(tableRow => {
 		<table class="driver__table">
 			<tbody>
 				<tr>
-					<td><small>Belt</small></td>
+					<td class="sidebar-td"><small>Belt</small></td>
 					<td class="caps">${ninjaBelt}</td>
 				</tr>
                 <tr>
@@ -82,9 +82,13 @@ tableRow.forEach(tableRow => {
 					<td><small>Score</small></td>
 					<td class="caps">${this.dataset.score} </td>
 				</tr>
+        
         <tr>
-					<td><small>Latest Update</small></td>
-					<td>${this.dataset.remark} </td>
+					<td><small>Last Updated On</small></td>
+					<td>${timeSince(this.dataset.Timestamp)}</td>
+				</tr>
+        <tr>
+					<td class="center bold" colspan=2>${this.dataset.remark} </td>
 				</tr>
 				
 			</tbody>
@@ -104,4 +108,27 @@ closeOverlayBtn.addEventListener("click", function () {
 
 overlay.addEventListener("click", function () {
   sidebarClose();
-});
+});
+
+
+
+function timeSince(timestring) {
+  var timeStamp = new Date(timestring);
+  var now = new Date(),
+    secondsPast = (now.getTime() - timeStamp) / 1000;
+  if (secondsPast < 60) {
+    return parseInt(secondsPast) + ' seconds ago';
+  }
+  if (secondsPast < 3600) {
+    return parseInt(secondsPast / 60) + ' minutes ago';
+  }
+  if (secondsPast <= 86400) {
+    return parseInt(secondsPast / 3600) + ' hours ago';
+  }
+  if (secondsPast > 86400) {
+    day = timeStamp.getDate();
+    month = timeStamp.toDateString().match(/ [a-zA-Z]*/)[0].replace(" ", "");
+    year = timeStamp.getFullYear() == now.getFullYear() ? "" : " " + timeStamp.getFullYear();
+    return day + " " + month + year;
+  }
+}

assets/js/script.js

@@ -42,6 +42,8 @@ getText("https://docs.google.com/spreadsheets/d/e/2PACX-1vSscQfV-TdME-3KWkPSr_o3
       tr.dataset.image = `/assets/img/ninja-default.png`;
       tr.dataset.activity = ninja.Activity;
       tr.dataset.score = ninja.Score;
+      tr.dataset.Timestamp = ninja.Timestamp;
+      
       
       tr.dataset.remark = ninja.Remark;
       // count+=1;

index.html

@@ -155,7 +155,7 @@
         </table>
       </div>
       <div class="list__footer">
-        <h5>Code Ninjas Langley</h5>
+        <h5><a href="https://codeninjaslangley.co.uk" class="a-no-link" target="_blank">Code Ninjas Langley</a></h5>
       </div>
     </div>
   </div>