eventcally/templates/widget/event_date/list.html

{% extends "layout.html" %}
{% from "_macros.html" import render_event_dates_filter_form, render_pagination, render_event_status_pill, render_event_status_pill, render_place, render_events_sub_menu %}
{% block title %}
{{ _('Widget') }}
{% endblock %}
{% block styles %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='widget.css')}}" />
{% endblock %}
{% block navbar %}
{% endblock %}
{% block content %}

    {{ render_event_dates_filter_form(form) }}

    {% for date in dates %}

    <!-- Desktop -->
    <div class="row mb-3 d-none d-sm-block">
        <div class="col-sm">
            <div class="card shadow">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-8">
                            <h5 class="card-title">{{ date.event.name }}{{ render_event_status_pill(date.event) }}</h5>
                            <h6 class="card-subtitle mb-2 text-body"><i class="fa fa-calendar"></i> {{ date.start | dateformat('medium') }} {{ date.start | timeformat('short') }}</h6>
                            <p class="card-text">{{ date.event.description | truncate(200) }}</p>
                            {% if date.event.admin_unit_id != params.admin_unit_id %}
                                <small class="text-muted mr-2"><i class="fa fa-database"></i> {{ date.event.admin_unit.name }}</small>
                            {% endif %}
                            <small class="text-muted"><i class="fa fa-map-marker"></i> {{ date.event.event_place.name }}</small>
                            <a href="{{ url_for('widget_event_date', id=date.id) }}" class="stretched-link"></a>
                        </div>
                        <div class="col-sm-4 text-right">
                            {% if date.event.photo_id %}
                                <img src="{{ url_for('image', id=date.event.photo_id) }}" style="object-fit: cover; width: 200px;" />
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Mobile -->
    <div class="row mb-3 d-sm-none">
        <div class="col-sm">
            <div class="card shadow">
                <div>
                    {% if date.event.photo_id %}
                        <img src="{{ url_for('image', id=date.event.photo_id) }}" class="card-img-top" style="object-fit: cover; height: 20vh;" />
                    {% endif %}
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <h5 class="card-title">{{ date.event.name }}{{ render_event_status_pill(date.event) }}</h5>
                            <h6 class="card-subtitle mb-2 text-body"><i class="fa fa-calendar"></i> {{ date.start | dateformat('medium') }} {{ date.start | timeformat('short') }}</h6>
                            <p class="card-text">{{ date.event.description | truncate(100) }}</p>
                            {% if date.event.admin_unit_id != params.admin_unit_id %}
                                <small class="text-muted mr-2"><i class="fa fa-database"></i> {{ date.event.admin_unit.name }}</small>
                            {% endif %}
                            <small class="text-muted"><i class="fa fa-map-marker"></i> {{ date.event.event_place.name }}</small>
                            <a href="{{ url_for('widget_event_date', id=date.id) }}" class="stretched-link"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% endfor %}

    {{ render_pagination(pagination) }}

{% endblock %}