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 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;
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+11 -15
View File
@@ -7,36 +7,32 @@
@import "base/typography";
@import "base/images";
[x-cloak] {
@apply hidden;
}
[data-rte-content] {
@import "base/rte-content";
}
// LEGACY FROM HERE
@import "components/badges";
// LEGACY
@import "components/product";
@import "components/searchresult";
@import "components/slider";
@import "components/teaserbox";
}
@layer components {
@import "~microtip/microtip";
@import "components/cookie-consent";
@import "components/background";
@import "components/calendar";
@import "components/searchbar";
@import "components/herounit";
@import "components/map";
@import "components/lightbox";
@import "components/datepicker";
@import "components/badges";
@import "components/buttons";
@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/searchbar";
@import "components/slider";
@import "components/tiles";
@import "components/buttons"
}
@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">
<p class="mb-4">
<button class="flex items-center space-x-2"
x-data="watchlistToggle('{hotel.uid}:{product.uid}')"
x-bind="trigger">
<span data-microtip-position="top" x-bind:aria-label="label" role="tooltip">
data-controller="watchlist-toggle"
data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}"
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">
<use x-bind:href="onList() ? '#icon-minus-circle' : '#icon-plus-circle'"></use>
<use href="#icon-plus-circle"
data-watchlist-toggle-target="icon"></use>
</svg>
</span>
<span x-text="label"></span>
<span></span>
</button>
</p>
<p class="mb-4">
@@ -287,16 +289,14 @@
</svg>
</div>
<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">
Leistungen
</button>
<a href="#" x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid"
class="md:hidden">
<button class="md:hidden">
<svg class="w-4 h-4">
<use href="#icon-info-circle"></use>
</svg>
</a>
</button>
</div>
</td>
<td class="px-2 py-1 hidden sm:table-cell">
@@ -347,7 +347,6 @@
</template>
<template x-for="row in datesRows">
<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-start="opacity-0"
x-transition:enter-end="opacity-100"
@@ -355,15 +354,17 @@
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak
class="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>
class="hidden fixed inset-0 w-full h-full z-50">
<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="flex justify-between border-b border-gray-200 pb-2 mb-4">
<span class="text-lg font-bold">
Inklusivleistungen
</span>
<button x-on:click.prevent="$store.show.modal = null" class="inline-block">
<svg class="w-8 h-8"><use href="#icon-close"></use></svg>
<button class="inline-block">
<svg class="w-8 h-8">
<use href="#icon-close"></use>
</svg>
</button>
</div>
<table class="table table-striped">
@@ -446,13 +447,11 @@
<td class="px-2 py-1">
<button x-show="row.roomHasOptionalServices && row.roomAvailable"
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">
Optionen
</button>
<button x-show="row.roomHasOptionalServices && row.roomAvailable"
class="sm:hidden ep:text-ep-primary"
x-on:click.prevent="$store.show.modal = 'optional-services-' + row.roomUid">
class="sm:hidden ep:text-ep-primary">
<svg class="w-4 h-4">
<use href="#icon-info-circle"></use>
</svg>
@@ -481,23 +480,23 @@
</div>
<template x-for="row in pricesRows">
<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-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition duration-200 ease-in-out"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak
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" x-on:click="$store.show.modal = null"></div>
class="hidden 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 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">
<span class="text-2xl font-bold">
Optionale Zusatzleistungen
</span>
<button x-on:click.prevent="$store.show.modal = null" class="inline-block">
<svg class="w-8 h-8"><use href="#icon-close"></use></svg>
<button class="inline-block">
<svg class="w-8 h-8">
<use href="#icon-close"></use>
</svg>
</button>
</div>
<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>
</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"
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
pageUid="{settings.defaultSearchPageUid}" additionalAttributes="{ref: 'form'}">
@@ -26,20 +26,19 @@
<f:form.hidden property="pax" additionalAttributes="{x-model: 'searchParams.pax'}"/>
<f:form.hidden property="priceRange" additionalAttributes="{x-model: 'searchParams.priceRange'}"/>
<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="flex items-start justify-between" x-bind:class="{ 'flex-1 py-4': sticky, 'pt-8 px-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 sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
<div class="flex-1">
<div class="relative border-b border-r border-white mr-8" x-init="initDatePicker()">
<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"
placeholder="Zeitraum"
x-bind:class="loading && 'cursor-not-allowed'"
x-bind:value="dateRangeLabel"
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">
<use href="#icon-calendar"></use>
</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">
<div class="flex items-center justify-between pb-2">
<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">
<use href="#icon-user-group"></use>
</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">
<template x-for="paxOption in filterOptions.pax">
<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">
<use href="#icon-airplane"></use>
</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-for="destination in filterOptions.destinations">
<div class="flex items-start justify-between">
@@ -170,14 +169,12 @@
</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">
<use href="#icon-chevron-right"></use>
</svg>
</button>
<div class="flex justify-end mt-4"
x-show="!sticky"
x-cloak>
<div class="flex justify-end mt-4 sticky:hidden">
<button type="submit" class="w-1/3 text-white uppercase py-2" x-bind:disabled="loading">
Detailsuche
</button>
tailwind.config.js
+14 -4
View File
@@ -109,13 +109,16 @@ module.exports = {
borderWidth: [ 'even', 'odd', 'first', 'last' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover' ],
borderColor: [ 'sbw','snz', 'uch' ],
display: ['group-hover'],
display: ['group-hover', 'sticky'],
visibility: ['group-hover'],
opacity: ['group-hover'],
rotate: ['group-hover'],
flexDirection: ['even', 'odd'],
padding: ['even', 'odd', 'first', 'last'],
margin: ['even', 'odd', 'first', 'last'],
flex: ['sticky'],
flexDirection: ['even', 'odd', 'sticky'],
alignItems: ['sticky'],
padding: ['even', 'odd', 'first', 'last', 'sticky'],
margin: ['even', 'odd', 'first', 'last', 'sticky'],
maxWidth: ['sticky'],
},
},
plugins: [
@@ -138,5 +141,12 @@ module.exports = {
})
})
}),
plugin(function ({addVariant, e}) {
addVariant('sticky', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.sticky .${e(`sticky${separator}${className}`)}`
})
})
}),
],
}