bofh/fet2020
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

first implementation of new layout

Browse Source
This commit is contained in:
Patrick Mayr
2021-11-18 13:11:39 +00:00
parent acdf72dd88
commit 7c10903ffc
28 changed files with 205330 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
fet2020/templates/posts/index.html
View File

@@ -1,7 +1,132 @@
{% extends 'layout.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"
>
</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">
<option value="" selected></option>
<option value="1">Jänner</option>
<option value="2">Februar</option>
<option value="3">März</option>
<option value="4">April</option>
<option value="5">Mai</option>
<option value="6">Juni</option>
<option value="7">Juli</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Dezember</option>
</select>
</label>
<label class="inline-flex items-center">
<input type="checkbox" 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" 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">
</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>
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell medium-8">
@@ -37,21 +162,5 @@
</div>
</div>
</form>
<div class="grid-x">
<div class="cell medium-8">
{% 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 %}
</div>
</div>
</div>
{% endblock %}