rene/banyaro
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Sprint 1: Tagebuch — Backend-Routes + Frontend-Modul

Browse source 
diary.py: CRUD, KI-Auto-Tags, Medien-Upload, Ownership-Check
diary.js: Timeline (nach Monat gruppiert), Erstellen/Bearbeiten/Löschen,
Foto-Upload, Meilenstein-Hervorhebung, Tags, Detail-Modal
components.css: Diary-Card-Styles (Timeline, Milestone, Foto, Tags)
This commit is contained in:
rene 2026-04-12 17:26:28 +02:00
parent 70f5eedafa
commit 44b1451966
3 changed files with 710 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

130
backend/static/css/components.css
View file

@ -679,3 +679,133 @@ textarea.form-control {
.fab:hover { transform: scale(1.05); }
.fab:active { transform: scale(0.95); }
}
/* ------------------------------------------------------------
12. TAGEBUCH
------------------------------------------------------------ */
/* Monats-Trennlinie */
.diary-month-header {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--c-text-secondary);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: var(--space-4) 0 var(--space-2);
border-bottom: 1px solid var(--c-border);
margin-bottom: var(--space-3);
}
.diary-month-header:first-child {
padding-top: 0;
}
/* Eintragskarte */
.diary-card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-3);
overflow: hidden;
cursor: pointer;
transition: box-shadow var(--transition-fast),
transform var(--transition-fast);
box-shadow: var(--shadow-xs);
-webkit-tap-highlight-color: transparent;
}
.diary-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.diary-card:active {
transform: scale(0.99);
}
/* Meilenstein-Hervorhebung */
.diary-card--milestone {
border-color: var(--c-primary);
border-width: 2px;
background: linear-gradient(
135deg,
var(--c-surface) 0%,
color-mix(in srgb, var(--c-primary) 6%, var(--c-surface)) 100%
);
}
/* Foto oben */
.diary-card-photo {
width: 100%;
height: 180px;
overflow: hidden;
}
.diary-card-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Card Body */
.diary-card-body {
padding: var(--space-3) var(--space-4);
}
/* Meta-Zeile: Typ + Datum */
.diary-card-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-1);
}
.diary-card-type {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--c-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.diary-card-date {
font-size: var(--text-xs);
color: var(--c-text-secondary);
}
/* Titel */
.diary-card-title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--c-text);
margin-bottom: var(--space-1);
}
/* Text-Vorschau */
.diary-card-text {
font-size: var(--text-sm);
color: var(--c-text-secondary);
line-height: 1.5;
margin: 0 0 var(--space-2);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Tags */
.diary-card-tags {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin-top: var(--space-1);
}
/* Detail-Ansicht */
.diary-detail-milestone-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
background: color-mix(in srgb, var(--c-primary) 12%, transparent);
color: var(--c-primary-dark);
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-full);
margin-bottom: var(--space-3);
}