stefankoelle/icloud-contacts-sync
1
0
Fork 0
mirror of https://github.com/skoelle/icloud-contacts-sync.git synced 2026-09-17 15:30:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

web dashboard birthday layout like search

Browse Source
This commit is contained in:
stefankoelle
2026-08-05 17:19:23 +02:00
parent be7832ea31
commit 0d71ccd3a6
1 changed files with 45 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/templates/dashboard.html
+45 -21
View File
@@ -147,27 +147,52 @@
.birthday-list { .birthday-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 1rem;
} }
.birthday-item { .birthday-item {
display: block;
background: #fff;
border-radius: 8px;
padding: 1rem 1.25rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-decoration: none;
color: inherit;
transition: box-shadow 0.15s, transform 0.15s;
}
.birthday-item:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transform: translateY(-1px);
}
.birthday-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: flex-start;
padding: 0.5rem 0.75rem; gap: 1rem;
background: #f8f9fa;
border-radius: 6px;
} }
.birthday-name { .birthday-name {
font-size: 1.125rem;
font-weight: 600;
color: #222;
}
.birthday-organization {
font-size: 0.875rem; font-size: 0.875rem;
color: #333; color: #666;
margin-top: 0.25rem;
} }
.birthday-date { .birthday-date {
font-size: 0.8rem; font-size: 0.875rem;
color: #888; color: #888;
white-space: nowrap; margin-top: 0.25rem;
}
.birthday-date::before {
content: "\1F382 ";
} }
.empty-state { .empty-state {
@@ -273,20 +298,19 @@
{% if upcoming_birthdays %} {% if upcoming_birthdays %}
<div class="birthday-list"> <div class="birthday-list">
{% for b in upcoming_birthdays %} {% for b in upcoming_birthdays %}
<div class="birthday-item"{% if b.birthday.month == today.month and b.birthday.day == today.day %} style="background: #fff3cd;"{% endif %}> <a href="/contacts/{{ b.id }}" class="birthday-item"{% if b.birthday.month == today.month and b.birthday.day == today.day %} style="background: #fff3cd;"{% endif %}>
<div class="birthday-name"> <div class="birthday-header">
<a href="/contacts/{{ b.id }}" style="color: #0066cc; text-decoration: none;">{{ b.full_name or '(Kein Name)' }}</a> <div>
{% if b.organization %} <div class="birthday-name">{{ b.full_name or '(Kein Name)' }}</div>
<span style="color: #888; font-size: 0.8rem;"> · {{ b.organization }}</span> {% if b.organization %}
{% endif %} <div class="birthday-organization">{{ b.organization }}</div>
{% endif %}
<div class="birthday-date">
{{ b.birthday.strftime('%d.%m.') }}{% if b.birthday.year and b.birthday.year < current_year %} · {{ current_year - b.birthday.year }} Jahre{% endif %}
</div>
</div>
</div> </div>
<div class="birthday-date"> </a>
{{ b.birthday.strftime('%d.%m.') }}
{% if b.birthday.year and b.birthday.year < current_year %}
· {{ current_year - b.birthday.year }} Jahre
{% endif %}
</div>
</div>
{% endfor %} {% endfor %}
</div> </div>
{% else %} {% else %}