eventcally/project/templates/widget/event_date/list.html

{% extends "layout_widget.html" %}
{% from "_macros.html" import render_event_date_instance, render_form_styles, render_form_scripts, render_pagination, render_event_warning_pills, render_event_warning_pills, render_place %}

{%- block title -%}
{{ _('Widget') }}
{%- endblock -%}

{% block styles %}
{{ super() }}
{{ render_form_styles() }}
{% endblock %}

{% block header_before_site_js %}
{{ render_form_scripts() }}
<script>
    function scrollParentToTop() {
        if ('parentIFrame' in window) {
            parentIFrame.scrollToOffset(0,0);
        }
    }

    function trackAnalyticsEvent(data) {
        if ('parentIFrame' in window) {
            parentIFrame.sendMessage({'type': 'OVEDA_ANALYTICS_EVENT', 'data': data});
        }
    }

    window.iFrameResizer = {
        onReady: function() {
            if (document.location.search.length) {
                scrollParentToTop();
            }

            trackAnalyticsEvent({'event':'pageView', 'url':document.location.href});
        }
    }

    $(function () {
        $("a.stretched-link").click(function(){
            trackAnalyticsEvent({'event':'linkClick', 'url':this.href});
            return true;
        });
    });
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.contentWindow.min.js" integrity="sha512-14SY6teTzhrLWeL55Q4uCyxr6GQOxF3pEoMxo2mBxXwPRikdMtzKMYWy2B5Lqjr6PHHoGOxZgPaxUYKQrSmu0A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
{%- endblock -%}
{% block content %}

    <form action="{{ request.url }}" class="form-inline mb-4" method="GET" autocomplete="off">
        {{ form.hidden_tag() }}

        <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
                <span class="input-group-text">{{ form.date_from.label.text }}</span>
            </div>
            {{ form.date_from(**{"class":"form-control datepicker", "data-range-to":"#date_to"})|safe }}
        </div>

        <div class="input-group mb-2 mr-sm-2">
          <div class="input-group-prepend">
              <span class="input-group-text">{{ form.date_to.label.text }}</span>
          </div>
          {{ form.date_to(class="form-control datepicker")|safe }}
        </div>

        {% if form.category_id %}
        <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
                <span class="input-group-text">{{ form.category_id.label.text }}</span>
            </div>
            {{ form.category_id(class="form-control")|safe }}
        </div>
        {% endif %}

        <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
                <span class="input-group-text">{{ form.keyword.label.text }}</span>
            </div>
            {{ form.keyword(class="form-control")|safe }}
        </div>

        <button type="submit" class="btn btn-primary mb-2">{{ _('Find') }}</button>
    </form>

    {% for date in dates %}

    <!-- Desktop -->
    <div class="row mb-3 d-none d-sm-block">
        <div class="col-sm">
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-8">
                            <h5 class="card-title">{{ date.event.name }}{{ render_event_warning_pills(date.event) }}</h5>
                            <h6 class="card-subtitle mb-2 text-body"><i class="fa fa-calendar"></i> {{ render_event_date_instance(date.start, date.allday, 'medium') }}</h6>
                            {% if date.event.description %}
                                <p class="card-text">{{ date.event.description | truncate(200) }}</p>
                            {% endif %}
                            {% 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>
                            {% else %}
                                <small class="text-muted mr-2"><i class="fa fa-server"></i> {{ date.event.organizer.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', au_short_name=admin_unit.short_name, id=date.id) }}" target="_blank" rel="noopener noreferrer" class="stretched-link"></a>
                        </div>
                        <div class="col-sm-4 text-right">
                            {% if date.event.photo_id %}
                                <img src="{{ url_for_image(date.event.photo, s=200) }}" 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">
                <div>
                    {% if date.event.photo_id %}
                        <img src="{{ url_for_image(date.event.photo, s=500) }}" class="card-img-top" style="object-fit: cover; height: 40vw;" />
                    {% endif %}
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-12">
                            <h5 class="card-title">{{ date.event.name }}{{ render_event_warning_pills(date.event) }}</h5>
                            <h6 class="card-subtitle mb-2 text-body"><i class="fa fa-calendar"></i> {{ render_event_date_instance(date.start, date.allday, 'medium') }}</h6>
                            {% if date.event.description %}
                                <p class="card-text">{{ date.event.description | truncate(100) }}</p>
                            {% endif %}
                            {% 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>
                            {% else %}
                                <small class="text-muted mr-2"><i class="fa fa-server"></i> {{ date.event.organizer.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', au_short_name=admin_unit.short_name, id=date.id) }}" target="_blank" rel="noopener noreferrer" class="stretched-link"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {% endfor %}

    {{ render_pagination(pagination) }}

    <button type="button" class="btn btn-outline-secondary d-print-none btn-print"><i class="fa fa-print"></i> {{ _('Print') }}</button>

{% endblock %}