Filter fix

django/static/css/t-input.css

@@ -101,6 +101,15 @@ div.qp-answer-container-host div p {
     @apply font-black text-xl p-4;
 }
 
+/* Filter Panel Styles */
+#filterPanel {
+    @apply hidden transition-all duration-300 ease-in-out;
+}
+
+#filterPanel.show {
+    @apply block;
+}
+
 div.qp-question-container {
     @apply text-center text-3xl px-4 py-9 h-screen;
 }

django/templates/library/overview_quiz.html

@@ -18,18 +18,6 @@
     align-items: center;
   }
 
-  #filterPanel {
-    transition: all 0.3s ease-in-out;
-    max-height: 0;
-    overflow: hidden;
-    opacity: 0;
-  }
-  
-  #filterPanel.show {
-    max-height: 500px;
-    opacity: 1;
-  }
-
   .custom-outline {
     -webkit-text-stroke: 0.2px rgb(0, 0, 0);
   }
@@ -39,7 +27,7 @@
 {% block content %}
 
 <div class="container mx-auto px-4 py-4 flex justify-between items-center">
-    <button onclick="toggleFilter()" class="p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200 flex items-center gap-2 text-gray-700">
+    <button id="filterButton" class="p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200 flex items-center gap-2 text-gray-700">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
         </svg>
@@ -61,7 +49,7 @@
     </div>
 </div>
 
-<div id="filterPanel" class="container mx-auto px-4 mb-8">
+<div id="filterPanel" class="container mx-auto px-4">
     <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
         <form method="get" class="grid grid-cols-1 md:grid-cols-3 gap-6">
             <div class="space-y-2">
@@ -88,18 +76,8 @@
     </div>
 </div>
 
-<script>
-function toggleFilter() {
-    const panel = document.getElementById('filterPanel');
-    panel.classList.toggle('show');
-}
 
-// Hide filter panel on page load
-document.addEventListener('DOMContentLoaded', function() {
-    const panel = document.getElementById('filterPanel');
-    panel.classList.remove('show');
-});
-</script>
+{% if user.is_authenticated %}
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
   <div class="flex items-center gap-3">
     <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900">Eigene Quiz</h2>
@@ -248,6 +226,7 @@ document.addEventListener('DOMContentLoaded', function() {
   </div>
   {% endif %}
 </div>
+{% endif %}
 
 <!-- Quiz von anderen Nutzern -->
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
@@ -389,4 +368,11 @@ document.addEventListener('DOMContentLoaded', function() {
   <p class="text-gray-600 text-center">Keine öffentlichen Quiz gefunden.</p>
 </div>
 {% endif %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('filterButton').addEventListener('click', function() {
+        document.getElementById('filterPanel').classList.toggle('show');
+    });
+});
+</script>
 {% endblock content %}