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

feat: extract collapsible container into partial

Browse Source
This commit is contained in:
Björn Fromme
2026-08-17 16:07:26 +02:00
parent a5d97f1206
commit f00351706e
4 changed files with 69 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/_partials/_collapsible.html.twig
+35
View File
@@ -0,0 +1,35 @@
{#
Collapsible section with a heading trigger and a chevron.
heading string visible heading text (required)
id string unique per page; wires aria-controls (required)
open bool initial state (default false)
headingLevel int aria-level of the heading (default 2)
contentClass string classes on the body wrapper (default 'rte-content')
storageKey string persist open state in sessionStorage (default '')
#}
<div {{ stimulus_controller('toggle',
{ 'open': open|default(false), 'storageKey': storageKey|default('') },
{ 'closed': 'hidden', 'iconOpen': 'rotate-180' }) }}>
<button type="button"
class="flex items-center justify-between w-full text-left"
data-action="toggle#toggle"
data-toggle-target="trigger"
aria-expanded="{{ open|default(false) ? 'true' : 'false' }}"
aria-controls="{{ id }}-content">
<span class="block text-2xl md:text-3xl font-bold mb-2"
role="heading"
aria-level="{{ headingLevel|default(2) }}">
{{ heading }}
</span>
<span class="shrink-0 transition-transform" data-toggle-target="icon">
{{ icon('chevron-down', 'w-5 h-5') }}
</span>
</button>
<div id="{{ id }}-content"
class="{{ contentClass|default('rte-content') }}"
data-toggle-target="content">
{% block body %}{% endblock %}
</div>
</div>
templates/groups/booking/offer.html.twig
+28 -49
View File
@@ -97,25 +97,11 @@
{# hotel description #}
{% if ctx.hotelCmsData is not null %}
<div {{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden', 'iconOpen': 'rotate-180' }) }}>
<button type="button"
class="flex items-center justify-between w-full text-left"
data-action="toggle#toggle">
<span class="block text-2xl md:text-3xl font-bold mb-2"
role="heading"
aria-level="2">
Die Unterkunft
</span>
<svg class="w-5 h-5 shrink-0 transition-transform"
data-toggle-target="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline>
</svg>
</button>
<div class="rte-content" data-toggle-target="content">
{% embed '_partials/_collapsible.html.twig' with {
heading: 'Die Unterkunft',
id: 'accommodation',
} %}
{% block body %}
{% set icons = ctx.hotelCmsData.icons %}
{% set iconMap = {
bedsCount: { icon: 'bed', label: 'Anzahl Betten' },
@@ -167,15 +153,8 @@
</h2>
{{ ctx.hotelCmsData.roomTypes | raw }}
{% endif %}
{% if ctx.hotelCmsData.additionalInformation|striptags|trim is not empty %}
<h2>
Weitere Infos
</h2>
{{ ctx.hotelCmsData.additionalInformation | raw }}
{% endif %}
</div>
</div>
{% endblock %}
{% endembed %}
{{ macros.imageGallery(ctx.hotelCmsData.images.resized.l, ctx.hotelCmsData.images.resized.m, ctx.accommodation.name) }}
{% endif %}
@@ -183,25 +162,12 @@
{# region description #}
{% if ctx.hotelCmsData is not null and ctx.hotelCmsData.region is not null %}
{% set region = ctx.hotelCmsData.region %}
<div {{ stimulus_controller('toggle', { 'open': false }, { 'closed': 'hidden', 'iconOpen': 'rotate-180' }) }}>
<button type="button"
class="flex items-center justify-between w-full text-left"
data-action="toggle#toggle">
<span class="block text-2xl md:text-3xl font-bold mb-2"
role="heading"
aria-level="2">
Die Region {{ region.name }}
</span>
<svg class="w-5 h-5 shrink-0 transition-transform"
data-toggle-target="icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline>
</svg>
</button>
<div class="rte-content" data-toggle-target="content">
{% embed '_partials/_collapsible.html.twig' with {
heading: 'Die Region ' ~ region.name,
id: 'region',
region: region,
} %}
{% block body %}
{% if region.altitude or region.length or region.lifts %}
<ul class="flex flex-wrap gap-x-6 text-sm not-prose">
{% if region.altitude %}
@@ -229,8 +195,8 @@
<h2>Aktuelles aus der Region</h2>
{{ region.news | raw }}
{% endif %}
</div>
</div>
{% endblock %}
{% endembed %}
{% if region.regionMaps is not null and region.regionMaps | length > 0 %}
{% set regionMapImages = region.regionMaps | map(url => {url: url}) %}
@@ -239,6 +205,19 @@
{{ macros.imageGallery(region.images.resized.l ?? [], region.images.resized.m ?? [], region.name) }}
{% endif %}
{# additional information #}
{% if ctx.hotelCmsData is not null and ctx.hotelCmsData.additionalInformation|striptags|trim is not empty %}
{% embed '_partials/_collapsible.html.twig' with {
heading: 'Zusatzinformationen',
id: 'additional-information',
} %}
{% block body %}
{{ ctx.hotelCmsData.additionalInformation | raw }}
{% endblock %}
{% endembed %}
{% endif %}
</div>
</div>