🎨 style: update styles and layout in base templates and CSS files
This commit is contained in:
10
app.py
10
app.py
@@ -2,7 +2,7 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
import os
|
||||
from datetime import datetime, timedelta
|
||||
from datetime import datetime, timedelta, timezone
|
||||
from flask import Flask, render_template, request, redirect, url_for, flash, jsonify, session, g
|
||||
from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user
|
||||
from flask_sqlalchemy import SQLAlchemy
|
||||
@@ -292,7 +292,7 @@ def login():
|
||||
if user and user.check_password(password):
|
||||
login_user(user)
|
||||
# Aktualisiere letzten Login-Zeitpunkt
|
||||
user.last_login = datetime.utcnow()
|
||||
user.last_login = datetime.now(timezone.utc)
|
||||
db.session.commit()
|
||||
|
||||
next_page = request.args.get('next')
|
||||
@@ -708,7 +708,7 @@ def update_public_node(node_id):
|
||||
node.color_code = data['color_code']
|
||||
|
||||
# Als bearbeitet markieren
|
||||
node.last_modified = datetime.utcnow()
|
||||
node.last_modified = datetime.now(timezone.utc)
|
||||
node.last_modified_by = current_user.id
|
||||
|
||||
db.session.commit()
|
||||
@@ -1057,7 +1057,7 @@ def update_note(note_id):
|
||||
if color_code:
|
||||
note.color_code = color_code
|
||||
|
||||
note.last_modified = datetime.utcnow()
|
||||
note.last_modified = datetime.now(timezone.utc)
|
||||
db.session.commit()
|
||||
|
||||
return jsonify({
|
||||
@@ -1276,7 +1276,7 @@ def update_thought(thought_id):
|
||||
if 'color_code' in data:
|
||||
thought.color_code = data['color_code']
|
||||
|
||||
thought.last_modified = datetime.utcnow()
|
||||
thought.last_modified = datetime.now(timezone.utc)
|
||||
db.session.commit()
|
||||
|
||||
return jsonify({
|
||||
|
||||
@@ -407,7 +407,7 @@ html.dark ::-webkit-scrollbar-thumb:hover {
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -819,4 +819,199 @@ body:not(.dark) .user-dropdown {
|
||||
|
||||
body:not(.dark) .user-dropdown-item:hover {
|
||||
background-color: #f3f4f6;
|
||||
}
|
||||
|
||||
/* Medienabfragen für Responsivität */
|
||||
@media (max-width: 640px) {
|
||||
/* Optimierungen für Smartphones */
|
||||
body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.hero-heading {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.card, .panel, .glass-card {
|
||||
padding: 1rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
/* Optimierte Touch-Ziele für mobile Geräte */
|
||||
button, .btn, .nav-link, .menu-item {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Verbesserte Lesbarkeit auf kleinen Bildschirmen */
|
||||
p, li, input, textarea, button, .text-sm {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Anpassungen für Tabellen auf kleinen Bildschirmen */
|
||||
table {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Optimierte Formulare */
|
||||
input, select, textarea {
|
||||
font-size: 16px; /* Verhindert iOS-Zoom bei Fokus */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Verbesserter Abstand für Touch-Targets */
|
||||
nav a, nav button, .menu-item {
|
||||
margin: 0.25rem 0;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) and (max-width: 1024px) {
|
||||
/* Optimierungen für Tablets */
|
||||
.container {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
/* Zweispaltige Layouts für mittlere Bildschirme */
|
||||
.grid-cols-1 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Optimierte Navigationsleiste */
|
||||
.navbar {
|
||||
padding: 0.75rem 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
/* Optimierungen für Desktop */
|
||||
.container {
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Mehrspaltige Layouts für große Bildschirme */
|
||||
.grid-cols-1 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* Hover-Effekte nur auf Desktop-Geräten */
|
||||
.card:hover, .panel:hover, .glass-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* Desktop-spezifische Animationen */
|
||||
.animate-hover {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.animate-hover:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive design improvements */
|
||||
.responsive-grid {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
}
|
||||
|
||||
.responsive-flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.responsive-flex > * {
|
||||
flex: 1 1 280px;
|
||||
}
|
||||
|
||||
/* Accessibility improvements */
|
||||
.focus-visible:focus-visible {
|
||||
outline: 2px solid var(--accent-primary-light);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
body.dark .focus-visible:focus-visible {
|
||||
outline: 2px solid var(--accent-primary-dark);
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
body {
|
||||
background: white !important;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
nav, footer, button, .no-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
main, article, .card, .panel, .container {
|
||||
width: 100% !important;
|
||||
border: none !important;
|
||||
box-shadow: none !important;
|
||||
color: black !important;
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
a::after {
|
||||
content: " (" attr(href) ")";
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
page-break-after: avoid;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
img {
|
||||
page-break-inside: avoid;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
table {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 2cm;
|
||||
}
|
||||
}
|
||||
@@ -1018,5 +1018,232 @@ class MindMap {
|
||||
// Implementierung für das Erstellen von Verbindungen
|
||||
}
|
||||
|
||||
// ... existing code ...
|
||||
// Zeigt Gedanken für einen Knoten an
|
||||
showThoughtsForNode(node) {
|
||||
const nodeId = node.id().split('_')[1]; // "node_123" => "123"
|
||||
|
||||
// Wir verwenden die fetchThoughtsForNode-Methode, die wir bereits implementiert haben
|
||||
this.fetchThoughtsForNode(nodeId)
|
||||
.then(thoughts => {
|
||||
// Nur fortfahren, wenn wir tatsächlich Gedanken haben
|
||||
if (thoughts.length === 0) {
|
||||
this.showFlash('Keine Gedanken für diesen Knoten gefunden', 'info');
|
||||
return;
|
||||
}
|
||||
|
||||
// Erstelle einen Gedanken-Viewer, wenn er nicht existiert
|
||||
let thoughtsViewer = document.getElementById('thoughts-viewer');
|
||||
if (!thoughtsViewer) {
|
||||
thoughtsViewer = document.createElement('div');
|
||||
thoughtsViewer.id = 'thoughts-viewer';
|
||||
thoughtsViewer.className = 'fixed inset-0 flex items-center justify-center z-50';
|
||||
thoughtsViewer.innerHTML = `
|
||||
<div class="fixed inset-0 bg-black bg-opacity-50 thoughts-backdrop"></div>
|
||||
<div class="bg-slate-800 rounded-lg w-full max-w-3xl mx-4 relative z-10 border border-purple-500/20 thoughts-content overflow-hidden">
|
||||
<div class="flex justify-between items-center p-4 border-b border-gray-700">
|
||||
<h3 class="text-xl font-semibold text-white">Gedanken zu: <span class="node-name"></span></h3>
|
||||
<button id="close-thoughts" class="text-gray-400 hover:text-white">
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="p-4 thoughts-container max-h-[70vh] overflow-y-auto"></div>
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(thoughtsViewer);
|
||||
|
||||
// Event-Listener für Schließen-Button
|
||||
document.getElementById('close-thoughts').addEventListener('click', () => {
|
||||
// Animation für das Schließen
|
||||
const content = thoughtsViewer.querySelector('.thoughts-content');
|
||||
const backdrop = thoughtsViewer.querySelector('.thoughts-backdrop');
|
||||
|
||||
content.style.transform = 'scale(0.9)';
|
||||
content.style.opacity = '0';
|
||||
backdrop.style.opacity = '0';
|
||||
|
||||
setTimeout(() => thoughtsViewer.remove(), 300);
|
||||
});
|
||||
|
||||
// Event-Listener für Backdrop-Klick
|
||||
thoughtsViewer.querySelector('.thoughts-backdrop').addEventListener('click', () => {
|
||||
document.getElementById('close-thoughts').click();
|
||||
});
|
||||
}
|
||||
|
||||
// Aktualisiere den Titel mit dem Knotennamen
|
||||
thoughtsViewer.querySelector('.node-name').textContent = node.data('name');
|
||||
|
||||
// Container für die Gedanken
|
||||
const thoughtsContainer = thoughtsViewer.querySelector('.thoughts-container');
|
||||
thoughtsContainer.innerHTML = '';
|
||||
|
||||
// Gedanken rendern
|
||||
this.renderThoughts(thoughts, thoughtsContainer);
|
||||
|
||||
// Animation für das Öffnen
|
||||
const content = thoughtsViewer.querySelector('.thoughts-content');
|
||||
const backdrop = thoughtsViewer.querySelector('.thoughts-backdrop');
|
||||
|
||||
content.style.transform = 'scale(0.9)';
|
||||
content.style.opacity = '0';
|
||||
backdrop.style.opacity = '0';
|
||||
|
||||
setTimeout(() => {
|
||||
content.style.transition = 'all 0.3s ease';
|
||||
backdrop.style.transition = 'opacity 0.3s ease';
|
||||
content.style.transform = 'scale(1)';
|
||||
content.style.opacity = '1';
|
||||
backdrop.style.opacity = '1';
|
||||
}, 10);
|
||||
});
|
||||
}
|
||||
|
||||
// Rendert die Gedanken in der UI mit Animationen
|
||||
renderThoughts(thoughts, container) {
|
||||
if (!container) return;
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
// Animation delay counter
|
||||
let delay = 0;
|
||||
|
||||
thoughts.forEach(thought => {
|
||||
const thoughtCard = document.createElement('div');
|
||||
thoughtCard.className = 'thought-card mb-4 bg-slate-700/50 rounded-lg overflow-hidden border border-slate-600/50 transition-all duration-300 hover:border-purple-500/30';
|
||||
thoughtCard.setAttribute('data-id', thought.id);
|
||||
thoughtCard.style.opacity = '0';
|
||||
thoughtCard.style.transform = 'translateY(20px)';
|
||||
|
||||
const cardColor = thought.color_code || this.colorPalette.default;
|
||||
|
||||
thoughtCard.innerHTML = `
|
||||
<div class="thought-card-header p-4" style="border-left: 4px solid ${cardColor}">
|
||||
<h3 class="thought-title text-lg font-semibold text-white">${thought.title}</h3>
|
||||
<div class="thought-meta flex gap-3 text-sm text-gray-400 mt-1">
|
||||
<span class="thought-date"><i class="far fa-calendar-alt mr-1"></i>${new Date(thought.created_at).toLocaleDateString('de-DE')}</span>
|
||||
${thought.author ? `<span class="thought-author"><i class="far fa-user mr-1"></i>${thought.author.username}</span>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="thought-content p-4 text-gray-200">
|
||||
<p>${thought.abstract || thought.content.substring(0, 150) + '...'}</p>
|
||||
</div>
|
||||
<div class="thought-footer p-4 pt-0 flex justify-between items-center">
|
||||
<div class="thought-keywords flex flex-wrap gap-1">
|
||||
${thought.keywords ? thought.keywords.split(',').map(kw =>
|
||||
`<span class="keyword text-xs px-2 py-1 bg-purple-800/30 text-purple-200 rounded-full">${kw.trim()}</span>`).join('') : ''}
|
||||
</div>
|
||||
<a href="/thoughts/${thought.id}" class="thought-link text-purple-400 hover:text-purple-300 text-sm flex items-center">
|
||||
Mehr lesen <i class="fas fa-arrow-right ml-1"></i>
|
||||
</a>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Animation-Effekt mit Verzögerung für jede Karte
|
||||
setTimeout(() => {
|
||||
thoughtCard.style.transition = 'all 0.5s ease';
|
||||
thoughtCard.style.opacity = '1';
|
||||
thoughtCard.style.transform = 'translateY(0)';
|
||||
}, delay);
|
||||
delay += 100; // Jede Karte erscheint mit 100ms Verzögerung
|
||||
|
||||
// Event-Listener für Klick auf Gedanken
|
||||
thoughtCard.addEventListener('click', (e) => {
|
||||
// Verhindern, dass der Link-Klick den Kartenklick auslöst
|
||||
if (e.target.tagName === 'A' || e.target.closest('a')) return;
|
||||
window.location.href = `/thoughts/${thought.id}`;
|
||||
});
|
||||
|
||||
// Hover-Animation für Karten
|
||||
thoughtCard.addEventListener('mouseenter', () => {
|
||||
thoughtCard.style.transform = 'translateY(-5px)';
|
||||
thoughtCard.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.2)';
|
||||
});
|
||||
|
||||
thoughtCard.addEventListener('mouseleave', () => {
|
||||
thoughtCard.style.transform = 'translateY(0)';
|
||||
thoughtCard.style.boxShadow = 'none';
|
||||
});
|
||||
|
||||
container.appendChild(thoughtCard);
|
||||
});
|
||||
}
|
||||
|
||||
// Flash-Nachrichten mit Animationen
|
||||
showFlash(message, type = 'info') {
|
||||
if (!this.flashContainer) {
|
||||
this.flashContainer = document.createElement('div');
|
||||
this.flashContainer.className = 'fixed top-4 right-4 z-50 flex flex-col gap-2';
|
||||
document.body.appendChild(this.flashContainer);
|
||||
}
|
||||
|
||||
const flash = document.createElement('div');
|
||||
flash.className = `flash-message p-3 rounded-lg shadow-lg flex items-center gap-3 max-w-xs text-white`;
|
||||
|
||||
// Verschiedene Stile je nach Typ
|
||||
let backgroundColor, icon;
|
||||
switch (type) {
|
||||
case 'success':
|
||||
backgroundColor = 'bg-green-500';
|
||||
icon = 'fa-check-circle';
|
||||
break;
|
||||
case 'error':
|
||||
backgroundColor = 'bg-red-500';
|
||||
icon = 'fa-exclamation-circle';
|
||||
break;
|
||||
case 'warning':
|
||||
backgroundColor = 'bg-yellow-500';
|
||||
icon = 'fa-exclamation-triangle';
|
||||
break;
|
||||
default:
|
||||
backgroundColor = 'bg-blue-500';
|
||||
icon = 'fa-info-circle';
|
||||
}
|
||||
|
||||
flash.classList.add(backgroundColor);
|
||||
|
||||
flash.innerHTML = `
|
||||
<div class="flash-icon"><i class="fas ${icon} text-lg"></i></div>
|
||||
<div class="flash-text">${message}</div>
|
||||
<button class="flash-close ml-auto text-white/80 hover:text-white"><i class="fas fa-times"></i></button>
|
||||
`;
|
||||
|
||||
// Füge den Flash zum Container hinzu
|
||||
this.flashContainer.appendChild(flash);
|
||||
|
||||
// Einblend-Animation
|
||||
flash.style.opacity = '0';
|
||||
flash.style.transform = 'translateX(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
flash.style.transition = 'all 0.3s ease';
|
||||
flash.style.opacity = '1';
|
||||
flash.style.transform = 'translateX(0)';
|
||||
}, 10);
|
||||
|
||||
// Schließen-Button
|
||||
const closeBtn = flash.querySelector('.flash-close');
|
||||
closeBtn.addEventListener('click', () => {
|
||||
// Ausblend-Animation
|
||||
flash.style.opacity = '0';
|
||||
flash.style.transform = 'translateX(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
flash.remove();
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Automatisches Ausblenden nach 5 Sekunden
|
||||
setTimeout(() => {
|
||||
if (flash.parentNode) {
|
||||
flash.style.opacity = '0';
|
||||
flash.style.transform = 'translateX(20px)';
|
||||
|
||||
setTimeout(() => {
|
||||
if (flash.parentNode) flash.remove();
|
||||
}, 300);
|
||||
}
|
||||
}, 5000);
|
||||
|
||||
return flash;
|
||||
}
|
||||
}
|
||||
@@ -638,36 +638,66 @@
|
||||
// Globaler Zugriff für externe Skripte
|
||||
window.MindMap = window.MindMap || {};
|
||||
|
||||
window.MindMap.toggleDarkMode = function() {
|
||||
// Alpine.js-Instanz benutzen, wenn verfügbar
|
||||
// Funktion zum Anwenden des Dark Mode, strikt getrennt
|
||||
function applyDarkModeClasses(isDarkMode) {
|
||||
if (isDarkMode) {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.body.classList.add('dark');
|
||||
localStorage.setItem('colorMode', 'dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
document.body.classList.remove('dark');
|
||||
localStorage.setItem('colorMode', 'light');
|
||||
}
|
||||
|
||||
// Alpine.js darkMode-Variable aktualisieren, falls zutreffend
|
||||
const appEl = document.querySelector('body');
|
||||
if (appEl && appEl.__x) {
|
||||
appEl.__x.$data.toggleDarkMode();
|
||||
} else {
|
||||
// Fallback: Nur classList und localStorage
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
document.documentElement.classList.toggle('dark', !isDark);
|
||||
document.body.classList.toggle('dark', !isDark);
|
||||
localStorage.setItem('colorMode', !isDark ? 'dark' : 'light');
|
||||
|
||||
// Server aktualisieren
|
||||
fetch('/api/set_dark_mode', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ darkMode: !isDark })
|
||||
}).catch(console.error);
|
||||
appEl.__x.$data.darkMode = isDarkMode;
|
||||
}
|
||||
}
|
||||
|
||||
window.MindMap.toggleDarkMode = function() {
|
||||
const isDark = document.body.classList.contains('dark');
|
||||
applyDarkModeClasses(!isDark);
|
||||
|
||||
// Server aktualisieren
|
||||
fetch('/api/set_dark_mode', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ darkMode: !isDark })
|
||||
}).catch(console.error);
|
||||
};
|
||||
|
||||
// Fallback für Browser-Präferenz, falls keine Einstellung geladen werden konnte
|
||||
// Initialisierung beim Laden
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
if (!document.body.classList.contains('dark') && !document.documentElement.classList.contains('dark')) {
|
||||
// Reihenfolge der Prüfungen: Serverseitige Einstellung > Lokale Einstellung > Browser-Präferenz
|
||||
|
||||
// 1. Zuerst lokale Einstellung prüfen
|
||||
const storedMode = localStorage.getItem('colorMode');
|
||||
if (storedMode) {
|
||||
applyDarkModeClasses(storedMode === 'dark');
|
||||
} else {
|
||||
// 2. Fallback auf Browser-Präferenz
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
if (prefersDark) {
|
||||
document.documentElement.classList.add('dark');
|
||||
document.body.classList.add('dark');
|
||||
}
|
||||
applyDarkModeClasses(prefersDark);
|
||||
}
|
||||
|
||||
// 3. Serverseitige Einstellung abrufen und anwenden
|
||||
fetch('/api/get_dark_mode')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const serverDarkMode = data.darkMode === true || data.darkMode === 'true';
|
||||
applyDarkModeClasses(serverDarkMode);
|
||||
})
|
||||
.catch(error => console.error('Fehler beim Abrufen des Dark Mode Status:', error));
|
||||
|
||||
// Listener für Änderungen der Browser-Präferenz
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
if (localStorage.getItem('colorMode') === null) {
|
||||
applyDarkModeClasses(e.matches);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user