EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: collapse pickup tables with more than 3 rows

Browse Source
This commit is contained in:
Björn Fromme
2024-11-12 15:54:21 +01:00
parent fc55a59874
commit a4be4f6fb7
2 changed files with 56 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/autocollapse_controller.js
+7 -3
View File
@@ -9,6 +9,10 @@ export default class extends Controller {
type: Number, type: Number,
default: 0, default: 0,
}, },
height: {
type: Number,
default: 0,
},
expanded: { expanded: {
type: Boolean, type: Boolean,
default: true, default: true,
@@ -16,10 +20,10 @@ export default class extends Controller {
} }
connect() { connect() {
// Determine height of element controlling max height // Determine height of element controlling max height if available
this.maxHeight = this.sizerTarget.offsetHeight this.maxHeight = this.hasSizerTarget ? this.sizerTarget.offsetHeight : this.heightValue
// Determine rendered height of element holding content
// Determine rendered height of element holding content
this.contentHeight = this.containerTarget.offsetHeight this.contentHeight = this.containerTarget.offsetHeight
// Determine height of collapsed content element considering // Determine height of collapsed content element considering
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Travelinfo/Index.html
+49 -29
View File
@@ -73,35 +73,29 @@
</f:else> </f:else>
</f:if> </f:if>
<f:if condition="{date.pickups -> f:count()} > 0"> <f:if condition="{date.pickups -> f:count()} > 0">
<h3 class="text-white"> <f:if condition="{date.pickups -> f:count()} <= 3">
Bus-Zustiege <f:then>
</h3> <f:render section="Pickups" arguments="{_all}"/>
<table class="w-full mb-4 bg-zinc-200 text-zinc-800 text-xs md:text-base"> </f:then>
<tr> <f:else>
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base"> <div data-controller="autocollapse" data-autocollapse-height-value="400" data-autocollapse-offset-value="64" class="pb-4">
Zustieg <div class="relative pb-12" data-autocollapse-target="container">
</th> <h3 class="text-white">
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base"> Bus-Zustiege
Datum </h3>
</th> <f:render section="Pickups" arguments="{_all}"/>
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base"> <div class="absolute left-0 bottom-0 w-full h-12 bg-white flex items-center">
Uhrzeit <button type="button"
</th> data-autocollapse-target="button"
</tr> data-action="autocollapse#toggle"
<f:for each="{date.pickups}" as="pickup"> class="hidden text-ep-primary w-10 h-10 ml-2 group toggle-more">
<tr class="odd:bg-zinc-50 align-top"> <f:render section="Icon" arguments="{icon: 'toggle'}" />
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"> </button>
{pickup.city}<br><span class="text-xs">{pickup.street}</span> </div>
</td> </div>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2"> </div>
{pickup.date} </f:else>
</td> </f:if>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
{f:if(condition: pickup.time, then: '{pickup.time} Uhr', else: '???')}
</td>
</tr>
</f:for>
</table>
</f:if> </f:if>
<f:if condition="{travelinfo.selfArrangedText}"> <f:if condition="{travelinfo.selfArrangedText}">
<h3 class="text-white"> <h3 class="text-white">
@@ -219,6 +213,32 @@
</f:link.typolink> </f:link.typolink>
</f:section> </f:section>
<f:section name="Pickups">
<h3 class="text-white">
Bus-Zustiege
</h3>
<table class="w-full bg-zinc-200 text-zinc-800 text-xs md:text-base">
<tr>
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
Zustieg
</th>
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
Datum/Uhrzeit
</th>
</tr>
<f:for each="{date.pickups}" as="pickup">
<tr class="odd:bg-zinc-50 align-top">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
{pickup.city}<br><span class="text-xs">{pickup.street}</span>
</td>
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
{pickup.date}<br>{f:if(condition: pickup.time, then: '{pickup.time} Uhr', else: '???')}
</td>
</tr>
</f:for>
</table>
</f:section>
<f:section name="Icon"> <f:section name="Icon">
<f:switch expression="{icon}"> <f:switch expression="{icon}">
<f:case value="travel"> <f:case value="travel">