Update Redesign to v0.5.3-beta
This commit is contained in:
@@ -25,26 +25,21 @@
|
||||
<meta name="application-name" content="FET - Fachschaft Elektrotechnik">
|
||||
<meta name="msapplication-TileColor" content="#2b5797">
|
||||
|
||||
<link rel="stylesheet" href="{% static 'styles.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
|
||||
<!-- FontAwesome Kit -->
|
||||
<!--<script src="https://kit.fontawesome.com/fb26f70535.js" crossorigin="anonymous"></script>-->
|
||||
<link rel="stylesheet" href="{% static 'fontawesomefree/css/all.min.css' %}" type="text/css">
|
||||
|
||||
<!-- Prism.js Theme | DEV-Only Link, change to using jsDelivr when a new version (containing the desired theme) is released! -->
|
||||
<!--
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-dark.min.css">
|
||||
-->
|
||||
<!-- Prism.js Theme -->
|
||||
<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prism-themes@1/themes/prism-one-dark.min.css"> -->
|
||||
<link rel="stylesheet" href="{% static 'css/prism-one-dark.min.css' %}">
|
||||
|
||||
<!--Google Fonts-->
|
||||
<!--
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<!-- Fonts -->
|
||||
<link rel="stylesheet" href="{% static 'fonts/Inter-3.19/inter.css' %}">
|
||||
<!-- <link rel="stylesheet" href="{% static 'fonts/Poppins-4.003/poppins.css' %}"> -->
|
||||
<link rel="stylesheet" href="{% static 'fonts/Besley-2.0/besley.css' %}">
|
||||
<link rel="stylesheet" href="{% static 'fonts/Fira_Code-6.2/fira_code.css' %}">
|
||||
|
||||
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
|
||||
-->
|
||||
{% block extraheader %}
|
||||
{% endblock %}
|
||||
</head>
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
|
||||
{% if featured_post %}
|
||||
{% with post=featured_event %}
|
||||
{% include 'posts/partials/_posts_hero.html' %}
|
||||
{% include 'posts/partials/_posts_pinned.html' %}
|
||||
{% endwith %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<article class="bg-white dark:bg-gray-800 rounded shadow transition-all duration-300 hover:shadow-md transform hover:scale-105">
|
||||
<article class="bg-white dark:bg-gray-800 rounded-md 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 dark:text-blue-100 bg-blue-200 dark:bg-proprietary-dark">
|
||||
<i class="fa-solid fa-calendar-days mr-1"></i>
|
||||
|
||||
30
fet2020/templates/posts/partials/_posts_pinned.html
Normal file
30
fet2020/templates/posts/partials/_posts_pinned.html
Normal file
@@ -0,0 +1,30 @@
|
||||
<article class="article-cover-image" style="background-image: url('{{ post.imageurl }}');" onclick="openArticle('{{ post.url }}')">
|
||||
<div class="article-cover-desc">
|
||||
<div class="article-cover-desc-items">
|
||||
<div class="absolute rounded-full px-2 py-1 bg-gray-800 text-gray-200 bg-opacity-90 capitalize"
|
||||
x-data="{ pin: true }"
|
||||
@mouseover="pin = true"
|
||||
@mouseover.away="pin = false"
|
||||
>
|
||||
<i class="fa-solid fa-thumbtack rotate-45 mx-0.5"></i>
|
||||
<span class="ml-0.5" x-show="pin">Angepinnt</span>
|
||||
</div>
|
||||
<ul class="article-cover-tags">
|
||||
{% for t in post.three_tag_names %}
|
||||
<li><a href="{% url 'posts:posts.tags' t %}">#{{ t }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div>
|
||||
<a href="{{ post.url }}"><h3 class="text-gray-50">{{ post.title | safe }}</h3></a>
|
||||
<div class="text-gray-200">
|
||||
<i class="fas fa-clock"></i>
|
||||
{% if post.post_type != 'N' %}
|
||||
{{ post.event_start|date:"d. F Y" }}
|
||||
{% else %}
|
||||
{{ post.public_date|date:"d. F Y" }}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@@ -104,7 +104,7 @@
|
||||
</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 }}');">
|
||||
<div class="relative w-full h-44 sm:h-56 md:h-60 lg:h-64 xl:h-96 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 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">
|
||||
@@ -133,7 +133,7 @@
|
||||
</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 dark:border-2 dark:border-gray-800">
|
||||
<article class="p-4 mt-4 sm:-mt-16 xl:-mt-24 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>
|
||||
@@ -142,31 +142,6 @@
|
||||
</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 }}
|
||||
@@ -181,18 +156,6 @@
|
||||
{% 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 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>
|
||||
@@ -201,7 +164,95 @@
|
||||
<li>Ende: {{ post.event_end|date }} um {{ post.event_end|time }} Uhr</li>
|
||||
<li>Ort: {{ post.event_place }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if post.has_agenda or post.has_protocol %}
|
||||
{% if request.user.is_authenticated %}
|
||||
<hr class="-mx-4 border-gray-200 dark:border-gray-800 dark:border my-4">
|
||||
<h2 class="text-gray-800 dark:text-gray-200 font-medium"><i class="fa-solid fa-inbox mr-2 text-gray-400 dark:text-gray-500"></i>Dokument(e):</h2>
|
||||
{% endif %}
|
||||
{% elif files %}
|
||||
<hr class="-mx-4 border-gray-200 dark:border-gray-800 dark:border my-4">
|
||||
<h2 class="text-gray-800 dark:text-gray-200 font-medium"><i class="fa-solid fa-inbox mr-2 text-gray-400 dark:text-gray-500"></i>Dokument(e):</h2>
|
||||
{% endif %}
|
||||
|
||||
{% if request.user.is_authenticated %}
|
||||
{% if post.has_agenda %}
|
||||
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
|
||||
<span class="flex-1">Agenda</span>
|
||||
<div class="relative">
|
||||
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
|
||||
<i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
|
||||
</button>
|
||||
<ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
|
||||
@click.outside="showOptions = false"
|
||||
x-show="showOptions || $screen('sm')"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="transform origin-right opacity-0 scale-95"
|
||||
x-transition:enter-end="transform origin-right opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="transform origin-right opacity-100 scale-100"
|
||||
x-transition:leave-end="transform origin-right opacity-0 scale-95"
|
||||
>
|
||||
<li class="block sm:inline-block group hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200"><a href="{{ ep_agenda_link }}" class="inline-flex items-center px-2 py-1"><i class="fa-solid fa-file-signature fa-fw text-proprietary dark:text-proprietary-light md:text-inherit group-hover:text-proprietary dark:group-hover:text-proprietary-light"></i><span class="ml-2 sm:ml-1">Bearbeiten</span></a></li>
|
||||
{% if filename_agenda %}
|
||||
<li class="block sm:inline-block group hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200"><a href="{% url 'posts:show_pdf_agenda' post.slug %}" class="inline-flex items-center px-2 py-1"><i class="fa-solid fa-file-pdf fa-fw text-red-800 dark:text-red-500 md:text-inherit group-hover:text-red-800 dark:group-hover:text-red-500"></i><span class="ml-2 sm:ml-1">Download</span></a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if post.has_protocol %}
|
||||
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
|
||||
<span class="flex-1">Protokoll</span>
|
||||
<div class="relative">
|
||||
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
|
||||
<i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
|
||||
</button>
|
||||
<ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
|
||||
@click.outside="showOptions = false"
|
||||
x-show="showOptions || $screen('sm')"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="transform origin-right opacity-0 scale-95"
|
||||
x-transition:enter-end="transform origin-right opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="transform origin-right opacity-100 scale-100"
|
||||
x-transition:leave-end="transform origin-right opacity-0 scale-95"
|
||||
>
|
||||
<li class="block sm:inline-block group hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200"><a href="{{ ep_protocol_link }}" class="inline-flex items-center px-2 py-1"><i class="fa-solid fa-file-signature fa-fw text-proprietary dark:text-proprietary-light md:text-inherit group-hover:text-proprietary dark:group-hover:text-proprietary-light"></i><span class="ml-2 sm:ml-1">Bearbeiten</span></a></li>
|
||||
{% if filename_protocol %}
|
||||
<li class="block sm:inline-block group hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200"><a href="{% url 'posts:show_pdf_protocol' post.slug %}" class="inline-flex items-center px-2 py-1"><i class="fa-solid fa-file-pdf fa-fw text-red-800 dark:text-red-500 md:text-inherit group-hover:text-red-800 dark:group-hover:text-red-500"></i><span class="ml-2 sm:ml-1">Download</span></a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% for file in files %}
|
||||
<div class="w-full my-2 flex items-center gap-4 text-gray-700 dark:text-gray-300" x-data="{ showOptions: false }">
|
||||
<span class="flex-1">{{ file.title }}</span>
|
||||
<div class="relative">
|
||||
<button class="sm:hidden px-2 py-1 border border-gray-300 dark:border-gray-700 rounded" @click="showOptions = true">
|
||||
<i class="fa-solid fa-ellipsis-vertical fa-fw"></i>
|
||||
</button>
|
||||
<ul class="z-10 absolute top-0 right-0 sm:flex flex-row sm:static flex-none border dark:border-2 border-gray-300 dark:border-gray-700 rounded divide-y-2 sm:divide-y-0 sm:divide-x divide-gray-300 dark:divide-gray-700 bg-gray-100 dark:bg-gray-800 shadow sm:bg-transparent sm:shadow-none"
|
||||
@click.outside="showOptions = false"
|
||||
x-show="showOptions || $screen('sm')"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="transform origin-right opacity-0 scale-95"
|
||||
x-transition:enter-end="transform origin-right opacity-100 scale-100"
|
||||
x-transition:leave="transition ease-in duration-150"
|
||||
x-transition:leave-start="transform origin-right opacity-100 scale-100"
|
||||
x-transition:leave-end="transform origin-right opacity-0 scale-95"
|
||||
>
|
||||
<li class="block sm:inline-block group hover:bg-gray-200 dark:hover:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200"><a href="{{ file.file_field.url }}" class="inline-flex items-center px-2 py-1" target="_blank"><i class="fa-solid fa-file-pdf fa-fw text-red-800 dark:text-red-500 md:text-inherit group-hover:text-red-800 dark:group-hover:text-red-500"></i><span class="ml-2 sm:ml-1">Download</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<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">
|
||||
@@ -235,9 +286,9 @@
|
||||
{% if related_posts %}
|
||||
<section class="mx-auto w-full px-4">
|
||||
<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 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 }}');">
|
||||
<a href="{{ post.url }}" class="sm:flex-1 block rounded-md bg-white dark:bg-gray-500 shadow-md bg-no-repeat bg-center aspect-video 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