maciejpi/nordabiz
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Clickable attendee badges in calendar events

Browse Source 
- Person badge: blue background with user icon
- Company badge: red/pink background, clickable link to company profile
- Hover effects on company badge
- Applied system-wide to all calendar events

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Maciej Pienczyn 2026-01-13 14:57:11 +01:00
parent 709c20c48e
commit 158c305f09
1 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
templates/calendar/event.html
View File

@ -83,27 +83,58 @@
.attendees-list {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
gap: var(--spacing-sm);
}
.attendee-badge {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
padding: var(--spacing-xs);
background: var(--background);
border-radius: var(--radius);
font-size: var(--font-size-sm);
}
.attendee-name {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: #dbeafe;
color: #1e40af;
border-radius: var(--radius);
font-weight: 500;
color: var(--text-primary);
font-size: var(--font-size-sm);
}
.attendee-name svg {
width: 14px;
height: 14px;
}
.attendee-company {
color: var(--text-secondary);
font-size: var(--font-size-xs);
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: #fee2e2;
color: #991b1b;
border-radius: var(--radius);
font-weight: 500;
font-size: var(--font-size-sm);
text-decoration: none;
transition: var(--transition);
}
.attendee-company:hover {
background: #fecaca;
transform: translateY(-1px);
}
.attendee-company svg {
width: 14px;
height: 14px;
}
.back-link {
@ -227,9 +258,20 @@
<div class="attendees-list">
{% for attendee in event.attendees|sort(attribute='user.name') %}
<div class="attendee-badge">
<span class="attendee-name">{{ attendee.user.name or attendee.user.email.split('@')[0] }}</span>
<span class="attendee-name">
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
{{ attendee.user.name or attendee.user.email.split('@')[0] }}
</span>
{% if attendee.user.company %}
<span class="attendee-company">{{ attendee.user.company.name }}</span>
<a href="{{ url_for('company_detail', slug=attendee.user.company.slug) }}" class="attendee-company">
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path d="M19 21V5a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v5m-4 0h4"></path>
</svg>
{{ attendee.user.company.name }}
</a>
{% endif %}
</div>
{% endfor %}