-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
1 parent
68d3605
commit 2a2ce74
Showing
7 changed files
with
197 additions
and
118 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 %} | ||
| bg-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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters