kass/matteo-the-prestige
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

make grid columns dynamically adjust to screen size

Browse Source
This commit is contained in:
Eli 2021-01-04 23:39:24 -05:00
parent ebaef8828c
commit b31b19ea05
2 changed files with 8 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/css/games_page.css
View File

@ -1,6 +1,6 @@
.container { .container {
display: grid; 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*/ grid-gap: 50px 30px; /*space between rows, then columns*/
align-items: center; align-items: center;
justify-items: center; justify-items: center;
@ -8,7 +8,7 @@
} }
.emptyslot, .game { .emptyslot, .game {
min-height: 298px; min-height: 18.75rem;
} }
#filters { #filters {

11
static/js/grid_loader.js
View File

@ -31,6 +31,8 @@ const updateGames = (json, filter) => {
$('#footer div').html(""); $('#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); 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')) { 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')) 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)) { 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 for (var slotnum = 0; true; slotnum++) { //this is really a while loop but shh don't tell anyone
if (slotnum >= grid.children.length) { if (slotnum >= grid.children.length) {
for (var i = 0; i < 3; i ++) { for (var i = 0; i < gridwidth; i ++) {
insertEmpty(grid); insertEmpty(grid);
} }
} }
@ -71,11 +73,8 @@ const updateGames = (json, filter) => {
}; };
//remove last rows if not needed //remove last rows if not needed
while (grid.children[grid.children.length-1].className == "emptyslot" && while (grid.children.length > gridwidth && Array.prototype.slice.call(grid.children).slice(grid.children.length - gridwidth).every( x => x.className == 'emptyslot')) {
grid.children[grid.children.length-2].className == "emptyslot" && for (var i = 0; i < gridwidth; i++) {
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]); grid.removeChild(grid.children[grid.children.length-1]);
} }
} }