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:
177
app/templates/stiftung/geschichte/form.html
Normal file
177
app/templates/stiftung/geschichte/form.html
Normal 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 %}
|
||||
Reference in New Issue
Block a user