Fix summon display for small screens

tournaments/static/tournaments/css/style.css

@@ -152,6 +152,11 @@ tr {
     font-weight: 600;
 }
 
+@media (max-width: 80em) {
+    font-size: 0.8em;
+    padding: 0px;
+}
+
 .large_button {
     font-size: 16px;
     display: inline-block;
@@ -547,41 +552,63 @@ h-margin {
     padding: 5px 0px;
 }
 
-.table-row-3-colums-ranks {
+@media print, screen and (min-width: 80em) {
+    .table-row-4-colums {
         display: grid;
-    grid-template-columns: 80px 1fr auto;
+        grid-template-columns: 1px auto 50px 160px 180px;
         /* first column is a hack */
         align-items: center;
         /* Vertically center the content within each column */
         padding: 5px 0px;
+    }
 }
 
-.table-row-3-colums-teams {
+.table-row-3-colums-ranks {
     display: grid;
-    grid-template-columns: 1px auto auto 80px;
+    grid-template-columns: 80px 1fr auto;
     /* first column is a hack */
     align-items: center;
     /* Vertically center the content within each column */
     padding: 5px 0px;
 }
 
-.table-row-3-colums-summons {
+.table-row-3-colums-teams {
     display: grid;
-    grid-template-columns: 1px auto 180px 120px;
+    grid-template-columns: 1px auto auto 80px;
     /* first column is a hack */
     align-items: center;
     /* Vertically center the content within each column */
     padding: 5px 0px;
 }
 
-@media print, screen and (min-width: 80em) {
+/* Summons */
-    .table-row-4-colums {
+.table-row-3-colums-summons {
-        display: grid;
+    display: flex;
-        grid-template-columns: 1px auto 50px 160px 180px;
-        /* first column is a hack */
     align-items: center;
-        /* Vertically center the content within each column */
+}
+
+.summons-left,
+.summons-right {
+    flex: 1;
     padding: 5px 0px;
+}
+
+@media (min-width: 80em) {
+    .summons-right {
+        display: flex;
+        gap: 20px;
+    }
+
+    .summon-cell {
+        flex: 1;
+    }
+}
+
+@media (max-width: 80em) {
+    .summons-right {
+        text-align: center;
+        display: flex;
+        flex-direction: column;
     }
 }
 
@@ -629,23 +656,6 @@ h-margin {
     }
 }
 
-.wrap {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    height: 100vh;
-    /*the height will need to be customized*/
-    width: 50px;
-}
-
-#xrow {
-    background: #000;
-    color: #fff;
-    height: 50px;
-    width: 50px;
-    margin-left: 10px;
-}
-
 .flex {
     display: flex;
     align-items: center;

tournaments/templates/tournaments/summon_row.html

@@ -2,17 +2,23 @@
 
         <div class="table-row-3-colums-summons">
 
-            <div class="table-cell table-cell-large semibold">
+            <div class="summons-left">
+                <div class="semibold">
                     {% for name in summon.names %}
                     <div>{{ name }}</div>
                     {% endfor %}
                 </div>
-
-            <div class="table-cell left">
-                <div class="table-cell large">{{ summon.formatted_date }}</div>
-                <div class="table-cell">{{ summon.court }}</div>
             </div>
-            <div class="table-cell right"><div class="mybox center">{{ summon.stage }}</div></div>
+            <div class="summons-right">
+                <div class="summon-cell">
+                    <div class="large">{{ summon.formatted_date }}</div>
+                    <div class="">{{ summon.court }}</div>
+                </div>
+                <div class="summon-cell">
+                    <div class="mybox center">{{ summon.stage }}</div>
+                </div>
+            </div>
+
         </div>
 
         {% if not forloop.last %}

tournaments/templates/tournaments/summons.html

@@ -16,7 +16,7 @@
 
         <div class="grid-x padding-bottom">
 
-            <div class="cell medium-6 large-6 my-block">
+            <div class="cell large-6 my-block">
                 <div class="bubble">
                     {% if tournament.summon_count_display %}
                     <label class="title">{{ tournament.summon_count_display }}</label>