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

Improve dates- and pricetable layout in mobile view

Browse Source
This commit is contained in:
Björn Fromme
2021-12-21 17:14:10 +01:00
parent afe147bb68
commit 92864ba9f6
3 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+6 -6
View File
@@ -39,7 +39,7 @@
</thead> </thead>
<tbody> <tbody>
<f:for each="{dates}" as="row" iteration="iteration"> <f:for each="{dates}" as="row" iteration="iteration">
<tr class="odd:bg-ep-primary-bg hover:bg-gray-100 odd:hover:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}" <tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
data-pricetable-target="row"> data-pricetable-target="row">
<td class="border-r border-gray-200 px-2 py-1 md:p-2"> <td class="border-r border-gray-200 px-2 py-1 md:p-2">
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}"> <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
@@ -105,7 +105,7 @@
{row.pseudoPrice} € {row.pseudoPrice} €
</span> </span>
</f:if> </f:if>
<span class="font-bold normal-case whitespace-nowrap" <span class="font-bold normal-case text-sm md:text-base whitespace-nowrap"
data-pricetable-target="price" data-pricetable-target="price"
data-room="{row.minPrice}" data-room="{row.minPrice}"
data-bus="{row.busPrice}" data-bus="{row.busPrice}"
@@ -120,10 +120,10 @@
class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light', else: 'text-gray-300')}" class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light', else: 'text-gray-300')}"
data-action="product-details#loadPrices" data-action="product-details#loadPrices"
data-date-uid="{row.dateUid}"> data-date-uid="{row.dateUid}">
<svg class="w-6 h-6"> <svg class="w-6 h-6 hidden md:block">
<use href="#icon-arrow-circle-right"></use> <use href="#icon-arrow-circle-right"></use>
</svg> </svg>
<span class="font-bold text-sm uppercase"> <span class="font-bold text-xs md:text-sm uppercase">
Infos &amp; buchen Infos &amp; buchen
</span> </span>
</button> </button>
@@ -132,10 +132,10 @@
<a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}" <a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
title="Reisen-Alert" title="Reisen-Alert"
class="flex space-x-1 items-center text-ep-primary-light"> class="flex space-x-1 items-center text-ep-primary-light">
<svg class="w-6 h-6"> <svg class="w-6 h-6 hidden md:block">
<use href="#icon-arrow-circle-right"></use> <use href="#icon-arrow-circle-right"></use>
</svg> </svg>
<span class="font-bold text-sm uppercase"> <span class="font-bold text-xs md:text-sm uppercase">
Reisen-Alert Reisen-Alert
</span> </span>
</a> </a>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
+3 -3
View File
@@ -44,7 +44,7 @@
</thead> </thead>
<tbody> <tbody>
<f:for each="{prices}" as="row"> <f:for each="{prices}" as="row">
<tr class="odd:bg-ep-primary-bg hover:bg-gray-100 odd:hover:bg-gray-100" <tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100"
data-pricetable-target="row"> data-pricetable-target="row">
<td class="border-r border-gray-200 px-2 py-1 md:p-2"> <td class="border-r border-gray-200 px-2 py-1 md:p-2">
<f:if condition="{row.showBookingButton} && {row.available}"> <f:if condition="{row.showBookingButton} && {row.available}">
@@ -96,14 +96,14 @@
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center"> <td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
<f:if condition="{row.hasOptionalServices} && {row.available}"> <f:if condition="{row.hasOptionalServices} && {row.available}">
<button type="button" <button type="button"
class="text-ep-primary-light text-sm md:text-base text-left leading-none whitespace-nowrap p-1" class="text-ep-primary-light text-sm md:text-base text-left leading-none p-1"
data-action="pricetable#openModal" data-action="pricetable#openModal"
data-type="options" data-type="options"
data-uid="{row.roomUid}" data-uid="{row.roomUid}"
data-cooltipz-dir="top" data-cooltipz-dir="top"
aria-label="Alle Zusatzleistungen anzeigen" aria-label="Alle Zusatzleistungen anzeigen"
role="tooltip"> role="tooltip">
Zusatzleistungen Zusatz&shy;leistungen
</button> </button>
</f:if> </f:if>
</td> </td>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+1 -1
View File
@@ -31,7 +31,7 @@
</div> </div>
<div id="main" class="w-full lg:w-2/3"> <div id="main" class="w-full lg:w-2/3">
<div class="lg:pr-4 flex flex-col space-y-4"> <div class="lg:pr-4 flex flex-col space-y-4">
<div class="grid grid-cols-3 md:grid-cols-6 gap-px uppercase text-white"> <div class="grid grid-cols-3 md:grid-cols-6 gap-px uppercase text-white text-sm md:text-base">
<f:if condition="{settings.hotelOnTop}"> <f:if condition="{settings.hotelOnTop}">
<f:then> <f:then>
<button type="button" <button type="button"