From dba062d2d1c5ab840e8751db97c35a8d6d24a037 Mon Sep 17 00:00:00 2001
From: Razmig Sarkissian <razmig@staxriver.com>
Date: Thu, 13 Mar 2025 19:21:36 +0100
Subject: [PATCH] wip

---
 tournaments/static/tournaments/css/style.css  | 72 ++++++++++++++++++-
 .../templates/tournaments/tournament_row.html | 16 ++---
 2 files changed, 79 insertions(+), 9 deletions(-)

diff --git a/tournaments/static/tournaments/css/style.css b/tournaments/static/tournaments/css/style.css
index 11f8dfd..2e4c86d 100644
--- a/tournaments/static/tournaments/css/style.css
+++ b/tournaments/static/tournaments/css/style.css
@@ -69,10 +69,10 @@ nav {
     /* Allow items to wrap onto multiple lines */
     justify-content: flex-start;
     /* Align items to the start */
+    gap: 8px; /* This adds spacing between items in all directions */
 }
 
 nav a {
-    margin-right: 6px;
     color: #707070;
     padding: 8px 12px;
     background-color: #fae7ce;
@@ -866,3 +866,73 @@ h-margin {
     transform: translate(-50%, -50%);
     white-space: nowrap;
 }
+
+@media (max-width: 768px) {
+    .table-row-6-colums-tournament {
+        grid-template-columns: 15% 15% 15% 1fr 30%;
+        grid-template-rows: auto auto auto auto auto auto;
+        row-gap: 6px;
+        align-items: center; /* Ensures vertical alignment */
+    }
+
+    /* Tournament level cell styling */
+    .tournament-level-cell {
+        display: contents; /* This removes the div as a container and places its children directly in the grid */
+    }
+
+    /* Make level display big and position it */
+    .level-display {
+        grid-column: 1;
+        grid-row: 1;
+        font-size: 1.4em !important; /* Increase font size for level */
+        font-weight: bold;
+    }
+
+    /* Place category and age in second column */
+    .category-display {
+        grid-column: 2;
+        grid-row: 1 / span 2;
+    }
+
+    .age-display {
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    /* Column 2 (club name) spans across remaining columns */
+    .table-row-6-colums-tournament > div:nth-child(2) {
+        grid-column: 1 / span 4;
+        grid-row: 3;
+    }
+
+    /* Column 3 (teams) */
+    .table-row-6-colums-tournament > div:nth-child(3) {
+        grid-column: 3;
+        grid-row: 1 / span 2;
+    }
+
+    /* Column 4 (duration) */
+    .table-row-6-colums-tournament > div:nth-child(4) {
+        grid-column: 4;
+        grid-row: 1 / span 2;
+    }
+
+    /* Column 5 (date) */
+    .table-row-6-colums-tournament > div:nth-child(5) {
+        grid-column: 5;
+        grid-row: 1 / span 2;
+    }
+
+    /* Column 6 (register) */
+    .table-row-6-colums-tournament > div:nth-child(6) {
+        grid-column: 5;
+        grid-row: 3;
+    }
+
+    .table-row-6-colums-tournament
+        > div:nth-child(6):not(:last-child)
+        ~ div:nth-child(2),
+    .table-row-6-colums-tournament > div:nth-child(2):nth-last-child(4) {
+        grid-column: 1 / span 5;
+    }
+}
diff --git a/tournaments/templates/tournaments/tournament_row.html b/tournaments/templates/tournaments/tournament_row.html
index 5277a84..c4f6a21 100644
--- a/tournaments/templates/tournaments/tournament_row.html
+++ b/tournaments/templates/tournaments/tournament_row.html
@@ -1,10 +1,10 @@
 <a href="{% url 'tournament' tournament.id %}">
     <div class="table-row-6-colums-tournament">
-        <div class="tight table-cell">
-            <div class="large">{{ tournament.level }}</div>
-            <div class="small">{{ tournament.category }}</div>
+        <div class="tight table-cell tournament-level-cell">
+            <div class="large level-display">{{ tournament.level }}</div>
+            <div class="small category-display">{{ tournament.category }}</div>
             {% if tournament.age %}
-            <div class="small">{{ tournament.age }}</div>
+            <div class="small age-display">{{ tournament.age }}</div>
             {% endif %}
         </div>
         <div class="table-cell">
@@ -24,11 +24,11 @@
         <div class="table-cell">
             <div class="mybox center">{{ tournament.formatted_start_date_short|linebreaksbr }}</div>
         </div>
-        <div class="table-cell">
-            {% if register_status %}
+        {% if register_status %}
+            <div class="table-cell">
                 <div class="mybox center" style="background-color:{{ register_status.1 }}; color:{{ register_status.2 }}">{{ register_status.0|linebreaksbr }}</div>
-            {% endif %}
-        </div>
+            </div>
+        {% endif %}
     </div>
 </a>
 {% if not forloop.last %}