From 541d77836f0cf7bf7fd8344b496d6ff49802a5ab Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Wed, 8 Sep 2021 20:18:33 +0100
Subject: [PATCH] updated layout of account page pb tables

---
 src/js/account/pb-tables.js | 194 +++++++++++++++++++++---------------
 src/sass/style.scss         |  13 +++
 static/index.html           |  42 ++++++--
 3 files changed, 157 insertions(+), 92 deletions(-)

diff --git a/src/js/account/pb-tables.js b/src/js/account/pb-tables.js
index c6972593d..8474cdee3 100644
--- a/src/js/account/pb-tables.js
+++ b/src/js/account/pb-tables.js
@@ -71,80 +71,96 @@ export function update() {
     pbData = pb.time[15].sort((a, b) => b.wpm - a.wpm)[0];
     text += `<tr>
       <td>15</td>
-      <td>${pbData.wpm}</td>
-      <td>${pbData.raw === undefined ? "-" : pbData.raw}</td>
-      <td>${pbData.acc === undefined ? "-" : pbData.acc + "%"}</td>
-      <td>
-      ${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
-      </td>
+      <td>${pbData.wpm}<br><span class="sub">${
+      pbData.acc === undefined ? "-" : pbData.acc + "%"
+    }</span></td>
+      <td>${pbData.raw}<br><span class="sub">${
+      pbData.consistency === undefined ? "-" : pbData.consistency + "%"
+    }</span></td>
+      <td>${moment(pbData.timestamp).format(
+        "DD MMM YYYY"
+      )}<br><div class='sub'>${moment(pbData.timestamp).format(
+      "HH:mm"
+    )}</div></td>
     </tr>`;
   } catch (e) {
     text += `<tr>
       <td>15</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
     </tr>`;
   }
   try {
     pbData = pb.time[30].sort((a, b) => b.wpm - a.wpm)[0];
     text += `<tr>
-      <td>30</td>
-      <td>${pbData.wpm}</td>
-      <td>${pbData.raw === undefined ? "-" : pbData.raw}</td>
-      <td>${pbData.acc === undefined ? "-" : pbData.acc + "%"}</td>
-      <td>
-      ${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
-      </td>
+    <td>30</td>
+      <td>${pbData.wpm}<br><span class="sub">${
+      pbData.acc === undefined ? "-" : pbData.acc + "%"
+    }</span></td>
+      <td>${pbData.raw}<br><span class="sub">${
+      pbData.consistency === undefined ? "-" : pbData.consistency + "%"
+    }</span></td>
+      <td>${moment(pbData.timestamp).format(
+        "DD MMM YYYY"
+      )}<br><div class='sub'>${moment(pbData.timestamp).format(
+      "HH:mm"
+    )}</div></td>
     </tr>`;
   } catch (e) {
     text += `<tr>
       <td>30</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
     </tr>`;
   }
   try {
     pbData = pb.time[60].sort((a, b) => b.wpm - a.wpm)[0];
     text += `<tr>
       <td>60</td>
-      <td>${pbData.wpm}</td>
-      <td>${pbData.raw === undefined ? "-" : pbData.raw}</td>
-      <td>${pbData.acc === undefined ? "-" : pbData.acc + "%"}</td>
-      <td>
-      ${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
-      </td>
+      <td>${pbData.wpm}<br><span class="sub">${
+      pbData.acc === undefined ? "-" : pbData.acc + "%"
+    }</span></td>
+      <td>${pbData.raw}<br><span class="sub">${
+      pbData.consistency === undefined ? "-" : pbData.consistency + "%"
+    }</span></td>
+      <td>${moment(pbData.timestamp).format(
+        "DD MMM YYYY"
+      )}<br><div class='sub'>${moment(pbData.timestamp).format(
+      "HH:mm"
+    )}</div></td>
     </tr>`;
   } catch (e) {
     text += `<tr>
       <td>60</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
     </tr>`;
   }
   try {
     pbData = pb.time[120].sort((a, b) => b.wpm - a.wpm)[0];
     text += `<tr>
       <td>120</td>
-      <td>${pbData.wpm}</td>
-      <td>${pbData.raw === undefined ? "-" : pbData.raw}</td>
-      <td>${pbData.acc === undefined ? "-" : pbData.acc + "%"}</td>
-      <td>
-      ${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
-      </td>
+      <td>${pbData.wpm}<br><span class="sub">${
+      pbData.acc === undefined ? "-" : pbData.acc + "%"
+    }</span></td>
+      <td>${pbData.raw}<br><span class="sub">${
+      pbData.consistency === undefined ? "-" : pbData.consistency + "%"
+    }</span></td>
+      <td>${moment(pbData.timestamp).format(
+        "DD MMM YYYY"
+      )}<br><div class='sub'>${moment(pbData.timestamp).format(
+      "HH:mm"
+    )}</div></td>
     </tr>`;
   } catch (e) {
     text += `<tr>
       <td>120</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
     </tr>`;
   }
   $(".pageAccount .timePbTable tbody").html(text);
