Yarninator/boardgame_site_v2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made play page prettier

Browse source
This commit is contained in:
Yarne Coppens 2024-08-14 16:26:02 +02:00
parent 597510da52
commit 92600f8649
3 changed files with 64 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
static/css/main.css
View file

@ -1,11 +1,11 @@
/* .statistic_image_grid_image{
max-width: 150px;
max-height: 100px;
object-fit: cover;
} */
.boardgame_statistic_card_image{
width: 100%;
height: 100px;
object-fit: cover;
}
.boardgame_play_card_image{
width: 100%;
height: 400px;
object-fit: cover;
}

74
static/javascript/plays.js
View file

@ -4,19 +4,30 @@ document.getElementById('plays_nav').classList.add('active')
async function loadPlays() {
function createPlayCard(play){
const card_div = document.createElement('div')
card_div.className = "card"
card_div.classList.add("card")
card_div.classList.add('h-100')
const boardgame_image_linked = document.createElement('a')
boardgame_image_linked.setAttribute('href', '/boardgame?id=' + play.boardgame.id)
const card_image = document.createElement('img')
card_image.src = play.boardgame.image_url
card_image.classList.add('card-img-top')
card_image.classList.add('boardgame_play_card_image')
boardgame_image_linked.appendChild(card_image)
const card_body = document.createElement('div')
card_body.className = 'card-body'
card_body.classList.add('card-body')
const card_title = document.createElement('h4')
card_title.innerHTML = play.boardgame.name
card_title.classList.add('card-title')
const player_names = document.createElement('div')
const player_names = document.createElement('p')
player_names.classList.add('card-text')
for (let player_index in play.players){
const player = play.players[player_index]
@ -33,7 +44,7 @@ async function loadPlays() {
card_body.appendChild(card_title)
card_body.appendChild(player_names)
card_div.appendChild(card_image)
card_div.appendChild(boardgame_image_linked)
card_div.appendChild(card_body)
return card_div
@ -42,29 +53,48 @@ async function loadPlays() {
const all_plays = await makeRequest(api_url + '/plays?filter_expansions_out=true')
const MAX_COLUMNS = 4
const column_width = 12 / MAX_COLUMNS
const rows_needed = Math.ceil(all_plays.length / MAX_COLUMNS)
const row = document.createElement('row')
row.classList.add('row')
row.classList.add('row-cols-1')
row.classList.add('row-cols-md-4')
for (let play_index in all_plays){
let current_play = all_plays[play_index]
const column = document.createElement('div')
column.classList.add('col')
let card = createPlayCard(current_play)
column.appendChild(card)
row.appendChild(column)
for (let row_number = 0; row_number < rows_needed; row_number++){
const row_div = document.createElement('div')
row_div.className = 'row'
for (let column_number = 0; column_number < MAX_COLUMNS; column_number++) {
if(((row_number * MAX_COLUMNS) + column_number) == all_plays.length){
break
}
const column_div = document.createElement('div')
column_div.className = "col-sm-" + column_width
const current_play = all_plays[(row_number * MAX_COLUMNS) + column_number]
const play_card = createPlayCard(current_play)
column_div.appendChild(play_card)
row_div.appendChild(column_div)
}
document.body.appendChild(row_div)
}
// for (let row_number = 0; row_number < rows_needed; row_number++){
// const row_div = document.createElement('div')
// row_div.className = 'row'
// for (let column_number = 0; column_number < MAX_COLUMNS; column_number++) {
// if(((row_number * MAX_COLUMNS) + column_number) == all_plays.length){
// break
// }
// const column_div = document.createElement('div')
// column_div.className = "col-sm-" + column_width
// const current_play = all_plays[(row_number * MAX_COLUMNS) + column_number]
// const play_card = createPlayCard(current_play)
// column_div.appendChild(play_card)
// row_div.appendChild(column_div)
// }
// document.body.appendChild(row_div)
// }
document.body.append(row)
document.getElementById('plays_loading_spinner').remove()

8
static/javascript/statistics.js
View file

@ -24,15 +24,15 @@ async function loadStatistics(){
boardgame_card.classList.add('card')
boardgame_card.classList.add('h-100')
const boardgame_link = document.createElement('a')
boardgame_link.setAttribute('href', '/boardgame?id=' + current_boardgame.id)
const boardgame_imaged_linked = document.createElement('a')
boardgame_imaged_linked.setAttribute('href', '/boardgame?id=' + current_boardgame.id)
const boardgame_image = document.createElement('img')
boardgame_image.src = current_boardgame.thumbnail_url
boardgame_image.classList.add('card-img-top')
boardgame_image.classList.add('boardgame_statistic_card_image')
boardgame_link.appendChild(boardgame_image)
boardgame_imaged_linked.appendChild(boardgame_image)
const boardgame_card_body = document.createElement('div')
boardgame_card_body.classList.add('card-body')
@ -48,7 +48,7 @@ async function loadStatistics(){
boardgame_card_body.appendChild(boardgame_title)
boardgame_card_body.appendChild(boardgame_price_holder)
boardgame_card.append(boardgame_link)
boardgame_card.append(boardgame_imaged_linked)
boardgame_card.append(boardgame_card_body)
column.appendChild(boardgame_card)