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

Update Redesign to v0.5.1-beta

Browse Source
This commit is contained in:
Patrick Mayr
2022-01-06 00:55:35 +00:00
parent 3ff497c147
commit 411a46e3d5
15 changed files with 2116 additions and 1243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
fet2020/templates/posts/show.html
View File

@@ -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:&Tab;{{ post.event_start|date }} um {{ post.event_start|time }} Uhr</li>
<li>Ende:&Tab;{{ 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">