"Refactor admin templates for improved UI consistency"
This commit is contained in:
@@ -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' }}
|
||||
|
@@ -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 -->
|
||||
|
@@ -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>
|
||||
|
@@ -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 -->
|
||||
|
Reference in New Issue
Block a user