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 {
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 {

11
static/js/grid_loader.js
View File

@ -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]);
}
}