Skip to content

Commit 2a2ce74

Browse files
FreneticScribblerFreneticScribbler
authored
Reimplement rigboard page in a fully responsive manner (#567)
* Revive this concept for 2023 (cherry picked from commit b3939d8) # Conflicts: # pipeline/source_assets/scss/dark_screen.scss * Update app.json * Updates to all three layouts
1 parent 68d3605 commit 2a2ce74

File tree

7 files changed

+197
-118
lines changed

7 files changed

+197
-118
lines changed

‎PyRIGS/settings.py

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,8 @@
3535
ALLOWED_HOSTS.append('localhost')
3636
ALLOWED_HOSTS.append('example.com')
3737
ALLOWED_HOSTS.append('127.0.0.1')
38+
ALLOWED_HOSTS.append('.app.github.dev')
39+
CSRF_TRUSTED_ORIGINS = ALLOWED_HOSTS
3840

3941
SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
4042
if not DEBUG:

‎RIGS/templates/partials/event_status.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div>
1+
<div id="event_status">
22
<span class="badge badge-{% if event.confirmed %}success{% elif event.cancelled %}dark{% else %}warning{% endif %}">Status: {{ event.get_status_display }}</span>
33
{% if event.is_rig %}
44
{% if event.sum_total > 0 %}

‎RIGS/templates/partials/event_table.html

Lines changed: 180 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,183 @@
11
{% load namewithnotes from filters %}
22
{% load markdown_tags %}
3-
<div class="table-responsive">
4-
<table class="table mb-0" id="event_table">
5-
<thead>
6-
<tr>
7-
<th scope="col">#</th>
8-
<th scope="col">Dates & Times</th>
9-
<th scope="col">Event Details</th>
10-
<th scope="col">MIC</th>
11-
</tr>
12-
</thead>
13-
<tbody>
14-
{% for event in events %}
15-
<tr class="{% if event.cancelled %}
16-
table-secondary
17-
{% elif not event.is_rig %}
18-
table-info
19-
{% elif not event.mic %}
20-
table-danger
21-
{% elif event.confirmed and event.authorised %}
22-
{% if event.dry_hire or event.riskassessment %}
23-
table-success
24-
{% else %}
25-
table-warning
26-
{% endif %}
27-
{% else %}
28-
table-warning
29-
{% endif %}" {% if event.cancelled %}style="opacity: 50% !important;"{% endif %} id="event_row">
30-
<!---Number-->
31-
<th scope="row" id="event_number">{{ event.display_id }}</th>
32-
<!--Dates & Times-->
33-
<td id="event_dates" style="text-align: justify;">
34-
{% if not event.cancelled %}
35-
{% if event.meet_at %}
36-
<span class="text-nowrap">Meet: <strong>{{ event.meet_at|date:"D d/m/Y H:i" }}</strong></span>
37-
{% endif %}
38-
{% if event.access_at %}
39-
<br><span class="text-nowrap">Access: <strong>{{ event.access_at|date:"D d/m/Y H:i" }}</strong></span>
40-
{% endif %}
41-
{% endif %}
42-
<span class="text-nowrap">Start: <strong>{{ event.start_date|date:"D d/m/Y" }}
43-
{% if event.has_start_time %}
44-
{{ event.start_time|date:"H:i" }}
45-
{% endif %}</strong>
46-
</span>
47-
{% if event.end_date %}
48-
<br>
49-
<span class="text-nowrap">End: {% if event.end_date != event.start_date %}<strong>{{ event.end_date|date:"D d/m/Y" }}{% endif %}
50-
{% if event.has_end_time %}
51-
{{ event.end_time|date:"H:i" }}
52-
{% endif %}</strong>
53-
</span>
54-
{% endif %}
55-
</td>
56-
<!---Details-->
57-
<td id="event_details" class="w-100">
58-
<h4>
59-
<a href="{% url 'event_detail' event.pk %}">
60-
{{ event.name }}
61-
</a>
62-
{% if event.venue %}
63-
<small>at {{ event.venue|namewithnotes:'venue_detail' }}</small>
64-
{% endif %}
65-
{% if event.dry_hire %}
66-
<span class="badge badge-secondary">Dry Hire</span>
67-
{% endif %}
68-
</h4>
69-
{% if event.is_rig and not event.cancelled %}
70-
<h5>
71-
<a href="{{ event.person.get_absolute_url }}">{{ event.person.name }}</a>
72-
{% if event.organisation %}
73-
for <a href="{{ event.organisation.get_absolute_url }}">{{ event.organisation.name }}</a>
74-
{% endif %}
75-
</h5>
76-
{% endif %}
77-
{% if not event.cancelled and event.description %}
78-
<p>{{ event.description|markdown }}</p>
79-
{% endif %}
80-
{% include 'partials/event_status.html' %}
81-
</td>
82-
<!---MIC-->
83-
<td id="event_mic" class="text-nowrap">
84-
{% if event.mic %}
85-
{% if perms.RIGS.view_profile %}
86-
<a href="{% url 'profile_detail' event.mic.pk %}" class="modal-href">
87-
{% endif %}
88-
<img src="{{ event.mic.profile_picture }}" class="event-mic-photo"/>
89-
{{ event.mic }}
90-
{% if perms.RIGS.view_profile %}
91-
</a>
92-
{% endif %}
93-
{% elif event.is_rig %}
94-
<span class="fas fa-user-slash"></span>
95-
{% endif %}
96-
</td>
97-
</tr>
98-
{% empty %}
99-
<tr class="bg-warning">
100-
<td colspan="4">No events found</td>
101-
</tr>
102-
{% endfor %}
103-
</tbody>
104-
</table>
3+
<style>
4+
#event_table {
5+
display: grid;
6+
grid-template-columns: max-content auto;
7+
column-gap: 1em;
8+
}
9+
.eventgrid {
10+
display: inherit;
11+
grid-column: 1/5;
12+
grid-template-columns: subgrid;
13+
padding: 1em;
14+
}
15+
.grid-header {
16+
border-bottom: 1px solid grey;
17+
border-top: 1px solid grey;
18+
}
19+
#event_status {
20+
grid-column-start: 3;
21+
}
22+
#event_mic {
23+
grid-row-start: 1;
24+
grid-column-start: 4;
25+
}
26+
@media (max-width: 600px) {
27+
#event_table {
28+
grid-template-columns: 1fr !important;
29+
}
30+
.eventgrid {
31+
grid-column: 1/1 !important;
32+
padding: 0.5em;
33+
}
34+
.grid-header {
35+
display: none;
36+
}
37+
#event_dates {
38+
order: 2;
39+
}
40+
#event_status {
41+
order: 3;
42+
}
43+
#event_mic {
44+
grid-row-start: auto;
45+
grid-column-start: 4;
46+
}
47+
}
48+
@media (max-width: 900px) {
49+
#event_table {
50+
grid-template-columns: max-content;
51+
column-gap: 0.5em;
52+
}
53+
.eventgrid {
54+
grid-column: 1/3;
55+
border: 1px solid grey;
56+
}
57+
#event_dates {
58+
grid-row: 2;
59+
grid-column: 1;
60+
}
61+
#event_number {
62+
grid-row: 1;
63+
grid-column: 1;
64+
}
65+
#event_mic {
66+
grid-column: 2;
67+
}
68+
#event_status {
69+
grid-column: span 2;
70+
}
71+
.grid-header {
72+
display: none;
73+
}
74+
}
75+
dt {
76+
float: left;
77+
clear: left;
78+
margin-right: 10px;
79+
}
80+
dd {
81+
margin-left: 0px;
82+
}
83+
</style>
84+
<div id="event_table">
85+
<div class="eventgrid grid-header font-weight-bold">
86+
<div id="event_number">#</div>
87+
<div id="event_dates">Dates & Times</div>
88+
<div>Event Details</div>
89+
<div id="event_mic">MIC</div>
90+
</div>
91+
{% for event in events %}
92+
<div class="eventgrid {% if event.cancelled %}
93+
table-secondary
94+
{% elif not event.is_rig %}
95+
bg-info
96+
{% elif not event.mic %}
97+
table-danger
98+
{% elif event.confirmed and event.authorised %}
99+
{% if event.dry_hire or event.riskassessment %}
100+
table-success
101+
{% else %}
102+
table-warning
103+
{% endif %}
104+
{% else %}
105+
table-warning
106+
{% endif %}" {% if event.cancelled %}style="opacity: 50% !important;"{% endif %} id="event_row">
107+
<!---Number-->
108+
<div class="font-weight-bold d-none d-lg-block" id="event_number">{{ event.display_id }}</div>
109+
<!--Dates & Times-->
110+
<div id="event_dates" style="min-width: 180px;">
111+
<dl>
112+
{% if not event.cancelled %}
113+
{% if event.meet_at %}
114+
<dt class="font-weight-normal">Meet:</dt>
115+
<dd class="text-nowrap font-weight-bold text-lg-right">{{ event.meet_at|date:"D d/m/Y H:i" }}</dd>
116+
{% endif %}
117+
{% if event.access_at %}
118+
<dt class="font-weight-normal">Access:</dt>
119+
<dd class="text-nowrap font-weight-bold text-lg-right">{{ event.access_at|date:"D d/m/Y H:i" }}</dd>
120+
{% endif %}
121+
{% endif %}
122+
<dt class="font-weight-normal">Start:</dt>
123+
<dd class="text-nowrap font-weight-bold text-lg-right">{{ event.start_date|date:"D d/m/Y" }}
124+
{% if event.has_start_time %}
125+
{{ event.start_time|date:"H:i" }}
126+
{% endif %}
127+
</dd>
128+
{% if event.end_date %}
129+
<dt class="font-weight-normal">End:</dt>
130+
<dd class="text-nowrap font-weight-bold text-lg-right">{{ event.end_date|date:"D d/m/Y" }}
131+
{% if event.has_end_time %}
132+
{{ event.end_time|date:"H:i" }}
133+
{% endif %}
134+
</dd>
135+
{% endif %}
136+
</dl>
137+
</div>
138+
<!---Details-->
139+
<div id="event_details" class="w-100">
140+
<h4>
141+
<a href="{% url 'event_detail' event.pk %}">
142+
<span class="d-inline d-lg-none">{{ event }}</span><span class="d-none d-lg-inline">{{ event.name }}</span>
143+
</a>
144+
{% if event.dry_hire %}
145+
<span class="badge badge-secondary">Dry Hire</span>
146+
{% endif %}
147+
<br class="d-none d-lg-inline">
148+
{% if event.venue %}
149+
<small>at {{ event.venue|namewithnotes:'venue_detail' }}</small>
150+
{% endif %}
151+
</h4>
152+
{% if event.is_rig and not event.cancelled %}
153+
<h5>
154+
<a href="{{ event.person.get_absolute_url }}">{{ event.person.name }}</a>
155+
{% if event.organisation %}
156+
for <a href="{{ event.organisation.get_absolute_url }}">{{ event.organisation.name }}</a>
157+
{% endif %}
158+
</h5>
159+
{% endif %}
160+
{% if not event.cancelled and event.description %}
161+
<p>{{ event.description|markdown }}</p>
162+
{% endif %}
163+
</div>
164+
{% include 'partials/event_status.html' %}
165+
<!---MIC-->
166+
<div id="event_mic" class="text-nowrap">
167+
<span class="d-md-none align-middle">MIC:</span>
168+
{% if event.mic %}
169+
{% if perms.RIGS.view_profile %}
170+
<a href="{% url 'profile_detail' event.mic.pk %}" class="modal-href">
171+
{% endif %}
172+
<img src="{{ event.mic.profile_picture }}" class="event-mic-photo"/>
173+
{{ event.mic }}
174+
{% if perms.RIGS.view_profile %}
175+
</a>
176+
{% endif %}
177+
{% elif event.is_rig %}
178+
<span class="fas fa-exclamation"></span>
179+
{% endif %}
180+
</div>
181+
</div>
182+
{% endfor %}
105183
</div>

