diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/product-detail.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/product-detail.js index f4f52287..88253c6d 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/product-detail.js +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/product-detail.js @@ -1,8 +1,8 @@ import axios from 'axios' -export default uris => ({ - uris, - show: 'dates', +export default props => ({ + uris: props.uris, + show: props.hotelOnTop ? 'hotel' : 'dates', tableMode: 'dates', datesRows: [], pricesRows: [], @@ -16,65 +16,75 @@ export default uris => ({ altLabel: null, altProductLink: null, loading: false, + loaded: false, addBus: false, discountBus: false, showAll: false, init() { - this.loadDates() + // Load dates instantly when initial view is dates + if ('dates' === this.show) { + this.loadDates() + } + // Scroll to top when switching table mode this.$watch('tableMode', () => { this.$el.scrollIntoView({ block: 'start', behavior: 'smooth' }) }) + // Load dates (once) when switching to dates view + this.$watch('show', () => { + if ('dates' === this.show && false === this.loaded) { + this.loadDates() + } + }) }, loadDates() { this.loading = true - axios({ - url: this.uris.dates, - }).then(response => { - const json = response.data - if (json.dates.length === 1) { - this.singleDate = true - const dateUid = json.dates[0].dateUid - this.loadPrices(dateUid) - } else { - this.singleDate = false - this.datesRows = json.dates - this.bookable = json.bookable - this.altLabel = json.altLabel - this.altProductLink = json.altProductLink - this.hasSurcharge = json.hasSurcharge - this.hasDiscount = json.hasDiscount - this.available = json.dates.length > 0 - this.tableMode = 'dates' - } - }).catch(() => { - }).finally(() => { - this.loading = false - }) + axios.get(this.uris.dates) + .then(response => { + const json = response.data + if (json.dates.length === 1) { + this.singleDate = true + const dateUid = json.dates[0].dateUid + this.loadPrices(dateUid) + } else { + this.singleDate = false + this.datesRows = json.dates + this.bookable = json.bookable + this.altLabel = json.altLabel + this.altProductLink = json.altProductLink + this.hasSurcharge = json.hasSurcharge + this.hasDiscount = json.hasDiscount + this.available = json.dates.length > 0 + this.tableMode = 'dates' + } + }).catch(() => { + }).finally(() => { + this.loading = false + this.loaded = true + }) }, loadPrices(dateUid) { this.loading = true - const data = new FormData() - data.set('tx_epproducts_ajax[date]', dateUid) - data.set('tx_epproducts_ajax[paCode]', this.$store.appconfig.paCode) - axios({ - url: this.uris.pricetable, - method: 'POST', - data - }).then(response => { - const json = response.data - this.pricesRows = json.prices - this.servicesIncluded = json.servicesIncluded - this.dateRange = json.dateRange - this.tableMode = 'prices' - }).catch(() => { - }).finally(() => { - this.loading = false + const data = new URLSearchParams({ + 'tx_epproducts_ajax[date]': dateUid, + 'tx_epproducts_ajax[paCode]': this.$store.appconfig.paCode, }) + axios.post(this.uris.pricetable, data) + .then(response => { + const json = response.data + this.pricesRows = json.prices + this.servicesIncluded = json.servicesIncluded + this.dateRange = json.dateRange + this.tableMode = 'prices' + }).catch(() => { + }).finally(() => { + this.loading = false + }) }, calculatePrice(minPrice, busPrice, discount) { if (this.addBus) { return minPrice + busPrice - } else if (this.discountBus) { + } + if (this.discountBus) { return minPrice + discount } return minPrice diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss new file mode 100644 index 00000000..9cbd798c --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss @@ -0,0 +1,47 @@ +.tiles { + @apply container lg:max-w-screen-2xl; +} + +.tiles__grid { + @apply grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-3 lg:grid-flow-col gap-4 lg:gap-1; + @apply lg:h-128; + @apply bg-white; +} + +.tiles__tile { + @apply bg-cover bg-center h-32 lg:h-auto; +} + +.tiles__link { + @apply relative w-full h-full flex items-center justify-center; + @apply leading-none text-white hover:text-white text-2xl font-bold uppercase text-shadow break-normal; + + &:before { + @apply block absolute top-0 left-0 inset-0 w-full h-full z-20; + @apply border-0 border-white; + @apply transition-all; + content: ""; + } + + &:hover:before { + @apply mt-4 ml-4; + @apply border-2; + width: calc(100% - theme('spacing.8')); + height: calc(100% - theme('spacing.8')); + } + + &:after { + @apply block absolute top-0 left-0 inset-0 w-full h-full z-10; + @apply transition-all; + content:""; + } + + &:hover:after { + @apply sbw:bg-sbw-overlay-secondary; + } +} + +.tiles__label { + @apply block relative z-20; + @apply text-center; +} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss index eaa2ce60..969fa393 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss @@ -91,9 +91,15 @@ @import "components/forms"; @import "components/contact-bar"; @import "components/misc"; + @import "components/tiles"; } @layer utilities { + @responsive { + .max-w-screen-2xl { + max-width: 1440px; + } + } .has-validation-error input { @apply text-red-500 border-red-500; } @@ -113,4 +119,7 @@ .-translate-xy-1\/2 { transform: translate(-50%, -50%); } + .text-shadow { + text-shadow: 0 2px 2px theme('colors.gray.400'); + } } diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html index 34d4669d..58a87ee7 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html @@ -3,58 +3,50 @@ xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> - - - - - - - -
-
-
-
-
- - - {image.alternative} - - - - - -
-
Ihr habt Fragen?
Wir helfen euch gerne!
- {settings.phoneNumber} -
-
-
-
- {data.subheadline} -
{data.headline}
- {data.text -> f:format.html()} -
- -
- - -
- - {button.container.label} - -
- - -
+
+ +
+
+ + + {image.alternative} + + + + + +
+
Ihr habt Fragen?
Wir helfen euch gerne!
+ {settings.phoneNumber} +
+
+
+
+ {data.subheadline} +
{data.headline}
+ {data.text -> f:format.html()} +
+ +
+ + +
+ + {button.container.label} + +
+
-
+
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html index 4554db2f..bb1329c3 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html @@ -2,13 +2,13 @@ xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> - - - - - - -
+
+
@@ -40,11 +40,12 @@
+
- - - - - diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html index bebe2f78..d35a0db5 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html @@ -3,13 +3,13 @@