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

WIP Migrate search result page

Browse Source
This commit is contained in:
Björn Fromme
2021-10-04 19:04:29 +02:00
parent 961acc5c19
commit d146d7e54d
8 changed files with 140 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/collapse_controller.js
+1 -1
View File
@@ -55,7 +55,7 @@ export default class extends Controller {
this.containerTarget.classList.toggle('hidden', this.collapsedValue === true) this.containerTarget.classList.toggle('hidden', this.collapsedValue === true)
this.containerTarget.scrollTop = 0 this.containerTarget.scrollTop = 0
if (this.hasIconTarget) { if (this.hasIconTarget) {
this.iconTarget.classList.toggle('rotate-180', this.collapsedValue === false) this.iconTarget.classList.toggle('rotate-90', this.collapsedValue === false)
} }
} }
} }
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_typography.scss
+1 -1
View File
@@ -19,7 +19,7 @@ h4,
} }
.headline--underlined:after { .headline--underlined:after {
@apply block border-b-4 border-ep-primary sbw:border-sbw-primary pb-4 mb-4 w-20; @apply block border-b-4 border-ep-primary sbw:border-sbw-primary pb-4 mb-4 -mt-2 w-20;
content: ''; content: '';
} }
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html
+1 -1
View File
@@ -27,7 +27,7 @@
data-action="collapse#toggle"> data-action="collapse#toggle">
<svg class="w-4 h-4 text-white transform transition duration-200 ease-in-out" <svg class="w-4 h-4 text-white transform transition duration-200 ease-in-out"
data-collapse-target="icon"> data-collapse-target="icon">
<use href="#icon-chevron-down"></use> <use href="#icon-chevron-right"></use>
</svg> </svg>
<span> <span>
{faq.question} {faq.question}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html
+1
View File
@@ -5,6 +5,7 @@
<symbol id="icon-chevron-up" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></symbol> <symbol id="icon-chevron-up" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></symbol>
<symbol id="icon-chevron-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></symbol> <symbol id="icon-chevron-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></symbol>
<symbol id="icon-chevron-left" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></symbol> <symbol id="icon-chevron-left" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></symbol>
<symbol id="icon-arrow-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></symbol>
<symbol id="icon-arrow-circle-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol> <symbol id="icon-arrow-circle-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
<symbol id="icon-minus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol> <symbol id="icon-minus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
<symbol id="icon-plus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol> <symbol id="icon-plus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 25 KiB

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+52 -48
View File
@@ -7,16 +7,24 @@
name="filterSettings" name="filterSettings"
pluginName="Ajax" pluginName="Ajax"
data="{'search-target': 'form'}"> data="{'search-target': 'form'}">
<div class="border rounded p-4">
<div class="relative mb-2 pb-2 border-b" <div class="p-8 bg-cover text-white"
style="background-image: url( {f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/winter.jpg')} )">
<div class="mb-4"
data-controller="collapse" data-controller="collapse"
data-collapse-collapsed-value="true"> data-collapse-collapsed-value="true">
<button data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle"
Zeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)} class="flex items-center justify-between w-full">
<span class="uppercase font-bold text-lg">
Reisezeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
</span>
<svg class="w-6 h-6 text-white transform"
data-collapse-target="icon">
<use href="#icon-arrow-right"></use>
</svg>
</button> </button>
<div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded" <div data-collapse-target="container">
data-collapse-target="container">
<f:form.hidden property="dateFrom" <f:form.hidden property="dateFrom"
data="{'search-target': 'dateFrom'}"/> data="{'search-target': 'dateFrom'}"/>
<f:form.hidden property="dateTo" <f:form.hidden property="dateTo"
@@ -55,8 +63,36 @@
</div> </div>
</div> </div>
<div class="mb-2 pb-2 border-b" <div data-controller="collapse"
data-controller="collapse" data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
<button data-action="click->collapse#toggle"
class="flex items-center justify-between w-full">
<span class="uppercase font-bold text-lg">
Reisekonzepte
</span>
<svg class="w-6 h-6 text-white transform"
data-collapse-target="icon">
<use href="#icon-arrow-right"></use>
</svg>
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0">
<f:for each="{filterOptions.concepts}" as="concept">
<li>
<f:form.checkbox class="mr-2 rounded-full w-6 h-6 border-0 ring-0 focus:border-0 focus:ring-0"
property="conceptUids"
data="{action: 'search#filter'}"
value="{concept.uid}"/>
{concept.name}
</li>
</f:for>
</ul>
</div>
</div>
</div>
<div data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}">
<button data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle">
Reiseziel Reiseziel
@@ -89,29 +125,7 @@
</div> </div>
</div> </div>
<div class="mb-2 pb-2 border-b" <div data-controller="collapse"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
<button data-action="click->collapse#toggle">
Reisekonzepte
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0">
<f:for each="{filterOptions.concepts}" as="concept">
<li>
<f:form.checkbox class="mr-2"
property="conceptUids"
data="{action: 'search#filter'}"
value="{concept.uid}"/>
{concept.name}
</li>
</f:for>
</ul>
</div>
</div>
<div class="mb-2 pb-2 border-b"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}">
<button data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle">
Preis Preis
@@ -133,22 +147,16 @@
</div> </div>
</div> </div>
<div class="mb-2 pb-2 border-b" <div data-controller="collapse"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}">
<button data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle">
Personen Personen
</button> </button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<div class="border rounded"> <div class="border rounded">
<select name="pax" <f:form.select property="pax"
data-action="search#filter"> options="{filterOptions.pax}"
<f:for each="{filterOptions.pax}" as="option"> data="{action: 'search#filter'}"/>
<option value="{option}">
{option}
</option>
</f:for>
</select>
</div> </div>
</div> </div>
</div> </div>
@@ -160,8 +168,7 @@
4: 'Gästehaus', 4: 'Gästehaus',
5: 'Pension' 5: 'Pension'
}"/> }"/>
<div class="mb-2 pb-2 border-b" <div data-controller="collapse"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.hotelTypes}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.hotelTypes}', then: 'false', else: 'true')}">
<label data-action="click->collapse#toggle"> <label data-action="click->collapse#toggle">
Unterkunft Unterkunft
@@ -183,8 +190,7 @@
</div> </div>
</div> </div>
<div class="mb-2 pb-2 border-b" <div data-controller="collapse"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.boardTypes}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.boardTypes}', then: 'false', else: 'true')}">
<label data-action="click->collapse#toggle"> <label data-action="click->collapse#toggle">
Verpflegung Verpflegung
@@ -216,8 +222,7 @@
5: 'ab 5 Pers.', 5: 'ab 5 Pers.',
6: 'mit anderen' 6: 'mit anderen'
}"/> }"/>
<div class="mb-2 pb-2 border-b" <div data-controller="collapse"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.roomTypes}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.roomTypes}', then: 'false', else: 'true')}">
<label data-action="click->collapse#toggle"> <label data-action="click->collapse#toggle">
Zimmerarten/Apart. Zimmerarten/Apart.
@@ -261,7 +266,6 @@
</div> </div>
</f:if> </f:if>
</div>
</f:form> </f:form>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
+8 -10
View File
@@ -6,20 +6,18 @@
<div class="col-span-3 lg:col-span-1 relative" <div class="col-span-3 lg:col-span-1 relative"
data-controller="collapse" data-controller="collapse"
data-collapse-until-value="991"> data-collapse-until-value="991">
<p class="lg:hidden"> <div class="lg:block bg-white"
<button class="button button--small w-full"
data-action="collapse#toggle">
<span>Filter ein-/ausblenden</span>
</button>
</p>
<div class="lg:block"
data-collapse-target="container"> data-collapse-target="container">
<h3>Filter</h3> <h3 class="headline headline--underlined px-8 py-4">
<button class="button button--small w-full my-4" Filter
</h3>
<f:render partial="Search/FilterPanel" arguments="{_all}"/>
<div class="px-8 py-4">
<button class="button button--secondary w-full"
data-action="search#reset"> data-action="search#reset">
Filter zurücksetzen Filter zurücksetzen
</button> </button>
<f:render partial="Search/FilterPanel" arguments="{_all}"/> </div>
</div> </div>
</div> </div>
<div class="col-span-3 lg:col-span-2 relative"> <div class="col-span-3 lg:col-span-2 relative">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Datestable.html
+3 -2
View File
@@ -64,7 +64,7 @@
</thead> </thead>
<tbody> <tbody>
<f:for each="{dates}" as="row" iteration="iteration"> <f:for each="{dates}" as="row" iteration="iteration">
<tr class="even:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}" <tr class="odd:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
data-pricetable-target="row"> data-pricetable-target="row">
<td class="px-2 py-1 md:p-2"> <td class="px-2 py-1 md:p-2">
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}"> <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
@@ -159,7 +159,8 @@
</f:if> </f:if>
<f:if condition="{row.showBookingButton}"> <f:if condition="{row.showBookingButton}">
<f:else> <f:else>
<a href="#" <a href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
title="Reisen-Alert"
class="button button--small bg-gray-300"> class="button button--small bg-gray-300">
Reisen-Alert Reisen-Alert
</a> </a>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxTable/Pricetable.html
+20 -34
View File
@@ -5,19 +5,18 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="headerbar flex items-center justify-between"> <div class="headerbar md:flex md:items-center md:justify-between">
<span>Buchungsoptionen</span> <span class="block">Buchungsoptionen</span>
<span>{hotel.name} {dateRange}</span> <span class="block">{hotel.name} {dateRange}</span>
</div> </div>
<div data-controller="pricetable" <div data-controller="pricetable"
data-pricetable-show-all-rows-value="true"> data-pricetable-show-all-rows-value="true">
<f:if condition="{hasSurcharge} || {hasDiscount}"> <f:if condition="{hasSurcharge} || {hasDiscount}">
<div class="w-full flex justify-end mb-2">
<f:if condition="{hasSurcharge}"> <f:if condition="{hasSurcharge}">
<button data-action="pricetable#toggleSurcharge" <button data-action="pricetable#toggleSurcharge"
class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary"> class="flex items-center space-x-1 focus:outline-none text-ep-primary mb-2">
<svg class="w-4 h-4"> <svg class="w-4 h-4">
<use href="#icon-arrow-circle-right"></use> <use href="#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -30,7 +29,7 @@
</f:if> </f:if>
<f:if condition="{hasDiscount}"> <f:if condition="{hasDiscount}">
<button data-action="pricetable#toggleDiscount" <button data-action="pricetable#toggleDiscount"
class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary"> class="flex items-center space-x-1 focus:outline-none text-ep-primary mb-2">
<svg class="w-4 h-4"> <svg class="w-4 h-4">
<use href="#icon-arrow-circle-right"></use> <use href="#icon-arrow-circle-right"></use>
</svg> </svg>
@@ -41,19 +40,18 @@
</span> </span>
</button> </button>
</f:if> </f:if>
</div>
</f:if> </f:if>
<table class="w-full border-collapse mb-4"> <table class="w-full border-collapse mb-4">
<thead> <thead>
<tr> <tr>
<th class="text-left"> <th class="p1 text-left">
Zimmertyp Zimmertyp
</th> </th>
<th class="text-left"> <th class="p1 text-left">
Preis Preis
</th> </th>
<th class="text-left"> <th class="p1 text-left">
inkl. inkl.
</th> </th>
<th></th> <th></th>
@@ -62,45 +60,31 @@
</thead> </thead>
<tbody> <tbody>
<f:for each="{prices}" as="row"> <f:for each="{prices}" as="row">
<tr class="even:bg-gray-50" <tr class="odd:bg-gray-100"
data-pricetable-target="row"> data-pricetable-target="row">
<td class="px-2 py-1 md:p-2"> <td class="px-2 py-1 md:p-2">
<f:if condition="{row.showBookingButton} && {row.available}"> <f:if condition="{row.showBookingButton} && {row.available}">
<f:then> <f:then>
<a class="text-sm sm:text-base" <a class="text-ep-primary-light text-xs sm:text-sm md:text-base"
href="{row.bookingUrl}" href="{row.bookingUrl}"
target="_blank"> target="_blank"
title="{row.roomName}, {hotel.name}, {dateRange} buchen">
{row.roomName} {row.roomName}
</a> </a>
<br>
<a class="button button--small bg-green-500 border-green-500 sm:hidden"
href="{row.bookingUrl}"
target="_blank">
Jetzt buchen
</a>
</f:then> </f:then>
<f:else> <f:else>
<span class="text-sm sm:text-base"> <span class="text-xs sm:text-sm md:text-base">
{row.roomName} {row.roomName}
</span> </span>
</f:else> </f:else>
</f:if> </f:if>
<f:if condition="{row.available}">
<f:else>
<div class="lg:hidden">
<span class="inline-block px-2 mx-1 text-xs text-gray-500">
ausgebucht
</span>
</div>
</f:else>
</f:if>
</td> </td>
<td class="px-2 py-1 md:p-2 whitespace-nowrap" <td class="px-2 py-1 md:p-2 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}"
data-discount="{row.discount}"> data-discount="{row.discount}">
<span class="text-sm sm:text-base"> <span class="font-bold text-xs sm:text-sm md:text-base whitespace-nowrap">
{row.minPrice} € {row.minPrice} €
</span> </span>
</td> </td>
@@ -131,7 +115,7 @@
</td> </td>
<td class="px-2 py-1 md:p-2"> <td class="px-2 py-1 md:p-2">
<f:if condition="{row.hasOptionalServices} && {row.available}"> <f:if condition="{row.hasOptionalServices} && {row.available}">
<button class="hidden sm:block button button--light button--small" <button class="button button--small bg-ep-primary hidden md:block"
data-action="pricetable#openModal" data-action="pricetable#openModal"
data-type="options" data-type="options"
data-uid="{row.roomUid}" data-uid="{row.roomUid}"
@@ -150,11 +134,11 @@
</button> </button>
</f:if> </f:if>
</td> </td>
<td class="hidden lg:table-cell px-2 py-1 md:p-2"> <td class="px-2 py-1 md:p-2">
<f:if condition="{row.isHideBookingButton}"> <f:if condition="{row.isHideBookingButton}">
<f:then> <f:then>
<a class="button button--small button--mute" <a class="button button--small button--mute"
href="#"> href="{f:uri.typolink(parameter: settings.travelAlertPageUid)}">
Reisen-Alert Reisen-Alert
</a> </a>
</f:then> </f:then>
@@ -162,7 +146,9 @@
<f:if condition="{row.available}"> <f:if condition="{row.available}">
<f:then> <f:then>
<a class="button button--small bg-green-500 border-green-500 block" <a class="button button--small bg-green-500 border-green-500 block"
href="{row.bookingUrl}" target="_blank"> href="{row.bookingUrl}"
title="{row.roomName}, {hotel.name}, {dateRange} buchen"
target="_blank">
Buchen Buchen
</a> </a>
</f:then> </f:then>