Update Redesign to v0.5.1-beta
This commit is contained in:
121
fet2020/static/img/FET-Logo-2014_64_dark.svg
Normal file
121
fet2020/static/img/FET-Logo-2014_64_dark.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 78 KiB |
121
fet2020/static/img/FET-Logo-2014_64_light.svg
Normal file
121
fet2020/static/img/FET-Logo-2014_64_light.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
File diff suppressed because it is too large
Load Diff
@@ -9,7 +9,7 @@
|
||||
{% csrf_token %}
|
||||
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-danger">
|
||||
<div class="alert alert-success">
|
||||
<i class="alert-icon fas fa-check-circle"></i>
|
||||
<h2 class="alert-title">Fehler:</h2>
|
||||
<div class="alert-body">{{ message }}</div>
|
||||
@@ -17,12 +17,12 @@
|
||||
{% endfor %}
|
||||
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Username</span>
|
||||
<input type="text" name="username" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 placeholder-gray-400" required="required">
|
||||
<span class="text-gray-700 dark:text-gray-200">Username</span>
|
||||
<input type="text" name="username" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required="required">
|
||||
</label>
|
||||
<label class="block">
|
||||
<span class="text-gray-700">Passwort</span>
|
||||
<input type="password" name="password" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50 placeholder-gray-400" required="required">
|
||||
<span class="text-gray-700 dark:text-gray-200">Passwort</span>
|
||||
<input type="password" name="password" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required="required">
|
||||
</label>
|
||||
<input type="submit" class="block btn btn-primary" value="Anmelden">
|
||||
</form>
|
||||
|
||||
@@ -15,17 +15,15 @@
|
||||
<meta property="og:title" content="Fachschaft Elektrotechnik (FET)">
|
||||
<meta name="twitter:title" content="Fachschaft Elektrotechnik (FET)">
|
||||
<meta name="theme-color" content="#006599">
|
||||
<!-- third-generation iPad with high-resolution Retina display: -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="#">
|
||||
<!-- iPhone with high-resolution Retina display: -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="#">
|
||||
<!-- first- and second-generation iPad: -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="#">
|
||||
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
|
||||
<link rel="apple-touch-icon-precomposed" href="#">
|
||||
<!-- basic favicon -->
|
||||
<link rel="icon" href="#">
|
||||
<link rel="shortcut icon" type="image/png" href="{% static 'img/fet_logo_white.png' %}">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/fet_logo_white.png' %}">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="{% static 'img/fet_logo_white.png' %}">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="{% static 'img/fet_logo_white.png' %}">
|
||||
<link rel="manifest" href="{% static 'img/fet_logo_white.png' %}">
|
||||
<link rel="mask-icon" href="{% static 'img/fet_logo_white.png' %}" color="#006599">
|
||||
<link rel="shortcut icon" href="{% static 'img/fet_logo_white.png' %}">
|
||||
<meta name="apple-mobile-web-app-title" content="FET - Fachschaft Elektrotechnik">
|
||||
<meta name="application-name" content="FET - Fachschaft Elektrotechnik">
|
||||
<meta name="msapplication-TileColor" content="#2b5797">
|
||||
|
||||
<link rel="stylesheet" href="{% static 'styles.css' %}">
|
||||
<!-- FontAwesome Kit -->
|
||||
@@ -55,8 +53,9 @@
|
||||
<!-- NAVBAR -->
|
||||
<nav class="navbar" x-data="{ showNavBar: false }">
|
||||
<div>
|
||||
<a href="{% url 'home' %}">
|
||||
<img src="{% static 'img/logo2014_64.png' %}" alt="FET-Logo" class="navbar-logo">
|
||||
<a href="{% url 'home' %}">
|
||||
<img src="{% static 'img/FET-Logo-2014_64_light.svg' %}" alt="FET-Logo" class="navbar-logo p-2 dark:hidden">
|
||||
<img src="{% static 'img/FET-Logo-2014_64_dark.svg' %}" alt="FET-Logo" class="navbar-logo p-2 hidden dark:block">
|
||||
</a>
|
||||
<button class="navbar-toggle"
|
||||
@click="showNavBar = ! showNavBar"
|
||||
@@ -66,11 +65,11 @@
|
||||
<ul id="navBarContent" class="navbar-content sm:block"
|
||||
x-show="showNavBar || $screen('sm')"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="transform opacity-0"
|
||||
x-transition:enter-end="transform opacity-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-90"
|
||||
x-transition:enter-end="transform opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="transform opacity-100"
|
||||
x-transition:leave-end="transform opacity-0"
|
||||
x-transition:leave-start="transform opacity-100 scale-100"
|
||||
x-transition:leave-end="transform opacity-0 scale-90"
|
||||
>
|
||||
<li><a href="{% url 'posts:posts.index' %}">News</a></li>
|
||||
<li><a href="{% url 'members_view' 'A' %}">Fachschaft</a></li>
|
||||
@@ -86,8 +85,8 @@
|
||||
x-data="{ showPopupNav: false }"
|
||||
@click.outside="showPopupNav = false"
|
||||
>
|
||||
<div class="sm:inline-flex items-center divide-x divide-blue-200 bg-proprietary text-blue-50 rounded">
|
||||
<a class="hidden sm:block flex-1 px-2 py-1 hover:bg-proprietary-dark active:bg-proprietary-darker rounded-l" href="#"
|
||||
<div class="sm:inline-flex items-center divide-x divide-blue-200 dark:divide-proprietary-light bg-proprietary-dark text-blue-50 rounded">
|
||||
<a class="hidden sm:block flex-1 px-2 py-1 hover:bg-proprietary-dark dark:hover:bg-proprietary-darker active:bg-proprietary-dark dark:active:bg-proprietary-darker rounded-l" href="#"
|
||||
@click="showPopupNav = !showPopupNav"
|
||||
>
|
||||
{% if request.user.first_name %}
|
||||
@@ -96,9 +95,9 @@
|
||||
Hallo {{ request.user.username }}
|
||||
{% endif %}
|
||||
</a>
|
||||
<a class="hidden sm:block flex-0 px-2 py-1 hover:bg-proprietary-dark focus:bg-proprietary-darker rounded-r" href="{% url 'logout' %}?next={{ request.path }}"><i class="fa-solid fa-power-off"></i></a>
|
||||
<a class="hidden sm:block flex-0 px-2 py-1 hover:bg-proprietary-dark dark:hover:bg-proprietary-darker active:bg-proprietary-dark dark:active:bg-proprietary-darker rounded-r" href="{% url 'logout' %}?next={{ request.path }}"><i class="fa-solid fa-power-off"></i></a>
|
||||
</div>
|
||||
<div class="sm:block sm:absolute z-20 top-9 right-0 bg-white sm:shadow-md sm:rounded w-full"
|
||||
<div class="sm:block sm:absolute z-20 top-9 right-0 bg-white dark:bg-transparent dark:sm:bg-gray-700 sm:shadow-md sm:rounded w-full dark:sm:text-proprietary-lightest"
|
||||
x-show="showPopupNav || !$screen('sm')"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="transform origin-top opacity-0 scale-95"
|
||||
@@ -123,31 +122,31 @@
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
<footer class="bg-proprietary p-4 text-blue-100 flex-none">
|
||||
<ul class="flex justify-center mb-4 text-2xl">
|
||||
<li class="mx-4">
|
||||
<footer>
|
||||
<ul class="icon-list">
|
||||
<li>
|
||||
<a href="https://facebook.fet.at/"><i class="fab fa-facebook"></i></a>
|
||||
</li>
|
||||
<li class="mx-4">
|
||||
<li>
|
||||
<a href="https://instagram.fet.at/"><i class="fab fa-instagram"></i></a>
|
||||
</li>
|
||||
<li class="mx-4">
|
||||
<li>
|
||||
<a href="https://discord.fet.at/"><i class="fab fa-discord"></i></a>
|
||||
</li>
|
||||
<li class="mx-4">
|
||||
<li>
|
||||
<a href="https://telegram.fet.at/"><i class="fab fa-telegram"></i></a>
|
||||
</li>
|
||||
<li class="mx-4">
|
||||
<li>
|
||||
<a href="mailto:service@fet.at"><i class="fas fa-envelope"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="flex justify-center my-4">
|
||||
<div class="legal">
|
||||
<a href="{% url 'impressum' %}" class="text-center text-sm sm:text-base">Impressum</a>
|
||||
</div>
|
||||
<hr class="border-blue-300 -mx-4">
|
||||
<p class="mt-4 uppercase text-center text-sm sm:text-base">© {% now 'Y' %} FET - Alle Rechte vorbehalten.</p>
|
||||
<hr class="legal-divider">
|
||||
<p class="copyright">© {% now 'Y' %} FET - Alle Rechte vorbehalten.</p>
|
||||
</footer>
|
||||
<div class="text-center p-2 bg-gray-800 text-gray-400 font-light" x-data="{ counter: 0 }">
|
||||
<div class="super-duper-awesome-signature" x-data="{ counter: 0 }">
|
||||
<span :class="counter>=4 && 'text-purple-300'">Handcrafted </span>
|
||||
<span :class="counter>=5 && 'text-green-400'">with </span>
|
||||
<i class="fa-solid fa-heart" aria-label="love" @click="counter++" :class="counter>=2 ? 'text-proprietary hover:text-proprietary-dark' : 'text-red-600 hover:text-red-700'"></i>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<div class="jobsList">
|
||||
{% for job in job_postings %}
|
||||
{% if not forloop.first %}
|
||||
<hr class="border-gray-300">
|
||||
<hr>
|
||||
{% endif %}
|
||||
|
||||
{% include 'blackboard/partials/_show_job_posting.html' %}
|
||||
@@ -43,10 +43,10 @@
|
||||
</section>
|
||||
|
||||
{% else %}
|
||||
<section class="my-8 p-8 flex flex-col gap-2 items-center border-2 border-dashed rounded border-gray-300">
|
||||
<section class="my-8 p-8 flex flex-col gap-2 items-center border-2 border-dashed rounded border-gray-300 dark:border-gray-600">
|
||||
{% if bb_empty %}
|
||||
<div class="text-center text-gray-600">
|
||||
<i class="fa-solid fa-sparkles text-gray-400 text-2xl mb-4"></i>
|
||||
<div class="text-center text-gray-600 dark:text-gray-300">
|
||||
<i class="fa-solid fa-sparkles text-gray-400 dark:text-gray-400 text-2xl mb-4"></i>
|
||||
{{ bb_empty.content|safe }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@@ -6,15 +6,15 @@
|
||||
{% block content %}
|
||||
<!--Hero section-->
|
||||
<section class="xl:h-[30rem] relative z-0 w-full h-56 sm:h-80 lg:h-96 bg-cover-image bg-cover bg-center bg-no-repeat flex-none">
|
||||
<div class="absolute z-10 w-full h-full bg-blue-50 opacity-60"></div>
|
||||
<div class="absolute z-10 w-full h-full bg-blue-50 dark:bg-black opacity-60"></div>
|
||||
<div class="relative container px-4 mx-auto z-20 w-full h-full flex flex-wrap items-center gap-x-2">
|
||||
<h1 class="w-3/5 flex-1 uppercase font-semibold text-xl sm:text-2xl lg:text-3xl text-center text-gray-900">
|
||||
<h1 class="w-3/5 flex-1 uppercase font-semibold text-xl sm:text-2xl lg:text-3xl text-center text-gray-900 dark:text-gray-100">
|
||||
<span class="hidden">Willkommen bei der </span><span>Fachschaft</span><br>
|
||||
<span class="text-proprietary-darker">Elektrotechnik</span>
|
||||
<span class="text-proprietary-darker dark:text-proprietary-lightest">Elektrotechnik</span>
|
||||
</h1>
|
||||
<div class="hidden sm:block flex-none w-2/5 lg:w-1/3 bg-white p-2 lg:p-4 rounded shadow-xl">
|
||||
<h2 class="section-title sm:text-left"><i class="fas fa-comments text-gray-300 mr-2"></i>Events</h2>
|
||||
<div class="-mb-2 text-gray-700 text-sm md:text-base">
|
||||
<div class="hidden sm:block flex-none w-2/5 lg:w-1/3 bg-white dark:bg-gray-800 p-2 lg:p-4 rounded shadow-xl dark:border-2 dark:border-gray-700">
|
||||
<h2 class="section-title sm:text-left"><i class="fas fa-comments text-gray-300 dark:text-gray-400 mr-2"></i>Events</h2>
|
||||
<div class="-mb-2 text-gray-700 dark:text-gray-200 text-sm md:text-base">
|
||||
|
||||
{% if featured_event %}
|
||||
{% with post=featured_event %}
|
||||
@@ -81,19 +81,19 @@
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="infoBox" class="sticky bottom-4 p-4 rounded-lg shadow-lg bg-gray-600 text-gray-200 flex gap-x-4 items-center leading-none">
|
||||
<div id="infoBox" class="sticky bottom-4 p-4 rounded-lg shadow-lg bg-gray-600 dark:bg-gray-800 text-gray-200 dark:text-gray-300 flex gap-x-4 items-center leading-none dark:border-2 dark:border-gray-700">
|
||||
<div class="flex-none relative">
|
||||
<span class="absolute flex h-3 w-3 right-0 top-0">
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-500 opacity-80"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-blue-500"></span>
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-600 dark:bg-proprietary opacity-80"></span>
|
||||
<span class="relative inline-flex rounded-full h-3 w-3 bg-sky-600 dark:bg-proprietary"></span>
|
||||
</span>
|
||||
<i class="fab fa-discord text-4xl"></i>
|
||||
</div>
|
||||
<a href="https://discord.fet.at/" class="flex-1">
|
||||
FET Discord-Server<br>
|
||||
<span class="hidden lg:inline text-sm text-gray-300">Du hast Fragen zum Studium oder möchtest dich einfach mich anderen Studierenden austauschen? </span><span class="text-sm text-gray-300">Klicke hier zum Beitreten <span class="hidden sm:inline"><i class="fa-solid fa-angle-right"></i></span></span>
|
||||
<span class="hidden lg:inline text-sm text-gray-300 dark:text-gray-400">Du hast Fragen zum Studium oder möchtest dich einfach mich anderen Studierenden austauschen? </span><span class="text-sm text-gray-300 dark:text-gray-400">Klicke hier zum Beitreten <span class="hidden sm:inline"><i class="far fa-angle-right"></i></span></span>
|
||||
</a>
|
||||
<button id="infoBox-closeButton" class="flex-none self-stretch px-2 -mr-2" onclick="hideInfoBox()"><i class="fas fa-times text-gray-400"></i></button>
|
||||
<button id="infoBox-closeButton" class="flex-none self-stretch px-2 -mr-2" onclick="hideInfoBox()"><i class="fas fa-times text-gray-300 dark:text-gray-500"></i></button>
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
||||
@@ -18,8 +18,8 @@
|
||||
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 sm:p-0 bg-white sm:bg-transparent rounded sm:rounded-none"
|
||||
@click.outside="showModal = false"
|
||||
<div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 sm:p-0 bg-white dark:bg-gray-700 sm:bg-transparent rounded sm:rounded-none"
|
||||
@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"
|
||||
@@ -29,14 +29,14 @@
|
||||
x-transition:leave-end="scale-110 opacity-0"
|
||||
>
|
||||
<div class="flex justify-between items-center mb-2 sm:hidden">
|
||||
<h2 class="text-gray-800 sm:section-title sm_section-title-margins sm:w-full">
|
||||
<h2 class="text-gray-800 dark:text-gray-100 sm:section-title sm_section-title-margins sm:w-full">
|
||||
<span class="mr-1 text-gray-400 sm:hidden">
|
||||
<i class="fa-solid fa-bars"></i>
|
||||
</span>
|
||||
Kategorien
|
||||
</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 class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 sm:hidden cursor-pointer" @click="showModal = false">
|
||||
<i class="far fa-times"></i>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="sideBarNav">
|
||||
@@ -128,9 +128,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<button id="modal-trigger-1" class="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 && !$screen('sm')"
|
||||
<button class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 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"
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
{% load softhyphen_tags %}
|
||||
{% load static %}
|
||||
|
||||
<section class="flex-grow max-w-prose my-8 sm:my-0 text-justify text-gray-800">
|
||||
<section class="flex-grow max-w-prose my-8 sm:my-0 text-justify text-gray-800 dark:text-gray-300">
|
||||
<!-- Alternativtext auf jede Person anpassen: Name im alt="" dynamisch erzeugen -->
|
||||
<img loading="lazy" src="{{ member.image.portrait.url }}" alt="Portraitfoto von {{ member.firstname }} {{ member.surname }}" class="md:float-left w-36 mr-2 mb-2">
|
||||
<div x-data="{ expandList: false }">
|
||||
<h2 class="mb-2 text-lg text-gray-900 text-left">{{ member.firstname }} {{ member.surname }}</h2>
|
||||
<h2 class="mb-2 text-lg text-gray-900 dark:text-gray-100 text-left">{{ member.firstname }} {{ member.surname }}</h2>
|
||||
<div class="mb-2">
|
||||
Spitzname: {{ member.nickname }} <br>
|
||||
Mailaccount: {{ member.mailaccount }} <br>
|
||||
@@ -32,7 +32,7 @@
|
||||
{% for jobm in active_jobs %}
|
||||
<li class="flex flex-row flex-wrap">
|
||||
<span>{{ jobm.job.name }}:</span>
|
||||
<span class="ml-2 text-gray-600">{{ jobm.job_start|date }} -</span>
|
||||
<span class="ml-2 text-gray-600 dark:text-gray-400">{{ jobm.job_start|date }} -</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@@ -48,7 +48,7 @@
|
||||
{% for jobm in inactive_jobs %}
|
||||
<li class="flex flex-row flex-wrap">
|
||||
<span>{{ jobm.job.name }}:</span>
|
||||
<span class="ml-2 text-gray-600">{{ jobm.job_start|date }} - {{ jobm.job_end|date }}</span>
|
||||
<span class="ml-2 text-gray-600 dark:text-gray-400">{{ jobm.job_start|date }} - {{ jobm.job_end|date }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
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"
|
||||
<div class="max-w-sm sm:w-full mx-4 sm:mx-0 p-4 rounded bg-white dark:bg-gray-800 sm:shadow-lg sm:dark:border-2 sm:dark:border-gray-700"
|
||||
@click.outside="showModal = ! showModal"
|
||||
x-show="showModal || $screen('sm')"
|
||||
x-transition:enter="transition transform ease-out duration-300"
|
||||
@@ -28,14 +28,14 @@
|
||||
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">
|
||||
<h2 class="text-gray-800 dark:text-gray-100 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 class="ml-4 -mr-2 px-2 rounded text-xl text-gray-600 dark:text-gray-400 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: '' }">
|
||||
@@ -50,9 +50,9 @@
|
||||
{% 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"
|
||||
<span class="text-gray-700 dark:text-gray-200">Jahr</span>
|
||||
<select class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
|
||||
x-model="selectedYear"
|
||||
id="id_year"
|
||||
name="year"
|
||||
>
|
||||
@@ -74,8 +74,8 @@
|
||||
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"
|
||||
<span class="text-gray-700 dark:text-gray-200">Monat</span>
|
||||
<select class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-sky-700 focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50"
|
||||
id="id_month"
|
||||
name="month"
|
||||
>
|
||||
@@ -89,21 +89,21 @@
|
||||
</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>
|
||||
<input type="checkbox" id="compact_view" name="checkbox" value="compact_view" {% if compact_view %} checked {% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-200">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>
|
||||
<input type="checkbox" id="fet_meeting_only" name="checkbox" value="fet_meeting_only" {% if fet_meeting_only %} checked {% endif %} class="rounded border-gray-300 dark:border-none text-proprietary shadow-sm focus:border-blue-300 focus:ring focus:ring-offset-0 focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
|
||||
<span class="ml-2 text-gray-700 dark:text-gray-200">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"
|
||||
<button id="modal-trigger-1" class="z-10 trigger fixed bottom-4 right-4 bg-proprietary-darker dark:bg-sky-500 text-blue-50 dark:text-sky-900 shadow-lg text-2xl rounded sm:hidden"
|
||||
@click="showModal = true"
|
||||
x-show="! showModal"
|
||||
x-show="!showModal"
|
||||
x-transition:enter="transition duration-100 ease-in"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<a href="{{ post.url }}" class="block">
|
||||
<h3 class="text-gray-700">{{ post.title }}</h3>
|
||||
<p class="my-1 text-sm text-gray-600">
|
||||
<i class="fas fa-calendar-alt text-gray-500"></i>
|
||||
<span>{{ post.event_start|date }} · {{ post.event_start|time }} Uhr</span>
|
||||
<h3 class="text-gray-700 dark:text-gray-200">{{ post.title }}</h3>
|
||||
<p class="my-1 text-sm text-gray-600 dark:text-gray-300">
|
||||
<i class="fas fa-calendar-alt text-gray-500 dark:text-gray-400"></i>
|
||||
<span>{{ post.event_start|date }} · {{ post.event_start|time }} Uhr</span>
|
||||
</p>
|
||||
</a>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<div class="my-2">
|
||||
<a href="{{ post.url }}">
|
||||
<h3 class="">{{ post.title }}</h3>
|
||||
<p class="py-1 text-sm lg:text-base text-gray-600">
|
||||
<i class="fas fa-calendar-alt text-gray-500"></i>
|
||||
<p class="py-1 text-sm lg:text-base text-gray-600 dark:text-gray-300">
|
||||
<i class="fas fa-calendar-alt text-gray-500 dark:text-gray-400"></i>
|
||||
<span>{{ post.event_start|date }} · {{ post.event_start|time }} Uhr</span>
|
||||
</p>
|
||||
</a>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<article class="bg-white rounded shadow transition-all duration-300 hover:shadow-md transform hover:scale-105">
|
||||
<article class="bg-white dark:bg-gray-800 rounded shadow transition-all duration-300 hover:shadow-md transform hover:scale-105">
|
||||
<a href="{{ post.url }}" class="block p-4">
|
||||
<div class="float-right px-2 py-0.5 rounded-full text-sm font-medium text-proprietary bg-blue-100">
|
||||
<div class="float-right px-2 py-0.5 rounded-full text-sm font-medium text-proprietary dark:text-blue-100 bg-blue-200 dark:bg-proprietary-dark">
|
||||
<i class="fa-solid fa-calendar-days mr-1"></i>
|
||||
<p style="margin-bottom: 0rem;">{{ post.date|date:"d. F Y" }}</p>
|
||||
</div>
|
||||
<h3 class="text-gray-800 leading-relaxed">{{ post.title|safe|truncatechars:60 }}</h3>
|
||||
<h3 class="text-gray-800 dark:text-gray-200 leading-relaxed">{{ post.title|safe|truncatechars:60 }}</h3>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
@@ -47,9 +47,9 @@
|
||||
</a>
|
||||
<section>
|
||||
<div class="mb-4 flex flex-col sm:flex-col gap-2 mx-auto">
|
||||
<ul class="px-4 sm:px-0 mb-2 flex flex-row justify-center gap-2 sm:gap-4 flex-wrap text-blue-700 dark:text-blue-200 text-sm uppercase tracking-wide sm:font-medium">
|
||||
<ul class="px-4 sm:px-0 mb-2 flex flex-row justify-center gap-2 sm:gap-4 flex-wrap text-sky-700 dark:text-blue-200 text-sm uppercase tracking-wide sm:font-medium">
|
||||
{% for t in post.tag_names %}
|
||||
<li class="inline-block py-1 px-2 bg-blue-100 dark:bg-blue-900 rounded-full"><a href="{% url 'posts:posts.tags' t %}">#{{ t }}</a></li>
|
||||
<li class="inline-block py-1 px-2 bg-sky-100 dark:bg-sky-900 rounded-full"><a href="{% url 'posts:posts.tags' t %}">#{{ t }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<h1 class="px-4 sm:px-0 text-lg sm:text-xl lg:text-3xl text-center sm:text-left font-medium text-gray-900 dark:text-gray-100 font-serif tracking-wider leading-normal" style="line-height: 1.5;">{{ post.title|tags_to_url }}</h1>
|
||||
@@ -105,21 +105,35 @@
|
||||
</div>
|
||||
<!-- <img src="img/article-cover-3.jpg" alt="" class="h-44 sm:h-56 lg:h-64 xl:h-80 w-full object-cover sm:rounded-md max-w-5xl mx-auto"> -->
|
||||
<div class="relative w-full h-44 sm:h-56 lg:h-64 xl:h-80 bg-center bg-no-repeat bg-cover sm:rounded-md mx-auto" style="background-image: url('{{ post.imageurl }}');">
|
||||
|
||||
{% if post.post_type != 'N' %}
|
||||
<div class="hidden absolute top-0 right-0 bg-white dark:bg-gray-900 rounded-bl p-2 bg-opacity-80 dark:bg-opacity-70 lg:flex items-center gap-2">
|
||||
<i class="flex-0 fa-solid fa-calendar-clock text-gray-800 dark:text-gray-200"></i>
|
||||
<span class="flex-1 text-sm text-gray-800 dark:text-gray-200">
|
||||
<div class="hidden lg:block absolute top-0 right-0 bg-white dark:bg-gray-900 rounded-bl p-2 bg-opacity-80 dark:bg-opacity-70 gap-2">
|
||||
<div class="items-center lg:flex gap-2">
|
||||
<i class="flex-none fa-solid fa-calendar-clock fa-fw text-gray-800 dark:text-gray-200"></i>
|
||||
<span class="flex-1 text-sm text-gray-800 dark:text-gray-200">
|
||||
Event-Start: {{ post.event_start|date }} um {{ post.event_start|time }} Uhr<br>
|
||||
Event-Ende: {{ post.event_end|date }} um {{ post.event_end|time }} Uhr
|
||||
</span>
|
||||
</div>
|
||||
<div class="items-center lg:flex gap-2">
|
||||
<i class="flex-none fa-solid fa-location-dot fa-fw text-gray-800 dark:text-gray-200"></i>
|
||||
<span class="flex-1 text-sm text-gray-800 dark:text-gray-200">
|
||||
Event-Ort: {{ post.event_place }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden absolute top-0 right-0 bg-white dark:bg-gray-900 rounded-bl p-2 bg-opacity-80 dark:bg-opacity-70 items-center gap-2">
|
||||
<i class="flex-none fa-solid fa-calendar-clock text-gray-800 dark:text-gray-200"></i>
|
||||
<span class="flex-1 text-sm text-gray-800 dark:text-gray-200">
|
||||
Event-Start: {{ post.event_start|date }} um {{ post.event_start|time }} Uhr<br>
|
||||
Event-Ende: {{ post.event_end|date }} um {{ post.event_end|time }} Uhr
|
||||
Event-Ende: {{ post.event_end|date }} um {{ post.event_end|time }} Uhr<br>
|
||||
Event-Ort: {{ post.event_place }}
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="mx-4 z-10">
|
||||
<article class="p-4 mt-4 sm:-mt-16 w-full max-w-prose mx-auto bg-white dark:bg-gray-900 rounded sm:dark:border dark:border-gray-800">
|
||||
<article class="p-4 mt-4 sm:-mt-16 w-full max-w-prose mx-auto bg-white dark:bg-gray-900 rounded dark:border-2 dark:border-gray-800">
|
||||
<!-- <div class="w-full flex justify-end">
|
||||
<div class="hidden lg:block max-w-max text-sm text-gray-600">
|
||||
Event-Start: 23. August 2021 um 18:00 Uhr<br>
|
||||
@@ -179,16 +193,17 @@
|
||||
|
||||
{% endif %}
|
||||
|
||||
<hr class="lg:hidden -mx-4 border-gray-200 dark:border-gray-800 border-1 my-4">
|
||||
<hr class="lg:hidden -mx-4 border-gray-200 dark:border-gray-800 dark:border my-4">
|
||||
<div class="lg:hidden">
|
||||
<h2 class="text-gray-800 dark:text-gray-200 font-medium"><i class="fa-solid fa-calendar-days mr-2 text-gray-400 dark:text-gray-500"></i>Termindetails:</h2>
|
||||
<ul class="text-base text-gray-700 dark:text-gray-300 my-1">
|
||||
<li>Start:	{{ post.event_start|date }} um {{ post.event_start|time }} Uhr</li>
|
||||
<li>Ende:	{{ post.event_end|date }} um {{ post.event_end|time }} Uhr</li>
|
||||
<li>Start: {{ post.event_start|date }} um {{ post.event_start|time }} Uhr</li>
|
||||
<li>Ende: {{ post.event_end|date }} um {{ post.event_end|time }} Uhr</li>
|
||||
<li>Ort: {{ post.event_place }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<hr class="-mx-4 border-gray-200 dark:border-gray-800 border-1 my-4">
|
||||
<div class="-m-4 flex divide-x divide-gray-200 dark:divide-gray-800 text-sm sm:text-base">
|
||||
<hr class="-mx-4 border-gray-200 dark:border-gray-800 dark:border my-4">
|
||||
<div class="-m-4 flex divide-x divide-gray-200 dark:divide-gray-800 dark:divide-x-2 text-sm sm:text-base">
|
||||
<a href="#" class="w-1/2 p-4 flex items-center gap-2">
|
||||
<i class="fa-solid fa-chevron-left text-gray-600 dark:text-gray-400"></i>
|
||||
<span class="text-gray-700 dark:text-gray-300 font-medium">Vorheriger Artikel</span>
|
||||
@@ -219,10 +234,10 @@
|
||||
|
||||
{% if related_posts %}
|
||||
<section class="mx-auto w-full px-4">
|
||||
<h2 class="my-4 sm:my-8 text-proprietary text-xl text-center uppercase tracking-wider">Weiterlesen</h2>
|
||||
|
||||
<h2 class="my-4 sm:my-8 text-proprietary dark:text-proprietary-lighter text-xl text-center uppercase tracking-wider">Weiterlesen</h2>
|
||||
|
||||
{% for post in related_posts %}
|
||||
<a href="{{ post.url }}" class="sm:flex-1 block rounded bg-white shadow-md bg-no-repeat bg-center h-56 transition-all ease-in-out duration-500 bg-scale-100 hover:bg-scale-120" style="background-image: url('{{ post.imageurl }}');">
|
||||
<a href="{{ post.url }}" class="sm:flex-1 block rounded bg-white dark:bg-gray-500 shadow-md bg-no-repeat bg-center h-56 transition-all ease-in-out duration-500 bg-scale-100 hover:bg-scale-120" style="background-image: url('{{ post.imageurl }}');">
|
||||
<div class="w-full h-full bg-gradient-to-t from-black rounded-md flex flex-col justify-end p-2">
|
||||
<h2 class="text-gray-50 line-clamp-2"><span aria-label="Link zum Artikel: "></span>{{ post.title | safe }}</h2>
|
||||
<span class="text-gray-300 text-sm">
|
||||
|
||||
Reference in New Issue
Block a user