Switch magic flexy rigboard layout to use *container* width queries r…

…ather than *screen* width queries This resolves the overflow seen in the profile detail view in the most overkill way possible. Nerf this!
nottinghamtec · Apr 6, 2024 · 953b691 · 953b691
1 parent 17fa447
commit 953b691
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 18 deletions.
diff --git a/RIGS/templates/event_archive.html b/RIGS/templates/event_archive.html
@@ -46,7 +46,7 @@
     </div>
 </div>
 <div class="row">
-    <div class="col-sm-12">
+    <div class="col-sm-12" style="container-type: inline-size;">
         {% with object_list as events %}
             {% include 'partials/event_table.html' %}
         {% endwith %}

diff --git a/RIGS/templates/partials/event_table.html b/RIGS/templates/partials/event_table.html
@@ -11,6 +11,14 @@
     grid-column: 1/5;
     grid-template-columns: subgrid;
     padding: 1em;
+    dt {
+      float: left;
+      clear: left;
+      margin-right: 10px;
+    }
+    dd {
+      margin-left: 0px;
+    }
 }
 .grid-header {
     border-bottom: 1px solid grey;
@@ -23,7 +31,13 @@
     grid-row-start: 1;
     grid-column-start: 4;
 }
-@media (max-width: 600px) {
+.c-none {
+    display: none;
+}
+.c-inline {
+    display: inline;
+}
+@container (width <= 500px) {
   #event_table {
     grid-template-columns: 1fr !important;
   }
@@ -43,9 +57,9 @@
   #event_mic {
     grid-row-start: auto;
     grid-column-start: 4;
+  }
 }
-}
-@media (max-width: 900px) {
+@container (width <= 700px) {
   #event_table {
     grid-template-columns: max-content;
     column-gap: 0.5em;
@@ -68,17 +82,20 @@
   #event_status {
     grid-column: span 2;
   }
-  .grid-header {
+  .grid-header, .c-md-none {
     display: none;
   }
 }
-dt {
-  float: left;
-  clear: left;
-  margin-right: 10px;
-}
-dd {
-  margin-left: 0px;
+@container (width > 700px) {
+    .c-lg-block {
+        display: block;
+    }
+    .c-lg-inline {
+        display: inline;
+    }
+    .c-lg-none, .c-md-none {
+        display: none;
+    }
 }
 </style>
 <div id="event_table">
@@ -105,7 +122,7 @@
     table-warning
     {% endif %}" {% if event.cancelled %}style="opacity: 50% !important;"{% endif %} id="event_row">
     <!---Number-->
-    <div class="font-weight-bold d-none d-lg-block" id="event_number">{{ event.display_id }}</div>
+    <div class="font-weight-bold c-none c-lg-block" id="event_number">{{ event.display_id }}</div>
     <!--Dates & Times-->
     <div id="event_dates" style="min-width: 180px;">
         <dl>
@@ -139,12 +156,12 @@
     <div id="event_details" class="w-100">
         <h4>
             <a href="{% url 'event_detail' event.pk %}">
-                <span class="d-inline d-lg-none">{{ event }}</span><span class="d-none d-lg-inline">{{ event.name }}</span>
+                <span class="c-inline c-lg-none">{{ event }}</span><span class="c-none c-lg-inline">{{ event.name }}</span>
             </a>
             {% if event.dry_hire %}
             <span class="badge badge-secondary">Dry Hire</span>
             {% endif %}
-            <br class="d-none d-lg-inline">
+            <br class="c-none c-lg-inline">
             {% if event.venue %}
             <small>at {{ event.venue|namewithnotes:'venue_detail' }}</small>
             {% endif %}
@@ -164,7 +181,7 @@ <h5>
     {% include 'partials/event_status.html' %}
     <!---MIC-->
     <div id="event_mic" class="text-nowrap">
-        <span class="d-md-none align-middle">MIC:</span>
+        <span class="c-md-none align-middle">MIC:</span>
         {% if event.mic %}
         {% if perms.RIGS.view_profile %}
         <a href="{% url 'profile_detail' event.mic.pk %}" class="modal-href">

diff --git a/RIGS/templates/rigboard.html b/RIGS/templates/rigboard.html
@@ -12,7 +12,7 @@
     </div>
     {% endif %}
 </div>
-
+<div style="container-type: inline-size;">
 {% include 'partials/event_table.html' %}
-
+</div>
 {% endblock %}
diff --git a/users/templates/profile_detail.html b/users/templates/profile_detail.html
@@ -167,9 +167,11 @@
         <div class="col-lg-6">
             <div class="card">
                 <div class="card-header">Events</div>
+                <div style="container-type: size; height: 30vh; overflow-y: scroll;">
                 {% with object.latest_events as events %}
                     {% include 'partials/event_table.html' %}
                 {% endwith %}
+                </div>
             </div>
         </div>
     </div>