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