2be72c3990
- SEPA-Export: IBAN/BIC-Validierung via schwifty, Schuldner-Konto aus StiftungsKonto - Globale Suche: Cmd+K Modal über Destinatäre, Pächter, Ländereien, Förderungen, Dokumente - Jahresbericht: Vollständige Jahresbilanz mit Einnahmen/Ausgaben/Netto, Unterstützungen, Landabrechnungen, Verwaltungskosten nach Kategorie, PDF-Export Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
999 lines
35 KiB
HTML
999 lines
35 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}van Hees-Theyssen-Vogel'sche Stiftung{% endblock %}</title>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- Font Awesome -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS - Vision 2026 Sidebar Theme -->
|
|
<style>
|
|
/* British Racing Green Color Palette */
|
|
:root {
|
|
--racing-green: #004225;
|
|
--racing-green-light: #006837;
|
|
--racing-green-dark: #002818;
|
|
--grey-light: #f8f9fa;
|
|
--grey-medium: #6c757d;
|
|
--grey-dark: #495057;
|
|
--orange-accent: #fd7e14;
|
|
--orange-light: #ff922b;
|
|
--orange-dark: #e8590c;
|
|
--sidebar-width: 260px;
|
|
--sidebar-collapsed-width: 64px;
|
|
--topbar-height: 56px;
|
|
}
|
|
|
|
/* Global Typography */
|
|
html {
|
|
font-size: 15px;
|
|
}
|
|
|
|
body {
|
|
font-size: 0.875rem;
|
|
line-height: 1.4;
|
|
font-weight: 400;
|
|
background-color: #f0f2f5;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.h1, .h2, .h3, .h4, .h5, .h6,
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.h1, h1 { font-size: 2rem; }
|
|
.h2, h2 { font-size: 1.65rem; }
|
|
.h3, h3 { font-size: 1.4rem; }
|
|
.h4, h4 { font-size: 1.15rem; }
|
|
.h5, h5 { font-size: 1rem; }
|
|
.h6, h6 { font-size: 0.875rem; }
|
|
|
|
/* ============ SIDEBAR ============ */
|
|
.sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: var(--sidebar-width);
|
|
background: linear-gradient(180deg, var(--racing-green-dark) 0%, var(--racing-green) 100%);
|
|
z-index: 1040;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
transition: width 0.2s ease;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(255,255,255,0.2) transparent;
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.sidebar::-webkit-scrollbar-thumb {
|
|
background: rgba(255,255,255,0.2);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.sidebar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 1rem 1rem;
|
|
color: white;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
font-size: 0.95rem;
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|
min-height: var(--topbar-height);
|
|
}
|
|
|
|
.sidebar-brand:hover {
|
|
color: var(--orange-light);
|
|
}
|
|
|
|
.sidebar-brand i {
|
|
font-size: 1.25rem;
|
|
margin-right: 0.75rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-section {
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
|
}
|
|
|
|
.sidebar-heading {
|
|
font-size: 0.65rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: rgba(255,255,255,0.4);
|
|
padding: 0.75rem 1rem 0.25rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar-link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.5rem 1rem;
|
|
color: rgba(255,255,255,0.75);
|
|
text-decoration: none;
|
|
font-size: 0.8rem;
|
|
transition: all 0.15s;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.sidebar-link:hover {
|
|
color: white;
|
|
background: rgba(255,255,255,0.08);
|
|
border-left-color: var(--orange-accent);
|
|
}
|
|
|
|
.sidebar-link.active {
|
|
color: white;
|
|
background: rgba(255,255,255,0.12);
|
|
border-left-color: var(--orange-accent);
|
|
}
|
|
|
|
.sidebar-link i {
|
|
width: 1.25rem;
|
|
text-align: center;
|
|
margin-right: 0.75rem;
|
|
font-size: 0.85rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar-link .badge {
|
|
margin-left: auto;
|
|
font-size: 0.65rem;
|
|
}
|
|
|
|
/* ============ TOPBAR ============ */
|
|
.topbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: var(--sidebar-width);
|
|
right: 0;
|
|
height: var(--topbar-height);
|
|
background: white;
|
|
border-bottom: 1px solid #dee2e6;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 1.5rem;
|
|
z-index: 1030;
|
|
transition: left 0.2s ease;
|
|
}
|
|
|
|
.topbar-toggle {
|
|
background: none;
|
|
border: none;
|
|
color: var(--grey-dark);
|
|
font-size: 1.1rem;
|
|
cursor: pointer;
|
|
padding: 0.25rem 0.5rem;
|
|
margin-right: 1rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.topbar-toggle:hover {
|
|
background: var(--grey-light);
|
|
}
|
|
|
|
.topbar-breadcrumb {
|
|
font-size: 0.85rem;
|
|
color: var(--grey-medium);
|
|
}
|
|
|
|
.topbar-breadcrumb a {
|
|
color: var(--racing-green);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.topbar-breadcrumb a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.topbar-actions {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
/* ============ MAIN CONTENT ============ */
|
|
.main-content {
|
|
margin-left: var(--sidebar-width);
|
|
padding-top: var(--topbar-height);
|
|
min-height: 100vh;
|
|
transition: margin-left 0.2s ease;
|
|
}
|
|
|
|
.content-wrapper {
|
|
padding: 1.25rem 1.5rem;
|
|
max-width: 1600px;
|
|
}
|
|
|
|
/* ============ SIDEBAR COLLAPSED ============ */
|
|
body.sidebar-collapsed .sidebar {
|
|
width: var(--sidebar-collapsed-width);
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar .sidebar-brand span,
|
|
body.sidebar-collapsed .sidebar .sidebar-heading,
|
|
body.sidebar-collapsed .sidebar .sidebar-link span,
|
|
body.sidebar-collapsed .sidebar .sidebar-link .badge {
|
|
display: none;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar .sidebar-brand i {
|
|
margin-right: 0;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar .sidebar-link {
|
|
justify-content: center;
|
|
padding: 0.6rem;
|
|
border-left: none;
|
|
}
|
|
|
|
body.sidebar-collapsed .sidebar .sidebar-link i {
|
|
margin-right: 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
body.sidebar-collapsed .topbar {
|
|
left: var(--sidebar-collapsed-width);
|
|
}
|
|
|
|
body.sidebar-collapsed .main-content {
|
|
margin-left: var(--sidebar-collapsed-width);
|
|
}
|
|
|
|
/* ============ MOBILE ============ */
|
|
@media (max-width: 991.98px) {
|
|
.sidebar {
|
|
transform: translateX(-100%);
|
|
width: var(--sidebar-width);
|
|
}
|
|
|
|
body.sidebar-open .sidebar {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
body.sidebar-open .sidebar-overlay {
|
|
display: block;
|
|
}
|
|
|
|
.sidebar-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0,0,0,0.4);
|
|
z-index: 1035;
|
|
}
|
|
|
|
.topbar {
|
|
left: 0;
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: 0;
|
|
}
|
|
|
|
body.sidebar-collapsed .topbar {
|
|
left: 0;
|
|
}
|
|
|
|
body.sidebar-collapsed .main-content {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
/* ============ CARDS ============ */
|
|
.card {
|
|
border: 1px solid #e9ecef;
|
|
box-shadow: 0 0.125rem 0.5rem rgba(0, 66, 37, 0.06);
|
|
margin-bottom: 0.75rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.card-body {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.card-header {
|
|
background-color: var(--grey-light);
|
|
border-bottom: 1px solid #dee2e6;
|
|
color: var(--racing-green-dark);
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-header.bg-primary {
|
|
background-color: var(--racing-green) !important;
|
|
color: white;
|
|
}
|
|
|
|
.card-header.bg-success {
|
|
background-color: var(--racing-green-light) !important;
|
|
color: white;
|
|
}
|
|
|
|
.card-header.bg-info {
|
|
background-color: var(--grey-medium) !important;
|
|
color: white;
|
|
}
|
|
|
|
.card-header.bg-warning {
|
|
background-color: var(--orange-accent) !important;
|
|
color: white;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.border-left-primary { border-left: 0.25rem solid var(--racing-green) !important; }
|
|
.border-left-success { border-left: 0.25rem solid var(--racing-green-light) !important; }
|
|
.border-left-info { border-left: 0.25rem solid var(--grey-medium) !important; }
|
|
.border-left-warning { border-left: 0.25rem solid var(--orange-accent) !important; }
|
|
.border-left-danger { border-left: 0.25rem solid #dc3545 !important; }
|
|
|
|
/* ============ TABLES ============ */
|
|
.table {
|
|
font-size: 0.85rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.table th {
|
|
border-top: none;
|
|
font-weight: 600;
|
|
color: var(--racing-green-dark);
|
|
background-color: var(--grey-light);
|
|
padding: 0.5rem;
|
|
font-size: 0.8rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.025em;
|
|
}
|
|
|
|
.table td {
|
|
padding: 0.5rem;
|
|
border-top: 1px solid #dee2e6;
|
|
}
|
|
|
|
.table-sm th, .table-sm td {
|
|
padding: 0.375rem;
|
|
}
|
|
|
|
/* ============ BUTTONS ============ */
|
|
.btn {
|
|
font-size: 0.8rem;
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.25rem;
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.btn-sm {
|
|
font-size: 0.75rem;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.btn-lg {
|
|
font-size: 0.9rem;
|
|
padding: 0.5rem 1rem;
|
|
}
|
|
|
|
.btn-primary { background-color: var(--racing-green); border-color: var(--racing-green); }
|
|
.btn-primary:hover { background-color: var(--racing-green-dark); border-color: var(--racing-green-dark); }
|
|
.btn-success { background-color: var(--racing-green-light); border-color: var(--racing-green-light); }
|
|
.btn-success:hover { background-color: var(--racing-green); border-color: var(--racing-green); }
|
|
.btn-warning { background-color: var(--orange-accent); border-color: var(--orange-accent); color: white; }
|
|
.btn-warning:hover { background-color: var(--orange-dark); border-color: var(--orange-dark); color: white; }
|
|
.btn-outline-primary { color: var(--racing-green); border-color: var(--racing-green); }
|
|
.btn-outline-primary:hover { background-color: var(--racing-green); border-color: var(--racing-green); }
|
|
.btn-accent { background-color: var(--orange-accent); border-color: var(--orange-accent); color: white; }
|
|
.btn-accent:hover { background-color: var(--orange-dark); border-color: var(--orange-dark); color: white; }
|
|
|
|
/* ============ FORMS ============ */
|
|
.form-control, .form-select {
|
|
font-size: 0.8rem;
|
|
padding: 0.375rem 0.5rem;
|
|
line-height: 1.3;
|
|
}
|
|
.form-control-sm, .form-select-sm {
|
|
font-size: 0.75rem;
|
|
padding: 0.25rem 0.375rem;
|
|
}
|
|
.form-label {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.form-text {
|
|
font-size: 0.7rem;
|
|
margin-top: 0.15rem;
|
|
}
|
|
.form-control:focus, .form-select:focus {
|
|
border-color: var(--racing-green-light);
|
|
box-shadow: 0 0 0 0.15rem rgba(0, 66, 37, 0.25);
|
|
}
|
|
|
|
/* ============ BADGES ============ */
|
|
.badge {
|
|
font-size: 0.7rem;
|
|
padding: 0.25em 0.5em;
|
|
font-weight: 500;
|
|
}
|
|
.badge.bg-primary { background-color: var(--racing-green) !important; }
|
|
.badge.bg-success { background-color: var(--racing-green-light) !important; }
|
|
.badge.bg-warning { background-color: var(--orange-accent) !important; color: white; }
|
|
.badge.bg-info { background-color: var(--grey-medium) !important; }
|
|
|
|
/* ============ ALERTS ============ */
|
|
.alert {
|
|
padding: 0.5rem 0.75rem;
|
|
margin-bottom: 0.75rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
.alert-success { background-color: rgba(0,104,55,0.1); border-color: var(--racing-green-light); color: var(--racing-green-dark); }
|
|
.alert-warning { background-color: rgba(253,126,20,0.1); border-color: var(--orange-accent); color: var(--orange-dark); }
|
|
|
|
/* ============ PAGINATION ============ */
|
|
.pagination .page-link { color: var(--racing-green); font-size: 0.8rem; padding: 0.375rem 0.5rem; }
|
|
.pagination .page-item.active .page-link { background-color: var(--racing-green); border-color: var(--racing-green); }
|
|
|
|
/* ============ PROGRESS ============ */
|
|
.progress { height: 1rem; font-size: 0.65rem; }
|
|
|
|
/* ============ TEXT ============ */
|
|
.text-primary { color: var(--racing-green) !important; }
|
|
.text-success { color: var(--racing-green-light) !important; }
|
|
.bg-accent { background-color: var(--orange-accent) !important; color: white; }
|
|
|
|
/* ============ FOOTER ============ */
|
|
.main-footer {
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 0.75rem;
|
|
color: var(--grey-medium);
|
|
border-top: 1px solid #dee2e6;
|
|
background: white;
|
|
text-align: center;
|
|
}
|
|
|
|
/* ============ DASHBOARD WIDGETS ============ */
|
|
.stat-card {
|
|
border-radius: 0.5rem;
|
|
border: none;
|
|
box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.06);
|
|
}
|
|
|
|
.stat-card .stat-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
color: white;
|
|
}
|
|
|
|
.stat-card .stat-value {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
color: var(--grey-dark);
|
|
}
|
|
|
|
.stat-card .stat-label {
|
|
font-size: 0.75rem;
|
|
color: var(--grey-medium);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.action-list .action-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.6rem 0.75rem;
|
|
border-bottom: 1px solid #f0f0f0;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
transition: background 0.15s;
|
|
}
|
|
|
|
.action-list .action-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.action-list .action-item:hover {
|
|
background: var(--grey-light);
|
|
}
|
|
|
|
.action-list .action-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 0.375rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.8rem;
|
|
margin-right: 0.75rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.action-list .action-text {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.action-list .action-title {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.action-list .action-desc {
|
|
font-size: 0.7rem;
|
|
color: var(--grey-medium);
|
|
}
|
|
|
|
/* HTMX loading indicator */
|
|
.htmx-indicator {
|
|
display: none;
|
|
}
|
|
.htmx-request .htmx-indicator,
|
|
.htmx-request.htmx-indicator {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* ============ RESPONSIVE ============ */
|
|
@media (max-width: 768px) {
|
|
html { font-size: 13px; }
|
|
.content-wrapper { padding: 0.75rem; }
|
|
}
|
|
@media (min-width: 768px) and (max-width: 1200px) {
|
|
html { font-size: 14px; }
|
|
}
|
|
</style>
|
|
|
|
{% block extra_css %}{% endblock %}
|
|
</head>
|
|
<body>
|
|
<!-- Sidebar Overlay (mobile) -->
|
|
<div class="sidebar-overlay" onclick="document.body.classList.remove('sidebar-open')"></div>
|
|
|
|
<!-- Sidebar Navigation -->
|
|
<nav class="sidebar" id="sidebar">
|
|
<a class="sidebar-brand" href="{% url 'stiftung:home' %}">
|
|
<i class="fas fa-landmark"></i>
|
|
<span>vHTV Stiftung</span>
|
|
</a>
|
|
|
|
<!-- Dashboard -->
|
|
<div class="sidebar-section">
|
|
<a class="sidebar-link {% if request.resolver_match.url_name == 'home' %}active{% endif %}" href="{% url 'stiftung:home' %}">
|
|
<i class="fas fa-tachometer-alt"></i>
|
|
<span>Dashboard</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Personen -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-heading">Personen</div>
|
|
<a class="sidebar-link" href="{% url 'stiftung:destinataer_list' %}">
|
|
<i class="fas fa-users"></i>
|
|
<span>Destinataere</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:foerderung_list' %}">
|
|
<i class="fas fa-gift"></i>
|
|
<span>Foerderungen</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:paechter_list' %}">
|
|
<i class="fas fa-user-tie"></i>
|
|
<span>Paechter</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Land -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-heading">Land & Pacht</div>
|
|
<a class="sidebar-link" href="{% url 'stiftung:land_list' %}">
|
|
<i class="fas fa-map"></i>
|
|
<span>Laendereien</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:verpachtung_list' %}">
|
|
<i class="fas fa-handshake"></i>
|
|
<span>Verpachtungen</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:land_abrechnung_list' %}">
|
|
<i class="fas fa-calculator"></i>
|
|
<span>Abrechnungen</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:paechter_workflow' %}">
|
|
<i class="fas fa-tractor"></i>
|
|
<span>Pacht-Workflow</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Finanzen -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-heading">Finanzen</div>
|
|
<a class="sidebar-link" href="{% url 'stiftung:unterstuetzungen_all' %}">
|
|
<i class="fas fa-hand-holding-usd"></i>
|
|
<span>Unterstuetzungen</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:zahlungs_pipeline' %}">
|
|
<i class="fas fa-tasks"></i>
|
|
<span>Zahlungs-Pipeline</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:nachweis_board' %}">
|
|
<i class="fas fa-th"></i>
|
|
<span>Nachweis-Board</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:geschaeftsfuehrung' %}">
|
|
<i class="fas fa-briefcase"></i>
|
|
<span>Geschaeftsfuehrung</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:bericht_list' %}">
|
|
<i class="fas fa-chart-bar"></i>
|
|
<span>Berichte</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Dokumente -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-heading">Dokumente</div>
|
|
<a class="sidebar-link" href="{% url 'stiftung:dms_list' %}">
|
|
<i class="fas fa-folder-open"></i>
|
|
<span>DMS</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:dokument_management' %}">
|
|
<i class="fas fa-archive"></i>
|
|
<span>Paperless (Legacy)</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- System -->
|
|
<div class="sidebar-section">
|
|
<div class="sidebar-heading">System</div>
|
|
<a class="sidebar-link" href="{% url 'stiftung:kalender' %}">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
<span>Kalender</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:veranstaltung_list' %}">
|
|
<i class="fas fa-glass-cheers"></i>
|
|
<span>Veranstaltungen</span>
|
|
</a>
|
|
<a class="sidebar-link" href="{% url 'stiftung:geschichte_list' %}">
|
|
<i class="fas fa-book-open"></i>
|
|
<span>Geschichte</span>
|
|
</a>
|
|
{% if perms.stiftung.access_administration %}
|
|
<a class="sidebar-link" href="{% url 'stiftung:administration' %}">
|
|
<i class="fas fa-cogs"></i>
|
|
<span>Administration</span>
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Top Bar -->
|
|
<header class="topbar">
|
|
<button class="topbar-toggle" onclick="toggleSidebar()" title="Sidebar umschalten">
|
|
<i class="fas fa-bars"></i>
|
|
</button>
|
|
|
|
<div class="topbar-breadcrumb">
|
|
{% block breadcrumb %}
|
|
<a href="{% url 'stiftung:home' %}">Stiftungsverwaltung</a>
|
|
{% endblock %}
|
|
</div>
|
|
|
|
<div class="topbar-actions">
|
|
{% if user.is_authenticated %}
|
|
<div class="dropdown">
|
|
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
|
|
<i class="fas fa-user me-1"></i>{{ user.username }}
|
|
{% if user.is_superuser %}<span class="badge bg-danger ms-1">Admin</span>{% endif %}
|
|
</button>
|
|
<ul class="dropdown-menu dropdown-menu-end">
|
|
<li><a class="dropdown-item" href="{% url 'stiftung:user_detail' user.pk %}"><i class="fas fa-user me-2"></i>Mein Profil</a></li>
|
|
<li><a class="dropdown-item" href="{% url 'stiftung:two_factor_setup' %}"><i class="fas fa-shield-alt me-2"></i>2FA verwalten</a></li>
|
|
{% if perms.stiftung.manage_users %}
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="{% url 'stiftung:user_management' %}"><i class="fas fa-users-cog me-2"></i>Benutzerverwaltung</a></li>
|
|
{% endif %}
|
|
<li><hr class="dropdown-divider"></li>
|
|
<li><a class="dropdown-item" href="{% url 'stiftung:logout' %}"><i class="fas fa-sign-out-alt me-2"></i>Abmelden</a></li>
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Messages -->
|
|
{% if messages %}
|
|
<div class="content-wrapper" style="padding-bottom: 0;">
|
|
{% for message in messages %}
|
|
<div class="alert alert-{% if message.tags == 'error' %}danger{% else %}{{ message.tags }}{% endif %} alert-dismissible fade show" role="alert">
|
|
{{ message }}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Page Content -->
|
|
<div class="content-wrapper">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer class="main-footer">
|
|
© 2026 van Hees-Theyssen-Vogel'sche Stiftung ·
|
|
<small>Vision 2026 · v4.0.0</small>
|
|
</footer>
|
|
</main>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<!-- HTMX -->
|
|
<script src="https://unpkg.com/htmx.org@2.0.4" integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+" crossorigin="anonymous"></script>
|
|
<!-- Alpine.js -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
|
|
|
|
<script>
|
|
// HTMX CSRF token setup
|
|
document.body.addEventListener('htmx:configRequest', function(evt) {
|
|
const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]')?.value
|
|
|| '{{ csrf_token }}';
|
|
evt.detail.headers['X-CSRFToken'] = csrfToken;
|
|
});
|
|
|
|
// Sidebar toggle
|
|
function toggleSidebar() {
|
|
if (window.innerWidth < 992) {
|
|
document.body.classList.toggle('sidebar-open');
|
|
} else {
|
|
document.body.classList.toggle('sidebar-collapsed');
|
|
localStorage.setItem('sidebar-collapsed', document.body.classList.contains('sidebar-collapsed'));
|
|
}
|
|
}
|
|
|
|
// Restore sidebar state
|
|
if (localStorage.getItem('sidebar-collapsed') === 'true' && window.innerWidth >= 992) {
|
|
document.body.classList.add('sidebar-collapsed');
|
|
}
|
|
</script>
|
|
|
|
{% block javascript %}{% endblock %}
|
|
|
|
<!-- Phase 4: Globale Suche (Cmd+K) -->
|
|
<div id="global-search-overlay" style="display:none; position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.5);" onclick="closeGlobalSearch()">
|
|
</div>
|
|
<div id="global-search-modal" style="display:none; position:fixed; top:15%; left:50%; transform:translateX(-50%); z-index:10000; width:min(600px, 90vw); background:#fff; border-radius:0.75rem; box-shadow:0 20px 60px rgba(0,0,0,0.3); overflow:hidden;">
|
|
<div style="padding:0.75rem 1rem; border-bottom:1px solid #e9ecef; display:flex; align-items:center; gap:0.5rem;">
|
|
<i class="fas fa-search" style="color:#6c757d;"></i>
|
|
<input id="global-search-input" type="text" placeholder="Suche über alle Bereiche..." autocomplete="off"
|
|
style="flex:1; border:none; outline:none; font-size:1rem; background:transparent; color:#212529;">
|
|
<kbd style="font-size:0.75rem; padding:2px 6px; background:#f8f9fa; border:1px solid #dee2e6; border-radius:4px; color:#6c757d;">Esc</kbd>
|
|
</div>
|
|
<div id="global-search-results" style="max-height:420px; overflow-y:auto; padding:0.5rem 0;">
|
|
<div class="px-3 py-4 text-center text-muted" id="global-search-hint">
|
|
<i class="fas fa-search fa-2x mb-2 d-block" style="opacity:0.3;"></i>
|
|
Mindestens 2 Zeichen eingeben …
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Suche-Trigger in Topbar -->
|
|
<style>
|
|
#global-search-btn {
|
|
background: none;
|
|
border: 1px solid #dee2e6;
|
|
border-radius: 6px;
|
|
padding: 4px 10px;
|
|
color: #6c757d;
|
|
font-size: 0.85rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
transition: border-color 0.15s, color 0.15s;
|
|
}
|
|
#global-search-btn:hover {
|
|
border-color: var(--racing-green);
|
|
color: var(--racing-green);
|
|
}
|
|
.search-result-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
padding: 0.6rem 1rem;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
color: #212529;
|
|
transition: background 0.1s;
|
|
}
|
|
.search-result-item:hover, .search-result-item.highlighted {
|
|
background: #f0f7f4;
|
|
color: var(--racing-green-dark);
|
|
}
|
|
.search-result-icon {
|
|
width: 32px; height: 32px;
|
|
border-radius: 50%;
|
|
background: var(--racing-green);
|
|
color: white;
|
|
display: flex; align-items: center; justify-content: center;
|
|
flex-shrink: 0;
|
|
font-size: 0.8rem;
|
|
}
|
|
.search-result-typ {
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
color: #6c757d;
|
|
}
|
|
.search-group-label {
|
|
padding: 0.25rem 1rem;
|
|
font-size: 0.7rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: #adb5bd;
|
|
font-weight: 600;
|
|
border-top: 1px solid #f0f0f0;
|
|
margin-top: 0.25rem;
|
|
}
|
|
.search-group-label:first-child { border-top: none; margin-top: 0; }
|
|
</style>
|
|
|
|
<script>
|
|
(function() {
|
|
const overlay = document.getElementById('global-search-overlay');
|
|
const modal = document.getElementById('global-search-modal');
|
|
const input = document.getElementById('global-search-input');
|
|
const resultsEl = document.getElementById('global-search-results');
|
|
const hintEl = document.getElementById('global-search-hint');
|
|
let debounceTimer = null;
|
|
let currentHighlight = -1;
|
|
let resultLinks = [];
|
|
|
|
function openGlobalSearch() {
|
|
overlay.style.display = 'block';
|
|
modal.style.display = 'block';
|
|
input.focus();
|
|
input.select();
|
|
}
|
|
|
|
window.closeGlobalSearch = function() {
|
|
overlay.style.display = 'none';
|
|
modal.style.display = 'none';
|
|
};
|
|
|
|
// Cmd+K / Ctrl+K öffnet Suche
|
|
document.addEventListener('keydown', function(e) {
|
|
if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
|
|
e.preventDefault();
|
|
if (modal.style.display === 'block') {
|
|
closeGlobalSearch();
|
|
} else {
|
|
openGlobalSearch();
|
|
}
|
|
}
|
|
if (e.key === 'Escape' && modal.style.display === 'block') {
|
|
closeGlobalSearch();
|
|
}
|
|
// Keyboard navigation
|
|
if (modal.style.display === 'block' && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
|
|
e.preventDefault();
|
|
resultLinks = Array.from(resultsEl.querySelectorAll('.search-result-item'));
|
|
if (!resultLinks.length) return;
|
|
resultLinks.forEach(l => l.classList.remove('highlighted'));
|
|
if (e.key === 'ArrowDown') currentHighlight = Math.min(currentHighlight + 1, resultLinks.length - 1);
|
|
else currentHighlight = Math.max(currentHighlight - 1, 0);
|
|
if (currentHighlight >= 0) {
|
|
resultLinks[currentHighlight].classList.add('highlighted');
|
|
resultLinks[currentHighlight].scrollIntoView({ block: 'nearest' });
|
|
}
|
|
}
|
|
if (modal.style.display === 'block' && e.key === 'Enter') {
|
|
resultLinks = Array.from(resultsEl.querySelectorAll('.search-result-item'));
|
|
if (currentHighlight >= 0 && resultLinks[currentHighlight]) {
|
|
window.location.href = resultLinks[currentHighlight].href;
|
|
} else if (resultLinks.length === 1) {
|
|
window.location.href = resultLinks[0].href;
|
|
}
|
|
}
|
|
});
|
|
|
|
// Prevent modal click from closing
|
|
modal.addEventListener('click', function(e) { e.stopPropagation(); });
|
|
|
|
input.addEventListener('input', function() {
|
|
clearTimeout(debounceTimer);
|
|
currentHighlight = -1;
|
|
const q = input.value.trim();
|
|
if (q.length < 2) {
|
|
hintEl.style.display = '';
|
|
resultsEl.innerHTML = '';
|
|
resultsEl.appendChild(hintEl);
|
|
return;
|
|
}
|
|
debounceTimer = setTimeout(function() { doSearch(q); }, 200);
|
|
});
|
|
|
|
function doSearch(q) {
|
|
fetch("{% url 'stiftung:globale_suche_api' %}?q=" + encodeURIComponent(q), {
|
|
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => renderResults(data.results, q))
|
|
.catch(() => {});
|
|
}
|
|
|
|
function renderResults(results, q) {
|
|
resultsEl.innerHTML = '';
|
|
if (!results || !results.length) {
|
|
const empty = document.createElement('div');
|
|
empty.className = 'px-3 py-4 text-center text-muted';
|
|
empty.innerHTML = '<i class="fas fa-search-minus fa-2x mb-2 d-block" style="opacity:0.3;"></i>Keine Ergebnisse für „' + escapeHtml(q) + '"';
|
|
resultsEl.appendChild(empty);
|
|
return;
|
|
}
|
|
// Group by type
|
|
const grouped = {};
|
|
results.forEach(r => {
|
|
if (!grouped[r.typ]) grouped[r.typ] = [];
|
|
grouped[r.typ].push(r);
|
|
});
|
|
Object.entries(grouped).forEach(([typ, items]) => {
|
|
const label = document.createElement('div');
|
|
label.className = 'search-group-label';
|
|
label.textContent = typ;
|
|
resultsEl.appendChild(label);
|
|
items.forEach(item => {
|
|
const a = document.createElement('a');
|
|
a.className = 'search-result-item';
|
|
a.href = item.url;
|
|
a.innerHTML = `
|
|
<div class="search-result-icon"><i class="${item.icon}"></i></div>
|
|
<div style="min-width:0;">
|
|
<div style="font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${escapeHtml(item.titel)}</div>
|
|
${item.untertitel ? '<div class="search-result-typ">' + escapeHtml(item.untertitel) + '</div>' : ''}
|
|
</div>`;
|
|
a.addEventListener('click', closeGlobalSearch);
|
|
resultsEl.appendChild(a);
|
|
});
|
|
});
|
|
}
|
|
|
|
function escapeHtml(s) {
|
|
return String(s).replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');
|
|
}
|
|
|
|
// Inject search button into topbar
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const topbarActions = document.querySelector('.topbar-actions');
|
|
if (topbarActions) {
|
|
const btn = document.createElement('button');
|
|
btn.id = 'global-search-btn';
|
|
btn.onclick = openGlobalSearch;
|
|
btn.innerHTML = '<i class="fas fa-search"></i> Suche <kbd style="font-size:0.7rem; padding:1px 4px; background:#f8f9fa; border:1px solid #dee2e6; border-radius:3px; margin-left:4px;">⌘K</kbd>';
|
|
topbarActions.insertBefore(btn, topbarActions.firstChild);
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |