From b31b19ea0581c581c84b80c54953f99e85c4d5e9 Mon Sep 17 00:00:00 2001 From: Eli Date: Mon, 4 Jan 2021 23:39:24 -0500 Subject: [PATCH 1/2] 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]); } } From 4a8285ca9f54429fc70e19c7c995893094a1e92d Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Tue, 5 Jan 2021 00:26:33 -0500 Subject: [PATCH 2/2] fixes and tweaks --- static/css/game.css | 4 +++- static/css/game_page.css | 8 +++----- static/css/games_page.css | 3 +-- static/js/grid_loader.js | 37 ++++++++++++++++++++++++------------- 4 files changed, 31 insertions(+), 21 deletions(-) diff --git a/static/css/game.css b/static/css/game.css index 2b0aa55..c60f230 100644 --- a/static/css/game.css +++ b/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 { diff --git a/static/css/game_page.css b/static/css/game_page.css index e707284..69f0cc7 100644 --- a/static/css/game_page.css +++ b/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%; } \ No newline at end of file diff --git a/static/css/games_page.css b/static/css/games_page.css index cfd1d8a..a864937 100644 --- a/static/css/games_page.css +++ b/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 { diff --git a/static/js/grid_loader.js b/static/js/grid_loader.js index 1dd9acd..f203bd7 100644 --- a/static/js/grid_loader.js +++ b/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"); } -} \ No newline at end of file +} + +window.addEventListener('resize', function(e) { + fillgrid(grid) +}) \ No newline at end of file