Merge pull request #125 from esSteres/dynamic-grid

Dynamic grid column count

static/css/game.css

@@ -8,7 +8,6 @@
 
 .game {
     align-self: stretch;
-    justify-self: stretch;
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -20,7 +19,13 @@
     border-right: none;
     border-bottom: none;
     height: min-content;
+<<<<<<< HEAD
+    width: 100%;
+    min-width: 32rem;
+    max-width: 44rem;
+=======
     min-width: 500px;
+>>>>>>> upstream/indev
 }
 
 .header {

static/css/game_page.css

@@ -1,11 +1,7 @@
 #game_container {
-	margin-top: 50px;
+	margin-top: 3rem;
+	margin-left: 1rem;
+	margin-right: 1rem;
 	display: flex;
 	justify-content: space-around;
-}
-
-.game {
-	width: 95%;
-	max-width: 700px;
-	min-width: 600px;
 }

static/css/games_page.css

@@ -1,14 +1,13 @@
 .container {
     display: grid;
-    grid-template-columns: repeat(3, minmax(500px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(32rem, 1fr));
     grid-gap: 50px 30px; /*space between rows, then columns*/
-    align-items: center;
-    justify-items: center;
     grid-auto-flow: row;
 }
 
 .emptyslot, .game {
-    min-height: 298px;
+    min-height: 18.75rem;
+    justify-self: center;
 }
 
 #filters {
@@ -77,4 +76,4 @@
         border: none;
         min-height: 0px;
     }
-}
+}

static/js/grid_loader.js

@@ -58,9 +58,7 @@ const updateGames = (json, filter) => {
         if (!Array.prototype.slice.call(grid.children).some(x => x.timestamp == game.timestamp)) {
             for (var slotnum = 0; true; slotnum++) { //this is really a while loop but shh don't tell anyone
                 if (slotnum >= grid.children.length) {
-                    for (var i = 0; i < 3; i ++) {
-                        insertEmpty(grid);
-                    }
+                    insertEmpty(grid);
                 }
                 if (grid.children[slotnum].className == "emptyslot") {
                     insertGame(slotnum, game);
@@ -68,17 +66,9 @@ const updateGames = (json, filter) => {
                 };
             };
         }
-    };
 
-    //remove last rows if not needed
-    while (grid.children[grid.children.length-1].className == "emptyslot" &&
-           grid.children[grid.children.length-2].className == "emptyslot" &&
-           grid.children[grid.children.length-3].className == "emptyslot" &&
-           grid.children.length > 3) {
-        for (var i = 0; i < 3; i++) {
-            grid.removeChild(grid.children[grid.children.length-1]);
-        }
-    }
+        fillgrid(grid)
+    };
 }
 
 const insertEmpty = (grid) => {
@@ -109,6 +99,22 @@ const clearBox = (box) => {
     box.innerHTML = "";
 }
 
+const fillgrid = (grid) => {
+    var gridwidth = window.getComputedStyle(grid).getPropertyValue('grid-template-columns').split(" ").length //hack to get number of grid columns
+
+    // add cells to fill last row
+    while (grid.children.length % gridwidth != 0) {
+        insertEmpty(grid)
+    }
+
+    //remove last rows if not needed
+    while (grid.children.length > gridwidth && Array.prototype.slice.call(grid.children).slice(grid.children.length - gridwidth).every( x => x.className == 'emptyslot')) {
+        for (var i = 0; i < gridwidth; i++) {
+            grid.removeChild(grid.children[grid.children.length-1]);
+        }
+    }
+}
+
 const updateLeagues = (games) => {
     //get all leagues
     var leagues = []
@@ -165,4 +171,8 @@ window.onpopstate = function(e) {
         $('#filters .filter').each(function(i) { if (this.textContent == 'All') { this.id = 'selected_filter' }})
         updateGames(lastupdate, "All");
     }
-}
+}
+
+window.addEventListener('resize', function(e) {
+    fillgrid(grid)
+})