arona/PyRIGS
1
0
Fork 0
mirror of https://github.com/nottinghamtec/PyRIGS.git synced 2026-01-16 21:12:13 +00:00
Code Issues Projects Releases Wiki Activity

Reimplement rigboard page in a fully responsive manner (#567)

Browse Source 
* Revive this concept for 2023

(cherry picked from commit b3939d8426)

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

* Update app.json

* Updates to all three layouts
This commit is contained in:
FreneticScribbler
2023-12-17 18:01:49 +00:00
committed by GitHub
parent 68d3605230
commit 2a2ce742b0
7 changed files with 197 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
PyRIGS/settings.py
View File

@@ -35,6 +35,8 @@ if DEBUG:
ALLOWED_HOSTS.append('localhost') ALLOWED_HOSTS.append('localhost')
ALLOWED_HOSTS.append('example.com') ALLOWED_HOSTS.append('example.com')
ALLOWED_HOSTS.append('127.0.0.1') 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') SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
if not DEBUG: if not DEBUG:

2
RIGS/templates/partials/event_status.html
View File

@@ -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> <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.is_rig %}
{% if event.sum_total > 0 %} {% if event.sum_total > 0 %}

282
RIGS/templates/partials/event_table.html
View File

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

4
RIGS/templates/rigboard.html
View File

@@ -3,8 +3,8 @@
{% block content %} {% block content %}
<div class="row align-items-center justify-content-between py-2 align-middle"> <div class="row align-items-center justify-content-between py-2 align-middle">
<div class="col-sm-12 col-md align-middle"> <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">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> 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> </div>
{% if perms.RIGS.add_event %} {% if perms.RIGS.add_event %}
<div class="col text-right"> <div class="col text-right">

4
app.json
View File

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

2
gulpfile.js
View File

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

19
pipeline/source_assets/scss/dark_screen.scss
View File

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