Add Geschichte (History) wiki-style feature with reorganized navigation

🆕 NEW FEATURES:
- Wiki-style Geschichte (History) section with rich text editor
- Image upload support for history pages
- Quill.js rich text editor with formatting options
- Slug-based URLs for SEO-friendly history pages
- Image galleries with descriptions and alt-text support

🔧 MODELS:
- GeschichteSeite: Main history pages with rich content
- GeschichteBild: Image attachments for history pages
- Auto-generated slugs, sorting, publishing controls

📝 TEMPLATES:
- geschichte/liste.html: Card-based overview of all history pages
- geschichte/detail.html: Full page view with image gallery
- geschichte/form.html: Rich text editor for creating/editing pages
- geschichte/bild_form.html: Image upload interface

🎨 UI IMPROVEMENTS:
- Reorganized navigation menu into logical groups:
  * Menschen & Finanzen (People & Finance)
  * Immobilien & Land (Real Estate & Land)
  * Verwaltung (Administration)
  * Geschichte (History)
- More compact menu design saving horizontal space
- Better grouping with dropdown headers

🛠️ TECHNICAL:
- Rich text editor with Quill.js integration
- Image upload with validation and optimization
- Permission-based access controls
- Responsive design for all screen sizes
- Proper breadcrumb navigation
- Auto-slug generation from titles
This commit is contained in:
2025-10-02 21:49:12 +02:00
parent 390bf697ee
commit 2961f376c3
10 changed files with 900 additions and 18 deletions

View File

