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

Made boardgame cards overflow with scrollbar to show more than 6 games (e.g. shelf of shame)

Browse source
This commit is contained in:
Yarne Coppens 2024-08-16 10:14:39 +02:00
parent c4c803cfad
commit 0fa86b0755
4 changed files with 43 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
static/css/main.css
View file

@ -2,6 +2,13 @@ body{
padding-top: 100px;
}
@media screen and (max-width: 576px) {
body {
padding-top: 230px;
}
}
.boardgame_statistic_card_image{
width: 100%;
height: 100px;
@ -12,4 +19,8 @@ body{
width: 100%;
height: 400px;
object-fit: cover;
}
.card-body{
max-height: 550px;
}

9
static/javascript/owned.js
View file

@ -5,6 +5,7 @@ document.getElementById('owned_nav').classList.add('active')
async function loadOwnedGames() {
var boardgame_datatable = new DataTable('.boardgame_table', {
"pageLength":50,
ajax: {
url: api_url + '/owned?filter_expansions_out=true',
dataSrc: ''
@ -45,7 +46,13 @@ async function loadOwnedGames() {
}
],
columnDefs: [
{ targets: 'no-sort', orderable: false }
{
targets: 'no-sort', orderable: false
},
{
targets: '_all',
orderSequence: [ 'asc', 'desc' ]
}
],
order: [[1, 'asc']]
});

32
static/javascript/statistics.js
View file

@ -98,12 +98,13 @@ async function create_bar_chart(url, card_to_fill){
});
const card_footer = document.createElement('div')
card_footer.classList.add('card-footer')
card_footer.classList.add('card-header')
card_footer.classList.add('text-muted')
card_footer.innerHTML = statistic_data.name
card_to_fill.appendChild(chart_canvas_container)
card_to_fill.appendChild(card_footer)
card_to_fill.appendChild(chart_canvas_container)
}
@ -117,6 +118,8 @@ async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribu
row.classList.add('row')
row.classList.add('row-cols-1')
row.classList.add('row-cols-md-3')
row.classList.add('g-4')
for (let boardgame_index in boardgames){
let current_boardgame = boardgames[boardgame_index]
@ -140,8 +143,9 @@ async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribu
const boardgame_card_body = document.createElement('div')
boardgame_card_body.classList.add('card-body')
const boardgame_title = document.createElement('h5')
const boardgame_title = document.createElement('h6')
boardgame_title.innerHTML = current_boardgame.name
boardgame_title.classList.add('card-title')
@ -169,10 +173,21 @@ async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribu
statistic_data = await makeRequest(url)
const card_header = document.createElement('div')
card_header.classList.add('card-header')
const card_footer_text = document.createElement('div')
card_footer_text.classList.add('text-muted')
card_footer_text.innerHTML = statistic_data.name
card_header.appendChild(card_footer_text)
card_to_fill.appendChild(card_header)
const boardgame_image_container = document.createElement('div')
boardgame_image_container.classList.add('card-body')
boardgame_image_container.classList.add('chart_visual')
boardgame_image_container.classList.add('container-fluid')
boardgame_image_container.classList.add('overflow-auto')
const boardgames_to_grid = statistic_data.result
@ -195,15 +210,10 @@ async function create_multiple_boardgame_chart(url, card_to_fill, footer_attribu
card_to_fill.appendChild(boardgame_image_container)
const card_footer = document.createElement('div')
card_footer.classList.add('card-footer')
const card_footer_text = document.createElement('small')
card_footer_text.classList.add('text-muted')
card_footer_text.innerHTML = statistic_data.name
card_footer.appendChild(card_footer_text)
}
card_to_fill.appendChild(card_footer)
async function create_basic_statistic_chard(url, card_to_fill){
}
@ -243,7 +253,7 @@ async function loadStatistics(){
const shelf_of_shame_card_col = create_statistic_card_col()
const shelf_of_shame_card= shelf_of_shame_card_col.firstChild
statistic_row.appendChild(shelf_of_shame_card_col)
const shelf_of_shame_url = api_url + '/statistics/shelf_of_shame?top_amount=6'
const shelf_of_shame_url = api_url + '/statistics/shelf_of_shame'
create_multiple_boardgame_chart(shelf_of_shame_url, shelf_of_shame_card)
}

5
templates/statistics.jinja
View file

@ -7,11 +7,12 @@
<div id="statistic_row" class="row row-cols-1 row-cols-md-2 g-4 ">
<div class="col">
<div class="card h-100">
<div id="overtimechartname" class="card-header text-muted">
</div>
<div class="card-img-top card-body">
<canvas class="chart_visual" id="gamesovertimechart"></canvas>
</div>
<div id="overtimechartname" class="card-footer text-muted">
</div>
</div>
</div>
</div>