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

WIP Migrate to tailwind and alpine

Browse Source
This commit is contained in:
Björn Fromme
2021-08-11 17:40:40 +02:00
parent 98a87f95f1
commit 463e4c9b5a
15 changed files with 239 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+8 -20
View File
@@ -6202,12 +6202,6 @@
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true
},
"node_modules/lodash.toarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
"integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
"dev": true
},
"node_modules/lodash.topath": {
"version": "4.5.2",
"resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
@@ -6621,12 +6615,12 @@
"dev": true
},
"node_modules/node-emoji": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
"integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
"integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
"dev": true,
"dependencies": {
"lodash.toarray": "^4.4.0"
"lodash": "^4.17.21"
}
},
"node_modules/node-forge": {
@@ -15849,12 +15843,6 @@
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true
},
"lodash.toarray": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
"integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=",
"dev": true
},
"lodash.topath": {
"version": "4.5.2",
"resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
@@ -16170,12 +16158,12 @@
"dev": true
},
"node-emoji": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz",
"integrity": "sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw==",
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
"integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
"dev": true,
"requires": {
"lodash.toarray": "^4.4.0"
"lodash": "^4.17.21"
}
},
"node-forge": {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_app.js
+40 -44
View File
@@ -35,49 +35,45 @@ import contactForm from './components/contact-form'
import defaultFilterSettings from './_filtersettings'
import defaultFilterOptions from './_filteroptions'
// Executed on document ready
document.addEventListener('DOMContentLoaded', () => {
const appConfig = parseAppConfig()
const storedWatchlist = JSON.parse(sessionStorage.getItem('myep-watchlist')) || []
appendPaCode(appConfig)
initSliders()
Alpine.store('appconfig', appConfig)
Alpine.store('show', {
searchBox: false,
mobileNav: false,
modal: null,
toggleMobileNav() {
this.mobileNav = !this.mobileNav
console.log(this.mobileNav)
},
toggleSearchBox() {
this.searchBox = !this.searchBox
}
})
Alpine.store('watchlist', storedWatchlist)
Alpine.store('filterSettings', defaultFilterSettings)
Alpine.store('filterOptions', defaultFilterOptions)
Alpine.data('scrollTop', scrollTop)
Alpine.data('scrollTo', scrollTo)
Alpine.data('sticky', sticky)
Alpine.data('watchlistToggle', watchlistToggle)
Alpine.data('watchlistButton', watchlistButton)
Alpine.data('watchlist', watchlist)
Alpine.data('collapse', collapse)
Alpine.data('fbpixel', fbpixel)
Alpine.data('ajaxContent', ajaxContent)
Alpine.data('faq', faq)
Alpine.data('osmMap', osmMap)
Alpine.data('productDetail', productDetail)
Alpine.data('daytripDateSelect', daytripDateSelect)
Alpine.data('searchBar', searchBar)
Alpine.data('search', search)
Alpine.data('calendar', calendar)
Alpine.data('contactForm', contactForm)
Alpine.start()
const appConfig = parseAppConfig()
const storedWatchlist = JSON.parse(sessionStorage.getItem('myep-watchlist')) || []
appendPaCode(appConfig)
initSliders()
Alpine.store('appconfig', appConfig)
Alpine.store('show', {
searchBox: false,
mobileNav: false,
modal: null,
toggleMobileNav() {
this.mobileNav = !this.mobileNav
},
toggleSearchBox() {
this.searchBox = !this.searchBox
}
})
Alpine.store('watchlist', storedWatchlist)
Alpine.store('filterSettings', defaultFilterSettings)
Alpine.store('filterOptions', defaultFilterOptions)
Alpine.data('scrollTop', scrollTop)
Alpine.data('scrollTo', scrollTo)
Alpine.data('sticky', sticky)
Alpine.data('watchlistToggle', watchlistToggle)
Alpine.data('watchlistButton', watchlistButton)
Alpine.data('watchlist', watchlist)
Alpine.data('collapse', collapse)
Alpine.data('fbpixel', fbpixel)
Alpine.data('ajaxContent', ajaxContent)
Alpine.data('faq', faq)
Alpine.data('osmMap', osmMap)
Alpine.data('productDetail', productDetail)
Alpine.data('daytripDateSelect', daytripDateSelect)
Alpine.data('searchBar', searchBar)
Alpine.data('search', search)
Alpine.data('calendar', calendar)
Alpine.data('contactForm', contactForm)
Alpine.start()
Glightbox({
selector: 'data-glightbox',
slideEffect: 'fade',
})
Glightbox({
selector: 'data-glightbox',
slideEffect: 'fade',
})
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/faq.js
+1 -1
View File
@@ -3,7 +3,7 @@ import { debounce } from './throttle-debounce'
export default () => ({
query: '',
init() {
this.entries = this.$el.querySelectorAll('[x-data="collapse"]')
this.entries = this.$el.querySelectorAll('[x-data^="collapse"]')
this.$watch('query', debounce(value => {
if (value.length < 3) {
this.entries.forEach(entry => {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search-bar.js
+5 -5
View File
@@ -11,11 +11,11 @@ export default props => ({
filterOptions: props.initialFilterOptions,
datePresets: props.datePresets,
show: null,
destinationName: 'Reiseziel',
destinationName: '',
conceptSelected: false,
destinationSelected: false,
dateRangeSelected: { from: null, to: null },
dateRangeLabel: 'Zeitraum',
dateRangeLabel: '',
init() {
this.$watch('dateRangeSelected', () => {
if (null === this.dateRangeSelected.from && null === this.dateRangeSelected.to) {
@@ -90,7 +90,7 @@ export default props => ({
this.load()
},
resetDestination() {
this.destinationName = 'Reiseziel'
this.destinationName = ''
this.destinationSelected = false
this.conceptSelected = false
this.searchParams = {...this.searchParams, destinationUid: null, destinationType: null}
@@ -115,7 +115,7 @@ export default props => ({
},
priceRangeLabel() {
if (null === this.searchParams.priceRange) {
return 'Preis'
return ''
}
let range = this.filterOptions.priceRanges[this.searchParams.priceRange]
return this.priceRangeFormatted(range)
@@ -132,7 +132,7 @@ export default props => ({
return min + ' - ' + max + ' €'
},
updateDateRangeLabel() {
let dateRangeLabel = 'Zeitraum'
let dateRangeLabel = ''
if (null !== this.dateRangeSelected.from && null !== this.dateRangeSelected.to) {
let dateFrom = this.dateRangeSelected.from
let dateTo = this.dateRangeSelected.to
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
+3 -3
View File
@@ -1,11 +1,11 @@
ul {
@apply list-disc pl-4 mb-8;
@apply list-disc pl-4 mb-4;
}
ol {
@apply list-decimal pl-4 mb-8;
@apply list-decimal pl-4 mb-4;
}
p {
@apply mb-8;
@apply mb-4;
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_searchbar.scss
-4
View File
@@ -2,10 +2,6 @@
@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;
&--fixed {
@apply m-0 max-w-full;
}
&--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/Layouts/Page/Detail.html
+2 -2
View File
@@ -4,13 +4,13 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-16">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<div class="lg:mt-24">
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
</f:else>
</f:if>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render section="Content"/>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html
+1 -1
View File
@@ -4,7 +4,7 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-8">
<div class="lg:mt-32">
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+2 -2
View File
@@ -4,7 +4,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="bg-winter my-2">
<f:render partial="Disrupter/Outlines" section="Top2" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
<div class="container grid grid-cols-2 gap-8" data-rte-content>
<div class="col-span-2 md:col-span-1">
<f:if condition="{image}">
@@ -43,7 +43,7 @@
</f:for>
</div>
</div>
<f:render partial="Disrupter/Outlines" section="Bottom2" arguments="{classes: 'hidden md:block transform translate-y-2 text-white'}"/>
<f:render partial="Disrupter/Outlines" section="Bottom1" arguments="{classes: 'hidden md:block transform translate-y-2 text-white'}"/>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+47 -39
View File
@@ -4,49 +4,57 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="container-fluid ep-disturber ep-expert">
<div>
<div>
<div class="container" data-rte-content>
<div class="col-md-6">
<f:if condition="{teaserImage}">
<f:then>
<img class="lazyload" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then>
<f:else>
<img src="https://placehold.it/800x600" alt="">
</f:else>
</f:if>
<div>
<div>Ihr habt Fragen?<br>Wir helfen euch gerne!</div>
<a class="headline headline--3 headline--disturber" href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" rel="nofollow">{settings.phoneNumber}</a>
<div class="bg-winter my-2">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
<div class="container grid grid-cols-2 gap-8 py-8" data-rte-content>
<div class="col-span-2 md:col-span-1">
<div class="relative max-w-md mx-auto mb-8">
<f:if condition="{teaserImage}">
<f:then>
<img class="block rounded-full w-full h-auto lazyload" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then>
<f:else>
<img src="https://placehold.it/800x600" alt="">
</f:else>
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 bg-ep-secondary flex items-center space-x-2">
<svg class="w-10 h-10 text-white">
<use href="#icon-phone"></use>
</svg>
<div class="text-center text-white">
<span class="block whitespace-nowrap">Ihr habt Fragen?</span>
<span class="block whitespace-nowrap">Wir helfen euch gerne!</span>
</div>
<div><a class="call-btn" href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" rel="nofollow"><i class="fa fa-phone" aria-hidden="true"></i></a></div>
</div>
<div class="col-md-6">
<span class="headline headline--secondary headline--disturber headline--light">{data.subheader}</span>
<div class="headline headline--secondary headline--disturber headline--light">{data.header}</div>
{data.bodytext -> f:format.html()}
<br>
<f:for each="{data.flexForm.buttons -> v:iterator.slice(start: 0, length: 4) -> v:iterator.chunk(count: 2)}" as="buttons">
<div class="row">
<f:for each="{buttons}" as="button" iteration="iteration">
<f:if condition="{iteration.cycle} <= 4">
<div class="col-md-6">
<f:link.typolink parameter="{button.container.link}"
class="btn btn-warning btn-shadow">
{button.container.label}
</f:link.typolink>
</div>
</f:if>
</f:for>
</div>
</f:for>
</div>
</a>
</div>
</div>
<div class="col-span-2 md:col-span-1">
<span class="headline--secondary font-light text-white">
{data.subheader}
</span>
<span class="headline--secondary uppercase font-light text-white mb-4">
{data.header}
</span>
<div class="text-white" data-rte-content>
{data.bodytext -> f:format.html()}
</div>
<f:if condition="{data.flexForm.buttons}">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
<f:for each="{data.flexForm.buttons}" as="button">
<f:link.typolink parameter="{button.container.link}"
class="button shadow-lg">
{button.container.label}
</f:link.typolink>
</f:for>
</div>
</f:if>
</div>
</div>
<f:render partial="Disrupter/Outlines" section="Bottom1" arguments="{classes: 'hidden md:block transform translate-y-2 text-white'}"/>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html
+52 -32
View File
@@ -1,38 +1,58 @@
<f:if condition="{faqs}">
<div id="faq">
<div class="container-fluid ep-disturber faq">
<div>
<div>
<div class="container" x-data="faq">
<span class="headline headline--3 headline--disturber">Häufig gestellte Fragen</span>
<f:if condition="{filter}">
<div class="faq-filter">
<input type="text" x-model="query" class="form-control faq-filter__field" placeholder="Suchbegriff">
</div>
</f:if>
<div class="panel-group">
<f:for each="{faqs}" as="faq" iteration="iteration">
<div class="panel panel-default" x-data="collapse">
<a class="headline headline--4" role="button" href="#" x-bind="trigger">
{faq.question}
</a>
<div role="tabpanel" x-bind="container" x-transition.opacity x-cloak>
{faq.answer -> f:format.html()}
</div>
</div>
</f:for>
</div>
<f:if condition="{settings.infoPageUid}">
<div class="text-right">
<i class="fa fa-info-circle" aria-hidden="true"></i>
<a href="{f:uri.typolink(parameter: settings.infoPageUid)}">
<small>Weitere Reiseinfos findet ihr <u>hier</u></small>
</a>
</div>
</f:if>
<div class="bg-winter my-2">
<f:render partial="Disrupter/Outlines" section="Top2" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
<div class="container" x-data="faq">
<span class="headline--3 text-white uppercase mb-4">
Häufig gestellte Fragen
</span>
<f:if condition="{filter}">
<div class="mb-4 pr-2 w-80 border-b border-r border-white flex items-center justify-between">
<input type="text"
x-model="query"
class="bg-transparent border-0 uppercase ring-0 focus:ring-0 placeholder-white text-white"
placeholder="Suchbegriff">
<svg class="w-6 h-6 text-white">
<use href="#icon-search"></use>
</svg>
</div>
</f:if>
<f:for each="{faqs}" as="faq" iteration="iteration">
<div class="p-4 rounded mb-2"
x-data="collapse(<f:format.raw>{f:if(condition: iteration.isFirst, then: 'false', else: 'true')}</f:format.raw>)"
x-bind:class="collapsed || 'bg-ep-primary-80'">
<button class="uppercase text-lg text-white flex items-center space-x-4" x-bind="trigger">
<svg class="w-4 h-4 text-white transform transition duration-200 ease-in-out" x-bind:class="collapsed || 'rotate-180'">
<use href="#icon-chevron-down"></use>
</svg>
<span>
{faq.question}
</span>
</button>
<div class="text-white pt-2"
x-bind="container"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak
data-rte-content>
{faq.answer -> f:format.html()}
</div>
</div>
</div>
</f:for>
<f:if condition="{settings.infoPageUid}">
<div class="flex items-center justify-end space-x-2 text-sm text-white">
<svg class="w-4 h-4">
<use href="#icon-info-circle"></use>
</svg>
<a href="{f:uri.typolink(parameter: settings.infoPageUid)}">
Weitere Reiseinfos findet ihr <span class="underline">hier</span>
</a>
</div>
</f:if>
</div>
<f:render partial="Disrupter/Outlines" section="Bottom2" arguments="{classes: 'hidden md:block transform translate-y-2 text-white'}"/>
</div>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+25 -27
View File
@@ -5,33 +5,31 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:section name="Main">
<div{f:if(condition: settings.searchbarFixed, else: ' class="relative z-40"')}>
<div class="relative lg:container shadow-lg bg-white">
<div class="flex items-center lg:items-end justify-between px-4 pt-4">
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
class="block pb-4"
title="{settings.defaultTitle}">
<img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
</a>
<div class="hidden lg:block">
<f:render section="FirstLevel" arguments="{_all}"/>
</div>
<div class="flex lg:hidden items-center space-x-4 pb-4" x-data>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<button x-on:click.prevent="$store.show.toggleSearchBox()" class="focus:outline-none text-gray-800">
<svg class="w-8 h-8 text-gray-800">
<use href="#icon-search"></use>
</svg>
</button>
</f:else>
</f:if>
<button x-on:click.prevent="$store.show.toggleMobileNav()" class="focus:outline-none text-gray-800">
<svg class="w-8 h-8 text-gray-800">
<use href="#icon-menu"></use>
</svg>
</button>
</div>
<div class="relative z-40 lg:container shadow-lg bg-white">
<div class="flex items-center lg:items-end justify-between px-4 pt-4">
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
class="block pb-4"
title="{settings.defaultTitle}">
<img class="block h-10 lg:h-12 w-auto" src="{f:uri.image(src: settings.logoImage)}" alt="{settings.defaultTitle}">
</a>
<div class="hidden lg:block">
<f:render section="FirstLevel" arguments="{_all}"/>
</div>
<div class="flex lg:hidden items-center space-x-4 pb-4" x-data>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<button x-on:click.prevent="$store.show.toggleSearchBox()" class="focus:outline-none text-gray-800">
<svg class="w-8 h-8 text-gray-800">
<use href="#icon-search"></use>
</svg>
</button>
</f:else>
</f:if>
<button x-on:click.prevent="$store.show.toggleMobileNav()" class="focus:outline-none text-gray-800">
<svg class="w-8 h-8 text-gray-800">
<use href="#icon-menu"></use>
</svg>
</button>
</div>
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+17 -6
View File
@@ -3,11 +3,16 @@
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen z-100 overflow-y-scroll bg-cover bg-gray-700"
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen z-100 overflow-y-scroll bg-cover bg-gray-700 transform"
x-data
x-cloak
x-show="$store.show.mobileNav"
x-transition.opacity>
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="-translate-y-full"
x-transition:enter-end="translate-y-0"
x-transition:leave="transition ease-in duration-300"
x-transition:leave-start="translate-y-0"
x-transition:leave-end="-translate-y-full">
<div class="relative bg-ep-primary">
<div class="fixed top-0 left-0 inset-x-0 px-8 py-2 flex justify-end bg-ep-primary">
<button class="focus:outline-none" x-on:click="$store.show.toggleMobileNav()">
@@ -43,7 +48,7 @@
</svg>
</button>
</div>
<div x-show="visible" x-transition>
<div class="transform" x-show="visible" x-transition.750ms>
<f:for each="{subitem.children}" as="subsubitem">
<a href="{subsubitem.link}"{f:if(condition: '{subsubitem.data.doktype} == 3', then: ' _target="blank"')}
class="block text-lg leading-loose text-white hover:text-white focus:text-white"
@@ -59,10 +64,16 @@
<div class="border-t-4 border-ep-primary mb-4"></div>
<p class="text-2xl text-white uppercase font-bold mb-1">Du hast Fragen?</p>
<p class="text-xl text-white uppercase mb-4">Wir können helfen!</p>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" class="btn btn--secondary block mb-1" rel="nofollow">Anrufen</a>
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}" class="btn btn--secondary block mb-1" rel="nofollow" target="_blank">Whatsapp</a>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" class="btn btn--secondary block mb-1" rel="nofollow">
Anrufen
</a>
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}" class="btn btn--secondary block mb-1" rel="nofollow" target="_blank">
Whatsapp
</a>
<f:if condition="{settings.faqPageUid}">
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}" class="btn btn--secondary block">FAQ</a>
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}" class="btn btn--secondary block">
FAQ
</a>
</f:if>
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html
+32 -24
View File
@@ -14,24 +14,25 @@
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--fixed')}"{f:if(condition: fixed, else: ' x-data="sticky(650)" x-bind:class="sticky && \'searchbar--sticky\'"')}>
<div class="max-w-screen-lg mx-auto">
<f:form action="processSearch" controller="Search" method="post" name="searchParams"
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
pageUid="{settings.defaultSearchPageUid}" additionalAttributes="{ref: 'form'}">
<f:form.hidden property="destinationUid" additionalAttributes="{x-model: 'searchParams.destinationUid'}"/>
<f:form.hidden property="destinationType" additionalAttributes="{x-model: 'searchParams.destinationType'}"/>
<f:form.hidden property="dateFrom" value="" additionalAttributes="{x-model: 'searchParams.dateFrom'}"/>
<f:form.hidden property="dateTo" value="" additionalAttributes="{x-model: 'searchParams.dateTo'}"/>
<f:form.hidden property="nights" additionalAttributes="{x-model: 'searchParams.nights'}"/>
<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 items-start" x-bind:class="{ 'py-8': sticky, 'pt-8 px-8': ! sticky }">
<div class="w-4/12">
<div class="searchbar {f:if(condition: fixed, then: ' searchbar--sticky')}"{f:if(condition: fixed, else: ' x-data="sticky(650)" x-bind:class="sticky && \'searchbar--sticky\'"')}>
<f:form action="processSearch" controller="Search" method="post" name="searchParams"
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
pageUid="{settings.defaultSearchPageUid}" additionalAttributes="{ref: 'form'}">
<f:form.hidden property="destinationUid" additionalAttributes="{x-model: 'searchParams.destinationUid'}"/>
<f:form.hidden property="destinationType" additionalAttributes="{x-model: 'searchParams.destinationType'}"/>
<f:form.hidden property="dateFrom" value="" additionalAttributes="{x-model: 'searchParams.dateFrom'}"/>
<f:form.hidden property="dateTo" value="" additionalAttributes="{x-model: 'searchParams.dateTo'}"/>
<f:form.hidden property="nights" additionalAttributes="{x-model: 'searchParams.nights'}"/>
<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="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 outline-none text-white uppercase px-2 py-1 cursor-pointer"
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'"/>
@@ -61,10 +62,10 @@
</div>
</div>
</div>
<div class="w-2/12">
<div class="w-24">
<div class="relative border-b border-r border-white mr-8">
<input type="text"
class="w-full bg-transparent border-0 outline-none text-white uppercase px-2 py-1 cursor-pointer"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer"
x-bind:class="loading && 'cursor-not-allowed'"
x-bind:value="searchParams.pax"
x-on:click.prevent="show = show === 'pax' ? null : 'pax'"/>
@@ -83,10 +84,11 @@
</div>
</div>
</div>
<div class="w-4/12">
<div class="flex-1">
<div class="relative border-b border-r border-white mr-8">
<input type="text"
class="w-full bg-transparent border-0 outline-none text-white uppercase px-2 py-1 cursor-pointer"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
placeholder="Reiseziel"
x-bind:class="loading && 'cursor-not-allowed'"
x-bind:value="destinationName"
x-on:click.prevent="show = show === 'destination' ? null : 'destination'"/>
@@ -140,10 +142,11 @@
</div>
</div>
</div>
<div class="w-2/12">
<div class="w-32">
<div class="relative border-r border-b border-white">
<input type="text"
class="w-full bg-transparent border-0 outline-none text-white uppercase px-2 py-1 cursor-pointer"
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
placeholder="Preis"
x-bind:class="loading && 'cursor-not-allowed'"
x-bind:value="priceRangeLabel"
x-on:click.prevent="show = show === 'priceRange' ? null : 'priceRange'"/>
@@ -167,6 +170,11 @@
</div>
</div>
</div>
<button type="submit" x-show="sticky" x-cloak x-bind:disabled="loading">
<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>
@@ -177,8 +185,8 @@
Alle anzeigen
</button>
</div>
</f:form>
</div>
</div>
</f:form>
</div>
</div>
</f:section>
tailwind.config.js
+4
View File
@@ -13,6 +13,10 @@ module.exports = {
'./public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/**/*.{js,vue}',
'./public/typo3conf/ext/ep_theme/Classes/ViewHelpers/**/*.php',
],
safelist: [
'bg-header-season-w',
'bg-header-season-s',
],
},
theme: {
container: {