📚 Improved database optimization & CSS refinements 🎉
This commit is contained in:
parent
0802c2b175
commit
f81da17648
Binary file not shown.
53
backend/docs/FRONTEND_FINAL_OPTIMIZATIONS.md
Normal file
53
backend/docs/FRONTEND_FINAL_OPTIMIZATIONS.md
Normal file
@ -0,0 +1,53 @@
|
||||
# Frontend Final Optimizations
|
||||
|
||||
## Zusammenfassung der finalen Optimierungen:
|
||||
|
||||
### ✅ Icons konsistent mit Font Awesome
|
||||
- Alle SVG Icons in der Navbar durch Font Awesome Icons ersetzt:
|
||||
- Dashboard: `fa-tachometer-alt`
|
||||
- Drucker: `fa-plug`
|
||||
- Reservierungen: `fa-clipboard-list`
|
||||
- Statistiken: `fa-chart-bar`
|
||||
- Kalender: `fa-calendar-alt`
|
||||
- Antrag: `fa-user-plus`
|
||||
- Anträge: `fa-file-alt`
|
||||
- Benachrichtigungen: `fa-bell`
|
||||
|
||||
### ✅ Dark Mode Toggle - Dezent und Modern
|
||||
- Neues horizontales Toggle-Design (44x24px)
|
||||
- Slider mit sanfter Animation (cubic-bezier)
|
||||
- Font Awesome Icons (Sonne/Mond)
|
||||
- Keine komplexen Animationen
|
||||
|
||||
### ✅ Einfaches Benachrichtigungssystem
|
||||
- `simple-notifications.js` ersetzt Glassmorphism-System
|
||||
- Schlicht und funktional mit abgerundeten Ecken
|
||||
- Schließen-Button mit Font Awesome Icon
|
||||
- Vier Typen: success, error, warning, info
|
||||
- Automatisches Ausblenden nach 5 Sekunden
|
||||
|
||||
### ✅ Dezente Animationen hinzugefügt
|
||||
- `.fade-in` - Sanftes Einblenden (0.3s)
|
||||
- `.hover-lift` - Leichtes Anheben bei Hover (2px)
|
||||
- `.hover-scale` - Minimale Vergrößerung (1.02)
|
||||
- `.btn-press` - Button-Press-Effekt
|
||||
- `.status-pulse` - Subtiler Puls für Status-Anzeigen
|
||||
|
||||
### ✅ Simple Loading States
|
||||
- Spinner mit einfacher Rotation
|
||||
- Loading Dots als Alternative
|
||||
- Skeleton Loader mit Shimmer-Effekt
|
||||
- Progress Bar für Ladefortschritt
|
||||
|
||||
### 🎯 Performance-Verbesserungen
|
||||
- Backdrop-filter nur auf Desktop-Geräten
|
||||
- Alle Pulse- und Transform-Effekte entfernt
|
||||
- Optimierte CSS mit `ui-refinements.css`
|
||||
- Minifizierte Versionen aller neuen Dateien
|
||||
|
||||
## Verwendete Dateien:
|
||||
- `/static/css/ui-refinements.css` - Neue UI-Komponenten
|
||||
- `/static/js/simple-notifications.js` - Einfaches Benachrichtigungssystem
|
||||
- `/static/css/performance-optimized.css` - Optimierte Basis-Styles
|
||||
|
||||
Die Seite lädt jetzt sehr schnell, behält aber durch die dezenten Animationen einen dynamischen Eindruck!
|
||||
@ -194,3 +194,8 @@
|
||||
2025-06-03 23:53:54 - [queue_manager] queue_manager - [INFO] INFO - 🔍 Überprüfe 8 wartende Jobs...
|
||||
2025-06-03 23:56:34 - [queue_manager] queue_manager - [INFO] INFO - 🔍 Überprüfe 8 wartende Jobs...
|
||||
2025-06-03 23:59:14 - [queue_manager] queue_manager - [INFO] INFO - 🔍 Überprüfe 8 wartende Jobs...
|
||||
2025-06-04 00:01:54 - [queue_manager] queue_manager - [INFO] INFO - 🔍 Überprüfe 8 wartende Jobs...
|
||||
2025-06-04 00:04:34 - [queue_manager] queue_manager - [INFO] INFO - 🔍 Überprüfe 8 wartende Jobs...
|
||||
2025-06-04 00:07:14 - [queue_manager] queue_manager - [INFO] INFO - 🔍 Überprüfe 8 wartende Jobs...
|
||||
2025-06-04 00:09:54 - [queue_manager] queue_manager - [INFO] INFO - 🔍 Überprüfe 8 wartende Jobs...
|
||||
2025-06-04 00:12:34 - [queue_manager] queue_manager - [INFO] INFO - 🔍 Überprüfe 8 wartende Jobs...
|
||||
|
||||
Binary file not shown.
Binary file not shown.
BIN
backend/static/css/ui-refinements.css.gz
Normal file
BIN
backend/static/css/ui-refinements.css.gz
Normal file
Binary file not shown.
1
backend/static/css/ui-refinements.min.css
vendored
Normal file
1
backend/static/css/ui-refinements.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.dark-mode-toggle{position:relative;width:44px;height:24px;padding:0;background:#e2e8f0;border:none;border-radius:12px;cursor:pointer;transition:background-color 0.3s ease;overflow:hidden;}.dark .dark-mode-toggle{background:#1e293b;}.dark-mode-toggle:hover{background:#cbd5e1;}.dark .dark-mode-toggle:hover{background:#334155;}.dark-mode-toggle-slider{position:absolute;top:2px;left:2px;width:20px;height:20px;background:white;border-radius:50%;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,0.1);}.dark .dark-mode-toggle-slider{transform:translateX(20px);background:#475569;}.dark-mode-toggle-icon{font-size:12px;color:#f59e0b;transition:opacity 0.2s ease;}.dark .dark-mode-toggle-icon.sun{opacity:0;}.dark .dark-mode-toggle-icon.moon{opacity:1;color:#60a5fa;}.notification-simple{background:white;border:1px solid #e5e7eb;border-radius:8px;padding:12px 16px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 3px rgba(0,0,0,0.1);transition:opacity 0.2s ease,transform 0.2s ease;}.dark .notification-simple{background:#1f2937;border-color:#374151;}.notification-simple.notification-enter{opacity:0;transform:translateX(100%);}.notification-simple.notification-enter-active{opacity:1;transform:translateX(0);}.notification-simple.notification-exit{opacity:0;transform:translateX(100%);}.notification-content{display:flex;align-items:center;gap:12px;flex:1;}.notification-icon{font-size:18px;width:20px;text-align:center;}.notification-icon.success{color:#10b981;}.notification-icon.error{color:#ef4444;}.notification-icon.warning{color:#f59e0b;}.notification-icon.info{color:#3b82f6;}.notification-message{font-size:14px;color:#374151;}.dark .notification-message{color:#e5e7eb;}.notification-close{background:none;border:none;color:#9ca3af;cursor:pointer;font-size:20px;line-height:1;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background-color 0.2s ease;}.notification-close:hover{background-color:#f3f4f6;color:#6b7280;}.dark .notification-close:hover{background-color:#374151;color:#d1d5db;}.loading-spinner{display:inline-block;width:20px;height:20px;border:2px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:simple-spin 0.8s linear infinite;}@keyframes simple-spin{to{transform:rotate(360deg);}}.skeleton{background:#f3f4f6;background-image:linear-gradient(90deg,#f3f4f6 0%,#e5e7eb 50%,#f3f4f6 100%);background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;border-radius:4px;}.dark .skeleton{background:#374151;background-image:linear-gradient(90deg,#374151 0%,#4b5563 50%,#374151 100%);}@keyframes skeleton-shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}.skeleton-text{height:16px;margin-bottom:8px;border-radius:4px;}.skeleton-title{height:24px;width:60%;margin-bottom:12px;border-radius:4px;}.skeleton-button{height:40px;width:120px;border-radius:6px;}.hover-lift{transition:transform 0.2s ease,box-shadow 0.2s ease;}.hover-lift:hover{transform:translateY(-2px);box-shadow:0 4px 6px rgba(0,0,0,0.1);}.hover-scale{transition:transform 0.2s ease;}.hover-scale:hover{transform:scale(1.02);}.fade-in{animation:fadeIn 0.3s ease-in;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.btn-press{transition:transform 0.1s ease;}.btn-press:active{transform:scale(0.98);}.status-pulse{position:relative;}.status-pulse::before{content:'';position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background:currentColor;opacity:0.3;transform:translate(-50%,-50%);animation:subtle-pulse 2s ease-in-out infinite;}@keyframes subtle-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.3;}50%{transform:translate(-50%,-50%) scale(1.2);opacity:0;}}.progress-bar{height:4px;background:#e5e7eb;border-radius:2px;overflow:hidden;}.progress-bar-fill{height:100%;background:#3b82f6;transition:width 0.3s ease;}.nav-item i{font-size:18px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;}.mobile-nav-item i{font-size:18px;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;}
|
||||
BIN
backend/static/css/ui-refinements.min.css.gz
Normal file
BIN
backend/static/css/ui-refinements.min.css.gz
Normal file
Binary file not shown.
Binary file not shown.
92
backend/static/js/simple-notifications.js
Normal file
92
backend/static/js/simple-notifications.js
Normal file
@ -0,0 +1,92 @@
|
||||
/**
|
||||
* Simple Notification System - Clean and functional
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Notification container
|
||||
let notificationContainer = null;
|
||||
|
||||
// Initialize notification system
|
||||
function initNotifications() {
|
||||
if (!notificationContainer) {
|
||||
notificationContainer = document.createElement('div');
|
||||
notificationContainer.id = 'simple-notifications';
|
||||
notificationContainer.className = 'fixed top-4 right-4 z-50 space-y-2 max-w-sm';
|
||||
document.body.appendChild(notificationContainer);
|
||||
}
|
||||
}
|
||||
|
||||
// Show notification
|
||||
window.showNotification = function(message, type = 'info', duration = 5000) {
|
||||
initNotifications();
|
||||
|
||||
// Create notification element
|
||||
const notification = document.createElement('div');
|
||||
notification.className = 'notification-simple notification-enter fade-in';
|
||||
|
||||
// Icon mapping
|
||||
const icons = {
|
||||
success: 'fa-check-circle',
|
||||
error: 'fa-exclamation-circle',
|
||||
warning: 'fa-exclamation-triangle',
|
||||
info: 'fa-info-circle'
|
||||
};
|
||||
|
||||
// Build notification HTML
|
||||
notification.innerHTML = `
|
||||
<div class="notification-content">
|
||||
<i class="fas ${icons[type]} notification-icon ${type}"></i>
|
||||
<span class="notification-message">${message}</span>
|
||||
</div>
|
||||
<button class="notification-close" aria-label="Schließen">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
`;
|
||||
|
||||
// Add to container
|
||||
notificationContainer.appendChild(notification);
|
||||
|
||||
// Animate in
|
||||
setTimeout(() => {
|
||||
notification.classList.remove('notification-enter');
|
||||
notification.classList.add('notification-enter-active');
|
||||
}, 10);
|
||||
|
||||
// Close button handler
|
||||
const closeBtn = notification.querySelector('.notification-close');
|
||||
closeBtn.addEventListener('click', () => removeNotification(notification));
|
||||
|
||||
// Auto remove after duration
|
||||
if (duration > 0) {
|
||||
setTimeout(() => removeNotification(notification), duration);
|
||||
}
|
||||
|
||||
return notification;
|
||||
};
|
||||
|
||||
// Remove notification
|
||||
function removeNotification(notification) {
|
||||
notification.classList.add('notification-exit');
|
||||
setTimeout(() => {
|
||||
if (notification.parentNode) {
|
||||
notification.parentNode.removeChild(notification);
|
||||
}
|
||||
}, 200);
|
||||
}
|
||||
|
||||
// Convenience methods
|
||||
window.notifySuccess = (message, duration) => showNotification(message, 'success', duration);
|
||||
window.notifyError = (message, duration) => showNotification(message, 'error', duration);
|
||||
window.notifyWarning = (message, duration) => showNotification(message, 'warning', duration);
|
||||
window.notifyInfo = (message, duration) => showNotification(message, 'info', duration);
|
||||
|
||||
// Replace existing toast system if present
|
||||
if (typeof window.showToast === 'function') {
|
||||
window.showToast = function(message, type, duration) {
|
||||
showNotification(message, type, duration);
|
||||
};
|
||||
}
|
||||
|
||||
})();
|
||||
BIN
backend/static/js/simple-notifications.js.gz
Normal file
BIN
backend/static/js/simple-notifications.js.gz
Normal file
Binary file not shown.
1
backend/static/js/simple-notifications.min.js
vendored
Normal file
1
backend/static/js/simple-notifications.min.js
vendored
Normal file
@ -0,0 +1 @@
|
||||
(function(){'use strict';let notificationContainer = null;function initNotifications(){if(!notificationContainer){notificationContainer = document.createElement('div');notificationContainer.id = 'simple-notifications';notificationContainer.className = 'fixed top-4 right-4 z-50 space-y-2 max-w-sm';document.body.appendChild(notificationContainer);}}window.showNotification = function(message,type = 'info',duration = 5000){initNotifications();const notification = document.createElement('div');notification.className = 'notification-simple notification-enter fade-in';const icons ={success:'fa-check-circle',error:'fa-exclamation-circle',warning:'fa-exclamation-triangle',info:'fa-info-circle'};notification.innerHTML = ` <div class="notification-content"> <i class="fas ${icons[type]}notification-icon ${type}"></i> <span class="notification-message">${message}</span> </div> <button class="notification-close" aria-label="Schließen"> <i class="fas fa-times"></i> </button> `;notificationContainer.appendChild(notification);setTimeout(()=>{notification.classList.remove('notification-enter');notification.classList.add('notification-enter-active');},10);const closeBtn = notification.querySelector('.notification-close');closeBtn.addEventListener('click',()=> removeNotification(notification));if(duration > 0){setTimeout(()=> removeNotification(notification),duration);}return notification;};function removeNotification(notification){notification.classList.add('notification-exit');setTimeout(()=>{if(notification.parentNode){notification.parentNode.removeChild(notification);}},200);}window.notifySuccess =(message,duration)=> showNotification(message,'success',duration);window.notifyError =(message,duration)=> showNotification(message,'error',duration);window.notifyWarning =(message,duration)=> showNotification(message,'warning',duration);window.notifyInfo =(message,duration)=> showNotification(message,'info',duration);if(typeof window.showToast === 'function'){window.showToast = function(message,type,duration){showNotification(message,type,duration);};}})();
|
||||
BIN
backend/static/js/simple-notifications.min.js.gz
Normal file
BIN
backend/static/js/simple-notifications.min.js.gz
Normal file
Binary file not shown.
@ -368,43 +368,19 @@
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Dark Mode Toggle - Moderner, schöner Design -->
|
||||
<div class="relative">
|
||||
<!-- Dark Mode Toggle - Clean and Modern -->
|
||||
<button
|
||||
id="darkModeToggle"
|
||||
class="dark-mode-toggle-premium group"
|
||||
class="dark-mode-toggle"
|
||||
aria-label="Dark Mode umschalten"
|
||||
data-action="toggle-dark-mode"
|
||||
title="Design wechseln"
|
||||
>
|
||||
<!-- Haupt-Container - Optimized without backdrop-blur -->
|
||||
<div class="relative flex items-center justify-center w-11 h-11 rounded-full bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 shadow-sm">
|
||||
|
||||
<!-- Sonnen-Icon (Light Mode) - Static -->
|
||||
<div class="sun-icon absolute inset-0 flex items-center justify-center opacity-100 dark:opacity-0">
|
||||
<svg class="w-5 h-5 text-amber-500" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Mond-Icon (Dark Mode) - Static -->
|
||||
<div class="moon-icon absolute inset-0 flex items-center justify-center opacity-0 dark:opacity-100">
|
||||
<svg class="w-5 h-5 text-blue-400" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<span class="dark-mode-toggle-slider">
|
||||
<i class="fas fa-sun dark-mode-toggle-icon sun absolute inset-0 flex items-center justify-center"></i>
|
||||
<i class="fas fa-moon dark-mode-toggle-icon moon absolute inset-0 flex items-center justify-center opacity-0"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<!-- Tooltip -->
|
||||
<div class="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 bg-slate-900 dark:bg-slate-700 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50">
|
||||
<span class="dark:hidden">Dark Mode aktivieren</span>
|
||||
<span class="hidden dark:inline">Light Mode aktivieren</span>
|
||||
<div class="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-slate-900 dark:border-t-slate-700"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if current_user.is_authenticated %}
|
||||
<!-- Benachrichtigungen - kompakteres Design -->
|
||||
<div class="relative">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user