Update Design

This commit is contained in:
nik8
2025-03-15 11:00:29 +01:00
parent 7e66868a7d
commit e3bd3c8579
2 changed files with 25 additions and 12 deletions

View File

@@ -3,7 +3,7 @@
{% block content %} {% block content %}
<div class="max-w-screen-lg mx-auto mt-12"> <div class="flex justify-center items-center mt-12 ">
<div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md"> <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
<div class="grid place-content-center h-120"> <div class="grid place-content-center h-120">

View File

@@ -5,8 +5,8 @@
<div class="flex justify-between items-center mb-6"> <div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">{{ quiz.name }}</h1> <h1 class="text-2xl font-bold">{{ quiz.name }}</h1>
<div class="flex space-x-2"> <div class="flex space-x-2">
<a href="{% url 'library:edit_quiz' quiz.id %}" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition-colors">Bearbeiten</a> <a href="{% url 'library:edit_quiz' quiz.id %}" class="bg-green-500 text-white px-4 py-2 rounded-md text-sm lg:text-lg hover:bg-green-600 transition-colors">Quiz bearbeiten</a>
<a href="{% url 'library:delete_quiz' quiz.id %}" class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition-colors">Löschen</a> <a href="{% url 'library:delete_quiz' quiz.id %}" class="bg-red-500 text-white px-4 py-2 rounded-md text-sm lg:text-lg hover:bg-red-600 transition-colors">Quiz löschen</a>
</div> </div>
</div> </div>
@@ -14,17 +14,17 @@
<p class="text-gray-600 mb-8">{{ quiz.description }}</p> <p class="text-gray-600 mb-8">{{ quiz.description }}</p>
{% endif %} {% endif %}
<div class="bg-white rounded-lg shadow-md"> <div class="bg-white rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md">
<div class="border-b border-gray-200 p-4"> <div class="border-b border-gray-200 p-4">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">Fragen</h2> <h2 class="text-xl font-semibold">Fragen</h2>
<div class="flex space-x-2"> <div class="flex space-x-2">
<a href="{% url 'library:new_question' %}?type=multiple_choice&quiz_id={{ quiz.id }}" <a href="{% url 'library:new_question' %}?type=multiple_choice&quiz_id={{ quiz.id }}"
class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 transition-colors"> class="bg-blue-100 text-blue-800 px-4 py-2 rounded-md text-xs lg:text-lg hover:border-blue-600 border-2">
Multiple Choice Multiple Choice
</a> </a>
<a href="{% url 'library:new_question' %}?type=true_false&quiz_id={{ quiz.id }}" <a href="{% url 'library:new_question' %}?type=true_false&quiz_id={{ quiz.id }}"
class="bg-green-500 text-white px-4 py-2 rounded-md hover:bg-green-600 transition-colors"> class="bg-purple-100 text-purple-800 px-4 py-2 rounded-md text-xs lg:text-lg hover:border-blue-600 border-2">
Wahr/Falsch Wahr/Falsch
</a> </a>
</div> </div>
@@ -32,10 +32,14 @@
</div> </div>
{% if questions %} {% if questions %}
<div class="divide-y divide-gray-200"> <div class="divide-y divide-gray-200">
{% for question in questions %} {% for question in questions %}
<div class="p-4 hover:bg-gray-50">
<div class="w-full rounded-xl p-4 hover:bg-gray-50">
<a class="block flex h-full w-full" href="{% url 'library:edit_question' question.id %}" >
<div class="flex justify-between items-start"> <div class="flex justify-between items-start">
<div class="flex-grow"> <div class="flex-grow">
<p class="font-medium">{{ question.data.question }}</p> <p class="font-medium">{{ question.data.question }}</p>
<div class="mt-1"> <div class="mt-1">
@@ -74,21 +78,30 @@
{% endif %} {% endif %}
</div> </div>
</div> </div>
<div class="flex space-x-2 ml-4">
<div class="flex h-full space-x-2 ml-4 items-center">
<!--
<a href="{% url 'library:edit_question' question.id %}" <a href="{% url 'library:edit_question' question.id %}"
class="bg-gray-100 text-gray-700 px-3 py-1 rounded hover:bg-gray-200 transition-colors"> class="bg-gray-100 text-gray-700 px-3 py-1 rounded hover:bg-gray-200 transition-colors">
Bearbeiten Bearbeiten
</a> </a>
<a href="{% url 'library:delete_question' question.id %}" -->
class="bg-red-100 text-red-700 px-3 py-1 rounded hover:bg-red-200 transition-colors">
Löschen <a href=" {% url 'library:delete_question' question.id %}"
class=" text-red-700 px-4 py-1 rounded hover:scale-110 ">
&#x1F5D1
</a> </a>
</div> </div>
</div> </div>
</div> </div>
</a>
{% endfor %} {% endfor %}
</div> </div>
{% else %} {% else %}
<div class="p-8 text-center"> <div class="p-8 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>