Further work at grid-table, including tablet layout

RIGS/templates/partials/event_table.html

@@ -1,15 +1,28 @@
 {% load namewithnotes from filters %}
 <style>
-.eventgrid {
+#event_table {
     display: grid;
-    grid-template-columns: 0.5fr 2fr 4fr 1fr;
-    border: solid 3px black;
+    grid-template-columns: 0.5fr 1fr 4fr 1fr;
+    column-gap: 1em;
+}
+.eventgrid {
+    display: inherit;
+    grid-column: 1/5;
+    grid-template-columns: subgrid;
     padding: 1em;
 }
+.grid-header {
+    border-bottom: 1px solid grey;
+    border-top: 1px solid grey;
+}
 @media (max-width: 600px) {
-  .eventgrid {
+  #event_table {
     grid-template-columns: 1fr;
   }
+  .eventgrid {
+    grid-column: 1/1;
+    padding: 0.5em;
+  }
   .grid-header {
     display: none;
   }
@@ -17,13 +30,33 @@
     order: 2;
   }
 }
+@media (max-width: 900px) {
+  #event_table {
+    grid-template-columns: 0.5fr 1fr;
+    column-gap: 0.5em;
+  }
+  .eventgrid {
+    grid-column: 1/3;
+  }
+  #event_dates {
+    grid-row: 2;
+    grid-column: 1;
+  }
+  #event_number {
+    grid-row: 1;
+    grid-column: 1;
+  }
+  #event_mic {
+    grid-column: 2;
+  }
+}
 </style>
 <div id="event_table">
     <div class="eventgrid grid-header font-weight-bold">
-        <div>#</div>
-        <div>Dates & Times</div>
+        <div id="event_number">#</div>
+        <div id="event_dates">Dates & Times</div>
         <div>Event Details</div>
-        <div>MIC</div>
+        <div id="event_mic">MIC</div>
     </div>
     {% for event in events %}
     <div class="eventgrid {% if event.cancelled %}
@@ -95,6 +128,7 @@
         </div>
         <!---MIC-->
         <div id="event_mic" class="text-nowrap">
+            <span class="d-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">

RIGS/templates/rigboard.html

@@ -3,8 +3,8 @@
 
 {% block content %}
 <div class="row align-items-center justify-content-between py-2 align-middle">
-    <div class="col-sm-12 col-md align-middle">
-        Key: <span class="table-success mr-1 px-2 rounded">Ready</span><span class="table-warning mr-1 px-2 rounded">Action Required</span><span class="table-danger mr-1 px-2 rounded">Needs MIC</span><span class="table-secondary mr-1 px-2 rounded">Cancelled</span><span class="table-info px-2 rounded">Non-Rig</span>
+    <div class="col-sm-12 col-md align-middle d-flex flex-wrap">
+        Key: <span class="table-success mr-1 px-2 rounded">Ready</span><span class="table-warning mr-1 px-2 rounded text-nowrap">Action Required</span><span class="table-danger mr-1 px-2 rounded text-nowrap">Needs MIC</span><span class="table-secondary mr-1 px-2 rounded">Cancelled</span><span class="table-info px-2 rounded text-nowrap">Non-Rig</span>
     </div>
     {% if perms.RIGS.add_event %}
     <div class="col text-right">

pipeline/source_assets/scss/dark_screen.scss

@@ -93,6 +93,13 @@
                 background-color: #222 !important;
             }
         }
+        #event_table {
+            > .bg-#{$color} {
+                border: 0.3em solid theme-color-level($color, -6) !important;
+                background-color: #222 !important;
+                color: white !important;
+            }
+        }
     }
     del {
       color: black;
@@ -119,4 +126,7 @@
         background: #222;
         color: $gray-100;
     }
+    .text-muted {
+        color: #c9c9c9 !important;
+    }
 }