Fix typo in nonevent display

(cherry picked from commit b3939d8426)

# Conflicts:
#	pipeline/source_assets/scss/dark_screen.scss

PyRIGS/settings.py

@@ -35,6 +35,8 @@ if DEBUG:
     ALLOWED_HOSTS.append('localhost')
     ALLOWED_HOSTS.append('example.com')
     ALLOWED_HOSTS.append('127.0.0.1')
+    ALLOWED_HOSTS.append('.app.github.dev')
+    CSRF_TRUSTED_ORIGINS = ALLOWED_HOSTS
 
 SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
 if not DEBUG:

RIGS/templates/partials/event_status.html

@@ -1,4 +1,4 @@
-<div>
+<div id="event_status">
 <span class="badge badge-{% if event.confirmed %}success{% elif event.cancelled %}dark{% else %}warning{% endif %}">Status: {{ event.get_status_display }}</span>
 {% if event.is_rig %}
     {% if event.sum_total > 0 %}

RIGS/templates/partials/event_table.html

@@ -1,105 +1,183 @@
 {% load namewithnotes from filters %}
 {% load markdown_tags %}
-<div class="table-responsive">
-    <table class="table mb-0" id="event_table">
-        <thead>
-            <tr>
-                <th scope="col">#</th>
-                <th scope="col">Dates & Times</th>
-                <th scope="col">Event Details</th>
-                <th scope="col">MIC</th>
-            </tr>
-        </thead>
-        <tbody>
-        {% for event in events %}
-        <tr class="{% if event.cancelled %}
-                    table-secondary
-                    {% elif not event.is_rig %}
-                    table-info
-                    {% elif not event.mic %}
-                    table-danger
-                    {% elif event.confirmed and event.authorised %}
-                        {% if event.dry_hire or event.riskassessment %}
-                            table-success
-                        {% else %}
-                            table-warning
-                        {% endif %}
-                    {% else %}
-                    table-warning
-                    {% endif %}" {% if event.cancelled %}style="opacity: 50% !important;"{% endif %} id="event_row">
-            <!---Number-->
-            <th scope="row" id="event_number">{{ event.display_id }}</th>
-            <!--Dates & Times-->
-            <td id="event_dates" style="text-align: justify;">
-                {% if not event.cancelled %}
-                    {% if event.meet_at %}
-                        <span class="text-nowrap">Meet: <strong>{{ event.meet_at|date:"D d/m/Y H:i" }}</strong></span>
-                    {% endif %}
-                    {% if event.access_at %}
-                        <br><span class="text-nowrap">Access: <strong>{{ event.access_at|date:"D d/m/Y H:i" }}</strong></span>
-                    {% endif %}
-                {% endif %}
-                <span class="text-nowrap">Start: <strong>{{ event.start_date|date:"D d/m/Y" }}
-                {% if event.has_start_time %}
-                    {{ event.start_time|date:"H:i" }}
-                {% endif %}</strong>
-                </span>
-                {% if event.end_date %}
-                    <br>
-                    <span class="text-nowrap">End: {% if event.end_date != event.start_date %}<strong>{{ event.end_date|date:"D d/m/Y"  }}{% endif %}
-                    {% if event.has_end_time %}
-                       {{ event.end_time|date:"H:i" }}
-                    {% endif %}</strong>
-                    </span>
-                {% endif %}
-            </td>
-            <!---Details-->
-            <td id="event_details" class="w-100">
-                <h4>
-                    <a href="{% url 'event_detail' event.pk %}">
-                        {{ event.name }}
-                    </a>
-                    {% if event.venue %}
-                        <small>at {{ event.venue|namewithnotes:'venue_detail' }}</small>
-                    {% endif %}
-                    {% if event.dry_hire %}
-                        <span class="badge badge-secondary">Dry Hire</span>
-                    {% endif %}
-                </h4>
-                {% if event.is_rig and not event.cancelled %}
-                    <h5>
-                        <a href="{{ event.person.get_absolute_url }}">{{ event.person.name }}</a>
-                        {% if event.organisation %}
-                            for <a href="{{ event.organisation.get_absolute_url }}">{{ event.organisation.name }}</a>
-                        {% endif %}
-                    </h5>
-                {% endif %}
-                {% if not event.cancelled and event.description %}
-                    <p>{{ event.description|markdown }}</p>
-                {% endif %}
-                {% include 'partials/event_status.html' %}
-            </td>
-            <!---MIC-->
-            <td id="event_mic" class="text-nowrap">
-                {% if event.mic %}
-                    {% if perms.RIGS.view_profile %}
-                        <a href="{% url 'profile_detail' event.mic.pk %}" class="modal-href">
-                    {% endif %}
-                        <img src="{{ event.mic.profile_picture }}" class="event-mic-photo"/>
-                        {{ event.mic }}
-                    {% if perms.RIGS.view_profile %}
-                        </a>
-                    {% endif %}
-                {% elif event.is_rig %}
-                    <span class="fas fa-user-slash"></span>
-                {% endif %}
-            </td>
-        </tr>
-        {% empty %}
-        <tr class="bg-warning">
-            <td colspan="4">No events found</td>
-        </tr>
-        {% endfor %}
-        </tbody>
-    </table>
+<style>
+#event_table {
+    display: grid;
+    grid-template-columns: max-content auto;
+    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;
+}
+#event_status {
+    grid-column-start: 3;
+}
+#event_mic {
+    grid-row-start: 1;
+    grid-column-start: 4;
+}
+@media (max-width: 600px) {
+  #event_table {
+    grid-template-columns: 1fr !important;
+  }
+  .eventgrid {
+    grid-column: 1/1 !important;
+    padding: 0.5em;
+  }
+  .grid-header {
+    display: none;
+  }
+  #event_dates {
+    order: 2;
+  }
+  #event_status {
+    order: 3;
+  }
+  #event_mic {
+    grid-row-start: auto;
+    grid-column-start: 4;
+}
+}
+@media (max-width: 900px) {
+  #event_table {
+    grid-template-columns: max-content;
+    column-gap: 0.5em;
+  }
+  .eventgrid {
+    grid-column: 1/3;
+    border: 1px solid grey;
+  }
+  #event_dates {
+    grid-row: 2;
+    grid-column: 1;
+  }
+  #event_number {
+    grid-row: 1;
+    grid-column: 1;
+  }
+  #event_mic {
+    grid-column: 2;
+  }
+  #event_status {
+    grid-column: span 2;
+  }
+  .grid-header {
+    display: none;
+  }
+}
+dt {
+  float: left;
+  clear: left;
+  margin-right: 10px;
+}
+dd {
+  margin-left: 0px;
+}
+</style>
+<div id="event_table">
+    <div class="eventgrid grid-header font-weight-bold">
+        <div id="event_number">#</div>
+        <div id="event_dates">Dates & Times</div>
+        <div>Event Details</div>
+        <div id="event_mic">MIC</div>
+    </div>
+    {% for event in events %}
+    <div class="eventgrid {% if event.cancelled %}
+    table-secondary
+    {% elif not event.is_rig %}
+    table-info
+    {% elif not event.mic %}
+    table-danger
+    {% elif event.confirmed and event.authorised %}
+    {% if event.dry_hire or event.riskassessment %}
+    table-success
+    {% else %}
+    table-warning
+    {% endif %}
+    {% else %}
+    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>
+    <!--Dates & Times-->
+    <div id="event_dates" style="min-width: 180px;">
+        <dl>
+          {% if not event.cancelled %}
+            {% if event.meet_at %}
+            <dt class="font-weight-normal">Meet:</dt>
+            <dd class="text-nowrap font-weight-bold text-lg-right">{{ event.meet_at|date:"D d/m/Y H:i" }}</dd>
+            {% endif %}
+            {% if event.access_at %}
+            <dt class="font-weight-normal">Access:</dt>
+            <dd class="text-nowrap font-weight-bold text-lg-right">{{ event.access_at|date:"D d/m/Y H:i" }}</dd>
+            {% endif %}
+          {% endif %}
+          <dt class="font-weight-normal">Start:</dt>
+          <dd class="text-nowrap font-weight-bold text-lg-right">{{ event.start_date|date:"D d/m/Y" }}
+            {% if event.has_start_time %}
+              {{ event.start_time|date:"H:i" }}
+            {% endif %}
+          </dd>
+          {% if event.end_date %}
+          <dt class="font-weight-normal">End:</dt>
+          <dd class="text-nowrap font-weight-bold text-lg-right">{{ event.end_date|date:"D d/m/Y" }}
+            {% if event.has_end_time %}
+            {{ event.end_time|date:"H:i" }}
+            {% endif %}
+          </dd>
+          {% endif %}
+        </dl>
+    </div>
+    <!---Details-->
+    <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>
+            </a>
+            {% if event.dry_hire %}
+            <span class="badge badge-secondary">Dry Hire</span>
+            {% endif %}
+            <br class="d-none d-lg-inline">
+            {% if event.venue %}
+            <small>at {{ event.venue|namewithnotes:'venue_detail' }}</small>
+            {% endif %}
+        </h4>
+        {% if event.is_rig and not event.cancelled %}
+        <h5>
+            <a href="{{ event.person.get_absolute_url }}">{{ event.person.name }}</a>
+            {% if event.organisation %}
+            for <a href="{{ event.organisation.get_absolute_url }}">{{ event.organisation.name }}</a>
+            {% endif %}
+        </h5>
+        {% endif %}
+        {% if not event.cancelled and event.description %}
+        <p>{{ event.description|markdown }}</p>
+        {% endif %}
+    </div>
+    {% include 'partials/event_status.html' %}
+    <!---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">
+            {% endif %}
+            <img src="{{ event.mic.profile_picture }}" class="event-mic-photo"/>
+            {{ event.mic }}
+            {% if perms.RIGS.view_profile %}
+        </a>
+        {% endif %}
+        {% elif event.is_rig %}
+        <span class="fas fa-exclamation"></span>
+        {% endif %}
+    </div>
+</div>
+{% endfor %}
 </div>

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">

