update css and html

tournaments/static/tournaments/css/style.css

@@ -536,6 +536,13 @@ svg {
     width: 100px;
 }
 
+.table-row-1-colum {
+    display: grid;
+    grid-template-columns: 1px auto;
+    /* Vertically center the content within each column */
+    padding: 5px 0px;
+}
+
 .table-row-2-colums {
     display: grid;
     grid-template-columns: 2fr 60px;
@@ -626,6 +633,29 @@ screen and (min-width: 80em) {
     text-align: left;
 }
 
+.table-cell-responsive-large {
+    flex-grow: 1;
+    display: none;
+}
+
+.table-cell-responsive-short {
+    flex-grow: 1;
+    display: block;
+}
+
+@media print,
+screen and (min-width: 80em) {
+    .table-row-4-colums-tournament {
+        grid-template-columns: auto 1fr auto auto;
+    }
+    .table-cell-responsive-large {
+        display: block;
+    }
+    .table-cell-responsive-short {
+        display: none;
+    }
+}
+
 .wrap {
     display: flex;
     flex-direction: column;

tournaments/templates/tournaments/club_row.html

@@ -1,6 +1,6 @@
 {% load static %}
 
-    <div class="table-row-4-colums bottom-border">
+    <div class="table-row-1-colum bottom-border">
 
         <div class="table-cell table-cell-large semibold">
             <a href="{% url 'index' %}?club={{ club.id }}">{{ club.name }}</a>

tournaments/templates/tournaments/tournament_row.html

@@ -4,7 +4,7 @@
                     <div class="large">{{ tournament.level }}</div>
                     <div class="small">{{ tournament.category }}</div>
                 </div>
-                <div class="table-cell table-cell-large horizontal-padding semibold">
+                <div class="table-cell-responsive-large table-cell-large horizontal-padding semibold">
                     <div><span>{{ tournament.event.club.name }}</span></div>
                     {% if tournament.name_and_event %}
                     <div>
@@ -12,9 +12,24 @@
                     </div>
                     {% endif %}
                 </div>
+                <div class="table-cell-responsive-short table-cell-large horizontal-padding semibold">
+                    <div><span>{{ tournament.event.club.acronym }}</span></div>
+                    {% if tournament.event.name %}
+                    <div><span>{{ tournament.event.name }}</span></div>
+                    {% endif %}
+                    {% if tournament.name %}
+                    <div><span>{{ tournament.name }}</span></div>
+                    {% endif %}
+                </div>
+
                 {% if tournament.team_count_display %}
-                <div class="table-cell center horizontal-padding">{{ tournament.team_count_display }}</div>
+                <div class="table-cell-responsive-large center horizontal-padding">{{ tournament.team_count_display }}</div>
                 {% endif %}
-                <div class="table-cell"><div class="mybox">{{ tournament.formatted_start_date }}</div></div>
+                <div class="table-cell">
+                    <div class="mybox center">{{ tournament.formatted_start_date }}</div>
+                    {% if tournament.team_count_display %}
+                    <div class="table-cell-responsive-short small center">{{ tournament.team_count_display }}</div>
+                    {% endif %}
+                </div>
             </div>
         </a>