@@ -154,80 +170,96 @@ export function update() {
     pbData = pb.words[10].sort((a, b) => b.wpm - a.wpm)[0];
     text += `<tr>
       <td>10</td>
-      <td>${pbData.wpm}</td>
-      <td>${pbData.raw === undefined ? "-" : pbData.raw}</td>
-      <td>${pbData.acc === undefined ? "-" : pbData.acc + "%"}</td>
-      <td>
-      ${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
-      </td>
+      <td>${pbData.wpm}<br><span class="sub">${
+      pbData.acc === undefined ? "-" : pbData.acc + "%"
+    }</span></td>
+      <td>${pbData.raw}<br><span class="sub">${
+      pbData.consistency === undefined ? "-" : pbData.consistency + "%"
+    }</span></td>
+      <td>${moment(pbData.timestamp).format(
+        "DD MMM YYYY"
+      )}<br><div class='sub'>${moment(pbData.timestamp).format(
+      "HH:mm"
+    )}</div></td>
     </tr>`;
   } catch (e) {
     text += `<tr>
       <td>10</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
     </tr>`;
   }
   try {
     pbData = pb.words[25].sort((a, b) => b.wpm - a.wpm)[0];
     text += `<tr>
       <td>25</td>
-      <td>${pbData.wpm}</td>
-      <td>${pbData.raw === undefined ? "-" : pbData.raw}</td>
-      <td>${pbData.acc === undefined ? "-" : pbData.acc + "%"}</td>
-      <td>
-      ${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
-      </td>
+      <td>${pbData.wpm}<br><span class="sub">${
+      pbData.acc === undefined ? "-" : pbData.acc + "%"
+    }</span></td>
+      <td>${pbData.raw}<br><span class="sub">${
+      pbData.consistency === undefined ? "-" : pbData.consistency + "%"
+    }</span></td>
+      <td>${moment(pbData.timestamp).format(
+        "DD MMM YYYY"
+      )}<br><div class='sub'>${moment(pbData.timestamp).format(
+      "HH:mm"
+    )}</div></td>
     </tr>`;
   } catch (e) {
     text += `<tr>
       <td>25</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
     </tr>`;
   }
   try {
     pbData = pb.words[50].sort((a, b) => b.wpm - a.wpm)[0];
     text += `<tr>
       <td>50</td>
-      <td>${pbData.wpm}</td>
-      <td>${pbData.raw === undefined ? "-" : pbData.raw}</td>
-      <td>${pbData.acc === undefined ? "-" : pbData.acc + "%"}</td>
-      <td>
-      ${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
-      </td>
+      <td>${pbData.wpm}<br><span class="sub">${
+      pbData.acc === undefined ? "-" : pbData.acc + "%"
+    }</span></td>
+      <td>${pbData.raw}<br><span class="sub">${
+      pbData.consistency === undefined ? "-" : pbData.consistency + "%"
+    }</span></td>
+      <td>${moment(pbData.timestamp).format(
+        "DD MMM YYYY"
+      )}<br><div class='sub'>${moment(pbData.timestamp).format(
+      "HH:mm"
+    )}</div></td>
     </tr>`;
   } catch (e) {
     text += `<tr>
       <td>50</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
     </tr>`;
   }
   try {
     pbData = pb.words[100].sort((a, b) => b.wpm - a.wpm)[0];
     text += `<tr>
       <td>100</td>
-      <td>${pbData.wpm}</td>
-      <td>${pbData.raw === undefined ? "-" : pbData.raw}</td>
-      <td>${pbData.acc === undefined ? "-" : pbData.acc + "%"}</td>
-      <td>
-      ${pbData.consistency === undefined ? "-" : pbData.consistency + "%"}
-      </td>
+      <td>${pbData.wpm}<br><span class="sub">${
+      pbData.acc === undefined ? "-" : pbData.acc + "%"
+    }</span></td>
+      <td>${pbData.raw}<br><span class="sub">${
+      pbData.consistency === undefined ? "-" : pbData.consistency + "%"
+    }</span></td>
+      <td>${moment(pbData.timestamp).format(
+        "DD MMM YYYY"
+      )}<br><div class='sub'>${moment(pbData.timestamp).format(
+      "HH:mm"
+    )}</div></td>
     </tr>`;
   } catch (e) {
     text += `<tr>
       <td>100</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
-      <td>-</td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
+      <td>-<br><span class="sub">-</span></td>
     </tr>`;
   }
   $(".pageAccount .wordsPbTable tbody").html(text);
