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

WIP Migrate to stimulus.js and tailwind

Browse Source
This commit is contained in:
Björn Fromme
2021-08-16 16:06:07 +02:00
parent 81d7e192db
commit 39f1c72972
5 changed files with 56 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss
+1 -1
View File
@@ -2,7 +2,7 @@
@apply hidden relative lg:block lg:container lg:px-0 -mt-20 mb-8; @apply hidden relative lg:block lg:container lg:px-0 -mt-20 mb-8;
@apply bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark; @apply bg-gradient-to-tr from-ep-primary-light via-ep-primary-medium to-ep-primary-dark;
&--sticky { &.sticky {
@apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 max-w-full shadow-lg; @apply fixed z-50 top-0 left-0 mt-8 mb-0 inset-x-0 max-w-full shadow-lg;
} }
} }
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+11 -15
View File
@@ -7,36 +7,32 @@
@import "base/typography"; @import "base/typography";
@import "base/images"; @import "base/images";
[x-cloak] {
@apply hidden;
}
[data-rte-content] { [data-rte-content] {
@import "base/rte-content"; @import "base/rte-content";
} }
// LEGACY FROM HERE // LEGACY
@import "components/badges";
@import "components/product"; @import "components/product";
@import "components/searchresult"; @import "components/searchresult";
@import "components/slider";
@import "components/teaserbox"; @import "components/teaserbox";
} }
@layer components { @layer components {
@import "~microtip/microtip"; @import "~microtip/microtip";
@import "components/cookie-consent";
@import "components/background"; @import "components/background";
@import "components/calendar"; @import "components/badges";
@import "components/searchbar"; @import "components/buttons";
@import "components/herounit";
@import "components/map";
@import "components/lightbox";
@import "components/datepicker";
@import "components/contact-bar"; @import "components/contact-bar";
@import "components/cookie-consent";
@import "components/calendar";
@import "components/datepicker";
@import "components/herounit";
@import "components/lightbox";
@import "components/map";
@import "components/misc"; @import "components/misc";
@import "components/searchbar";
@import "components/slider";
@import "components/tiles"; @import "components/tiles";
@import "components/buttons"
} }
@layer utilities { @layer utilities {
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+22 -23
View File
@@ -69,14 +69,16 @@
<div class="col-span-2"> <div class="col-span-2">
<p class="mb-4"> <p class="mb-4">
<button class="flex items-center space-x-2" <button class="flex items-center space-x-2"
x-data="watchlistToggle('{hotel.uid}:{product.uid}')" data-controller="watchlist-toggle"
x-bind="trigger"> data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}"
<span data-microtip-position="top" x-bind:aria-label="label" role="tooltip"> data-action="watchlist-toggle#toggle">
<span data-microtip-position="top" aria-label="" role="tooltip" data-watchlist-toggle-target="label">
<svg class="w-5 h-5"> <svg class="w-5 h-5">
<use x-bind:href="onList() ? '#icon-minus-circle' : '#icon-plus-circle'"></use> <use href="#icon-plus-circle"
data-watchlist-toggle-target="icon"></use>
</svg> </svg>
</span> </span>
<span x-text="label"></span> <span></span>
</button> </button>
</p> </p>
<p class="mb-4"> <p class="mb-4">
@@ -287,16 +289,14 @@
</svg> </svg>
</div> </div>
<button class="button button--light button--small hidden md:block" <button class="button button--light button--small hidden md:block"
x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid"
data-microtip-position="top" aria-label="Alle Inklusivleistungen anzeigen" role="tooltip"> data-microtip-position="top" aria-label="Alle Inklusivleistungen anzeigen" role="tooltip">
Leistungen Leistungen
</button> </button>
<a href="#" x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid" <button class="md:hidden">
class="md:hidden">
<svg class="w-4 h-4"> <svg class="w-4 h-4">
<use href="#icon-info-circle"></use> <use href="#icon-info-circle"></use>
</svg> </svg>
</a> </button>
</div> </div>
</td> </td>
<td class="px-2 py-1 hidden sm:table-cell"> <td class="px-2 py-1 hidden sm:table-cell">
@@ -347,7 +347,6 @@
</template> </template>
<template x-for="row in datesRows"> <template x-for="row in datesRows">
<div x-bind:id="'services-' + row.dateUid" <div x-bind:id="'services-' + row.dateUid"
x-show="$store.show.modal === $el.id"
x-transition:enter="transition duration-200 ease-in-out" x-transition:enter="transition duration-200 ease-in-out"
x-transition:enter-start="opacity-0" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:enter-end="opacity-100"
@@ -355,15 +354,17 @@
x-transition:leave-start="opacity-100" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" x-transition:leave-end="opacity-0"
x-cloak x-cloak
class="fixed inset-0 w-full h-full z-50"> class="hidden fixed inset-0 w-full h-full z-50">
<div class="absolute inset-0 w-full h-full bg-overlay-black" x-on:click="$store.show.modal = null"></div> <div class="absolute inset-0 w-full h-full bg-overlay-black"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl rounded"> <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl rounded">
<div class="flex justify-between border-b border-gray-200 pb-2 mb-4"> <div class="flex justify-between border-b border-gray-200 pb-2 mb-4">
<span class="text-lg font-bold"> <span class="text-lg font-bold">
Inklusivleistungen Inklusivleistungen
</span> </span>
<button x-on:click.prevent="$store.show.modal = null" class="inline-block"> <button class="inline-block">
<svg class="w-8 h-8"><use href="#icon-close"></use></svg> <svg class="w-8 h-8">
<use href="#icon-close"></use>
</svg>
</button> </button>
</div> </div>
<table class="table table-striped"> <table class="table table-striped">
@@ -446,13 +447,11 @@
<td class="px-2 py-1"> <td class="px-2 py-1">
<button x-show="row.roomHasOptionalServices && row.roomAvailable" <button x-show="row.roomHasOptionalServices && row.roomAvailable"
class="hidden sm:block button button--light button--small" class="hidden sm:block button button--light button--small"
x-on:click.prevent="$store.show.modal = 'optional-services-' + row.roomUid"
data-microtip-position="top" aria-label="Alle Zusatzleistungen anzeigen" role="tooltip"> data-microtip-position="top" aria-label="Alle Zusatzleistungen anzeigen" role="tooltip">
Optionen Optionen
</button> </button>
<button x-show="row.roomHasOptionalServices && row.roomAvailable" <button x-show="row.roomHasOptionalServices && row.roomAvailable"
class="sm:hidden ep:text-ep-primary" class="sm:hidden ep:text-ep-primary">
x-on:click.prevent="$store.show.modal = 'optional-services-' + row.roomUid">
<svg class="w-4 h-4"> <svg class="w-4 h-4">
<use href="#icon-info-circle"></use> <use href="#icon-info-circle"></use>
</svg> </svg>
@@ -481,23 +480,23 @@
</div> </div>
<template x-for="row in pricesRows"> <template x-for="row in pricesRows">
<div x-bind:id="'optional-services-' + row.roomUid" <div x-bind:id="'optional-services-' + row.roomUid"
x-show="$store.show.modal === $el.id"
x-transition:enter="transition duration-200 ease-in-out" x-transition:enter="transition duration-200 ease-in-out"
x-transition:enter-start="opacity-0" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:enter-end="opacity-100"
x-transition:leave="transition duration-200 ease-in-out" x-transition:leave="transition duration-200 ease-in-out"
x-transition:leave-start="opacity-100" x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0" x-transition:leave-end="opacity-0"
x-cloak class="hidden fixed inset-0 w-full h-full z-50">
class="fixed inset-0 w-full h-full z-50"> <div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center"></div>
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center" x-on:click="$store.show.modal = null"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl h-128 overflow-y-scroll rounded"> <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl h-128 overflow-y-scroll rounded">
<div class="flex justify-between pb-2 mb-4"> <div class="flex justify-between pb-2 mb-4">
<span class="text-2xl font-bold"> <span class="text-2xl font-bold">
Optionale Zusatzleistungen Optionale Zusatzleistungen
</span> </span>
<button x-on:click.prevent="$store.show.modal = null" class="inline-block"> <button class="inline-block">
<svg class="w-8 h-8"><use href="#icon-close"></use></svg> <svg class="w-8 h-8">
<use href="#icon-close"></use>
</svg>
</button> </button>
</div> </div>
<template x-for="section in row.roomOptionalServices"> <template x-for="section in row.roomOptionalServices">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html
+8 -11
View File
@@ -14,7 +14,7 @@
sticky: <f:if condition="{fixed}"><f:then>true</f:then><f:else>false</f:else></f:if> sticky: <f:if condition="{fixed}"><f:then>true</f:then><f:else>false</f:else></f:if>
</f:format.raw> </f:format.raw>
})'> })'>
<div class="searchbar {f:if(condition: fixed, then: ' searchbar--sticky')}"{f:if(condition: fixed, else: ' data-controller="sticky" data-sticky-offset-value="650" data-sticky-sticky-class="searchbar--sticky"')}> <div class="searchbar {f:if(condition: fixed, then: ' sticky')}"{f:if(condition: fixed, else: ' data-controller="sticky" data-sticky-offset-value="650" data-sticky-sticky-class="sticky"')}>
<f:form action="processSearch" controller="Search" method="post" name="searchParams" <f:form action="processSearch" controller="Search" method="post" name="searchParams"
object="{searchParams}" pluginName="searchresult" extensionName="epproducts" object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
pageUid="{settings.defaultSearchPageUid}" additionalAttributes="{ref: 'form'}"> pageUid="{settings.defaultSearchPageUid}" additionalAttributes="{ref: 'form'}">
@@ -26,20 +26,19 @@
<f:form.hidden property="pax" additionalAttributes="{x-model: 'searchParams.pax'}"/> <f:form.hidden property="pax" additionalAttributes="{x-model: 'searchParams.pax'}"/>
<f:form.hidden property="priceRange" additionalAttributes="{x-model: 'searchParams.priceRange'}"/> <f:form.hidden property="priceRange" additionalAttributes="{x-model: 'searchParams.priceRange'}"/>
<f:form.hidden property="pageUid" additionalAttributes="{x-model: 'searchParams.pageUid'}"/> <f:form.hidden property="pageUid" additionalAttributes="{x-model: 'searchParams.pageUid'}"/>
<div class="flex" x-bind:class="{'flex-col': !sticky, 'container flex-row items-center space-x-8': sticky}"> <div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
<div class="flex items-start justify-between" x-bind:class="{ 'flex-1 py-4': sticky, 'pt-8 px-8': ! sticky }"> <div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
<div class="flex-1"> <div class="flex-1">
<div class="relative border-b border-r border-white mr-8" x-init="initDatePicker()"> <div class="relative border-b border-r border-white mr-8" x-init="initDatePicker()">
<input type="text" <input type="text"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white" class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
placeholder="Zeitraum" placeholder="Zeitraum"
x-bind:class="loading && 'cursor-not-allowed'"
x-bind:value="dateRangeLabel" x-bind:value="dateRangeLabel"
x-on:click.prevent="show = show === 'dateRange' ? null : 'dateRange'"/> x-on:click.prevent="show = show === 'dateRange' ? null : 'dateRange'"/>
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1"> <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1">
<use href="#icon-calendar"></use> <use href="#icon-calendar"></use>
</svg> </svg>
<div class="absolute top-100 mt-2 left-0 bg-white p-4 shadow-md" x-show="show === 'dateRange'" x-transition x-cloak> <div class="absolute top-100 mt-2 left-0 bg-white p-4 shadow-md" x-show="show === 'dateRange'" x-cloak>
<template x-if="datePresets"> <template x-if="datePresets">
<div class="flex items-center justify-between pb-2"> <div class="flex items-center justify-between pb-2">
<template x-for="preset in datePresets"> <template x-for="preset in datePresets">
@@ -72,7 +71,7 @@
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1"> <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1">
<use href="#icon-user-group"></use> <use href="#icon-user-group"></use>
</svg> </svg>
<div class="absolute top-100 mt-2 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll" x-show="show === 'pax'" x-transition x-cloak> <div class="absolute top-100 mt-2 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll" x-show="show === 'pax'" x-cloak>
<ul class="m-0 p-0"> <ul class="m-0 p-0">
<template x-for="paxOption in filterOptions.pax"> <template x-for="paxOption in filterOptions.pax">
<li> <li>
@@ -95,7 +94,7 @@
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45"> <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45">
<use href="#icon-airplane"></use> <use href="#icon-airplane"></use>
</svg> </svg>
<div class="absolute top-100 left-0 bg-white p-4 shadow-md min-w-full h-48 overflow-y-scroll" x-show="show === 'destination'" x-transition x-cloak> <div class="absolute top-100 left-0 bg-white p-4 shadow-md min-w-full h-48 overflow-y-scroll" x-show="show === 'destination'" x-cloak>
<template x-if="filterOptions.destinations && !conceptSelected"> <template x-if="filterOptions.destinations && !conceptSelected">
<template x-for="destination in filterOptions.destinations"> <template x-for="destination in filterOptions.destinations">
<div class="flex items-start justify-between"> <div class="flex items-start justify-between">
@@ -170,14 +169,12 @@
</div> </div>
</div> </div>
</div> </div>
<button type="submit" x-show="sticky" x-cloak x-bind:disabled="loading"> <button type="submit" class="hidden sticky:block sticky:ml-4">
<svg class="w-8 h-8 text-white"> <svg class="w-8 h-8 text-white">
<use href="#icon-chevron-right"></use> <use href="#icon-chevron-right"></use>
</svg> </svg>
</button> </button>
<div class="flex justify-end mt-4" <div class="flex justify-end mt-4 sticky:hidden">
x-show="!sticky"
x-cloak>
<button type="submit" class="w-1/3 text-white uppercase py-2" x-bind:disabled="loading"> <button type="submit" class="w-1/3 text-white uppercase py-2" x-bind:disabled="loading">
Detailsuche Detailsuche
</button> </button>
tailwind.config.js
+14 -4
View File
@@ -109,13 +109,16 @@ module.exports = {
borderWidth: [ 'even', 'odd', 'first', 'last' ], borderWidth: [ 'even', 'odd', 'first', 'last' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ], textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ],
borderColor: [ 'sbw','snz', 'uch' ], borderColor: [ 'sbw','snz', 'uch' ],
display: ['group-hover'], display: ['group-hover', 'sticky'],
visibility: ['group-hover'], visibility: ['group-hover'],
opacity: ['group-hover'], opacity: ['group-hover'],
rotate: ['group-hover'], rotate: ['group-hover'],
flexDirection: ['even', 'odd'], flex: ['sticky'],
padding: ['even', 'odd', 'first', 'last'], flexDirection: ['even', 'odd', 'sticky'],
margin: ['even', 'odd', 'first', 'last'], alignItems: ['sticky'],
padding: ['even', 'odd', 'first', 'last', 'sticky'],
margin: ['even', 'odd', 'first', 'last', 'sticky'],
maxWidth: ['sticky'],
}, },
}, },
plugins: [ plugins: [
@@ -138,5 +141,12 @@ module.exports = {
}) })
}) })
}), }),
plugin(function ({addVariant, e}) {
addVariant('sticky', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.sticky .${e(`sticky${separator}${className}`)}`
})
})
}),
], ],
} }