learning progress table formatting

Author: sharonchoong

css/foundation.css

@@ -29,4 +29,8 @@
 
 a > span.label {
   cursor: pointer;
+}
+
+.section {
+  margin-bottom: 50px;
 }

css/settings.css

@@ -13,10 +13,6 @@ html {
     overflow-y: auto;
 }
 
-.section {
-    margin-bottom: 50px;
-}
-
 .vocabHeader {
     position: sticky;
     top: -1px;

js/points.js

@@ -45,16 +45,16 @@ async function fillTables() {
 
   for (const indexRange in indexRanges) {
     $("#byIndexTable tbody").append(`<tr>
-        <td>${indexRange}</td>
-        <td>${Math.round(indexRanges[indexRange].nCorrect / indexRanges[indexRange].totalCorrectNeeded * 1000) / 10}%</td>
-        <td>${Math.round(indexRanges[indexRange].wordsDone / indexRanges[indexRange].totalWords * 1000) / 10}%</td></tr>`);
+        <td><span class="hide-for-large">Index range: </span>${indexRange}</td>
+        <td><span class="hide-for-large">Progress to goal: </span>${Math.round(indexRanges[indexRange].nCorrect / indexRanges[indexRange].totalCorrectNeeded * 1000) / 10}%</td>
+        <td><span class="hide-for-large">Words completed: </span>${Math.round(indexRanges[indexRange].wordsDone / indexRanges[indexRange].totalWords * 1000) / 10}%</td></tr>`);
   }
 
   for (const level in levels) {
     $("#byLevelTable tbody").append(`<tr>
-        <td>${level}</td>
-        <td>${Math.round(levels[level].nCorrect / levels[level].totalCorrectNeeded * 1000) / 10}%</td>
-        <td>${Math.round(levels[level].wordsDone / levels[level].totalWords * 1000) / 10}%</td></tr>`);
+        <td><span class="hide-for-large">Level </span>${level}</td>
+        <td><span class="hide-for-large">Progress to goal: </span>${Math.round(levels[level].nCorrect / levels[level].totalCorrectNeeded * 1000) / 10}%</td>
+        <td><span class="hide-for-large">Words completed: </span>${Math.round(levels[level].wordsDone / levels[level].totalWords * 1000) / 10}%</td></tr>`);
   }
 }
 

points.html

@@ -40,7 +40,7 @@ <h1>Learning progress</h1>
 
     <div class="grid-container section">
         <div>
-          <h5>By word index</h5>
+          <h4>By word index</h4>
           <div>
             <table id="byIndexTable" class="stack">
                 <thead>
@@ -54,9 +54,11 @@ <h5>By word index</h5>
               </table>
           </div>
         </div>
+    </div>
 
+    <div class="grid-container section">
         <div>
-            <h5>By level</h5>
+            <h4>By level</h4>
             <div>
               <table id="byLevelTable" class="stack">
                   <thead>