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

fixes and tweaks

Browse Source
This commit is contained in:
Elijah Steres 2021-01-05 00:26:33 -05:00
parent b31b19ea05
commit 4a8285ca9f
4 changed files with 31 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
static/css/game.css
View File

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

8
static/css/game_page.css
View File

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

3
static/css/games_page.css
View File

@ -2,13 +2,12 @@
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(32rem, 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;
justify-items: center;
grid-auto-flow: row; grid-auto-flow: row;
} }
.emptyslot, .game { .emptyslot, .game {
min-height: 18.75rem; min-height: 18.75rem;
justify-self: center;
} }
#filters { #filters {

35
static/js/grid_loader.js
View File

@ -31,8 +31,6 @@ 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'))
@ -60,9 +58,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 < gridwidth; i ++) { insertEmpty(grid);
insertEmpty(grid);
}
} }
if (grid.children[slotnum].className == "emptyslot") { if (grid.children[slotnum].className == "emptyslot") {
insertGame(slotnum, game); insertGame(slotnum, game);
@ -70,14 +66,9 @@ const updateGames = (json, filter) => {
}; };
}; };
} }
};
//remove last rows if not needed fillgrid(grid)
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 insertEmpty = (grid) => { const insertEmpty = (grid) => {
@ -108,6 +99,22 @@ const clearBox = (box) => {
box.innerHTML = ""; 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) => { const updateLeagues = (games) => {
//get all leagues //get all leagues
var leagues = [] var leagues = []
@ -165,3 +172,7 @@ window.onpopstate = function(e) {
updateGames(lastupdate, "All"); updateGames(lastupdate, "All");
} }
} }
window.addEventListener('resize', function(e) {
fillgrid(grid)
})