Made play page prettier

static/css/main.css

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

static/javascript/plays.js

@@ -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"
 
+        const card_div = document.createElement('div')
+        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,30 +53,49 @@ 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 row_number = 0; row_number < rows_needed; row_number++){
+    for (let play_index in all_plays){
-        const row_div = document.createElement('div')
+        let current_play = all_plays[play_index]
-        row_div.className = 'row'
+
-        for (let column_number = 0; column_number < MAX_COLUMNS; column_number++) {
+        const column = document.createElement('div')
-            if(((row_number * MAX_COLUMNS) + column_number) == all_plays.length){
+        column.classList.add('col')
-                break
+
-              }
+        let card = createPlayCard(current_play)
-            const column_div = document.createElement('div')
+
-            column_div.className = "col-sm-" + column_width
+        column.appendChild(card)
-            
+
-            const current_play = all_plays[(row_number * MAX_COLUMNS) + column_number]
+        row.appendChild(column)
-            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()
 
 }

static/javascript/statistics.js

@@ -24,15 +24,15 @@ async function loadStatistics(){
         boardgame_card.classList.add('card')
         boardgame_card.classList.add('h-100')
 
-        const boardgame_link = document.createElement('a')
+        const boardgame_imaged_linked = document.createElement('a')
-        boardgame_link.setAttribute('href', '/boardgame?id=' + current_boardgame.id)
+        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)