Kategorie_mit_Farbpunkt

This commit is contained in:
ben8
2025-07-04 13:56:32 +02:00
parent d929e6b5dd
commit 37f4a7b868
6 changed files with 102 additions and 7 deletions

View File

@@ -19,19 +19,27 @@
<!-- Alle -->
<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
{% if user.is_authenticated %}
<div class="flex justify-end text-sm mb-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-blue-600">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
<div class="gap-2 mx-2">
{% if user.is_authenticated %}
Anzahl aller Ergebnisse:
<span class="font-bold"> {{ total_all_found }}</span>
</div>
(verschiedene:
<span class="font-bold ml-1"> {{ total_all }}</span>) </div>
<span class="font-bold ml-1"> {{ total_all }}</span>)
{% else %}
Anzahl aller Ergebnisse:
<span class="font-bold"> {{ total_all_found }}</span>
</div>
{% endif %}
</div>
{% if user.is_authenticated %}
<div class="flex flex-wrap justify-end gap-4 font-bold text-blue-600 whitespace-nowrap text-sm mb-2 md:mb-0">
<p class="font-black underline">Alle ({{ total_all }})</p>
<a href="{{ url_my }}?{{ request.GET.urlencode }}">Meine Quizze ({{ total_my }})</a>
@@ -52,7 +60,7 @@
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
{% for quiz in all_quizzes %}
<article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
<article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden flex flex-col">
<!-- Image Section (Top) -->
<div class="h-48 w-full relative flex-shrink-0">
{% if quiz.image %}
@@ -89,10 +97,21 @@
</div>
{% endif %}
{% endif %}
<div class="max-w-6/10 h-max-12 truncate absolute top-4 left-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg ">
<div class="flex items-center gap-2">
<span class="rounded-full w-4 h-4 flex-shrink-0" style="background-color: {{ quiz.category.color }};"></span>
<a class=" text-gray-800 truncate text-sm" title="{{ quiz.category }}" href="{% url 'library:overview_quiz' %}?filter=1&categories={{ quiz.category.id }}">{{ quiz.category }}</a>
</div>
</div>
</div>
<!-- Content Section (Bottom) -->
<div class="flex-grow bg-white p-4 flex flex-col gap-3">
<div class="flex-grow bg-white p-4 flex flex-col gap-3" >
<!-- Title -->
<h2 class="text-xl font-bold text-gray-900 break-words mb-2">
<a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
@@ -125,6 +144,9 @@
</svg>
<span class="text-gray-800">{{ quiz.status }}</span>
</div>
@@ -171,7 +193,7 @@
<!-- Action Buttons -->
<div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
<div class="flex justify-between items-center gap-2 mt-3 border-t pt-3" >
{% if quiz.questions.count != 0 %}
<a href="{% url 'play:create_game' quiz.id %}"
class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">

View File

@@ -91,6 +91,18 @@
</div>
{% endif %}
{% endif %}
<div class="max-w-6/10 h-max-12 truncate absolute top-4 left-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg ">
<div class="flex items-center gap-2">
<span class="rounded-full w-4 h-4 flex-shrink-0" style="background-color: {{ quiz.category.color }};"></span>
<a class=" text-gray-800 truncate text-sm" title="{{ quiz.category }}" href="{% url 'library:overview_quiz' %}?filter=1&categories={{ quiz.category.id }}">{{ quiz.category }}</a>
</div>
</div>
</div>

View File

@@ -70,6 +70,8 @@
{% if user.is_authenticated %}
{% if quiz.id not in favorite_quiz_ids %}
<div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
<a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6">
@@ -88,6 +90,16 @@
</div>
{% endif %}
{% endif %}
<div class="max-w-6/10 h-max-12 truncate absolute top-4 left-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg ">
<div class="flex items-center gap-2">
<span class="rounded-full w-4 h-4 flex-shrink-0" style="background-color: {{ quiz.category.color }};"></span>
<a class=" text-gray-800 truncate text-sm" title="{{ quiz.category }}" href="{% url 'library:overview_quiz' %}?filter=1&categories={{ quiz.category.id }}">{{ quiz.category }}</a>
</div>
</div>
</div>