@@ -0,0 +1,120 @@
{% extends 'base.html' %}
{% load help_tags %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'stiftung:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{% url 'stiftung:geschichte_list' %}">Geschichte</a></li>
<li class="breadcrumb-item"><a href="{{ seite.get_absolute_url }}">{{ seite.titel }}</a></li>
<li class="breadcrumb-item active" aria-current="page">Bild hinzufügen</li>
</ol>
</nav>
<div class="row">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">
<i class="fas fa-image me-2"></i>{{ title }}
</h5>
</div>
<div class="card-body">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="mb-3">
<label class="form-label" for="{{ form.titel.id_for_label }}">{{ form.titel.label }}</label>
{{ form.titel }}
{% if form.titel.errors %}
<div class="text-danger">{{ form.titel.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label class="form-label" for="{{ form.bild.id_for_label }}">{{ form.bild.label }}</label>
{{ form.bild }}
{% if form.bild.errors %}
<div class="text-danger">{{ form.bild.errors }}</div>
{% endif %}
<div class="form-text">{{ form.bild.help_text }}</div>
</div>
<div class="mb-3">
<label class="form-label" for="{{ form.alt_text.id_for_label }}">{{ form.alt_text.label }}</label>
{{ form.alt_text }}
{% if form.alt_text.errors %}
<div class="text-danger">{{ form.alt_text.errors }}</div>
{% endif %}
<div class="form-text">{{ form.alt_text.help_text }}</div>
</div>
<div class="mb-3">
<label class="form-label" for="{{ form.beschreibung.id_for_label }}">{{ form.beschreibung.label }}</label>
{{ form.beschreibung }}
{% if form.beschreibung.errors %}
<div class="text-danger">{{ form.beschreibung.errors }}</div>
{% endif %}
</div>
<div class="mb-3">
<label class="form-label" for="{{ form.sortierung.id_for_label }}">{{ form.sortierung.label }}</label>
{{ form.sortierung }}
{% if form.sortierung.errors %}
<div class="text-danger">{{ form.sortierung.errors }}</div>
{% endif %}
<div class="form-text">{{ form.sortierung.help_text }}</div>
</div>
<div class="d-flex justify-content-between">
<a href="{{ seite.get_absolute_url }}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Abbrechen
</a>
<button type="submit" class="btn btn-primary">
<i class="fas fa-upload me-1"></i>Hochladen
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header bg-info text-white">
<h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Bildrichtlinien</h6>
</div>
<div class="card-body">
<ul class="small">
<li><strong>Formate:</strong> JPG, PNG, GIF</li>
<li><strong>Maximale Größe:</strong> 10 MB</li>
<li><strong>Empfohlene Auflösung:</strong> 1200x800px oder höher</li>
<li><strong>Alt-Text:</strong> Wichtig für Barrierefreiheit</li>
</ul>
<hr>
<p class="small text-muted">
Bilder werden automatisch für die Web-Anzeige optimiert.
</p>
</div>
</div>
{% if seite.bilder.exists %}
<div class="card mt-3">
<div class="card-header bg-secondary text-white">
<h6 class="mb-0"><i class="fas fa-images me-2"></i>Vorhandene Bilder</h6>
</div>
<div class="card-body">
{% for bild in seite.bilder.all %}
<div class="mb-2">
<img src="{{ bild.bild.url }}" alt="{{ bild.alt_text }}" class="img-thumbnail" style="width: 60px; height: 40px; object-fit: cover;">
<small class="ms-2">{{ bild.titel }}</small>
</div>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,131 @@
{% extends 'base.html' %}
{% load help_tags %}
{% block title %}{{ title }}{% endblock %}
{% block extra_css %}
<style>
.geschichte-content {
line-height: 1.7;
}
.geschichte-content h1, .geschichte-content h2, .geschichte-content h3 {
margin-top: 2rem;
margin-bottom: 1rem;
color: #2c5234;
}
.geschichte-content p {
margin-bottom: 1rem;
}
.geschichte-bilder {
margin: 2rem 0;
}
.geschichte-bild {
margin-bottom: 2rem;
}
.geschichte-bild img {
max-width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.bild-beschreibung {
font-style: italic;
color: #666;
margin-top: 0.5rem;
}
</style>
{% endblock %}
{% block content %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'stiftung:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{% url 'stiftung:geschichte_list' %}">Geschichte</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ seite.titel }}</li>
</ol>
</nav>
<div class="row">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<h5 class="mb-0">
<i class="fas fa-book-open me-2"></i>{{ seite.titel }}
</h5>
<div class="btn-group">
{% if perms.stiftung.change_geschichteseite %}
<a href="{% url 'stiftung:geschichte_edit' slug=seite.slug %}" class="btn btn-light btn-sm">
<i class="fas fa-edit me-1"></i>Bearbeiten
</a>
{% endif %}
{% if perms.stiftung.add_geschichtebild %}
<a href="{% url 'stiftung:geschichte_bild_upload' slug=seite.slug %}" class="btn btn-light btn-sm">
<i class="fas fa-image me-1"></i>Bild hinzufügen
</a>
{% endif %}
</div>
</div>
<div class="card-body">
<div class="geschichte-content">
{{ seite.inhalt|linebreaks }}
</div>
{% if bilder %}
<div class="geschichte-bilder">
<h4><i class="fas fa-images me-2"></i>Bildergalerie</h4>
{% for bild in bilder %}
<div class="geschichte-bild">
<img src="{{ bild.bild.url }}" alt="{{ bild.alt_text|default:bild.titel }}" class="img-fluid">
<div class="bild-beschreibung">
<strong>{{ bild.titel }}</strong>
{% if bild.beschreibung %}
<br>{{ bild.beschreibung }}
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
<div class="card-footer text-muted">
<div class="row">
<div class="col-md-6">
<small>
<i class="fas fa-user me-1"></i>
Erstellt von: {{ seite.erstellt_von.get_full_name|default:seite.erstellt_von.username }}
am {{ seite.erstellt_am|date:"d.m.Y H:i" }}
</small>
</div>
<div class="col-md-6 text-md-end">
<small>
<i class="fas fa-clock me-1"></i>
Zuletzt aktualisiert: {{ seite.aktualisiert_am|date:"d.m.Y H:i" }}
{% if seite.aktualisiert_von %}
von {{ seite.aktualisiert_von.get_full_name|default:seite.aktualisiert_von.username }}
{% endif %}
</small>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header bg-secondary text-white">
<h6 class="mb-0"><i class="fas fa-list me-2"></i>Weitere Seiten</h6>
</div>
<div class="card-body">
<!-- This could be populated with other history pages -->
<p class="text-muted small">Navigation zu anderen Geschichtsseiten wird hier angezeigt.</p>
</div>
</div>
</div>
</div>
<div class="mt-3">
<a href="{% url 'stiftung:geschichte_list' %}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Zurück zur Übersicht
</a>
</div>
{% endblock %}

View File

@@ -0,0 +1,177 @@
{% extends 'base.html' %}
{% load help_tags %}
{% block title %}{{ title }}{% endblock %}
{% block extra_css %}
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
.ql-editor {
min-height: 300px;
}
.ql-toolbar {
border-top-left-radius: 0.375rem;
border-top-right-radius: 0.375rem;
}
.ql-container {
border-bottom-left-radius: 0.375rem;
border-bottom-right-radius: 0.375rem;
font-family: inherit;
}
</style>
{% endblock %}
{% block content %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'stiftung:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item"><a href="{% url 'stiftung:geschichte_list' %}">Geschichte</a></li>
{% if seite %}
<li class="breadcrumb-item"><a href="{{ seite.get_absolute_url }}">{{ seite.titel }}</a></li>
<li class="breadcrumb-item active" aria-current="page">Bearbeiten</li>
{% else %}
<li class="breadcrumb-item active" aria-current="page">Neue Seite</li>
{% endif %}
</ol>
</nav>
<div class="row">
<div class="col-lg-8">
<div class="card shadow">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">
<i class="fas fa-{% if seite %}edit{% else %}plus{% endif %} me-2"></i>{{ title }}
</h5>
</div>
<div class="card-body">
<form method="post" id="geschichteForm">
{% csrf_token %}
<div class="row mb-3">
<div class="col-md-8">
<label class="form-label" for="{{ form.titel.id_for_label }}">{{ form.titel.label }}</label>
{{ form.titel }}
{% if form.titel.errors %}
<div class="text-danger">{{ form.titel.errors }}</div>
{% endif %}
</div>
<div class="col-md-4">
<label class="form-label" for="{{ form.sortierung.id_for_label }}">{{ form.sortierung.label }}</label>
{{ form.sortierung }}
{% if form.sortierung.errors %}
<div class="text-danger">{{ form.sortierung.errors }}</div>
{% endif %}
<div class="form-text">{{ form.sortierung.help_text }}</div>
</div>
</div>
<div class="mb-3">
<label class="form-label" for="{{ form.slug.id_for_label }}">{{ form.slug.label }}</label>
{{ form.slug }}
{% if form.slug.errors %}
<div class="text-danger">{{ form.slug.errors }}</div>
{% endif %}
<div class="form-text">{{ form.slug.help_text }}</div>
</div>
<div class="mb-3">
<label class="form-label">{{ form.inhalt.label }}</label>
<div id="quill-editor" style="height: 400px;"></div>
<textarea name="inhalt" id="id_inhalt" style="display: none;">{{ form.inhalt.value|default:"" }}</textarea>
{% if form.inhalt.errors %}
<div class="text-danger">{{ form.inhalt.errors }}</div>
{% endif %}
<div class="form-text">{{ form.inhalt.help_text }}</div>
</div>
<div class="mb-3 form-check">
{{ form.ist_veroeffentlicht }}
<label class="form-check-label" for="{{ form.ist_veroeffentlicht.id_for_label }}">
{{ form.ist_veroeffentlicht.label }}
</label>
{% if form.ist_veroeffentlicht.errors %}
<div class="text-danger">{{ form.ist_veroeffentlicht.errors }}</div>
{% endif %}
</div>
<div class="d-flex justify-content-between">
<a href="{% if seite %}{{ seite.get_absolute_url }}{% else %}{% url 'stiftung:geschichte_list' %}{% endif %}" class="btn btn-secondary">
<i class="fas fa-arrow-left me-1"></i>Abbrechen
</a>
<button type="submit" class="btn btn-primary">
<i class="fas fa-save me-1"></i>Speichern
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header bg-info text-white">
<h6 class="mb-0"><i class="fas fa-info-circle me-2"></i>Rich Text Editor</h6>
</div>
<div class="card-body">
<p class="small">Der Editor unterstützt:</p>
<ul class="small">
<li>Formatierung (Fett, Kursiv, Unterstrichen)</li>
<li>Überschriften (H1, H2, H3)</li>
<li>Listen (nummeriert und Aufzählungen)</li>
<li>Links</li>
<li>Bilder (über separaten Upload)</li>
</ul>
<hr>
<p class="small text-muted">
Tipp: Verwenden Sie die Bild-Upload-Funktion, um Bilder zur Seite hinzuzufügen.
</p>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Initialize Quill editor
var quill = new Quill('#quill-editor', {
theme: 'snow',
modules: {
toolbar: [
[{ 'header': [1, 2, 3, false] }],
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['link'],
['clean']
]
},
placeholder: 'Schreiben Sie hier den Inhalt der Geschichtsseite...'
});
// Load existing content
var existingContent = document.getElementById('id_inhalt').value;
if (existingContent) {
quill.root.innerHTML = existingContent;
}
// Auto-generate slug from title
document.getElementById('{{ form.titel.id_for_label }}').addEventListener('input', function() {
var title = this.value;
var slug = title.toLowerCase()
.replace(/ä/g, 'ae').replace(/ö/g, 'oe').replace(/ü/g, 'ue').replace(/ß/g, 'ss')
.replace(/[^\w\s-]/g, '')
.replace(/[-\s]+/g, '-')
.trim();
document.getElementById('{{ form.slug.id_for_label }}').value = slug;
});
// Update textarea on form submit
document.getElementById('geschichteForm').addEventListener('submit', function() {
document.getElementById('id_inhalt').value = quill.root.innerHTML;
});
});
</script>
{% endblock %}

View File

@@ -0,0 +1,76 @@
{% extends 'base.html' %}
{% load help_tags %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'stiftung:dashboard' %}">Dashboard</a></li>
<li class="breadcrumb-item active" aria-current="page">Geschichte</li>
</ol>
</nav>
<div class="row">
<div class="col-12">
<div class="card shadow">
<div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
<h5 class="mb-0">
<i class="fas fa-book-open me-2"></i>{{ title }}
</h5>
{% if perms.stiftung.add_geschichteseite %}
<a href="{% url 'stiftung:geschichte_create' %}" class="btn btn-light btn-sm">
<i class="fas fa-plus me-1"></i>Neue Seite
</a>
{% endif %}
</div>
<div class="card-body">
{% if seiten %}
<div class="row">
{% for seite in seiten %}
<div class="col-lg-4 col-md-6 mb-4">
<div class="card h-100">
{% if seite.bilder.first %}
<img src="{{ seite.bilder.first.bild.url }}" class="card-img-top" alt="{{ seite.bilder.first.alt_text }}" style="height: 200px; object-fit: cover;">
{% endif %}
<div class="card-body d-flex flex-column">
<h6 class="card-title">{{ seite.titel }}</h6>
<p class="card-text text-muted small flex-grow-1">
{{ seite.inhalt|truncatewords:20|striptags }}
</p>
<div class="mt-auto">
<a href="{{ seite.get_absolute_url }}" class="btn btn-primary btn-sm">
<i class="fas fa-eye me-1"></i>Lesen
</a>
{% if perms.stiftung.change_geschichteseite %}
<a href="{% url 'stiftung:geschichte_edit' slug=seite.slug %}" class="btn btn-outline-secondary btn-sm">
<i class="fas fa-edit me-1"></i>Bearbeiten
</a>
{% endif %}
</div>
</div>
<div class="card-footer text-muted small">
<i class="fas fa-clock me-1"></i>
Aktualisiert: {{ seite.aktualisiert_am|date:"d.m.Y H:i" }}
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="text-center py-5">
<i class="fas fa-book-open fa-3x text-muted mb-3"></i>
<h5 class="text-muted">Keine Geschichtsseiten vorhanden</h5>
<p class="text-muted">Es wurden noch keine Seiten zur Stiftungsgeschichte erstellt.</p>
{% if perms.stiftung.add_geschichteseite %}
<a href="{% url 'stiftung:geschichte_create' %}" class="btn btn-primary">
<i class="fas fa-plus me-1"></i>Erste Seite erstellen
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endblock %}