eventcally/templates/widget/infoscreen/read.html

{% extends "layout.html" %}
{% from "_macros.html" import render_widget_styles, render_location, render_location_prop, render_logo, render_pagination, render_event_status_pill, render_place, render_events_sub_menu %}
{% block title %}
{{ admin_unit.name }} Infoscreen
{% endblock %}
{% block styles %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='infoscreen.css')}}" />
{{ render_widget_styles(styles) }}
{% endblock %}
{% block navbar %}
{% endblock %}
{% block metas %}
<meta http-equiv="refresh" content="600"/>
<meta name="apple-mobile-web-app-capable" content="yes">
{% endblock %}
{% block content_container_attribs %}class="h-100"{% endblock %}
{% block content %}

<div class="container-fluid d-flex h-100 flex-column p-0">

    <div class="container-fluid m-0 bg-light" style="overflow:hidden;padding: 0.8rem;">
        <div class="row h-100">
            <div class="col-auto h-100">
                {% if admin_unit.logo_id %}
                <img src="{{ url_for('image', id=admin_unit.logo_id) }}" class="img-fluid"
                    style="max-height:10vmin;" />
                {% endif %}
            </div>
            <div class="col h-100">
                <h1>Veranstaltungen</h1>
                <h2>{{ admin_unit.name }}</h2>
            </div>
        </div>
    </div>

    <div class="flex-fill d-flex justify-content-start" style="overflow:hidden;padding:0;">

        <div id="carousel" class="carousel slide h-100 w-100" data-ride="carousel" data-interval="20000" data-keyboard="false" data-pause="false">
            <ol class="carousel-indicators">
                {% for date in dates %}
                <li data-target="#carousel" data-slide-to="{{loop.index}}"
                    {%if loop.first %}class="active" {% endif %}></li>
                {% endfor %}
            </ol>
            <div class="carousel-inner">
                {% for date in dates %}
                <div class="carousel-item  {%if loop.first %}active{% endif %}">
                    <div class="container-fluid h-100">
                        <div class="row">
                            {% if date.event.photo_id %}
                            <div class="col-auto h-100" style="padding:1rem">
                                <img src="{{ url_for('image', id=date.event.photo_id) }}" class="img-fluid" style="object-fit: cover; max-width:20vmin;" />
                            </div>
                            {% endif %}
                            <div class="col" style="padding:1rem">
                                <h3>{{ date.event.name }}{{ render_event_status_pill(date.event) }}</h3>
                                <p>{{ date.event.description | truncate(300) }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-auto h-100" style="padding:1rem">
                                <img src="{{ qrcode(url_for('event_date', id=date.id, src='is', _external=True)) }}" style="width:20vmin;">
                            </div>
                            <div class="col" style="padding:1rem">
                                <h4><i class="fa fa-calendar"></i> {{ date.start | dateformat('EEEE') }}, {{ date.start | dateformat('medium') }} {{ date.start | timeformat('short') }} Uhr</h4>
                                {% if date.event.admin_unit_id != params.admin_unit_id %}
                                    <h4><i class="fa fa-database"></i> {{ date.event.admin_unit.name }}</h4>
                                {% endif %}
                                <h4><i class="fa fa-map-marker"></i> {{ date.event.event_place.name }}, {{ render_location(date.event.event_place.location) }}</h4>
                                <h4><i class="fa fa-arrow-left"></i> Scanne den QR-Code mit deinem Handy für mehr Infos!</h4>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="container-fluid m-0 bg-light" style="overflow:hidden;padding: 0.8rem;">
        <div class="row h-100">
            <div class="col-auto h-100">
                <img src="{{ url_for('static', filename='img/landing-page/machmit.jpg')}}"
                    class="img-fluid rounded-circle" style="max-height:15vmin;" />
            </div>
            <div class="col my-auto">
                <div style="font-size: 1.2rem;">
                    <em>MachMit!</em> und trage die Veranstaltungen deines Vereins oder Unternehmens ein! Scanne den QR-Code mit deinem Handy!
                    <i class="fa fa-arrow-right"></i>
                </div>
            </div>
            <div class="col-auto h-100">
                <img src="{{ qrcode(url_for('home', src='is', _external=True)) }}" style="max-height:15vmin;">
            </div>
        </div>
    </div>

</div>

{% endblock %}
{% block footer %}
{% endblock %}