Modernize Destinataer create/edit form to match Vision 2026 style

Replace custom CSS (.form-section, gradients, var(--racing-green)) with
standard Bootstrap card-based layout matching the rest of the modernized UI:
dark card headers, responsive grid rows, consistent shadow-sm styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
SysAdmin Agent
2026-03-11 22:06:07 +00:00
parent 65e025d8c4
commit 8ae7bff38c

View File

@@ -5,474 +5,242 @@
{% block title %}{{ title }} - Stiftungsverwaltung{% endblock %} {% block title %}{{ title }} - Stiftungsverwaltung{% endblock %}
{% block content %} {% block content %}
<div class="container-fluid py-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h3">
<i class="fas fa-user-plus text-primary me-2"></i>{{ title }}
</h1>
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary btn-sm">
<i class="fas fa-arrow-left me-1"></i>Zurueck
</a>
</div>
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-lg-8">
<div class="d-flex justify-content-between align-items-center mb-4"> <form method="post" novalidate>
<h1 class="h3"> {% csrf_token %}
<i class="fas fa-users text-primary me-2"></i>
{{ title }}
</h1>
<div>
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary">
<i class="fas fa-arrow-left me-2"></i>Zurück zur Liste
</a>
</div>
</div>
<div class="row"> {# ── Persoenliche Informationen ── #}
<div class="col-lg-8"> <div class="card shadow-sm mb-4">
<div class="card shadow"> <div class="card-header bg-dark text-white py-2">
<div class="card-header bg-primary text-white"> <i class="fas fa-user me-2"></i>Persoenliche Informationen
<h5 class="card-title mb-0"> </div>
<i class="fas fa-edit me-2"></i>Destinatär-Daten <div class="card-body">
</h5> <div class="row">
</div> <div class="col-md-6 mb-3">
<div class="card-body p-4"> <label for="{{ form.vorname.id_for_label }}" class="form-label">{{ form.vorname.label }} *</label>
<!-- Elegant Two-Column Form Design --> {{ form.vorname }}
<style> {% if form.vorname.errors %}<div class="invalid-feedback d-block">{{ form.vorname.errors.0 }}</div>{% endif %}
.form-section { </div>
margin-bottom: 4rem; <div class="col-md-6 mb-3">
padding: 2.5rem; <label for="{{ form.nachname.id_for_label }}" class="form-label">{{ form.nachname.label }} *</label>
background: linear-gradient(135deg, #f8f9fb 0%, #f1f3f7 100%); {{ form.nachname }}
border-radius: 16px; {% if form.nachname.errors %}<div class="invalid-feedback d-block">{{ form.nachname.errors.0 }}</div>{% endif %}
border: 1px solid #e3e6f0; </div>
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); <div class="col-md-6 mb-3">
} <label for="{{ form.geburtsdatum.id_for_label }}" class="form-label">{{ form.geburtsdatum.label }}</label>
.form-section h4 { {{ form.geburtsdatum }}
font-size: 1.75rem; {% if form.geburtsdatum.errors %}<div class="invalid-feedback d-block">{{ form.geburtsdatum.errors.0 }}</div>{% endif %}
font-weight: 700; </div>
color: var(--racing-green); <div class="col-md-6 mb-3">
margin-bottom: 2rem; <label for="{{ form.familienzweig.id_for_label }}" class="form-label">{{ form.familienzweig.label }}</label>
padding-bottom: 1rem; {{ form.familienzweig }}
border-bottom: 3px solid var(--racing-green); {% if form.familienzweig.errors %}<div class="invalid-feedback d-block">{{ form.familienzweig.errors.0 }}</div>{% endif %}
display: flex; </div>
align-items: center;
gap: 0.75rem;
}
.form-section h4 i {
font-size: 1.5rem;
}
.two-column-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: start;
}
.form-field {
margin-bottom: 1.75rem;
}
.form-field .form-label {
font-weight: 600;
color: #2d3748;
margin-bottom: 0.75rem;
font-size: 0.95rem;
display: block;
}
.form-field .form-control,
.form-field .form-select,
.form-field textarea {
width: 100%;
padding: 0.875rem 1.125rem;
border: 2px solid #e2e8f0;
border-radius: 10px;
font-size: 1rem;
transition: all 0.2s ease;
background: white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.form-field .form-control:focus,
.form-field .form-select:focus,
.form-field textarea:focus {
border-color: var(--racing-green);
box-shadow: 0 0 0 3px rgba(0, 66, 37, 0.1);
outline: none;
transform: translateY(-1px);
}
.form-field .form-check {
padding: 1rem;
background: white;
border: 2px solid #e2e8f0;
border-radius: 10px;
margin-bottom: 0.5rem;
transition: all 0.2s ease;
}
.form-field .form-check:hover {
border-color: var(--racing-green-light);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-field .form-check-input {
margin-right: 0.75rem;
transform: scale(1.2);
}
.form-field .form-check-label {
font-weight: 500;
color: #2d3748;
}
.full-width-field {
grid-column: 1 / -1;
}
@media (max-width: 768px) {
.two-column-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.form-section {
padding: 1.5rem;
}
}
</style>
<form method="post" novalidate>
{% csrf_token %}
<!-- Persönliche Informationen -->
<div class="form-section">
<h4>
<i class="fas fa-user"></i>
Persönliche Informationen
</h4>
<div class="two-column-grid">
<div class="form-field">
<label for="{{ form.vorname.id_for_label }}" class="form-label">
{{ form.vorname.label }} *
</label>
{{ form.vorname }}
{% if form.vorname.errors %}
<div class="invalid-feedback d-block">
{% for error in form.vorname.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field">
<label for="{{ form.nachname.id_for_label }}" class="form-label">
{{ form.nachname.label }} *
</label>
{{ form.nachname }}
{% if form.nachname.errors %}
<div class="invalid-feedback d-block">
{% for error in form.nachname.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field">
<label for="{{ form.geburtsdatum.id_for_label }}" class="form-label">
{{ form.geburtsdatum.label }}
</label>
{{ form.geburtsdatum }}
{% if form.geburtsdatum.errors %}
<div class="invalid-feedback d-block">
{% for error in form.geburtsdatum.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field">
<label for="{{ form.familienzweig.id_for_label }}" class="form-label">
{{ form.familienzweig.label }}
</label>
{{ form.familienzweig }}
{% if form.familienzweig.errors %}
<div class="invalid-feedback d-block">
{% for error in form.familienzweig.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
</div>
<!-- Kontaktinformationen -->
<div class="form-section">
<h4>
<i class="fas fa-address-book"></i>
Kontaktinformationen
</h4>
<div class="two-column-grid">
<div class="form-field">
<label for="{{ form.email.id_for_label }}" class="form-label">
{{ form.email.label }}
</label>
{{ form.email }}
{% if form.email.errors %}
<div class="invalid-feedback d-block">
{% for error in form.email.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field">
<label for="{{ form.telefon.id_for_label }}" class="form-label">
{{ form.telefon.label }}
</label>
{{ form.telefon }}
{% if form.telefon.errors %}
<div class="invalid-feedback d-block">
{% for error in form.telefon.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field">
<label for="{{ form.iban.id_for_label }}" class="form-label">
{{ form.iban.label }}
</label>
{{ form.iban }}
{% if form.iban.errors %}
<div class="invalid-feedback d-block">
{% for error in form.iban.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field" style="grid-column: 1 / -1;">
<label for="{{ form.adresse.id_for_label }}" class="form-label">
{{ form.adresse.label }}
</label>
{{ form.adresse }}
{% if form.adresse.errors %}
<div class="invalid-feedback d-block">
{% for error in form.adresse.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
<!-- Professional Information Section -->
<div class="form-section">
<h4>
<i class="fas fa-briefcase"></i>
Berufliche Informationen
</h4>
<div class="two-column-grid">
<div class="form-field">
<label for="{{ form.berufsgruppe.id_for_label }}" class="form-label">
{{ form.berufsgruppe.label }}
</label>
{{ form.berufsgruppe }}
{% if form.berufsgruppe.errors %}
<div class="invalid-feedback d-block">
{% for error in form.berufsgruppe.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field">
<label for="{{ form.ausbildungsstand.id_for_label }}" class="form-label">
{{ form.ausbildungsstand.label }}
</label>
{{ form.ausbildungsstand }}
{% if form.ausbildungsstand.errors %}
<div class="invalid-feedback d-block">
{% for error in form.ausbildungsstand.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field" style="grid-column: 1 / -1;">
<label for="{{ form.institution.id_for_label }}" class="form-label">
{{ form.institution.label }}
</label>
{{ form.institution }}
{% if form.institution.errors %}
<div class="invalid-feedback d-block">
{% for error in form.institution.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field" style="grid-column: 1 / -1;">
<label for="{{ form.projekt_beschreibung.id_for_label }}" class="form-label">
{{ form.projekt_beschreibung.label }}
</label>
{{ form.projekt_beschreibung }}
{% if form.projekt_beschreibung.errors %}
<div class="invalid-feedback d-block">
{% for error in form.projekt_beschreibung.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
<!-- Financial Information Section -->
<div class="form-section">
<h4>
<i class="fas fa-euro-sign"></i>
Finanzielle Informationen
</h4>
<div class="two-column-grid">
<div class="form-field">
<label for="{{ form.jaehrliches_einkommen.id_for_label }}" class="form-label">
{{ form.jaehrliches_einkommen.label }}
</label>
{{ form.jaehrliches_einkommen }}
{% if form.jaehrliches_einkommen.errors %}
<div class="invalid-feedback d-block">
{% for error in form.jaehrliches_einkommen.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field" style="grid-column: 1 / -1;">
<div class="form-check">
{{ form.finanzielle_notlage }}
<label class="form-check-label" for="{{ form.finanzielle_notlage.id_for_label }}">
{{ form.finanzielle_notlage.label }}
</label>
</div>
{% if form.finanzielle_notlage.errors %}
<div class="invalid-feedback d-block">
{% for error in form.finanzielle_notlage.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
<!-- Support & Payout Section -->
<div class="form-section">
<h4>
<i class="fas fa-check-circle"></i>
Unterstützung & Auszahlung
</h4>
<div class="two-column-grid">
<div class="form-field">
<div class="form-check mb-2">
{{ form.ist_abkoemmling }}
<label class="form-check-label" for="{{ form.ist_abkoemmling.id_for_label }}">{{ form.ist_abkoemmling.label }}</label>
</div>
</div>
<div class="form-field">
<div class="form-check mb-3">
{{ form.unterstuetzung_bestaetigt }}
<label class="form-check-label" for="{{ form.unterstuetzung_bestaetigt.id_for_label }}">{{ form.unterstuetzung_bestaetigt.label }}</label>
</div>
</div>
<div class="form-field">
<label for="{{ form.haushaltsgroesse.id_for_label }}" class="form-label">{{ form.haushaltsgroesse.label }}</label>
{{ form.haushaltsgroesse }}
</div>
<div class="form-field">
<label for="{{ form.vierteljaehrlicher_betrag.id_for_label }}" class="form-label">Vierteljährliche Bezüge (€)</label>
{{ form.vierteljaehrlicher_betrag }}
</div>
<div class="form-field">
<label for="{{ form.vermoegen.id_for_label }}" class="form-label">{{ form.vermoegen.label }}</label>
{{ form.vermoegen }}
</div>
<div class="form-field" style="grid-column: 1 / -1;">
<label for="{{ form.standard_konto.id_for_label }}" class="form-label">{{ form.standard_konto.label }}</label>
{{ form.standard_konto }}
<div class="form-text">Standardkonto für vierteljährliche Vorauszahlungen</div>
</div>
</div>
</div>
<!-- Study Proof Section -->
<div class="form-section">
<h4>
<i class="fas fa-graduation-cap"></i>
Studiennachweis
</h4>
<div class="two-column-grid">
<div class="form-field">
<div class="form-check">
{{ form.studiennachweis_erforderlich }}
<label class="form-check-label" for="{{ form.studiennachweis_erforderlich.id_for_label }}">{{ form.studiennachweis_erforderlich.label }}</label>
</div>
</div>
<div class="form-field">
<label for="{{ form.letzter_studiennachweis.id_for_label }}" class="form-label">{{ form.letzter_studiennachweis.label }}</label>
{{ form.letzter_studiennachweis }}
<div class="form-text">Stichtage: 15.03 und 15.09</div>
</div>
</div>
</div>
<!-- Status & Notes Section -->
<div class="form-section">
<h4>
<i class="fas fa-cog"></i>
Status und Notizen
</h4>
<div class="two-column-grid">
<div class="form-field">
<div class="form-check">
{{ form.aktiv }}
<label class="form-check-label" for="{{ form.aktiv.id_for_label }}">
{{ form.aktiv.label }}
</label>
</div>
{% if form.aktiv.errors %}
<div class="invalid-feedback d-block">
{% for error in form.aktiv.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-field" style="grid-column: 1 / -1;">
<label for="{{ form.notizen.id_for_label }}" class="form-label">
{{ form.notizen.label }}
</label>
{{ form.notizen }}
{% if form.notizen.errors %}
<div class="invalid-feedback d-block">
{% for error in form.notizen.errors %}
{{ error }}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
<!-- Form Actions -->
<div class="d-flex justify-content-between">
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-outline-secondary">
<i class="fas fa-times me-2"></i>Abbrechen
</a>
<button type="submit" class="btn btn-primary">
<i class="fas fa-save me-2"></i>Speichern
</button>
</div>
</form>
</div> </div>
</div> </div>
</div> </div>
<!-- Sidebar mit Hilfe --> {# ── Kontaktinformationen ── #}
<div class="col-lg-4"> <div class="card shadow-sm mb-4">
{% help_box 'destinataer_new' user %} <div class="card-header bg-dark text-white py-2">
<i class="fas fa-address-book me-2"></i>Kontaktinformationen
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-3">
<label for="{{ form.email.id_for_label }}" class="form-label">{{ form.email.label }}</label>
{{ form.email }}
{% if form.email.errors %}<div class="invalid-feedback d-block">{{ form.email.errors.0 }}</div>{% endif %}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.telefon.id_for_label }}" class="form-label">{{ form.telefon.label }}</label>
{{ form.telefon }}
{% if form.telefon.errors %}<div class="invalid-feedback d-block">{{ form.telefon.errors.0 }}</div>{% endif %}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.iban.id_for_label }}" class="form-label">{{ form.iban.label }}</label>
{{ form.iban }}
{% if form.iban.errors %}<div class="invalid-feedback d-block">{{ form.iban.errors.0 }}</div>{% endif %}
</div>
<div class="col-12 mb-3">
<label for="{{ form.adresse.id_for_label }}" class="form-label">{{ form.adresse.label }}</label>
{{ form.adresse }}
{% if form.adresse.errors %}<div class="invalid-feedback d-block">{{ form.adresse.errors.0 }}</div>{% endif %}
</div>
</div>
</div>
</div> </div>
</div>
{# ── Berufliche Informationen ── #}
<div class="card shadow-sm mb-4">
<div class="card-header bg-dark text-white py-2">
<i class="fas fa-briefcase me-2"></i>Berufliche Informationen
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-3">
<label for="{{ form.berufsgruppe.id_for_label }}" class="form-label">{{ form.berufsgruppe.label }}</label>
{{ form.berufsgruppe }}
{% if form.berufsgruppe.errors %}<div class="invalid-feedback d-block">{{ form.berufsgruppe.errors.0 }}</div>{% endif %}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.ausbildungsstand.id_for_label }}" class="form-label">{{ form.ausbildungsstand.label }}</label>
{{ form.ausbildungsstand }}
{% if form.ausbildungsstand.errors %}<div class="invalid-feedback d-block">{{ form.ausbildungsstand.errors.0 }}</div>{% endif %}
</div>
<div class="col-12 mb-3">
<label for="{{ form.institution.id_for_label }}" class="form-label">{{ form.institution.label }}</label>
{{ form.institution }}
{% if form.institution.errors %}<div class="invalid-feedback d-block">{{ form.institution.errors.0 }}</div>{% endif %}
</div>
<div class="col-12 mb-3">
<label for="{{ form.projekt_beschreibung.id_for_label }}" class="form-label">{{ form.projekt_beschreibung.label }}</label>
{{ form.projekt_beschreibung }}
{% if form.projekt_beschreibung.errors %}<div class="invalid-feedback d-block">{{ form.projekt_beschreibung.errors.0 }}</div>{% endif %}
</div>
</div>
</div>
</div>
{# ── Finanzielle Informationen ── #}
<div class="card shadow-sm mb-4">
<div class="card-header bg-dark text-white py-2">
<i class="fas fa-euro-sign me-2"></i>Finanzielle Informationen
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-3">
<label for="{{ form.jaehrliches_einkommen.id_for_label }}" class="form-label">{{ form.jaehrliches_einkommen.label }}</label>
{{ form.jaehrliches_einkommen }}
{% if form.jaehrliches_einkommen.errors %}<div class="invalid-feedback d-block">{{ form.jaehrliches_einkommen.errors.0 }}</div>{% endif %}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.vermoegen.id_for_label }}" class="form-label">{{ form.vermoegen.label }}</label>
{{ form.vermoegen }}
{% if form.vermoegen.errors %}<div class="invalid-feedback d-block">{{ form.vermoegen.errors.0 }}</div>{% endif %}
</div>
<div class="col-12 mb-3">
<div class="form-check">
{{ form.finanzielle_notlage }}
<label class="form-check-label" for="{{ form.finanzielle_notlage.id_for_label }}">{{ form.finanzielle_notlage.label }}</label>
</div>
{% if form.finanzielle_notlage.errors %}<div class="invalid-feedback d-block">{{ form.finanzielle_notlage.errors.0 }}</div>{% endif %}
</div>
</div>
</div>
</div>
{# ── Unterstuetzung & Auszahlung ── #}
<div class="card shadow-sm mb-4">
<div class="card-header bg-dark text-white py-2">
<i class="fas fa-check-circle me-2"></i>Unterstuetzung & Auszahlung
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-3">
<div class="form-check">
{{ form.ist_abkoemmling }}
<label class="form-check-label" for="{{ form.ist_abkoemmling.id_for_label }}">{{ form.ist_abkoemmling.label }}</label>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="form-check">
{{ form.unterstuetzung_bestaetigt }}
<label class="form-check-label" for="{{ form.unterstuetzung_bestaetigt.id_for_label }}">{{ form.unterstuetzung_bestaetigt.label }}</label>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.haushaltsgroesse.id_for_label }}" class="form-label">{{ form.haushaltsgroesse.label }}</label>
{{ form.haushaltsgroesse }}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.monatliche_bezuege.id_for_label }}" class="form-label">{{ form.monatliche_bezuege.label }}</label>
{{ form.monatliche_bezuege }}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.vierteljaehrlicher_betrag.id_for_label }}" class="form-label">Vierteljaehrlicher Betrag (&euro;)</label>
{{ form.vierteljaehrlicher_betrag }}
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.standard_konto.id_for_label }}" class="form-label">{{ form.standard_konto.label }}</label>
{{ form.standard_konto }}
<div class="form-text">Standardkonto fuer vierteljaehrliche Vorauszahlungen</div>
</div>
</div>
</div>
</div>
{# ── Studiennachweis ── #}
<div class="card shadow-sm mb-4">
<div class="card-header bg-dark text-white py-2">
<i class="fas fa-graduation-cap me-2"></i>Studiennachweis
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6 mb-3">
<div class="form-check">
{{ form.studiennachweis_erforderlich }}
<label class="form-check-label" for="{{ form.studiennachweis_erforderlich.id_for_label }}">{{ form.studiennachweis_erforderlich.label }}</label>
</div>
</div>
<div class="col-md-6 mb-3">
<label for="{{ form.letzter_studiennachweis.id_for_label }}" class="form-label">{{ form.letzter_studiennachweis.label }}</label>
{{ form.letzter_studiennachweis }}
<div class="form-text">Stichtage: 15.03 und 15.09</div>
</div>
</div>
</div>
</div>
{# ── Status & Notizen ── #}
<div class="card shadow-sm mb-4">
<div class="card-header bg-dark text-white py-2">
<i class="fas fa-cog me-2"></i>Status und Notizen
</div>
<div class="card-body">
<div class="row">
<div class="col-12 mb-3">
<div class="form-check">
{{ form.aktiv }}
<label class="form-check-label" for="{{ form.aktiv.id_for_label }}">{{ form.aktiv.label }}</label>
</div>
{% if form.aktiv.errors %}<div class="invalid-feedback d-block">{{ form.aktiv.errors.0 }}</div>{% endif %}
</div>
<div class="col-12 mb-3">
<label for="{{ form.notizen.id_for_label }}" class="form-label">{{ form.notizen.label }}</label>
{{ form.notizen }}
{% if form.notizen.errors %}<div class="invalid-feedback d-block">{{ form.notizen.errors.0 }}</div>{% endif %}
</div>
</div>
</div>
</div>
<hr>
<div class="d-flex justify-content-between">
<a href="{% url 'stiftung:destinataer_list' %}" class="btn btn-secondary">
<i class="fas fa-times me-2"></i>Abbrechen
</a>
<button type="submit" class="btn btn-success">
<i class="fas fa-save me-2"></i>Speichern
</button>
</div>
</form>
</div>
<div class="col-lg-4">
{% help_box 'destinataer_new' user %}
</div> </div>
</div> </div>
</div>
{% endblock %} {% endblock %}