Four grade 6 classes next year, so thanks to bootstrap's limit of 12

columns per row, must split classes display into two rows

2 files changed, 15 insertions, 8 deletions

diff --git a/index.html b/index.html
index ab9d899..3a48244 100644
--- a/index.html
+++ b/index.html
@@ -96,10 +96,8 @@
           <hr>
         </div>
       </div>
-      <div id="classes" class="row">
-
-
-      </div>
+      <div id="classes-1" class="row"></div>
+      <div id="classes-2" class="row"></div>
       <div class="row">
         <div class="col-md-2">
           <br>
diff --git a/js/main.js b/js/main.js
index f0fb3d8..dfef356 100644
--- a/js/main.js
+++ b/js/main.js
@@ -63,8 +63,10 @@ function updateClasses ()
     // first update the HTML displayed
 
     classes.sortClasses();
-    $classes = $('#classes');
-    $classes.html("");
+    $classes1 = $('#classes-1');
+    $classes1.html("");
+    $classes2 = $('#classes-2');
+    $classes2.html("");
 
     function appendClassHTML (clas, index, array)
     {
@@ -73,6 +75,9 @@ function updateClasses ()
         // background colour should be green for two classes with the highest points (and our array is sorted by points)
         var colour = index < 2 ? ' style="background-color: lightgreen;"' : '';
 
+        // column width
+        var width = index < 3 ? 4 : 3
+
         // time
         var minutes = '' + Math.floor(clas.time / 60);
         var seconds = '' + (clas.time - minutes * 60);
@@ -81,7 +86,8 @@ function updateClasses ()
 
         // build and append HTML
 
-        var html = '<div class="col-md-2"' + colour + '>'
+        // var html = '<div class="col-md-' + width + '"' + colour + '>'
+        var html = '<div class="col-md-' + width + '">'
             + '<h1>' + clas.id + '</h1>'
             + '<p class="text-center">'
             + '<a id="' + clas.id + 'points" class="btn btn-info btn-lg">' + clas.points + ' points</a>'
@@ -94,7 +100,10 @@ function updateClasses ()
             + '</p>'
             + '</div>';
 
-        $classes.append(html);
+        if (index < 3)
+            $classes1.append(html);
+        else
+            $classes2.append(html);
     }
     classes.forEach(appendClassHTML);