From 3cd40ee19275ca77ae780fab1d94c65b6c3d804c Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy.danello@animath.fr>
Date: Sat, 25 Mar 2023 06:55:52 +0100
Subject: [PATCH] Add margins

Signed-off-by: Emmy D'Anello <emmy.danello@animath.fr>
---
 draw/static/draw.js                         | 26 ++++++++++-----------
 draw/templates/draw/tournament_content.html | 22 ++++++++---------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/draw/static/draw.js b/draw/static/draw.js
index 98c6808..95286c5 100644
--- a/draw/static/draw.js
+++ b/draw/static/draw.js
@@ -144,10 +144,10 @@ document.addEventListener('DOMContentLoaded', () => {
             let poolListId = `recap-${tournament.id}-round-${round}-pool-list`
             let poolList = document.getElementById(poolListId)
             if (poolList === null) {
-                let li = document.createElement('li')
-                li.id = `recap-${tournament.id}-round-${round}`
-                li.classList.add('list-group-item')
-                li.setAttribute('data-tournament', tournament.id)
+                let div = document.createElement('div')
+                div.id = `recap-${tournament.id}-round-${round}`
+                div.classList.add('col-md-6', 'px-3', 'py-3')
+                div.setAttribute('data-tournament', tournament.id)
 
                 let title = document.createElement('strong')
                 title.textContent = 'Tour ' + round
@@ -156,8 +156,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 poolList.id = poolListId
                 poolList.classList.add('list-group', 'list-group-flush')
 
-                li.append(title, poolList)
-                roundList.append(li)
+                div.append(title, poolList)
+                roundList.append(div)
             }
 
             let c = 1
@@ -168,7 +168,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (teamList === null) {
                     let li = document.createElement('li')
                     li.id = `recap-${tournament.id}-round-${round}-pool-${poule.letter}`
-                    li.classList.add('list-group-item')
+                    li.classList.add('list-group-item', 'px-3', 'py-3')
                     li.setAttribute('data-tournament', tournament.id)
 
                     let title = document.createElement('strong')
@@ -250,7 +250,7 @@ document.addEventListener('DOMContentLoaded', () => {
                     if (pouleTable === null) {
                         // Create table
                         let card = document.createElement('div')
-                        card.classList.add('card')
+                        card.classList.add('card', 'my-3')
                         tablesRoundDiv.append(card)
 
                         let cardHeader = document.createElement('div')
@@ -395,16 +395,16 @@ document.addEventListener('DOMContentLoaded', () => {
         }
 
         function updateActiveRecap(round, pool, team) {
-            document.querySelectorAll(`li.list-group-item-primary[data-tournament="${tournament.id}"]`)
-                .forEach(elem => elem.classList.remove('list-group-item-primary'))
+            document.querySelectorAll(`div.text-bg-secondary[data-tournament="${tournament.id}"]`)
+                .forEach(elem => elem.classList.remove('text-bg-secondary'))
             document.querySelectorAll(`li.list-group-item-success[data-tournament="${tournament.id}"]`)
                 .forEach(elem => elem.classList.remove('list-group-item-success'))
             document.querySelectorAll(`li.list-group-item-info[data-tournament="${tournament.id}"]`)
                 .forEach(elem => elem.classList.remove('list-group-item-info'))
 
-            let roundLi = document.getElementById(`recap-${tournament.id}-round-${round}`)
-            if (roundLi !== null)
-                roundLi.classList.add('list-group-item-primary')
+            let roundDiv = document.getElementById(`recap-${tournament.id}-round-${round}`)
+            if (roundDiv !== null)
+                roundDiv.classList.add('text-bg-secondary')
 
             let poolLi = document.getElementById(`recap-${tournament.id}-round-${round}-pool-${pool}`)
             if (poolLi !== null)
diff --git a/draw/templates/draw/tournament_content.html b/draw/templates/draw/tournament_content.html
index e2f03b8..fff5cc0 100644
--- a/draw/templates/draw/tournament_content.html
+++ b/draw/templates/draw/tournament_content.html
@@ -23,7 +23,7 @@
 
 <div id="draw-content-{{ tournament.id }}" class="{% if not tournament.draw %}d-none{% endif %}">
     <div class="container">
-        <div class="card col-md-12">
+        <div class="card col-md-12 my-3">
             <div class="card-header">
                 <h2>{% trans "Last dices" %}</h2>
             </div>
@@ -44,7 +44,7 @@
             </div>
         </div>
         <div class="row">
-            <div class="col-md-3">
+            <div class="col-md-5 my-3">
                 <div class="card">
                     <div class="card-header">
                         Recap
@@ -55,17 +55,17 @@
                         {% endif %}
                     </div>
                     <div class="card-body">
-                        <ul id="recap-{{ tournament.id }}-round-list" class="list-group list-group-flush">
+                        <div id="recap-{{ tournament.id }}-round-list" class="row">
                             {% for round in tournament.draw.round_set.all %}
-                                <li id="recap-{{ tournament.id }}-round-{{ round.number }}"
-                                    class="list-group-item {% if tournament.draw.current_round == round %} list-group-item-primary{% endif %}"
-                                    data-tournament="{{ tournament.id }}">
+                                <div id="recap-{{ tournament.id }}-round-{{ round.number }}"
+                                     class="col-md-6 px-3 py-3 {% if tournament.draw.current_round == round %} text-bg-secondary{% endif %}"
+                                     data-tournament="{{ tournament.id }}">
                                     <strong>{{ round }}</strong>
                                     <ul id="recap-{{ tournament.id }}-round-{{ round.number }}-pool-list"
                                         class="list-group list-group-flush">
                                         {% for pool in round.pool_set.all %}
                                             <li id="recap-{{ tournament.id }}-round-{{ round.number }}-pool-{{ pool.get_letter_display }}"
-                                                class="list-group-item {% if tournament.draw.current_round.current_pool == pool %} list-group-item-success{% endif %}"
+                                                class="list-group-item px-3 py-3 {% if tournament.draw.current_round.current_pool == pool %} list-group-item-success{% endif %}"
                                                 data-tournament="{{ tournament.id }}">
                                                 <strong>{% trans "pool"|capfirst %} {{ pool }}</strong>
                                                 <ul id="recap-{{ tournament.id }}-round-{{ round.number }}-pool-{{ pool.get_letter_display }}-team-list"
@@ -94,13 +94,13 @@
                                             </li>
                                         {% endfor %}
                                     </ul>
-                                </li>
+                                </div>
                             {% endfor %}
-                        </ul>
+                        </div>
                     </div>
                 </div>
             </div>
-            <div class="col-md-9">
+            <div class="col-md-7 my-3">
                 <div class="card">
                     <div class="card-body">
                         <div id="messages-{{ tournament.id }}" class="alert alert-info">
@@ -163,7 +163,7 @@
                     <div id="tables-{{ tournament.id }}-round-{{ round.number }}" class="card-body">
                         {% for pool in round.pool_set.all %}
                             {% if pool.teamdraw_set.count %}
-                                <div class="card">
+                                <div class="card my-3">
                                     <div class="card-header">
                                         <h3>
                                             {% trans "pool"|capfirst %} {{ pool }}