"Refactor admin templates for improved UI consistency"

This commit is contained in:
2025-05-29 17:13:04 +02:00
parent d00fc592cc
commit 3cf8899f3e
4 changed files with 268 additions and 45 deletions

View File

@@ -284,7 +284,7 @@
<thead class="bg-slate-50 dark:bg-slate-900/50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Benutzer</th>
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">E-Mail</th>
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Benutzername</th>
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Rolle</th>
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Letzte Aktivität</th>
@@ -307,7 +307,6 @@
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white">{{ user.email }}</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="inline-flex px-2 py-1 text-xs font-semibold rounded-full {{ 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200' if user.is_admin else 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' }}">
{{ 'Administrator' if user.is_admin else 'Benutzer' }}

View File

@@ -32,14 +32,14 @@
<form method="POST" action="{{ url_for('admin_create_user_form') }}" class="space-y-6">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
<!-- E-Mail -->
<!-- Benutzername -->
<div>
<label for="email" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
E-Mail-Adresse
<label for="username" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
Benutzername <span class="text-red-500">*</span>
</label>
<input type="email" name="email" id="email" required
<input type="text" name="username" id="username" required
class="w-full px-4 py-3 border border-slate-300 dark:border-slate-600 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-slate-700 dark:text-white"
placeholder="benutzer@mercedes-benz.com">
placeholder="max.mustermann">
</div>
<!-- Name -->

View File

@@ -266,41 +266,6 @@
</div>
</div>
{% if current_user.is_authenticated %}
<!-- Benachrichtigungen - kompakteres Design -->
<div class="relative">
<button
id="notificationToggle"
class="relative p-1.5 rounded-full text-slate-700 dark:text-slate-300 hover:bg-slate-100/80 dark:hover:bg-slate-800/50 transition-all duration-200"
aria-label="Benachrichtigungen anzeigen"
title="Benachrichtigungen"
>
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
<!-- Badge für ungelesene Benachrichtigungen -->
<span id="notificationBadge" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center font-medium hidden">
0
</span>
</button>
<!-- Benachrichtigungs-Dropdown -->
<div id="notificationDropdown" class="absolute right-0 mt-2 w-72 sm:w-80 bg-white dark:bg-slate-800 rounded-lg shadow-lg border border-slate-200 dark:border-slate-600 z-50 hidden">
<div class="p-3 border-b border-slate-200 dark:border-slate-600">
<h3 class="text-base font-semibold text-slate-900 dark:text-white">Benachrichtigungen</h3>
</div>
<div id="notificationList" class="max-h-80 overflow-y-auto">
<div class="p-3 text-center text-slate-500 dark:text-slate-400 text-sm">
Keine neuen Benachrichtigungen
</div>
</div>
<div class="p-2 border-t border-slate-200 dark:border-slate-600">
<button id="markAllRead" class="w-full text-xs text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors">
Alle als gelesen markieren
</button>
</div>
</div>
</div>
<!-- User Profile Dropdown - kompakteres Design -->
<div class="relative" id="user-menu-container">
<button
@@ -579,9 +544,6 @@
<!-- JavaScript -->
<script src="{{ url_for('static', filename='js/ui-components.js') }}"></script>
<script src="{{ url_for('static', filename='js/dark-mode-fix.js') }}"></script>
{% if current_user.is_authenticated %}
<script src="{{ url_for('static', filename='js/notifications.js') }}"></script>
{% endif %}
<!-- Additional JavaScript Functions -->
<script>

View File

