PyRIGS/RIGS/templates/partials/event_table.html

{% load namewithnotes from filters %}
<style>
#event_table {
    display: grid;
    grid-template-columns: 0.5fr 1fr 4fr 1fr;
    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;
}
@media (max-width: 600px) {
  #event_table {
    grid-template-columns: 1fr;
  }
  .eventgrid {
    grid-column: 1/1;
    padding: 0.5em;
  }
  .grid-header {
    display: none;
  }
  #event_dates {
    order: 2;
  }
}
@media (max-width: 900px) {
  #event_table {
    grid-template-columns: 0.5fr 1fr;
    column-gap: 0.5em;
  }
  .eventgrid {
    grid-column: 1/3;
  }
  #event_dates {
    grid-row: 2;
    grid-column: 1;
  }
  #event_number {
    grid-row: 1;
    grid-column: 1;
  }
  #event_mic {
    grid-column: 2;
  }
}
</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 %}
                    bg-secondary
                    {% elif not event.is_rig %}
                    bg-info
                    {% elif not event.mic %}
                    bg-danger
                    {% elif event.confirmed and event.authorised %}
                        {% if event.dry_hire or event.riskassessment %}
                            bg-success
                        {% else %}
                            bg-warning
                        {% endif %}
                    {% else %}
                    bg-warning
                    {% endif %}" {% if event.cancelled %}style="opacity: 50% !important;"{% endif %} id="event_row">
        <!---Number-->
        <div class="font-weight-bold d-none d-sm-block" id="event_number">{{ event.display_id }}</div>
        <!--Dates & Times-->
        <div id="event_dates">
            <span class="text-nowrap attribute">Start: <strong>{{ event.start_date|date:"D d/m/Y" }}</strong>
            {% if event.has_start_time %}
                {{ 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 %}
                </span>
            {% endif %}
            {% if not event.cancelled %}
                {% if event.meet_at %}
                    <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 %}
        </div>
        <!---Details-->
        <div 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>
                    {{ 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">
            <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>