From b31b19ea0581c581c84b80c54953f99e85c4d5e9 Mon Sep 17 00:00:00 2001
From: Eli <elijahsteres@gmail.com>
Date: Mon, 4 Jan 2021 23:39:24 -0500
Subject: [PATCH] make grid columns dynamically adjust to screen size

---
 static/css/games_page.css |  6 +++---
 static/js/grid_loader.js  | 11 +++++------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/static/css/games_page.css b/static/css/games_page.css
index 213fde7..cfd1d8a 100644
--- a/static/css/games_page.css
+++ b/static/css/games_page.css
@@ -1,6 +1,6 @@
 .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;
@@ -8,7 +8,7 @@
 }
 
 .emptyslot, .game {
-    min-height: 298px;
+    min-height: 18.75rem;
 }
 
 #filters {
@@ -77,4 +77,4 @@
         border: none;
         min-height: 0px;
     }
-}
\ No newline at end of file
+}
diff --git a/static/js/grid_loader.js b/static/js/grid_loader.js
index abaca9a..1dd9acd 100644
--- a/static/js/grid_loader.js
+++ b/static/js/grid_loader.js
@@ -31,6 +31,8 @@ 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'))
@@ -58,7 +60,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 ++) {
+                    for (var i = 0; i < gridwidth; i ++) {
                         insertEmpty(grid);
                     }
                 }
@@ -71,11 +73,8 @@ 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++) {
+    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]);
         }
     }