@@ -9,6 +9,268 @@
<link href="{{ url_for('static', filename='js/fullcalendar/main.min.css') }}" rel="stylesheet">
{% endblock %}
{% block extra_css %}
<style>
/* Mercedes-Benz Corporate Design */
.text-mercedes-black { color: #000000; }
.text-mercedes-gray { color: #6b7280; }
.text-mercedes-silver { color: #9ca3af; }
.text-mercedes-blue { color: #0073ce; }
.text-mercedes-green { color: #008c32; }
.text-mercedes-red { color: #dc2626; }
.bg-mercedes-black { background-color: #000000; }
.bg-mercedes-silver { background-color: #e5e7eb; }
.bg-mercedes-blue { background-color: #0073ce; }
.bg-mercedes-green { background-color: #008c32; }
.border-mercedes-silver { border-color: #d1d5db; }
.border-mercedes-blue { border-color: #0073ce; }
/* Enhanced Calendar Styling */
.fc {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.fc-header-toolbar {
margin-bottom: 1.5rem !important;
padding: 1rem;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 1px solid #e2e8f0;
border-radius: 12px;
}
.dark .fc-header-toolbar {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-color: #334155;
}
.fc-button {
background: #0073ce !important;
border: none !important;
border-radius: 8px !important;
padding: 0.5rem 1rem !important;
font-weight: 500 !important;
transition: all 0.2s ease !important;
}
.fc-button:hover {
background: #005ba3 !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}
.fc-button:focus {
box-shadow: 0 0 0 3px rgba(0, 115, 206, 0.3) !important;
}
.fc-button-active {
background: #003d82 !important;
}
.fc-today-button {
background: #16a34a !important;
}
.fc-today-button:hover {
background: #15803d !important;
}
.fc-toolbar-title {
color: #000000 !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
}
.dark .fc-toolbar-title {
color: #ffffff !important;
}
.fc-col-header {
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
border: 1px solid #e2e8f0 !important;
}
.dark .fc-col-header {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
border-color: #334155 !important;
}
.fc-col-header-cell {
padding: 1rem !important;
font-weight: 600 !important;
color: #000000 !important;
}
.dark .fc-col-header-cell {
color: #ffffff !important;
}
.fc-daygrid-day, .fc-timegrid-slot {
border-color: #e2e8f0 !important;
}
.dark .fc-daygrid-day, .dark .fc-timegrid-slot {
border-color: #334155 !important;
}
.fc-day-today {
background: rgba(0, 115, 206, 0.05) !important;
}
.dark .fc-day-today {
background: rgba(0, 115, 206, 0.1) !important;
}
/* Enhanced Event Styling */
.fc-event {
border-radius: 8px !important;
border: none !important;
padding: 0.25rem 0.5rem !important;
margin: 2px !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
transition: all 0.2s ease !important;
}
.fc-event:hover {
transform: translateY(-1px) !important;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}
.fc-event-title {
font-weight: 600 !important;
font-size: 0.875rem !important;
}
.fc-event-time {
font-size: 0.75rem !important;
opacity: 0.9 !important;
}
/* Job Status Colors */
.fc-event.event-running {
background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
color: white !important;
}
.fc-event.event-queued {
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
color: white !important;
}
.fc-event.event-completed {
background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
color: white !important;
}
.fc-event.event-cancelled {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
color: white !important;
}
.fc-event.event-maintenance {
background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
color: white !important;
}
.fc-event.event-high-priority {
box-shadow: 0 0 0 2px #f59e0b !important;
}
.fc-event.event-urgent {
box-shadow: 0 0 0 2px #ef4444 !important;
animation: urgent-pulse 2s infinite;
}
@keyframes urgent-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
/* Enhanced Form Elements */
.mercedes-form-input {
transition: all 0.2s ease;
border: 1px solid #d1d5db;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
}
.mercedes-form-input:focus {
border-color: #0073ce;
box-shadow:
0 0 0 3px rgba(0, 115, 206, 0.1),
0 4px 6px -1px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
background: rgba(255, 255, 255, 1);
}
.dark .mercedes-form-input {
background: rgba(30, 41, 59, 0.8);
border-color: #475569;
color: #f8fafc;
}
.dark .mercedes-form-input:focus {
border-color: #0ea5e9;
box-shadow:
0 0 0 3px rgba(14, 165, 233, 0.1),
0 4px 6px -1px rgba(0, 0, 0, 0.3);
background: rgba(30, 41, 59, 1);
}
/* Enhanced Statistics Cards */
.stat-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0;
border-radius: 12px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.dark .stat-card {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-color: #334155;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.stat-card.active {
border-left: 4px solid #10b981;
}
.stat-card.queued {
border-left: 4px solid #3b82f6;
}
.stat-card.time {
border-left: 4px solid #f59e0b;
}
/* Enhanced Modals */
.mercedes-modal {
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
border: 1px solid #e2e8f0;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 4px 6px -1px rgba(0, 0, 0, 0.1);
border-radius: 16px;
backdrop-filter: blur(10px);
}
.dark .mercedes-modal {
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-color: #334155;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
</style>
{% endblock %}
{% block content %}
<div class="space-y-8">
<!-- Page Header -->