fixes and tweaks

static/css/game.css

@@ -8,7 +8,6 @@
 
 .game {
     align-self: stretch;
-    justify-self: stretch;
     text-align: center;
     display: flex;
     flex-direction: column;
@@ -20,6 +19,9 @@
     border-right: none;
     border-bottom: none;
     height: min-content;
+    width: 100%;
+    min-width: 32rem;
+    max-width: 44rem;
 }
 
 .header {

static/css/game_page.css

@@ -1,9 +1,7 @@
 #game_container {
-	margin-top: 50px;
+	margin-top: 3rem;
+	margin-left: 1rem;
+	margin-right: 1rem;
 	display: flex;
 	justify-content: space-around;
-}
-
-.game {
-	width: 33%;
 }

static/css/games_page.css

@@ -2,13 +2,12 @@
     display: grid;
     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: 18.75rem;
+    justify-self: center;
 }
 
 #filters {

static/js/grid_loader.js

@@ -31,8 +31,6 @@ const updateGames = (json, filter) => {
         $('#footer div').html("");
     }
 
-    var gridwidth = window.getComputedStyle(grid).getPropertyValue('grid-template-columns').split(" ").length //hack to get number of grid columns
-
     var searchparams = new URLSearchParams(window.location.search);
     if (searchparams.has('game') && filterjson.some(x => x.timestamp == searchparams.get('game')) && grid.children[0].timestamp != searchparams.get('game')) {
         var game = filterjson.find(x => x.timestamp == searchparams.get('game'))
@@ -60,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 < gridwidth; i ++) {
-                        insertEmpty(grid);
-                    }
+                    insertEmpty(grid);
                 }
                 if (grid.children[slotnum].className == "emptyslot") {
                     insertGame(slotnum, game);
@@ -70,14 +66,9 @@ const updateGames = (json, filter) => {
                 };
             };
         }
-    };
 
-    //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]);
-        }
-    }
+        fillgrid(grid)
+    };
 }
 
 const insertEmpty = (grid) => {
@@ -108,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 = []
@@ -164,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)
+})