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

Add different numbers of related posts in different screen sizes

Browse Source
This commit is contained in:
Patrick Mayr
2022-04-20 19:52:54 +00:00
parent 24a39f131e
commit 16f30cbd36
3 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
fet2020/posts/views.py
View File

@@ -182,7 +182,7 @@ def show(request, id=None):
"author_image": author_image,
"next": __next(post, public_only),
"previous": __previous(post, public_only),
"related_posts": related_posts[:3],
"related_posts": related_posts[:4],
"ep_agenda_link": ep_agenda_link,
"ep_protocol_link": ep_protocol_link,
"filename_agenda": filename_agenda,

8
fet2020/templates/posts/partials/_posts_related.html Normal file
View File

@@ -0,0 +1,8 @@
<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>
{{ post.date|date:"d. F Y" }}
</span>
</div>

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

@@ -315,16 +315,19 @@
<h2 class="my-4 sm:my-8 text-proprietary dark:text-proprietary-lighter text-xl text-center uppercase tracking-wider">Weiterlesen</h2>
<div class="flex justify-evenly flex-wrap gap-4">
{% for post in related_posts %}
<a href="{{ post.get_absolute_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">
<i class="fas fa-clock mr-1"></i>
<span aria-label=" vom "></span>
{{ post.date|date:"d. F Y" }}
</span>
</div>
</a>
{% if forloop.counter0 == 2 %}
<a href="{{ post.get_absolute_url }}" class="sm:flex-1 hidden lg:block 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 }}');">
{% include 'posts/partials/_posts_related.html' %}
</a>
{% elif forloop.last %}
<a href="{{ post.get_absolute_url }}" class="sm:flex-1 hidden 2xl:block 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 }}');">
{% include 'posts/partials/_posts_related.html' %}
</a>
{% else %}
<a href="{{ post.get_absolute_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 }}');">
{% include 'posts/partials/_posts_related.html' %}
</a>
{% endif %}
{% endfor %}
</div>
</section>