Merge branch '24-rahmen-um-die-quiz-in-der-bibliothek-farbe-and-die-kategorie' into 'master'

Resolve "Rahmen um die Quiz in der Bibliothek Farbe and die Kategorie."

Closes #24

See merge request enrichment-2024/qivip!100

django/library/admin.py

@@ -30,10 +30,35 @@ class QuizImageAdmin(admin.ModelAdmin):
 class QuestionImageAdmin(admin.ModelAdmin):
      list_display = ('image',)  
 
+
+from django import forms
+from .models import QuizCategory
+
+class QuizCategoryForm(forms.ModelForm):
+    color = forms.CharField(
+        widget=forms.TextInput(attrs={'type': 'color'})
+    )
+
+    class Meta:
+        model = QuizCategory
+        fields = '__all__'
+from django.utils.html import format_html
+@admin.register(QuizCategory)
+class QuizCategoryAdmin(admin.ModelAdmin):
+    form = QuizCategoryForm
+    list_display = ('name', 'color_preview', 'color')
+
+    def color_preview(self, obj):
+        return format_html(
+            '<div style="width: 24px; height: 24px; background-color: {}; border: 2px solid #000;"></div>',
+            obj.color
+        )
+    color_preview.short_description = "Farbe"       
+        
 # Registrierung der Modelle im Admin
 admin.site.register(QivipQuiz, QivipQuizAdmin)
 admin.site.register(QivipQuestion, QivipQuestionAdmin)
-admin.site.register(QuizCategory, QuizCategoryAdmin)
+#admin.site.register(QuizCategory, QuizCategoryAdmin)
 admin.site.register(QivipQuizFavorite, QivipQuizFavoriteAdmin)
 admin.site.register(QuizImage, QuizImageAdmin)
 admin.site.register(QuestionImage, QuestionImageAdmin)

django/library/migrations/0057_quizcategory_color.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-07-02 11:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0056_alter_quizrating_unique_together'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizcategory',
+            name='color',
+            field=models.CharField(default='#000000', help_text='Farbe als Hex-Code, z.B. #ff0000', max_length=7),
+        ),
+    ]

django/library/models.py

@@ -148,6 +148,12 @@ class QuizCategory(models.Model):
     name = models.CharField(max_length=100, unique=True)
     description = models.TextField(blank=True, null=True)
     slug = models.SlugField(unique=True, blank=True)
+    color= models.CharField(
+        max_length=7,
+        default="#000000",
+        help_text="Farbe als Hex-Code, z.B. #ff0000"
+    )
+
 
     def save(self, *args, **kwargs):
         if not self.slug:

django/templates/library/overview_quiz.html

@@ -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">

django/templates/library/overview_quiz_favorite.html

@@ -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>
 
         

django/templates/library/overview_quiz_my.html

@@ -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>