244 lines
12 KiB
HTML
244 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% load post_helpers %}
|
|
{% load admin_urls %}
|
|
|
|
{% block extraheader %}
|
|
<meta content="{{ post.imageurl }}" property="og:image">
|
|
<meta content="{{ post.title }}" property="og:title">
|
|
<meta content="article" property="og:type">
|
|
<meta content="" property="og:url">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto w-full flex-1 my-8 sm:flex flex-col sm:px-4">
|
|
<a href="#" class="hidden z-20 fixed left-0 top-1/2 -mt-8 p-2 xl:flex items-center text-gray-400 rounded-md"
|
|
x-data="{ showPrevArticleButton : false }"
|
|
@mouseleave="showPrevArticleButton = false"
|
|
@mouseover="showPrevArticleButton = true"
|
|
>
|
|
<i class="fa-light fa-chevron-left text-5xl -m-2 p-2 bg-gray-100 rounded-md"></i>
|
|
<span class="text-gray-600 font-medium bg-gray-100 -m-2 p-2 rounded-r-md origin-left"
|
|
x-show="showPrevArticleButton"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90"
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
x-transition:leave-end="opacity-0 bg-opacity-0 transform scale-100"
|
|
>Vorheriger<br>Artikel</span>
|
|
</a>
|
|
<a href="{% url 'posts:posts.show' next %}" class="hidden z-20 fixed right-0 top-1/2 -mt-8 p-2 xl:flex items-center text-gray-400 rounded-md"
|
|
x-data="{ showNextArticleButton : false }"
|
|
@mouseleave="showNextArticleButton = false"
|
|
@mouseover="showNextArticleButton = true"
|
|
>
|
|
<span class="z-30 text-gray-600 font-medium bg-gray-100 -m-2 p-2 rounded-l-md text-right origin-right"
|
|
x-show="showNextArticleButton"
|
|
x-transition:enter="transition ease-out duration-300"
|
|
x-transition:enter-start="opacity-0 bg-opacity-0 transform scale-90"
|
|
x-transition:enter-end="opacity-100 transform scale-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 transform scale-100"
|
|
x-transition:leave-end="opacity-0 bg-opacity-0 transform scale-100"
|
|
>Nächster<br>Artikel</span>
|
|
<i class="fa-light fa-chevron-right text-5xl -m-2 p-2 bg-gray-100 rounded-md"></i>
|
|
</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 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 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 font-serif tracking-wider leading-normal" style="line-height: 1.5;">{{ post.title|tags_to_url }}</h1>
|
|
<div class="mx-auto max-w-max sm:mx-0 sm:max-w-none sm:flex justify-between items-center">
|
|
|
|
<div class="max-w-max flex flex-row justify-center sm:justify-start gap-2 self-center md:self-start">
|
|
|
|
{% if author_image and author %}
|
|
|
|
<img class="hidden sm:block w-12 rounded-full" src="{{ author_image }}" alt="Portraitfoto von {{ author.firstname }}">
|
|
<div class="sm:flex flex-col justify-evenly text-gray-600 text-sm sm:text-base">
|
|
<a href="{% url 'member' author.id %}" class="underline">{{ author.firstname }}</a>
|
|
<span class="sm:hidden"> am </span>
|
|
<span>{{ post.date|date:"d. F Y" }}</span>
|
|
</div>
|
|
|
|
{% elif post.author %}
|
|
|
|
<div class="sm:flex flex-col justify-evenly text-gray-600 text-sm sm:text-base">
|
|
<a class="underline">{{ post.author|capfirst }}</a>
|
|
<span class="sm:hidden"> am </span>
|
|
<span>{{ post.date|date:"d. F Y" }}</span>
|
|
</div>
|
|
|
|
{% else %}
|
|
|
|
<div class="sm:flex flex-col justify-evenly text-gray-600 text-sm sm:text-base">
|
|
<a class="underline">fet.at Redaktion</a>
|
|
<span class="sm:hidden"> am </span>
|
|
<span>{{ post.date|date:"d. F Y" }}</span>
|
|
</div>
|
|
|
|
{% endif %}
|
|
|
|
</div>
|
|
|
|
{% if request.user.is_authenticated %}
|
|
{% if post.post_type == 'N' %}
|
|
<a href="{% url 'admin:posts_news_change' post.id %}" class="hidden sm:block btn-small btn-primary">
|
|
<i class="fa-regular fa-pen-to-square mr-1"></i>Artikel bearbeiten
|
|
</a>
|
|
{% elif post.post_type == 'E' %}
|
|
<a href="{% url 'admin:posts_event_change' post.id %}" class="hidden sm:block btn-small btn-primary">
|
|
<i class="fa-regular fa-pen-to-square mr-1"></i>Event bearbeiten
|
|
</a>
|
|
{% elif post.post_type == 'F' %}
|
|
<a href="{% url 'admin:posts_fetmeeting_change' post.id %}" class="hidden sm:block btn-small btn-primary">
|
|
<i class="fa-regular fa-pen-to-square mr-1"></i>FET Sitzung bearbeiten
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
</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 rounded-bl p-2 bg-opacity-80 lg:flex items-center gap-2">
|
|
<i class="flex-0 fa-solid fa-calendar-clock text-gray-800"></i>
|
|
<span class="flex-1 text-sm text-gray-800">
|
|
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>
|
|
{% 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 rounded">
|
|
<!-- <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>
|
|
Event-Ende: 23. August 2021 um 20:00 Uhr
|
|
</div>
|
|
</div> -->
|
|
<div class="db-page-content-left">
|
|
<!-- Content from DB here: -->
|
|
|
|
{% if request.user.is_authenticated %}
|
|
{% if post.has_agenda %}
|
|
<a href="{{ ep_agenda_link }}">Agenda</a>
|
|
{% if filename_agenda %}
|
|
<a href="{% url 'posts:show_pdf_agenda' post.slug %}">
|
|
<i class="far fa-file-pdf"></i>
|
|
</a>
|
|
{% endif %}
|
|
<br>
|
|
{% endif %}
|
|
|
|
{% if post.has_protocol %}
|
|
<a href="{{ ep_protocol_link }}">Protokoll</a>
|
|
{% if filename_protocol %}
|
|
<a href="{% url 'posts:show_pdf_protocol' post.slug %}">
|
|
<i class="far fa-file-pdf"></i>
|
|
</a>
|
|
{% endif %}
|
|
<br>
|
|
<hr>
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
|
|
{% if post.has_agenda %}
|
|
<h2>Agenda</h2>
|
|
{{ post.agenda_html|safe }}
|
|
<hr>
|
|
{% elif post.body %}
|
|
{{ post.body|safe|add_internal_links|tags_to_url }}
|
|
{% endif %}
|
|
|
|
{% if request.user.is_authenticated and post.has_protocol %}
|
|
<h2>Protokoll</h2>
|
|
{{ post.protocol_html|safe }}
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if files %}
|
|
<hr>
|
|
Dokumente:
|
|
|
|
<ul>
|
|
{% for file in files %}
|
|
<li><a href="{{file.file_field.url}}" target="_blank">{{file.title}}</a></li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
{% endif %}
|
|
|
|
<hr class="lg:hidden -mx-4 border-gray-200 border-1 my-4">
|
|
<div class="lg:hidden">
|
|
<h2 class="text-gray-800 font-medium"><i class="fa-solid fa-calendar-days mr-2 text-gray-400"></i>Termindetails:</h2>
|
|
<ul class="text-base text-gray-700 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>
|
|
</ul>
|
|
</div>
|
|
<hr class="-mx-4 border-gray-200 border-1 my-4">
|
|
<div class="-m-4 flex divide-x divide-gray-200 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"></i>
|
|
<span class="text-gray-700 font-medium">Vorheriger Artikel</span>
|
|
</a>
|
|
<a href="{% url 'posts:posts.show' next %}" class="w-1/2 p-4 flex flex-row-reverse items-center gap-2">
|
|
<i class="fa-solid fa-chevron-right text-gray-600"></i>
|
|
<span class="text-gray-700 font-medium">Nächster Artikel</span>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
|
|
{% if request.user.is_authenticated %}
|
|
{% if post.post_type == 'N' %}
|
|
<a href="{% url 'admin:posts_news_change' post.id %}" class="sm:hidden block w-full btn btn-primary mt-4">
|
|
<i class="fa-regular fa-pen-to-square mr-1"></i>Artikel bearbeiten
|
|
</a>
|
|
{% elif post.post_type == 'E' %}
|
|
<a href="{% url 'admin:posts_event_change' post.id %}" class="sm:hidden block w-full btn btn-primary mt-4">
|
|
<i class="fa-regular fa-pen-to-square mr-1"></i>Event bearbeiten
|
|
</a>
|
|
{% elif post.post_type == 'F' %}
|
|
<a href="{% url 'admin:posts_fetmeeting_change' post.id %}" class="sm:hidden block w-full btn btn-primary mt-4">
|
|
<i class="fa-regular fa-pen-to-square mr-1"></i>FET Sitzung bearbeiten
|
|
</a>
|
|
{% endif %}
|
|
{% endif %}
|
|
</section>
|
|
|
|
{% 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>
|
|
|
|
{% 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 }}');">
|
|
<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">
|
|
<i class="fas fa-clock mr-1"></i>
|
|
<span aria-label=" vom "></span>
|
|
{% if post.post_type != 'N' %}
|
|
{{ post.event_start|date:"d. F Y" }}
|
|
{% else %}
|
|
{{ post.public_date|date:"d. F Y" }}
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</section>
|
|
{% endif %}
|
|
</main>
|
|
{% endblock %}
|