feat: added some responsiveness
This commit is contained in:
@@ -3,6 +3,7 @@
|
|||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>
|
<title>
|
||||||
{% block title %}TicketSystem{% endblock %}
|
{% block title %}TicketSystem{% endblock %}
|
||||||
</title>
|
</title>
|
||||||
@@ -10,26 +11,61 @@
|
|||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-100">
|
<body class="bg-gray-100">
|
||||||
<nav class="bg-gray-700 text-white py-4">
|
<nav class="bg-gray-700 text-white py-4">
|
||||||
<div class="max-w-4xl mx-auto flex justify-between items-center px-4">
|
<div class="max-w-6xl mx-auto px-4">
|
||||||
<div class="flex space-x-4">
|
<!-- Mobile Header -->
|
||||||
|
<div class="flex justify-between items-center md:hidden">
|
||||||
|
<h1 class="text-lg font-semibold">🎫 TicketSystem</h1>
|
||||||
|
<button id="mobile-menu-btn" class="text-2xl">☰</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desktop Menu -->
|
||||||
|
<div class="hidden md:flex md:justify-between md:items-center">
|
||||||
|
<div class="flex space-x-6">
|
||||||
<a href="{% url 'home' %}" class="text-white hover:text-gray-300">🏠 Start</a>
|
<a href="{% url 'home' %}" class="text-white hover:text-gray-300">🏠 Start</a>
|
||||||
<a href="{% url 'ticket-list' %}" class="text-white hover:text-gray-300">📋 Tickets</a>
|
<a href="{% url 'ticket-list' %}" class="text-white hover:text-gray-300">📋 Tickets</a>
|
||||||
<a href="{% url 'faq-list' %}" class="text-white hover:text-gray-300">❓ FAQ</a>
|
<a href="{% url 'faq-list' %}" class="text-white hover:text-gray-300">❓ FAQ</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center space-x-4">
|
|
||||||
{% if user.is_authenticated %}
|
{% if user.is_authenticated %}
|
||||||
<span class="text-white">👤 {{ user.username }}</span>
|
<div class="flex items-center space-x-4">
|
||||||
|
<span>👤 {{ user.username }}</span>
|
||||||
<form method="post" action="{% url 'logout' %}" class="inline">
|
<form method="post" action="{% url 'logout' %}" class="inline">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<button type="submit" class="text-white hover:text-gray-300">🚪 Logout</button>
|
<button type="submit" class="text-white hover:text-gray-300">🚪 Logout</button>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Menu -->
|
||||||
|
<div id="mobile-menu" class="hidden mt-4">
|
||||||
|
<a href="{% url 'home' %}" class="block text-white py-2">🏠 Start</a>
|
||||||
|
<a href="{% url 'ticket-list' %}" class="block text-white py-2">📋 Tickets</a>
|
||||||
|
<a href="{% url 'faq-list' %}" class="block text-white py-2">❓ FAQ</a>
|
||||||
|
{% if user.is_authenticated %}
|
||||||
|
<div class="border-t border-gray-600 pt-3 mt-3">
|
||||||
|
<span class="block text-white py-1">👤 {{ user.username }}</span>
|
||||||
|
<form method="post" action="{% url 'logout' %}">
|
||||||
|
{% csrf_token %}
|
||||||
|
<button type="submit" class="text-white py-2">🚪 Logout</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- Global Container -->
|
<!-- Global Container -->
|
||||||
<div class="max-w-5xl mx-auto mt-8 px-4">
|
<div class="max-w-6xl mx-auto mt-8 px-4">
|
||||||
{% block content %}{% endblock %}
|
{% block content %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Menu Script -->
|
||||||
|
<script>
|
||||||
|
const menuBtn = document.getElementById('mobile-menu-btn');
|
||||||
|
const menu = document.getElementById('mobile-menu');
|
||||||
|
if (menuBtn && menu) {
|
||||||
|
menuBtn.onclick = () => menu.classList.toggle('hidden');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
{% extends "ticketsystem/base.html" %}
|
{% extends "ticketsystem/base.html" %}
|
||||||
{% load static %}
|
{% load static %}
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="max-w-6xl mx-auto px-4 py-6">
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="bg-white rounded-lg shadow p-6 mb-6">
|
<div class="bg-white rounded-lg shadow p-6 mb-6">
|
||||||
<div class="flex justify-between items-center">
|
<div class="flex justify-between items-center">
|
||||||
@@ -47,7 +46,6 @@
|
|||||||
<p class="text-gray-500">Noch keine FAQs vorhanden.</p>
|
<p class="text-gray-500">Noch keine FAQs vorhanden.</p>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- FAQ JavaScript -->
|
<!-- FAQ JavaScript -->
|
||||||
<script src="{% static 'js/faq.js' %}"></script>
|
<script src="{% static 'js/faq.js' %}"></script>
|
||||||
|
|||||||
@@ -2,24 +2,23 @@
|
|||||||
{% block content %}
|
{% block content %}
|
||||||
<!-- Messages -->
|
<!-- Messages -->
|
||||||
{% if messages %}
|
{% if messages %}
|
||||||
<div class="max-w-6xl mx-auto px-4 pt-4">
|
<div class="mb-4">
|
||||||
{% for message in messages %}
|
{% for message in messages %}
|
||||||
<div class="mb-4 p-3 rounded {% if message.tags == 'error' %}bg-red-100 text-red-700{% elif message.tags == 'success' %}bg-green-100 text-green-700{% else %}bg-yellow-100 text-yellow-700{% endif %}">
|
<div class="mb-2 p-3 rounded text-sm {% if message.tags == 'error' %}bg-red-100 text-red-700{% elif message.tags == 'success' %}bg-green-100 text-green-700{% else %}bg-yellow-100 text-yellow-700{% endif %}">
|
||||||
{{ message }}
|
{{ message }}
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<div class="max-w-6xl mx-auto px-4 py-6">
|
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6">
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-6">
|
||||||
<div>
|
<div>
|
||||||
<h1 class="text-3xl font-bold text-gray-900 mb-2">🎫 Ticket-Übersicht</h1>
|
<h1 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-2">🎫 Ticket-Übersicht</h1>
|
||||||
<p class="text-gray-600">Verwalte und verfolge alle deine Tickets</p>
|
<p class="text-gray-600">Verwalte und verfolge alle deine Tickets</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-4 sm:mt-0">
|
<div class="mt-4 sm:mt-0">
|
||||||
<a href="{% url 'create' %}"
|
<a href="{% url 'create' %}"
|
||||||
class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded font-medium">
|
class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded font-medium block text-center sm:inline-block">
|
||||||
➕ Neues Ticket erstellen
|
➕ Neues Ticket erstellen
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -162,7 +161,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- Ticket Tabelle -->
|
<!-- Ticket Tabelle -->
|
||||||
{% if tickets %}
|
{% if tickets %}
|
||||||
<div class="bg-white rounded-lg shadow overflow-hidden">
|
<!-- Desktop -->
|
||||||
|
<div class="hidden lg:block bg-white rounded-lg shadow overflow-hidden">
|
||||||
|
<div class="overflow-x-auto">
|
||||||
<table class="w-full">
|
<table class="w-full">
|
||||||
<thead class="bg-blue-600 text-white">
|
<thead class="bg-blue-600 text-white">
|
||||||
<tr>
|
<tr>
|
||||||
@@ -204,6 +205,7 @@
|
|||||||
{% elif ticket.status == 'closed' %}
|
{% elif ticket.status == 'closed' %}
|
||||||
<span class="px-2 py-1 rounded-full text-xs font-bold bg-gray-600 text-white">{{ ticket.get_status_display }}</span>
|
<span class="px-2 py-1 rounded-full text-xs font-bold bg-gray-600 text-white">{{ ticket.get_status_display }}</span>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
</td>
|
||||||
<td class="px-4 py-3 text-center">
|
<td class="px-4 py-3 text-center">
|
||||||
<span class="px-2 py-1 rounded-full text-xs font-bold whitespace-nowrap {% if ticket.mistake == 'typo' %}bg-blue-500 {% elif ticket.mistake == 'formatting_issue' %}bg-purple-500 {% elif ticket.mistake == 'missing_content' %}bg-red-500 {% elif ticket.mistake == 'outdated_content' %}bg-orange-500 {% elif ticket.mistake == 'audio_problem' %}bg-green-500 {% elif ticket.mistake == 'video_problem' %}bg-yellow-500 {% elif ticket.mistake == 'other' %}bg-gray-500 {% else %}bg-gray-400 {% endif %} text-white">
|
<span class="px-2 py-1 rounded-full text-xs font-bold whitespace-nowrap {% if ticket.mistake == 'typo' %}bg-blue-500 {% elif ticket.mistake == 'formatting_issue' %}bg-purple-500 {% elif ticket.mistake == 'missing_content' %}bg-red-500 {% elif ticket.mistake == 'outdated_content' %}bg-orange-500 {% elif ticket.mistake == 'audio_problem' %}bg-green-500 {% elif ticket.mistake == 'video_problem' %}bg-yellow-500 {% elif ticket.mistake == 'other' %}bg-gray-500 {% else %}bg-gray-400 {% endif %} text-white">
|
||||||
{{ ticket.get_mistake_display }}
|
{{ ticket.get_mistake_display }}
|
||||||
@@ -225,6 +227,44 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- Mobile -->
|
||||||
|
<div class="lg:hidden space-y-4">
|
||||||
|
{% for ticket in tickets %}
|
||||||
|
<div class="bg-white rounded-lg shadow p-4">
|
||||||
|
<div class="flex justify-between items-start mb-2">
|
||||||
|
<span class="text-sm font-bold text-gray-500">#{{ ticket.id }}</span>
|
||||||
|
<span class="text-xs text-gray-500">{{ ticket.created_at|date:"d.m.Y" }}</span>
|
||||||
|
</div>
|
||||||
|
<a href="{% url 'detail' ticket.pk %}"
|
||||||
|
class="font-bold text-blue-600 hover:text-blue-800 block mb-2">{{ ticket.title|truncatechars:30 }}</a>
|
||||||
|
<div class="space-y-2">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-sm text-gray-600">Status:</span>
|
||||||
|
{% if ticket.status == 'new' %}
|
||||||
|
<span class="px-2 py-1 rounded-full text-xs font-bold bg-blue-500 text-white">{{ ticket.get_status_display }}</span>
|
||||||
|
{% elif ticket.status == 'in_progress' %}
|
||||||
|
<span class="px-2 py-1 rounded-full text-xs font-bold bg-yellow-400 text-gray-900">{{ ticket.get_status_display }}</span>
|
||||||
|
{% elif ticket.status == 'resolved' %}
|
||||||
|
<span class="px-2 py-1 rounded-full text-xs font-bold bg-green-400 text-white">{{ ticket.get_status_display }}</span>
|
||||||
|
{% elif ticket.status == 'closed' %}
|
||||||
|
<span class="px-2 py-1 rounded-full text-xs font-bold bg-gray-600 text-white">{{ ticket.get_status_display }}</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-sm text-gray-600">Kurs:</span>
|
||||||
|
<span class="text-sm font-medium">{{ ticket.course.code }}</span>
|
||||||
|
</div>
|
||||||
|
{% if ticket.assigned_to %}
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<span class="text-sm text-gray-600">Zugewiesen:</span>
|
||||||
|
<span class="text-sm">{{ ticket.assigned_to.username }}</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
<!-- Pagination -->
|
<!-- Pagination -->
|
||||||
{% if is_paginated %}
|
{% if is_paginated %}
|
||||||
<div class="mt-6 flex justify-between items-center">
|
<div class="mt-6 flex justify-between items-center">
|
||||||
@@ -261,5 +301,4 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
{% endblock %}
|
||||||
{% endblock %}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user