Very initial pass at reimplementing event table fully responsive

This commit is contained in:
2021-02-24 22:20:29 +00:00
parent f88f418503
commit f5d875d153
2 changed files with 98 additions and 89 deletions

View File

@@ -1,104 +1,113 @@
{% load namewithnotes from filters %} {% load namewithnotes from filters %}
<div class="table-responsive"> <style>
<table class="table mb-0" id="event_table"> .eventgrid {
<thead> display: grid;
<tr> grid-template-columns: 0.5fr 2fr 4fr 1fr;
<th scope="col">#</th> border: solid 3px black;
<th scope="col">Dates & Times</th> padding: 1em;
<th scope="col">Event Details</th> }
<th scope="col">MIC</th> @media (max-width: 600px) {
</tr> .eventgrid {
</thead> grid-template-columns: 1fr;
<tbody> }
{% for event in events %} .grid-header {
<tr class="{% if event.cancelled %} display: none;
table-secondary }
#event_dates {
order: 2;
}
}
</style>
<div id="event_table">
<div class="eventgrid grid-header font-weight-bold">
<div>#</div>
<div>Dates & Times</div>
<div>Event Details</div>
<div>MIC</div>
</div>
{% for event in events %}
<div class="eventgrid {% if event.cancelled %}
bg-secondary
{% elif not event.is_rig %} {% elif not event.is_rig %}
table-info bg-info
{% elif not event.mic %} {% elif not event.mic %}
table-danger bg-danger
{% elif event.confirmed and event.authorised %} {% elif event.confirmed and event.authorised %}
{% if event.dry_hire or event.riskassessment %} {% if event.dry_hire or event.riskassessment %}
table-success bg-success
{% else %} {% else %}
table-warning bg-warning
{% endif %} {% endif %}
{% else %} {% else %}
table-warning bg-warning
{% endif %}" {% if event.cancelled %}style="opacity: 50% !important;"{% endif %} id="event_row"> {% endif %}" {% if event.cancelled %}style="opacity: 50% !important;"{% endif %} id="event_row">
<!---Number--> <!---Number-->
<th scope="row" id="event_number">{{ event.display_id }}</th> <div class="font-weight-bold d-none d-sm-block" id="event_number">{{ event.display_id }}</div>
<!--Dates & Times--> <!--Dates & Times-->
<td id="event_dates"> <div id="event_dates">
<span class="text-nowrap">Start: <strong>{{ event.start_date|date:"D d/m/Y" }}</strong> <span class="text-nowrap attribute">Start: <strong>{{ event.start_date|date:"D d/m/Y" }}</strong>
{% if event.has_start_time %} {% if event.has_start_time %}
{{ event.start_time|date:"H:i" }} {{ event.start_time|date:"H:i" }}
{% endif %}
</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" }}</strong>{% endif %}
{% if event.has_end_time %}
{{ event.end_time|date:"H:i" }}
{% endif %} {% endif %}
</span> </span>
{% if event.end_date %} {% endif %}
<br> {% if not event.cancelled %}
<span class="text-nowrap">End: {% if event.end_date != event.start_date %}<strong>{{ event.end_date|date:"D d/m/Y" }}</strong>{% endif %} {% if event.meet_at %}
{% if event.has_end_time %} <br><span>Crew meet: <strong>{{ event.meet_at|date:"H:i" }}</strong> {{ event.meet_at|date:"(d/m/Y)" }}</span>
{{ event.end_time|date:"H:i" }}
{% endif %}
</span>
{% endif %} {% endif %}
{% if not event.cancelled %} {% if event.access_at %}
{% if event.meet_at %} <br><span>Access at: <strong>{{ event.access_at|date:"H:i" }}</strong> {{ event.access_at|date:"(d/m/Y)" }}</span>
<br><span>Crew meet: <strong>{{ event.meet_at|date:"H:i" }}</strong> {{ event.meet_at|date:"(d/m/Y)" }}</span>
{% endif %}
{% if event.access_at %}
<br><span>Access at: <strong>{{ event.access_at|date:"H:i" }}</strong> {{ event.access_at|date:"(d/m/Y)" }}</span>
{% endif %}
{% endif %} {% endif %}
</td> {% endif %}
<!---Details--> </div>
<td id="event_details" class="w-100"> <!---Details-->
<h4> <div id="event_details" class="w-100">
<a href="{% url 'event_detail' event.pk %}"> <h4>
{{ event.name }} <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>
{{ event.person.name }}
{% if event.organisation %}
for {{ event.organisation.name }}
{% endif %}
</h5>
{% endif %}
{% if not event.cancelled and event.description %}
<p>{{ event.description|linebreaksbr }}</p>
{% endif %}
{% include 'partials/event_status.html' %}
</div>
<!---MIC-->
<div 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> </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>
{{ event.person.name }}
{% if event.organisation %}
for {{ event.organisation.name }}
{% endif %}
</h5>
{% endif %} {% endif %}
{% if not event.cancelled and event.description %} {% elif event.is_rig %}
<p>{{ event.description|linebreaksbr }}</p> <span class="fas fa-exclamation"></span>
{% endif %} {% endif %}
{% include 'partials/event_status.html' %} </div>
</td> </div>
<!---MIC--> {% endfor %}
<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-exclamation"></span>
{% endif %}
</td>
</tr>
{% empty %}
<tr class="bg-warning">
<td colspan="4">No events found</td>
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>

View File

@@ -80,7 +80,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: 'localhost:8000' proxy: 'localhost:8000'