app.json

@@ -4,7 +4,7 @@
   "scripts": {
     "postdeploy": "python manage.py migrate && python manage.py generateSampleData"
   },
-  "stack": "heroku-20",
+  "stack": "heroku-22",
   "env": {
     "DEBUG": {
       "required": true
@@ -51,7 +51,7 @@
       "url": "heroku/nodejs"
     },
     {
-      "url": "https://github.com/nottinghamtec/heroku-buildpack-python"
+      "url": "heroku/python"
     }
   ]
 }

gulpfile.js

@@ -79,7 +79,7 @@ function browserSync(done) {
   spawn('python', ['manage.py', 'runserver'], {stdio: 'inherit'});
   // TODO Wait for Django server to come up before browsersync, it seems inconsistent
   browsersync.init({
-    notify: false,
+    notify: true,
     open: false,
     port: 8001,
     proxy: '127.0.0.1:8000'

pipeline/source_assets/scss/dark_screen.scss

@@ -77,17 +77,8 @@
         border-collapse: separate !important;
         border-spacing: 0;
     }
-    #event_table tr th {
-      border-right: 0 !important;
-    }
-    #event_table tr td {
-      border-left: 0 !important;
-    }
-    #event_table tr td:not(:last-child) {
-        border-right: 0 !important;
-    }
     @each $color, $value in $theme-colors {
-        .table-#{$color} {
+        table.table-#{$color} {
             > td,th {
                 border: 0.3em solid theme-color-level($color, -6) !important;
             }
@@ -96,6 +87,11 @@
                 background-color: #222 !important;
             }
         }
+        #event_row.table-#{$color} {
+            border: 0.3em solid theme-color-level($color, -6) !important;
+            background-color: #222 !important;
+            color: white !important;
+        }
     }
     del {
       color: black;
@@ -156,4 +152,7 @@
     .modal {
       overflow-y: auto !important; //Bootstrap Dark Theme overrides this to none for some insane reason so we need to change it back
     }
+    .text-muted {
+        color: #c9c9c9 !important;
+    }
 }