Design suggestion from AI. Not very useable
This commit is contained in:
@@ -1,30 +1,175 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Stichwort: {{stichwort.stichwort}}{% endblock %}
|
||||
{% block title %}Stichwort: {{ stichwort.stichwort }}{% endblock %}
|
||||
{% block breadcrumb_items %}
|
||||
<li class="breadcrumb-item"><a href="/stichworte/">Stichworte</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">{{ stichwort.stichwort }}</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>{{stichwort}}</h1>
|
||||
{% if stichwort.erklaerung %}
|
||||
<div class="card mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center bg-secondary text-light">
|
||||
<h3 class="h5 m-0">Beschreibung</h3>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<div class="row">
|
||||
<div class="col-lg-8">
|
||||
<!-- Stichwort Header -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h1 class="h3 mb-0">🏷️ {{ stichwort.stichwort }}</h1>
|
||||
</div>
|
||||
|
||||
{% if stichwort.erklaerung %}
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">📖 Beschreibung</h5>
|
||||
{% for typ, html in stichwort.erklaerung %}
|
||||
{% if html %}<div>{{ html|safe }}</div>{% endif %}{% endfor %}
|
||||
{% if html %}
|
||||
<div class="content-section">{{ html|safe }}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<!-- Relevante Vorgaben -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h3 class="h5 mb-0">📝 Relevante Vorgaben</h3>
|
||||
<span class="badge bg-success">
|
||||
{% for vorgabe in stichwort.vorgaben %}
|
||||
{% if vorgabe.get_status == "active" %}
|
||||
{% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
Aktiv
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% if stichwort.vorgaben %}
|
||||
<div class="list-group">
|
||||
{% for vorgabe in stichwort.vorgaben %}
|
||||
{% if vorgabe.get_status == "active" %}
|
||||
<div class="list-group-item">
|
||||
<div class="d-flex align-items-start">
|
||||
<span class="badge bg-secondary me-3">{{ vorgabe.Vorgabennummer }}</span>
|
||||
<div class="flex-grow-1">
|
||||
<h6 class="mb-1">
|
||||
<a href="/dokumente/{{ vorgabe.dokument.nummer }}/#{{vorgabe.Vorgabennummer}}"
|
||||
class="text-decoration-none">
|
||||
{{ vorgabe.titel }}
|
||||
</a>
|
||||
</h6>
|
||||
<small class="text-muted">
|
||||
Standard: {{ vorgabe.dokument.nummer }} – {{ vorgabe.dokument.name }}
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-4">
|
||||
<p class="text-muted mb-0">
|
||||
Keine aktiven Vorgaben für dieses Stichwort gefunden.
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="card mb-4">
|
||||
<div class="card-header d-flex justify-content-between align-items-center bg-secondary text-light">
|
||||
<h3 class="h5 m-0">Relevante Vorgaben</h3>
|
||||
<!-- Sidebar -->
|
||||
<div class="col-lg-4">
|
||||
<!-- Quick Actions -->
|
||||
<div class="card mb-4 sticky-top" style="top: 1rem;">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">⚡ Aktionen</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-grid gap-2">
|
||||
<a href="/stichworte/" class="btn btn-outline btn-sm">
|
||||
← Zurück zur Liste
|
||||
</a>
|
||||
<a href="/search/?q={{ stichwort.stichwort }}" class="btn btn-outline btn-sm">
|
||||
🔍 Nach "{{ stichwort.stichwort }}" suchen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">📊 Statistiken</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row text-center">
|
||||
<div class="col-6">
|
||||
<h4 class="text-primary mb-1">
|
||||
{% for vorgabe in stichwort.vorgaben %}
|
||||
{% if vorgabe.get_status == "active" %}
|
||||
{% if forloop.first %}1{% else %}{{ forloop.counter }}{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</h4>
|
||||
<small class="text-muted">Aktive Vorgaben</small>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<h4 class="text-info mb-1">
|
||||
{{ stichwort.vorgaben|length }}
|
||||
</h4>
|
||||
<small class="text-muted">Gesamt</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Stichworte -->
|
||||
{% if related_stichworte %}
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">🔗 Verwandte Stichworte</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex flex-wrap gap-2">
|
||||
{% for related in related_stichworte %}
|
||||
<a href="/stichworte/{{ related.stichwort }}/"
|
||||
class="badge bg-light text-dark text-decoration-none">
|
||||
{{ related.stichwort }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-2">
|
||||
<ul>
|
||||
{% for vorgabe in stichwort.vorgaben %}
|
||||
{% if vorgabe.get_status == "active" %}
|
||||
<li><a href="{% url 'standard_detail' nummer=vorgabe.dokument.nummer %}#{{vorgabe.Vorgabennummer}}">{{vorgabe.Vorgabennummer}}</a>: {{vorgabe.titel}}</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.content-section {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content-section h1, .content-section h2, .content-section h3 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.list-group-item:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.list-group-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -1,14 +1,144 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Stichworte{% endblock %}
|
||||
{% block content %}
|
||||
<h1>Stichworte</h1>
|
||||
{% block breadcrumb_items %}
|
||||
<li class="breadcrumb-item active" aria-current="page">Stichworte</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>🏷️ Stichworte</h1>
|
||||
<div class="d-flex gap-2">
|
||||
<span class="badge bg-primary">{{ stichworte|length }} Kategorien</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filter -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="row g-3">
|
||||
<div class="col-md-8">
|
||||
<label for="stichwort-search" class="form-label">🔍 Stichworte durchsuchen</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="stichwort-search"
|
||||
placeholder="Stichwort eingeben..."
|
||||
onkeyup="filterStichworte()">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label for="letter-filter" class="form-label">🔤 Buchstabe</label>
|
||||
<select class="form-select" id="letter-filter" onchange="filterStichworte()">
|
||||
<option value="">Alle Buchstaben</option>
|
||||
{% for Anfang, Worte in stichworte.items %}
|
||||
<option value="{{ Anfang }}">{{ Anfang }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stichworte Grid -->
|
||||
<div class="row" id="stichworte-container">
|
||||
{% for Anfang, Worte in stichworte.items %}
|
||||
<h2>{{ Anfang }}</h2>
|
||||
<ul>
|
||||
{% for Wort in Worte %}
|
||||
<li><a href="{% url 'stichwort_detail' stichwort=Wort %}">{{ Wort }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
<div class="col-lg-4 col-md-6 mb-4 stichwort-category" data-letter="{{ Anfang }}">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h3 class="h5 mb-0">{{ Anfang }}</h3>
|
||||
<span class="badge bg-secondary">{{ Worte|length }} Stichworte</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="list-group list-group-flush">
|
||||
{% for Wort in Worte %}
|
||||
<a href="/stichworte/{{ Wort }}/" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
|
||||
<span>{{ Wort }}</span>
|
||||
<span class="badge bg-light text-dark">→</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- JavaScript for filtering -->
|
||||
<script>
|
||||
function filterStichworte() {
|
||||
const searchTerm = document.getElementById('stichwort-search').value.toLowerCase();
|
||||
const letterFilter = document.getElementById('letter-filter').value;
|
||||
const categories = document.querySelectorAll('.stichwort-category');
|
||||
|
||||
categories.forEach(category => {
|
||||
const letter = category.dataset.letter;
|
||||
const items = category.querySelectorAll('.list-group-item');
|
||||
let hasVisibleItems = false;
|
||||
|
||||
// Check if category matches letter filter
|
||||
const matchesLetter = !letterFilter || letter === letterFilter;
|
||||
|
||||
// Filter items within category
|
||||
items.forEach(item => {
|
||||
const text = item.textContent.toLowerCase();
|
||||
const matchesSearch = !searchTerm || text.includes(searchTerm);
|
||||
|
||||
if (matchesSearch && matchesLetter) {
|
||||
item.style.display = 'flex';
|
||||
hasVisibleItems = true;
|
||||
} else {
|
||||
item.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Show/hide category based on visible items
|
||||
category.style.display = (matchesLetter && hasVisibleItems) ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Add hover effects
|
||||
const items = document.querySelectorAll('.list-group-item');
|
||||
items.forEach(item => {
|
||||
item.addEventListener('mouseenter', function() {
|
||||
this.style.backgroundColor = 'var(--bg-secondary)';
|
||||
});
|
||||
|
||||
item.addEventListener('mouseleave', function() {
|
||||
this.style.backgroundColor = '';
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.list-group-item {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.list-group-item:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
.list-group-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: between;
|
||||
align-items: center;
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.list-group-item {
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user