EP/myep
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement screendesign

Browse Source
This commit is contained in:
Björn Fromme
2026-03-16 11:59:12 +01:00
parent 39e6cc4d68
commit 4a2d1f4a02
84 changed files with 2807 additions and 2603 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/booking/_participant_card.html.twig
+32 -54
View File
@@ -4,66 +4,44 @@
{% set errorMessages = cardData.errorMessages|default([]) %}
{% set mode = mode|default('create') %}
<div id="participant-card-{{ index }}"
class="{{ html_classes('border rounded p-4', { 'border-gray-400 bg-gray-50': isCanceled, 'border-red-700': not isValid }) }}">
<div class="flex justify-between items-start">
<div class="flex-1">
<div class="flex items-start gap-3">
<div class="flex-shrink-0"
{{ stimulus_controller('gravatar', {
url: gravatar_url(cardData.email),
alt: cardData.name
}, {
image: 'w-12 h-12 rounded-full'
}) }}
{{ qa_attribute('participant-avatar', index) }}>
{{ icon('user', 'w-12 h-12 text-gray-400') }}
</div>
<div class="flex-1">
<div class="flex items-center gap-2">
<h3 class="font-semibold {{ isCanceled ? 'text-gray-600' : '' }}" {{ qa_attribute('participant-name', index) }}>
{{ cardData.name }}
</h3>
{% if isCanceled %}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-700 text-white" {{ qa_attribute('participant-canceled', index) }}>
storniert
</span>
{% endif %}
{% if not isValid %}
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-700 text-white" {{ qa_attribute('participant-invalid', index) }}>
unvollständige oder fehlerhafte Daten
</span>
{% endif %}
</div>
<p class="text-sm text-gray-600" {{ qa_attribute('participant-room-name', index) }}>{{ cardData.roomName }}</p>
</div>
</div>
<div class="py-4" id="participant-card-{{ index }}">
<div class="flex items-start space-x-4">
<div class="{{ html_classes('w-12 h-12 inline-flex flex-shrink-0 items-center justify-center rounded-full text-white text-2xl font-bold', { 'bg-primary-dark': isValid, 'bg-red-500': not isValid }) }}">
{{ participantNumber }}
</div>
<div class="flex items-center gap-4">
<span class="font-medium {{ isCanceled ? 'text-gray-500' : '' }}" {{ qa_attribute('participant-price', index) }}>{{ cardData.price }}</span>
<div class="flex-1 leading-5">
<div class="font-semibold mb-1">
{{ cardData.name }}
</div>
{% if isCanceled %}
<button type="button"
class="button bg-button bg-button--secondary opacity-50 cursor-not-allowed"
disabled
title="Stornierte Teilnehmer können nicht bearbeitet werden">
Bearbeiten
</button>
<div class="text-xs font-medium text-gray-700" {{ qa_attribute('participant-canceled', index) }}>
storniert
</div>
{% elseif not isValid %}
<div class="text-xs font-medium text-red-500" {{ qa_attribute('participant-invalid', index) }}>
unvollständige/fehlerhafte Daten
</div>
{% else %}
<div class="text-gray-600" {{ qa_attribute('participant-room-name', index) }}>
{{ cardData.roomName }}
<br>
{{ cardData.price }}
</div>
{% endif %}
</div>
<div class="flex flex-col justify-center">
{% if not isCanceled %}
{% if mode == 'edit' %}
<a href="{{ path('app_booking_edit_participant', {id: bookingId, index: index}) }}"
class="button bg-button bg-button--secondary"
data-action="click->loading#show"
{{ qa_attribute('btn-edit-participant', index) }}>
Bearbeiten
</a>
{% set url = path('app_booking_edit_participant', {id: bookingId, index: index}) %}
{% else %}
<a href="{{ path('app_booking_create_step_2_participant', {index: index}) }}"
class="button bg-button bg-button--secondary"
data-action="click->loading#show"
{{ qa_attribute('btn-edit-participant', index) }}>
Bearbeiten
</a>
{% set url = path('app_booking_create_step_2_participant', {index: index}) %}
{% endif %}
<a href="{{ url }}"
class="button button--small button--primary"
data-action="click->loading#show"
{{ qa_attribute('btn-edit-participant', index) }}>
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M92.69,216H48a8,8,0,0,1-8-8V163.31a8,8,0,0,1,2.34-5.65L165.66,34.34a8,8,0,0,1,11.31,0L221.66,79a8,8,0,0,1,0,11.31L98.34,213.66A8,8,0,0,1,92.69,216Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="136" y1="64" x2="192" y2="120" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="164" y1="92" x2="68" y2="188" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="95.49" y1="215.49" x2="40.51" y2="160.51" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
</a>
{% endif %}
</div>
</div>