diff --git a/src/sass/style.scss b/src/sass/style.scss
index 2d52dfaa3..cfdcfc804 100644
--- a/src/sass/style.scss
+++ b/src/sass/style.scss
@@ -3490,6 +3490,19 @@ key {
     gap: 2rem;
   }
 
+  .timePbTable,
+  .wordsPbTable {
+    .sub {
+      opacity: 0.5;
+    }
+    td {
+      text-align: right;
+    }
+    tbody td:nth-child(1) {
+      font-size: 1.5rem;
+    }
+  }
+
   .topFilters .buttons {
     display: flex;
     justify-content: space-evenly;
diff --git a/static/index.html b/static/index.html
index 4d118c0ff..4305c4d93 100644
--- a/static/index.html
+++ b/static/index.html
@@ -3752,16 +3752,29 @@
               <div class="group createdDate">Account created on -</div>
               <div class="group">
                 <div class="title">personal bests</div>
-                <div style="display: grid; grid-auto-flow: column; gap: 1rem">
+                <div
+                  style="
+                    display: grid;
+                    grid-template-columns: 1fr 1fr;
+                    gap: 2rem;
+                  "
+                >
                   <div class="titleAndTable timePbTable">
                     <table width="100%">
                       <thead>
                         <tr>
-                          <td>time</td>
-                          <td>wpm</td>
-                          <td>raw</td>
-                          <td>accuracy</td>
-                          <td>consistency</td>
+                          <td width="1%">time</td>
+                          <td width="33%">
+                            wpm
+                            <br />
+                            <span class="sub">accuracy</span>
+                          </td>
+                          <td width="33%">
+                            raw
+                            <br />
+                            <span class="sub">consistency</span>
+                          </td>
+                          <td width="33%">date</td>
                         </tr>
                       </thead>
                       <tbody>
@@ -3796,11 +3809,18 @@
                     <table width="100%">
                       <thead>
                         <tr>
-                          <td>words</td>
-                          <td>wpm</td>
-                          <td>raw</td>
-                          <td>accuracy</td>
-                          <td>consistency</td>
+                          <td width="1%">words</td>
+                          <td width="33%">
+                            wpm
+                            <br />
+                            <span class="sub">accuracy</span>
+                          </td>
+                          <td width="33%">
+                            raw
+                            <br />
+                            <span class="sub">consistency</span>
+                          </td>
+                          <td width="33%">date</td>
                         </tr>
                       </thead>
                       <tbody>