‎RIGS/templates/rigboard.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33

44
{% block content %}
55
<div class="row align-items-center justify-content-between py-2 align-middle">
6-
<div class="col-sm-12 col-md align-middle">
7-
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>
6+
<div class="col-sm-12 col-md align-middle d-flex flex-wrap">
7+
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>
88
</div>
99
{% if perms.RIGS.add_event %}
1010
<div class="col text-right">

‎app.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"scripts": {
55
"postdeploy": "python manage.py migrate && python manage.py generateSampleData"
66
},
7-
"stack": "heroku-20",
7+
"stack": "heroku-22",
88
"env": {
99
"DEBUG": {
1010
"required": true
@@ -51,7 +51,7 @@
5151
"url": "heroku/nodejs"
5252
},
5353
{
54-
"url": "https://github.com/nottinghamtec/heroku-buildpack-python"
54+
"url": "heroku/python"
5555
}
5656
]
5757
}

‎gulpfile.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ function browserSync(done) {
7979
spawn('python', ['manage.py', 'runserver'], {stdio: 'inherit'});
8080
// TODO Wait for Django server to come up before browsersync, it seems inconsistent
8181
browsersync.init({
82-
notify: false,
82+
notify: true,
8383
open: false,
8484
port: 8001,
8585
proxy: '127.0.0.1:8000'

‎pipeline/source_assets/scss/dark_screen.scss

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -77,17 +77,8 @@
7777
border-collapse: separate !important;
7878
border-spacing: 0;
7979
}
80-
#event_table tr th {
81-
border-right: 0 !important;
82-
}
83-
#event_table tr td {
84-
border-left: 0 !important;
85-
}
86-
#event_table tr td:not(:last-child) {
87-
border-right: 0 !important;
88-
}
8980
@each $color, $value in $theme-colors {
90-
.table-#{$color} {
81+
table.table-#{$color} {
9182
> td,th {
9283
border: 0.3em solid theme-color-level($color, -6) !important;
9384
}
@@ -96,6 +87,11 @@
9687
background-color: #222 !important;
9788
}
9889
}
90+
#event_row.table-#{$color} {
91+
border: 0.3em solid theme-color-level($color, -6) !important;
92+
background-color: #222 !important;
93+
color: white !important;
94+
}
9995
}
10096
del {
10197
color: black;
@@ -156,4 +152,7 @@
156152
.modal {
157153
overflow-y: auto !important; //Bootstrap Dark Theme overrides this to none for some insane reason so we need to change it back
158154
}
155+
.text-muted {
156+
color: #c9c9c9 !important;
157+
}
159158
}

0 commit comments

Comments
 (0)