132 lines
7.2 KiB
HTML
132 lines
7.2 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load post_helpers %}
|
|
|
|
{% block content %}
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto w-full px-4 my-8 flex-1">
|
|
<h1 class="page-title">News</h1>
|
|
<div class="sm:flex sm:flex-row-reverse justify-center">
|
|
<aside class="sm:w-2/5 sm:max-w-xs sm:pl-4 lg:pl-8 my-8 sm:my-0">
|
|
<div class="z-10 fixed sm:sticky top-0 sm:top-4 lg:top-8 left-0 w-full h-full sm:h-auto bg-black sm:bg-transparent bg-opacity-70 flex sm:block items-center justify-center"
|
|
x-show="showModal || $screen('sm')"
|
|
x-transition:enter="transition duration-300 ease-out"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition duration-150 ease-in"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
>
|
|
<div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 rounded bg-white sm:shadow-lg"
|
|
@click.outside="showModal = ! showModal"
|
|
x-show="showModal || $screen('sm')"
|
|
x-transition:enter="transition transform ease-out duration-300"
|
|
x-transition:enter-start="scale-110 opacity-0"
|
|
x-transition:enter-end="scale-100 opacity-100"
|
|
x-transition:leave="transition transform ease-in duration-150"
|
|
x-transition:leave-start="scale-100 opacity-100"
|
|
x-transition:leave-end="scale-110 opacity-0"
|
|
>
|
|
<div class="flex justify-between items-center mb-2">
|
|
<h2 class="text-gray-800 sm:section-title sm_section-title-margins sm:w-full">
|
|
<span class="mr-1 text-gray-400 sm:hidden">
|
|
<i class="fas fa-filter"></i>
|
|
</span>
|
|
Auswahl einschränken
|
|
</h2>
|
|
<div class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 sm:hidden cursor-pointer" @click="showModal = false">
|
|
<i class="far fa-times"></i>
|
|
</div>
|
|
</div>
|
|
<form action="" method="POST" class="grid grid-cols-1 gap-2 sm:gap-4" x-data="{ selectedYear: '' }">
|
|
{% csrf_token %}
|
|
|
|
{% for message in messages %}
|
|
<div class="alert alert-danger">
|
|
<i class="alert-icon fas fa-exclamation-circle"></i>
|
|
<h2 class="alert-title">Fehler:</h2>
|
|
<div class="alert-body">{{message}}</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<label class="block">
|
|
<span class="text-gray-700">Jahr</span>
|
|
<select class="block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
|
x-model="selectedYear"
|
|
id="id_year"
|
|
name="year"
|
|
>
|
|
{% for elem in formset.year %}
|
|
{% if forloop.first %}
|
|
<option value="">Alle</option>
|
|
{% else %}
|
|
{{ elem }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label
|
|
x-show="selectedYear != ''"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
>
|
|
<span class="text-gray-700">Monat</span>
|
|
<select class="block w-full mt-1 rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
|
id="id_month"
|
|
name="month"
|
|
>
|
|
{% for elem in formset.month %}
|
|
{% if forloop.first %}
|
|
<option value=""></option>
|
|
{% else %}
|
|
{{ elem }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
<label class="inline-flex items-center">
|
|
<input type="checkbox" id="compact_view" name="checkbox" value="compact_view" {% if compact_view %} checked {% endif %} class="rounded border-gray-300 text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50">
|
|
<span class="ml-2 text-gray-700">Kompakte Ansicht</span>
|
|
</label>
|
|
<label class="inline-flex items-center">
|
|
<input type="checkbox" id="fet_meeting_only" name="checkbox" value="fet_meeting_only" {% if fet_meeting_only %} checked {% endif %} class="rounded border-gray-300 text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 focus:ring-opacity-50">
|
|
<span class="ml-2 text-gray-700">nur FET-Sitzungen</span>
|
|
</label>
|
|
<input type="submit" class="block btn btn-primary" value="Anzeigen" name="btn_input">
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
<button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker text-blue-50 shadow-lg text-2xl rounded sm:hidden"
|
|
@click="showModal = true"
|
|
x-show="! showModal"
|
|
x-transition:enter="transition duration-100 ease-in"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition duration-100 ease-out"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
>
|
|
<i class="fas fa-filter p-2"></i>
|
|
</button>
|
|
</aside>
|
|
|
|
<section class="my-8 sm:my-0 sm:w-3/5 xl:w-2/5 flex flex-col gap-4">
|
|
{% if compact_view %}
|
|
{% for post in posts %}
|
|
{% include 'posts/partials/_posts_hero_compact.html' %}
|
|
{% endfor %}
|
|
{% else %}
|
|
{% for post in posts %}
|
|
{% include 'posts/partials/_posts_hero.html' %}
|
|
{% endfor %}
|
|
{% endif %}
|
|
</section>
|
|
</div>
|
|
</main>
|
|
{% endblock %}
|