From 0fa86b0755bba8b0cc49f40fc00bfc2c07b7b9d9 Mon Sep 17 00:00:00 2001
From: Yarne Coppens <git.w8x3v@simplelogin.com>
Date: Fri, 16 Aug 2024 10:14:39 +0200
Subject: [PATCH] Made boardgame cards overflow with scrollbar to show more
 than 6 games (e.g. shelf of shame)

---
 static/css/main.css             | 11 +++++++++++
 static/javascript/owned.js      |  9 ++++++++-
 static/javascript/statistics.js | 32 +++++++++++++++++++++-----------
 templates/statistics.jinja      |  5 +++--
 4 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index eeda2df..100cc63 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -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;
 }
\ No newline at end of file
diff --git a/static/javascript/owned.js b/static/javascript/owned.js
index cf37112..6db9b71 100644
--- a/static/javascript/owned.js
+++ b/static/javascript/owned.js
@@ -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']]
     });
diff --git a/static/javascript/statistics.js b/static/javascript/statistics.js
index f9fa3d7..188ab76 100644
--- a/static/javascript/statistics.js
+++ b/static/javascript/statistics.js
@@ -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)
 
 }
\ No newline at end of file
diff --git a/templates/statistics.jinja b/templates/statistics.jinja
index f8a3845..ba4a0ff 100644
--- a/templates/statistics.jinja
+++ b/templates/statistics.jinja
@@ -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>