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,
default: 0,
},
height: {
type: Number,
default: 0,
},
expanded: {
type: Boolean,
default: true,
@@ -16,10 +20,10 @@ export default class extends Controller {
}
connect() {
// Determine height of element controlling max height
this.maxHeight = this.sizerTarget.offsetHeight
// Determine rendered height of element holding content
// Determine height of element controlling max height if available
this.maxHeight = this.hasSizerTarget ? this.sizerTarget.offsetHeight : this.heightValue
// Determine rendered height of element holding content
this.contentHeight = this.containerTarget.offsetHeight
// 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:if>
<f:if condition="{date.pickups -> f:count()} > 0">
<h3 class="text-white">
Bus-Zustiege
</h3>
<table class="w-full mb-4 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
</th>
<th class="border-r border-white/50 px-2 py-1 md:p-2 text-sm md:text-base">
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}
</td>
<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 condition="{date.pickups -> f:count()} <= 3">
<f:then>
<f:render section="Pickups" arguments="{_all}"/>
</f:then>
<f:else>
<div data-controller="autocollapse" data-autocollapse-height-value="400" data-autocollapse-offset-value="64" class="pb-4">
<div class="relative pb-12" data-autocollapse-target="container">
<h3 class="text-white">
Bus-Zustiege
</h3>
<f:render section="Pickups" arguments="{_all}"/>
<div class="absolute left-0 bottom-0 w-full h-12 bg-white flex items-center">
<button type="button"
data-autocollapse-target="button"
data-action="autocollapse#toggle"
class="hidden text-ep-primary w-10 h-10 ml-2 group toggle-more">
<f:render section="Icon" arguments="{icon: 'toggle'}" />
</button>
</div>
</div>
</div>
</f:else>
</f:if>
</f:if>
<f:if condition="{travelinfo.selfArrangedText}">
<h3 class="text-white">
@@ -219,6 +213,32 @@
</f:link.typolink>
</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:switch expression="{icon}">
<f:case value="travel">