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

WIP Debootstrapify

Browse Source
This commit is contained in:
Björn Fromme
2021-08-05 17:37:19 +02:00
parent 041af39bc7
commit 3ef7b42ce7
18 changed files with 654 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/product-detail.js
+54 -44
View File
@@ -1,8 +1,8 @@
import axios from 'axios' import axios from 'axios'
export default uris => ({ export default props => ({
uris, uris: props.uris,
show: 'dates', show: props.hotelOnTop ? 'hotel' : 'dates',
tableMode: 'dates', tableMode: 'dates',
datesRows: [], datesRows: [],
pricesRows: [], pricesRows: [],
@@ -16,65 +16,75 @@ export default uris => ({
altLabel: null, altLabel: null,
altProductLink: null, altProductLink: null,
loading: false, loading: false,
loaded: false,
addBus: false, addBus: false,
discountBus: false, discountBus: false,
showAll: false, showAll: false,
init() { 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.$watch('tableMode', () => {
this.$el.scrollIntoView({ block: 'start', behavior: 'smooth' }) 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() { loadDates() {
this.loading = true this.loading = true
axios({ axios.get(this.uris.dates)
url: this.uris.dates, .then(response => {
}).then(response => { const json = response.data
const json = response.data if (json.dates.length === 1) {
if (json.dates.length === 1) { this.singleDate = true
this.singleDate = true const dateUid = json.dates[0].dateUid
const dateUid = json.dates[0].dateUid this.loadPrices(dateUid)
this.loadPrices(dateUid) } else {
} else { this.singleDate = false
this.singleDate = false this.datesRows = json.dates
this.datesRows = json.dates this.bookable = json.bookable
this.bookable = json.bookable this.altLabel = json.altLabel
this.altLabel = json.altLabel this.altProductLink = json.altProductLink
this.altProductLink = json.altProductLink this.hasSurcharge = json.hasSurcharge
this.hasSurcharge = json.hasSurcharge this.hasDiscount = json.hasDiscount
this.hasDiscount = json.hasDiscount this.available = json.dates.length > 0
this.available = json.dates.length > 0 this.tableMode = 'dates'
this.tableMode = 'dates' }
} }).catch(() => {
}).catch(() => { }).finally(() => {
}).finally(() => { this.loading = false
this.loading = false this.loaded = true
}) })
}, },
loadPrices(dateUid) { loadPrices(dateUid) {
this.loading = true this.loading = true
const data = new FormData() const data = new URLSearchParams({
data.set('tx_epproducts_ajax[date]', dateUid) 'tx_epproducts_ajax[date]': dateUid,
data.set('tx_epproducts_ajax[paCode]', this.$store.appconfig.paCode) '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
}) })
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) { calculatePrice(minPrice, busPrice, discount) {
if (this.addBus) { if (this.addBus) {
return minPrice + busPrice return minPrice + busPrice
} else if (this.discountBus) { }
if (this.discountBus) {
return minPrice + discount return minPrice + discount
} }
return minPrice return minPrice
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_tiles.scss
+47
View File
@@ -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;
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
+9
View File
@@ -91,9 +91,15 @@
@import "components/forms"; @import "components/forms";
@import "components/contact-bar"; @import "components/contact-bar";
@import "components/misc"; @import "components/misc";
@import "components/tiles";
} }
@layer utilities { @layer utilities {
@responsive {
.max-w-screen-2xl {
max-width: 1440px;
}
}
.has-validation-error input { .has-validation-error input {
@apply text-red-500 border-red-500; @apply text-red-500 border-red-500;
} }
@@ -113,4 +119,7 @@
.-translate-xy-1\/2 { .-translate-xy-1\/2 {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.text-shadow {
text-shadow: 0 2px 2px theme('colors.gray.400');
}
} }
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+42 -50
View File
@@ -3,58 +3,50 @@
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">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 176"> <div class="bg-winter">
<style type="text/css"> <svg class="hidden md:block transform -translate-y-2" viewBox="0 0 1440 79" xmlns="http://www.w3.org/2000/svg">
.st0{fill:#FFFFFF;} <path d="M0,58.3L119,17.7L701.7,52L1072.3,0L1440,32.3L1440,79L0,79L0,58.3Z" style="fill:rgb(60,141,207);fill-rule:nonzero;"/>
.st1{fill:#3C8DCF;} <path d="M119,17.7L0,25.8L0,58.3L119,17.7Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
.st2{fill:#F9C700;} <path d="M1072.3,0L701.7,52L572,44.4L1072.3,0Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
</style> <path d="M1440,32.3L1323.7,22.1L1440,2L1440,32.3Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
<rect class="st0" width="1440" height="176"/> <path d="M0,0L0,25.8L119,17.7L572,44.4L1072.3,0L1323.7,22.1L1440,2L1440,0L0,0Z" style="fill:white;fill-rule:nonzero;"/>
<polygon class="st1" points="0,176 0,153.4 263,105.4 551,127.7 1216,82.6 1359.2,137.5 1440,146.8 1440,176 "/> </svg>
<polygon class="st2" points="263,105.4 0,124.5 0,176 "/> <div class="container grid grid-cols-2 gap-8" data-rte-content>
<polygon class="st2" points="1216,82.6 1366,149.5 1440,146.8 1440,112.8 1373,121.3 "/> <div class="col-span-2 md:col-span-1">
</svg> <f:if condition="{image}">
<div class="container-fluid"> <f:then>
<div> <img class="lazyload" data-src="{f:uri.image(image: image, width: '400', height: '400c')}"
<div> alt="{image.alternative}" title="{image.title}">
<div class="container" data-rte-content> </f:then>
<div class="col-md-6"> <f:else>
<f:if condition="{image}"> <img src="https://placehold.it/800x600" alt="">
<f:then> </f:else>
<img class="lazyload" data-src="{f:uri.image(image: image, width: '400', height: '400c')}" </f:if>
alt="{image.alternative}" title="{image.title}"> <div>
</f:then> <div>Ihr habt Fragen?<br>Wir helfen euch gerne!</div>
<f:else> <a class="headline headline--3 headline--disturber" href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" rel="nofollow">{settings.phoneNumber}</a>
<img src="https://placehold.it/800x600" alt=""> </div>
</f:else> <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>
</f:if> </div>
<div> <div class="col-span-2 md:col-span-1">
<div>Ihr habt Fragen?<br>Wir helfen euch gerne!</div> <span class="headline headline--secondary headline--disturber headline--light">{data.subheadline}</span>
<a class="headline headline--3 headline--disturber" href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" rel="nofollow">{settings.phoneNumber}</a> <div class="headline headline--secondary headline--disturber headline--light">{data.headline}</div>
</div> {data.text -> f:format.html()}
<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> <br>
</div> <f:for each="{data.flexForm.buttons -> v:iterator.slice(start: 0, length: 4) -> v:iterator.chunk(count: 2)}" as="buttons">
<div class="col-md-6"> <div class="row">
<span class="headline headline--secondary headline--disturber headline--light">{data.subheadline}</span> <f:for each="{buttons}" as="button" iteration="iteration">
<div class="headline headline--secondary headline--disturber headline--light">{data.headline}</div> <f:if condition="{iteration.cycle} <= 4">
{data.text -> f:format.html()} <div class="col-md-6">
<br> <f:link.typolink parameter="{button.container.link}"
<f:for each="{data.flexForm.buttons -> v:iterator.slice(start: 0, length: 4) -> v:iterator.chunk(count: 2)}" as="buttons"> class="btn btn-warning btn-shadow">
<div class="row"> {button.container.label}
<f:for each="{buttons}" as="button" iteration="iteration"> </f:link.typolink>
<f:if condition="{iteration.cycle} <= 4"> </div>
<div class="col-md-6"> </f:if>
<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> </f:for>
</div> </div>
</div> </f:for>
</div> </div>
</div> </div>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Small.html
+13 -12
View File
@@ -2,13 +2,13 @@
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<svg viewBox="0 0 1440 62" xmlns="http://www.w3.org/2000/svg"> <div class="bg-winter">
<path d="M0,62L0,51.142L146.761,0L309.429,36.327L462.293,27.296L642.868,0L1104.86,42.923L1288.64,9.944L1368.37,37.139L1440,18.975L1440,62L0,62Z" style="fill:#3d8ccb;fill-rule:nonzero;"/> <svg class="hidden md:block transform -translate-y-2" viewBox="0 0 1440 79" xmlns="http://www.w3.org/2000/svg">
<path d="M-0.6,31.5L0,62L146.7,0.9L-0.6,31.5Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/> <path d="M119,17.7L0,25.8L0,58.3L119,17.7Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
<path d="M309.3,36.7L642.6,0.9L464.5,36.7L309.3,36.7Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/> <path d="M1072.3,0L701.7,52L572,44.4L1072.3,0Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
<path d="M1288.1,10.7L1371,31.5L1439.4,19.6L1368.6,45.6L1288.1,10.7Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/> <path d="M1440,32.3L1323.7,22.1L1440,2L1440,32.3Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
</svg> <path d="M0,0L0,25.8L119,17.7L572,44.4L1072.3,0L1323.7,22.1L1440,2L1440,0L0,0Z" style="fill:white;fill-rule:nonzero;"/>
<div class="bg-winter -mt-1 -mb-1"> </svg>
<div class="max-w-screen-lg mx-auto" data-rte-content> <div class="max-w-screen-lg mx-auto" data-rte-content>
<div class="md:flex md:items-start py-4"> <div class="md:flex md:items-start py-4">
<div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6"> <div class="px-16 pb-4 md:px-4 md:pb-0 md:w-1/6">
@@ -40,11 +40,12 @@
</div> </div>
</div> </div>
</div> </div>
<svg class="hidden md:block transform translate-y-2" viewBox="0 0 1440 79" xmlns="http://www.w3.org/2000/svg">
<path d="M1321,61.3L1440,53.2L1440,20.7L1321,61.3Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
<path d="M367.7,79L738.3,27L868,34.6L367.7,79Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
<path d="M0,46.7L116.3,56.9L0,77L0,46.7Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
<path d="M1440,79L1440,53.2L1321,61.3L868,34.6L367.7,79L116.3,56.9L0,77L0,79L1440,79Z" style="fill:white;fill-rule:nonzero;"/>
</svg>
</div> </div>
<svg viewBox="0 0 1440 56" xmlns="http://www.w3.org/2000/svg">
<path d="M0,0L0,45.882L205.2,22.941L545.8,51.592L1090.6,25.846L1372.7,56L1440,28.05L1440,0" style="fill:#3d8ccb;fill-rule:nonzero;"/>
<path d="M205.2,22.9L545.8,55.9L1090.6,25.8L545.8,45L205.2,22.9Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
<path d="M1372.7,55.9L1440,14.9L1440,55.9L1372.7,55.9Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
</svg>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
+4 -4
View File
@@ -3,13 +3,13 @@
<div id="ep-main-carousel" class="navbar-carousel carousel slide"> <div id="ep-main-carousel" class="navbar-carousel carousel slide">
<div class="item{f:if(condition: iteration.isFirst, then: ' active')}"> <div class="item{f:if(condition: iteration.isFirst, then: ' active')}">
<div class="container stoerer"> <div class="container stoerer">
<div class="row"> <div class="grid col-span-12 gap-4">
<div class="col-xs-12 col-md-3 col-lg-2 col-lg-offset-2"> <div class="col-span-12 md:col-span-3 lg:col-span-2 lg:col-start-2">
<div>{settings.eventDateDayFrom -> f:format.raw()}<br>-<br>{settings.eventDateDayTo -> f:format.raw()}</div> <div>{settings.eventDateDayFrom -> f:format.raw()}<br>-<br>{settings.eventDateDayTo -> f:format.raw()}</div>
<div>{settings.eventDateMonth -> f:format.raw()}</div> <div>{settings.eventDateMonth -> f:format.raw()}</div>
</div> </div>
<div class="col-xs-6 col-md-4 col-lg-3">{settings.eventHeroClaim -> f:format.raw()}</div> <div class="col-span-6 md:col-span-4 lg:col-span-3">{settings.eventHeroClaim -> f:format.raw()}</div>
<div class="col-xs-6 col-md-3 col-lg-2">{settings.eventHeroDescription -> f:format.raw()}</div> <div class="col-span-6 md:col-span-3 lg:col-span-2">{settings.eventHeroDescription -> f:format.raw()}</div>
</div> </div>
</div> </div>
{slides -> v:iterator.first() -> v:variable.set(name: 'slide')} {slides -> v:iterator.first() -> v:variable.set(name: 'slide')}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html
+2
View File
@@ -14,9 +14,11 @@
<symbol id="icon-airplane" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></symbol> <symbol id="icon-airplane" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></symbol>
<symbol id="icon-search" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></symbol> <symbol id="icon-search" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></symbol>
<symbol id="icon-close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></symbol> <symbol id="icon-close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></symbol>
<symbol id="icon-check" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></symbol>
<symbol id="icon-heart" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></symbol> <symbol id="icon-heart" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></symbol>
<symbol id="icon-calendar" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></symbol> <symbol id="icon-calendar" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></symbol>
<symbol id="icon-phone" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></symbol> <symbol id="icon-phone" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></symbol>
<symbol id="icon-email" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></symbol>
<symbol id="icon-tag" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></symbol> <symbol id="icon-tag" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></symbol>
<symbol id="icon-bed" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></symbol> <symbol id="icon-bed" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></symbol>
<symbol id="icon-bus" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/></symbol> <symbol id="icon-bus" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/></symbol>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 16 KiB

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html
+63 -59
View File
@@ -5,65 +5,69 @@
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"> xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:section name="Content"> <f:section name="Content">
<div class="ep-weiche-wrapper"> <div class="tiles">
<div class="row"> <div class="tiles__grid">
<div class="col-md-12"> <f:if condition="{images.0}">
<div class="ep-weiche"> <div class="tiles__tile lg:col-span-2 lg:row-span-1"
<div> style="background-image:url('{f:uri.image(image: images.0)}');">
<div class="ep-tile-bottom"> <f:link.typolink parameter="{images.0.link}"
<div class="ep-tile-right"> title="{images.0.title -> f:format.raw()}"
<div class="ep-tile-right"> class="tiles__link">
<f:if condition="{images.0}"> <span class="tiles__label">
<div class="ep-tile ep-tile-bottom" style="background-image:url('{f:uri.image(image: images.0)}');"> {images.0.title -> f:format.raw()}
<f:link.typolink parameter="{images.0.link}" title="{images.0.title -> f:format.raw()}"> </span>
{images.0.title -> f:format.raw()} </f:link.typolink>
</f:link.typolink> </div>
</div> </f:if>
</f:if> <f:if condition="{images.1}">
<f:if condition="{images.1}"> <div class="tiles__tile lg:col-span-2 lg:row-span-1"
<div class="ep-tile" style="background-image:url('{f:uri.image(image: images.1)}');"> style="background-image:url('{f:uri.image(image: images.1)}');">
<f:link.typolink parameter="{images.1.link}" title="{images.1.title -> f:format.raw()}"> <f:link.typolink parameter="{images.1.link}"
{images.1.title -> f:format.raw()} title="{images.1.title -> f:format.raw()}"
</f:link.typolink> class="tiles__link">
</div> <span class="tiles__label">
</f:if> {images.1.title -> f:format.raw()}
</div> </span>
<f:if condition="{images.2}"> </f:link.typolink>
<div class="ep-tile" style="background-image:url('{f:uri.image(image: images.2)}');"> </div>
<f:link.typolink parameter="{images.2.link}" title="{images.2.title -> f:format.raw()}"> </f:if>
{images.2.title -> f:format.raw()} <f:if condition="{images.4}">
</f:link.typolink> <div class="tiles__tile lg:col-span-12 lg:row-span-1"
</div> style="background-image:url('{f:uri.image(image: images.4)}');">
</f:if> <f:link.typolink parameter="{images.4.link}"
</div> title="{images.4.title -> f:format.raw()}"
<f:if condition="{images.3}"> class="tiles__link">
<div class="ep-tile" style="background-image:url('{f:uri.image(image: images.3)}');"> <span class="tiles__label">
<f:link.typolink parameter="{images.3.link}" title="{images.3.title -> f:format.raw()}"> {images.4.title -> f:format.raw()}
{images.3.title -> f:format.raw()} </span>
</f:link.typolink> </f:link.typolink>
</div> </div>
</f:if> </f:if>
</div> <f:if condition="{images.2}">
<div> <div class="tiles__tile lg:col-span-4 lg:row-span-2"
<f:if condition="{images.4}"> style="background-image:url('{f:uri.image(image: images.2)}');">
<div class="ep-tile ep-tile-right" style="background-image:url('{f:uri.image(image: images.4)}');"> <f:link.typolink parameter="{images.2.link}"
<f:link.typolink parameter="{images.4.link}" title="{images.4.title -> f:format.raw()}"> title="{images.2.title -> f:format.raw()}"
{images.4.title -> f:format.raw()} class="tiles__link">
</f:link.typolink> <span class="tiles__label">
</div> {images.2.title -> f:format.raw()}
</f:if> </span>
<f:if condition="{images.5}"> </f:link.typolink>
<div class="ep-tile" style="background-image:url('{f:uri.image(image: images.5)}');"> </div>
<f:link.typolink parameter="{images.5.link}" title="{images.5.title -> f:format.raw()}"> </f:if>
{images.5.title -> f:format.raw()} <f:if condition="{images.3}">
</f:link.typolink> <div class="tiles__tile lg:col-span-6 lg:row-span-2"
</div> style="background-image:url('{f:uri.image(image: images.3)}');">
</f:if> <f:link.typolink parameter="{images.3.link}"
</div> title="{images.3.title -> f:format.raw()}"
</div> class="tiles__link">
</div> <span class="tiles__label">
</div> {images.3.title -> f:format.raw()}
</div> </span>
</f:link.typolink>
</div>
</f:if>
</div>
</div> </div>
</f:section> </f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/Partnerlogos.html
+7 -7
View File
@@ -4,17 +4,17 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Content"> <f:section name="Content">
<div class="partnerlogos container"> <div class="container">
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" /> <f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
<div class="partnerlogos__primary row"> <div class="grid grid-cols-4 gap-8">
<f:for each="{files -> v:iterator.slice(start: 0, length: 4)}" as="image"> <f:for each="{files -> v:iterator.slice(start: 0, length: 4)}" as="image">
<f:render section="Image" arguments="{image: image, cssClasses: 'col-xs-6 col-lg-3'}"/> <f:render section="Image" arguments="{image: image, cssClasses: 'col-span-2 lg:col-span-3'}"/>
</f:for> </f:for>
</div> </div>
<f:if condition="{files -> f:count()} > 4"> <f:if condition="{files -> f:count()} > 4">
<div class="partnerlogos__secondary row"> <div class="grid grid-cols-12 gap-4">
<f:for each="{files -> v:iterator.slice(start: 4)}" as="image"> <f:for each="{files -> v:iterator.slice(start: 4)}" as="image">
<f:render section="Image" arguments="{image: image, cssClasses: 'col-xs-6 col-md-3 col-lg-2'}"/> <f:render section="Image" arguments="{image: image, cssClasses: 'col-span-6 col-span-3 col-span-2'}"/>
</f:for> </f:for>
</div> </div>
</f:if> </f:if>
@@ -22,9 +22,9 @@
</f:section> </f:section>
<f:section name="Image"> <f:section name="Image">
<div class="partnerlogo {cssClasses}"> <div class="{cssClasses}">
<f:link.typolink parameter="{image.link}"> <f:link.typolink parameter="{image.link}">
<img class="lazyload img-responsive partnerlogo__image" <img class="block w-full h-auto lazyload"
data-src="{f:uri.image(image: image, width: '400c', height: '400')}" data-src="{f:uri.image(image: image, width: '400c', height: '400')}"
alt="{image.alternative}" title="{image.title}"> alt="{image.alternative}" title="{image.title}">
</f:link.typolink> </f:link.typolink>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/DealOfTheWeek.html
+34 -26
View File
@@ -1,41 +1,49 @@
<html data-namespace-typo3-fluid="true" lang="en" <html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="container-fluid ep-disturber ep-weekly-deal"> <div class="bg-winter">
<div> <svg viewBox="0 0 1440 80" xmlns="http://www.w3.org/2000/svg">
<div> <path d="M0,-166.6L0,56.5L157.2,2L320.6,43.4L469.4,32.9L643.4,0.4L1104.4,50L1288.1,12.6L1364.5,47.5L1440,23.9L1440,-166.6L0,-166.6Z" style="fill:white;fill-rule:nonzero;"/>
<div class="col-md-4 left-content"> <path d="M157.2,2L0,40.1L0.4,80L157.2,2Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
<div> <path d="M1288.1,12.6L1365.4,35.3L1440,23.9L1367,56.5L1288.1,12.6Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
<span class="headline headline--secondary headline--disturber headline--disturber-large">SchneEPchen</span> <path d="M320.6,43.4L643.4,0.4L470.2,43.4L320.6,43.4Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
</svg>
<div class="container grid grid-cols-3 gap-8 py-8">
<div class="col-span-3 md:col-span-1 left-content">
<span class="headline headline--secondary headline--disturber headline--disturber-large">
SchneEPchen
</span>
</div>
<div class="col-span-3 md:col-span-2 right-content">
<div class="w-full md:w-1/4 text-white">
<div class="uppercase text-2xl font-bold mb-2">
Angebot
</div> </div>
</div> <span class="headline headline--4 text-white mb-2 pb-2 border-b-2 border-white">
<div class="col-md-8 right-content"> {data.header}
<div class="row"> </span>
<div class="col-md-3 "> <div class="mb-4" data-rte-content>
<div class="back"> {data.bodytext -> f:format.nl2br()}
<div>
<div class="teaser-title">Angebot</div>
<div class="content" data-rte-content>
<span class="headline headline--4">{data.header}</span>
<hr>
{data.bodytext -> f:format.nl2br()}
</div>
</div>
<f:if condition="{data.header_link}">
<a class="btn btn-warning" href="{f:uri.typolink(parameter: data.header_link)}" title="{product.name}">Details</a>
</f:if>
</div>
</div>
</div> </div>
<f:if condition="{data.header_link}">
<a class="btn btn-warning"
href="{f:uri.typolink(parameter: data.header_link)}"
title="{product.name}">
Details
</a>
</f:if>
</div> </div>
</div> </div>
</div> </div>
<svg viewBox="0 0 1440 110" xmlns="http://www.w3.org/2000/svg">
<path d="M1440.4,162L1440,105.8L1017.4,29.4L701.1,45.6L467,51.3L210.1,29.4L0.4,13.9L0.4,162L1440.4,162Z" style="fill:white;fill-rule:nonzero;"/>
<path d="M1017.4,29.4L680.8,23.7L467,51.3L694.6,51.3L1017.4,29.4Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
<path d="M210.1,29.4L0.4,3.4L0.4,23.7L210.1,29.4Z" style="fill:rgb(249,199,0);fill-rule:nonzero;"/>
</svg>
</div> </div>
</f:section> </f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+195 -161
View File
@@ -1,21 +1,23 @@
<html data-namespace-typo3-fluid="true" lang="en" <html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers" xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<article> <article>
<f:render partial="Product/HeaderDetail" arguments="{_all}"/> <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
<div class="container" id="detail" x-data='productDetail({ <div class="container"
<f:format.raw> id="detail"
dates: "{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', format: 'json', pageUid: settings.defaultAjaxUid)}", x-data='productDetail({
pricetable: "{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}", uris: {
travelAlert: "{f:uri.typolink(parameter: settings.travelAlertPageUid)}" dates: "<ep:uri.ajax action="dates" controller="AjaxDate" arguments="{product: product, hotel: hotel}" format="json" pageUid="{settings.defaultAjaxUid}"/>",
</f:format.raw> pricetable: "<ep:uri.ajax action="pricetable" controller="AjaxTable" arguments="{product: product, hotel: hotel}" format="html" pageUid="{settings.defaultAjaxUid}"/>",
})'> travelAlert: "<f:uri.typolink parameter="{settings.travelAlertPageUid}"/>"
},
hotelOnTop: <f:if condition="{settings.hotelOnTop}"><f:then>true</f:then><f:else>false</f:else></f:if>
})'>
<f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/> <f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
<div class="flex flex-col lg:flex-row-reverse lg:items-start"> <div class="flex flex-col lg:flex-row-reverse lg:items-start">
<div class="w-full lg:w-1/3"> <div class="w-full lg:w-1/3">
@@ -33,6 +35,18 @@
x-on:click.prevent="show = 'dates'">Termine/Preise</button> x-on:click.prevent="show = 'dates'">Termine/Preise</button>
</f:else> </f:else>
</f:if> </f:if>
<f:if condition="{settings.hotelOnTop}">
<f:then>
<button class="button button--light col-span-1 md:col-span-2"
x-bind:class="{ 'button--active': show === 'dates'}"
x-on:click.prevent="show = 'dates'">Termine/Preise</button>
</f:then>
<f:else>
<button class="button button--light col-span-1 md:col-span-2"
x-bind:class="{ 'button--active': show === 'hotel'}"
x-on:click.prevent="show = 'hotel'">Unterkunft</button>
</f:else>
</f:if>
<button class="button button--light col-span-1 md:col-span-2" <button class="button button--light col-span-1 md:col-span-2"
x-bind:class="{ 'button--active': show === 'region'}" x-bind:class="{ 'button--active': show === 'region'}"
x-on:click.prevent="show = 'region'">Gebiet</button> x-on:click.prevent="show = 'region'">Gebiet</button>
@@ -74,13 +88,17 @@
<div id="main" class="w-full lg:w-2/3"> <div id="main" class="w-full lg:w-2/3">
<div class="lg:pr-4"> <div class="lg:pr-4">
<!-- Loader --> <!-- Loader -->
<div x-show="loading" class="flex items-center space-x-2 mb-8"> <div x-show="loading"
x-cloak
class="flex items-center space-x-2 mb-8">
<f:image class="block w-4 h-4" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/> <f:image class="block w-4 h-4" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
<span>Loading...</span> <span>Loading...</span>
</div> </div>
<!-- /Loader --> <!-- /Loader -->
<!-- Dates --> <!-- Dates -->
<div x-show="show === 'dates' && !loading" x-transition.opacity> <div x-show="show === 'dates' && !loading"
x-transition.opacity
x-cloak>
<f:if condition="{isProductWithExcludedConcept}"> <f:if condition="{isProductWithExcludedConcept}">
<f:if condition="{product.region.season} == 'w'"> <f:if condition="{product.region.season} == 'w'">
<div class="alert alert-info"> <div class="alert alert-info">
@@ -104,34 +122,36 @@
<f:render section="PriceTable" arguments="{_all}"/> <f:render section="PriceTable" arguments="{_all}"/>
</div> </div>
<f:if condition="{isProductWithNoInfoConcept}"> <f:if condition="{isProductWithNoInfoConcept}">
<template x-if="!available"> <f:else>
<f:render partial="NotBookable" arguments="{_all}"/> <template x-if="!available">
</template> <f:render partial="NotBookable" arguments="{_all}"/>
</template>
</f:else>
</f:if> </f:if>
</f:else> </f:else>
</f:if> </f:if>
</div> </div>
<!-- /Dates --> <!-- /Dates -->
<div x-show="show === 'dates' || show === 'prices'"> <div x-show="show === 'dates' || show === 'prices'" x-cloak>
<f:render partial="Product/Details" arguments="{_all}"/> <f:render partial="Product/Details" arguments="{_all}"/>
</div> </div>
<!-- Hotel --> <!-- Hotel -->
<div x-show="show === 'hotel'" x-transition.opacity> <div x-show="show === 'hotel'" x-transition.opacity x-cloak>
<f:render partial="Hotel/Details" arguments="{hotel: hotel, bars: 1, showNonBookableHint: 0}"/> <f:render partial="Hotel/Details" arguments="{hotel: hotel, bars: 1, showNonBookableHint: 0}"/>
</div> </div>
<!-- /Hotel --> <!-- /Hotel -->
<!-- City --> <!-- City -->
<div x-show="show === 'city'" x-transition.opacity> <div x-show="show === 'city'" x-transition.opacity x-cloak>
<f:render partial="City/Details" arguments="{city: product.city, bars: 1}"/> <f:render partial="City/Details" arguments="{city: product.city, bars: 1}"/>
</div> </div>
<!-- /City --> <!-- /City -->
<!-- Region --> <!-- Region -->
<div x-show="show === 'region'" x-transition.opacity> <div x-show="show === 'region'" x-transition.opacity x-cloak>
<f:render partial="Region/Details" arguments="{region: product.region, bars: 1}"/> <f:render partial="Region/Details" arguments="{region: product.region, bars: 1}"/>
</div> </div>
<!-- /Region --> <!-- /Region -->
<!-- Journey --> <!-- Journey -->
<div x-show="show === 'journey'" x-transition.opacity> <div x-show="show === 'journey'" x-transition.opacity x-cloak>
<f:render partial="Journey/Details" arguments="{journey: product.journey, bars: 1}"/> <f:render partial="Journey/Details" arguments="{journey: product.journey, bars: 1}"/>
</div> </div>
<!-- /Journey --> <!-- /Journey -->
@@ -189,7 +209,8 @@
</f:section> </f:section>
<f:section name="DatesTable"> <f:section name="DatesTable">
<div x-show="bookable"> <div x-show="bookable"
x-cloak>
<div class="headerbar"> <div class="headerbar">
Buchungsoptionen {hotel.name} Buchungsoptionen {hotel.name}
</div> </div>
@@ -258,16 +279,30 @@
</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" x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid"
data-microtip-position="top" aria-label="Alle Inklusivleistungen anzeigen" role="tooltip">Leistungen</button> 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" <a href="#" x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid"
class="md:hidden"><i class="fa fa-info-circle"></i></a> class="md:hidden">
<svg class="w-4 h-4">
<use href="#icon-info-circle"></use>
</svg>
</a>
</div> </div>
</td> </td>
<td class="px-2 py-1 hidden sm:table-cell"> <td class="px-2 py-1 hidden sm:table-cell">
<button x-show="row.available || row.isHideBookingButton" class="button button--small" x-on:click="loadPrices(row.dateUid)">Details</button> <button x-show="row.available || row.isHideBookingButton" class="button button--small" x-on:click.prevent="loadPrices(row.dateUid)">
<a x-show="row.available && !row.isHideBookingButton" x-bind:href="row.bookingUrl" target="_blank" class="button button--small button--action">Buchen</a> Details
<a x-show="row.isHideBookingButton" x-bind:href="uris.travelAlertUrl" class="button button--small button--mute">Reisen-Alert</a> </button>
<span x-show="!row.available && !row.isHideBookingButton" class="label label-default">ausgebucht</span> <a x-show="row.available && !row.isHideBookingButton" x-bind:href="row.bookingUrl" target="_blank" class="button button--small button--action">
Buchen
</a>
<a x-show="row.isHideBookingButton" x-bind:href="uris.travelAlertUrl" class="button button--small button--mute">
Reisen-Alert
</a>
<span x-show="!row.available && !row.isHideBookingButton" class="label label-default">
ausgebucht
</span>
</td> </td>
</tr> </tr>
</template> </template>
@@ -327,141 +362,138 @@
</f:section> </f:section>
<f:section name="PriceTable"> <f:section name="PriceTable">
<div> <div class="headerbar flex items-center justify-between">
<div class="row headerbar"> <span>Buchungsoptionen</span>
<div class="col-xs-6">Buchungsoptionen</div> <span x-text="dateRange"></span>
<div class="col-xs-6 text-right" x-text="dateRange"></div> </div>
</div> <f:render section="PriceToggle"/>
<f:render section="PriceToggle"/> <div class="w-full max-w-full overflow-x-scroll mb-4">
<div class="w-full max-w-full overflow-x-scroll mb-4"> <table class="min-w-full border-collapse">
<table class="min-w-full border-collapse"> <thead>
<thead> <tr>
<tr> <th>
<th> Zimmertyp
Zimmertyp </th>
</th> <th>
<th> Preis
Preis </th>
</th> <th>
<th> inkl.
inkl. </th>
</th> <th></th>
<th></th> <th class="hidden lg:table-cell"></th>
<th class="hidden lg:table-cell"></th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <template x-for="(row, index) in pricesRows" x-bind:key="row.roomBusProId">
<template x-for="(row, index) in pricesRows" x-bind:key="row.roomBusProId"> <tr class="even:bg-gray-200">
<tr class="even:bg-gray-200"> <td class="px-2 py-1">
<td class="px-2 py-1"> <span x-show="row.isHideBookingButton || !row.roomAvailable" x-text="row.roomName"></span>
<span x-show="row.isHideBookingButton || !row.roomAvailable" x-text="row.roomName"></span> <a x-show="!row.isHideBookingButton && row.roomAvailable"
<a x-show="!row.isHideBookingButton && row.roomAvailable" x-bind:href="row.bookingUrl" target="_blank"
x-bind:href="row.bookingUrl" target="_blank" x-text="row.roomName"></a>
x-text="row.roomName"></a> <a class="button button--small button--action lg:hidden"
<a class="button button--small button--action lg:hidden" x-show="!row.isHideBookingButton && row.roomAvailable"
x-show="!row.isHideBookingButton && row.roomAvailable" x-bind:href="row.bookingUrl" target="_blank">
x-bind:href="row.bookingUrl" target="_blank"> Jetzt buchen
Jetzt buchen </a>
</a> <div class="lg:hidden"
<div class="lg:hidden" x-show="!row.roomAvailable">
x-show="!row.roomAvailable"> <span class="label label-default">
<span class="label label-default"> ausgebucht
ausgebucht </span>
</span>
</div>
</td>
<td class="px-2 py-1 whitespace-nowrap" x-bind:class="!row.roomAvailable && !row.isHideBookingButton && 'line-through'"
x-text="calculatePrice(row.roomPrice, row.roomBusPrice, row.roomDiscount) + ' €'"></td>
<td class="px-2 py-1">
<div class="flex items-center space-x-1">
<span x-show="showBusIcon(row.roomBusPrice, row.dateBusIncluded)" data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip">
<svg class="w-4 h-4">
<use href="#icon-bus"></use>
</svg>
</span>
<span x-show="row.dateSkipassIncluded" data-microtip-position="top" x-bind:aria-label="row.season === 's' ? 'Bergbahnticket inklusive' : 'Skipass inklusive'" role="tooltip">
<svg class="w-4 h-4">
<use href="#icon-tag"></use>
</svg>
</span>
</div>
</td>
<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">
<svg class="w-4 h-4">
<use href="#icon-info-circle"></use>
</svg>
</button>
</td>
<td class="hidden lg:table-cell px-2 py-1">
<a class="button button--small button--action" x-show="row.roomAvailable && !row.isHideBookingButton"
x-bind:href="row.bookingUrl" target="_blank">Buchen</a>
<a class="button button--small button--mute" x-show="row.isHideBookingButton"
x-bind:href="uris.travelAlertUrl">Reisen-Alert</a>
<span x-show="!row.roomAvailable && !row.isHideBookingButton" class="label label-default">ausgebucht</span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<template x-for="row in pricesRows">
<div x-bind:id="'optional-services-' + row.roomUid" x-show="$store.show.modal === $el.id" x-transition 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>
<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 border-b border-gray-200 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>
</div>
<template x-for="section in row.roomOptionalServices">
<div class="pb-2 border-t border-gray-200 first:border-0">
<div class="font-bold text-xl" x-text="section.label"></div>
<template x-for="optionalService in section.services">
<dl class="flex items-start justify-between mb-0">
<dt class="font-normal" x-text="optionalService.label + ':'"></dt>
<dd class="whitespace-nowrap" x-text="optionalService.price + ' €'"></dd>
</dl>
</template>
</div> </div>
</template> </td>
<td class="px-2 py-1 whitespace-nowrap" x-bind:class="!row.roomAvailable && !row.isHideBookingButton && 'line-through'"
x-text="calculatePrice(row.roomPrice, row.roomBusPrice, row.roomDiscount) + ' €'"></td>
<td class="px-2 py-1">
<div class="flex items-center space-x-1">
<span x-show="showBusIcon(row.roomBusPrice, row.dateBusIncluded)" data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip">
<svg class="w-4 h-4">
<use href="#icon-bus"></use>
</svg>
</span>
<span x-show="row.dateSkipassIncluded" data-microtip-position="top" x-bind:aria-label="row.season === 's' ? 'Bergbahnticket inklusive' : 'Skipass inklusive'" role="tooltip">
<svg class="w-4 h-4">
<use href="#icon-tag"></use>
</svg>
</span>
</div>
</td>
<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">
<svg class="w-4 h-4">
<use href="#icon-info-circle"></use>
</svg>
</button>
</td>
<td class="hidden lg:table-cell px-2 py-1">
<a class="button button--small button--action" x-show="row.roomAvailable && !row.isHideBookingButton"
x-bind:href="row.bookingUrl" target="_blank">Buchen</a>
<a class="button button--small button--mute" x-show="row.isHideBookingButton"
x-bind:href="uris.travelAlertUrl">Reisen-Alert</a>
<span x-show="!row.roomAvailable && !row.isHideBookingButton" class="label label-default">ausgebucht</span>
</td>
</tr>
</template>
</tbody>
</table>
</div>
<template x-for="row in pricesRows">
<div x-bind:id="'optional-services-' + row.roomUid" x-show="$store.show.modal === $el.id" x-transition 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>
<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 border-b border-gray-200 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>
</div> </div>
</div> <template x-for="section in row.roomOptionalServices">
</template> <div class="pb-2 border-t border-gray-200 first:border-0">
<template x-if="!singleDate"> <div class="font-bold text-xl" x-text="section.label"></div>
<p> <template x-for="optionalService in section.services">
<button class="button button--small" x-on:click.prevent="tableMode = 'dates'"> <dl class="flex items-start justify-between mb-0">
<i class="fa fa-undo"></i> zurück zur Terminübersicht <dt class="font-normal" x-text="optionalService.label + ':'"></dt>
</button> <dd class="whitespace-nowrap" x-text="optionalService.price + ' €'"></dd>
</p> </dl>
</template>
<div class="row">
<div class="col-md-12">
<div class="headerbar">
Inklusivleistungen
</div>
<div class="ep-box">
<ul class="list-unstyled">
<template x-for="service in servicesIncluded">
<li>
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span> <span x-text="service"></span>
</li>
</template> </template>
</ul> </div>
</div> </template>
</div> </div>
</div> </div>
</template>
<template x-if="!singleDate">
<p>
<button class="button button--small" x-on:click.prevent="tableMode = 'dates'">
<i class="fa fa-undo"></i> zurück zur Terminübersicht
</button>
</p>
</template>
<div class="headerbar">
Inklusivleistungen
</div>
<div class="bg-gray-200 p-4 mb-8">
<ul class="list-none m-0 p-0">
<template x-for="service in servicesIncluded">
<li class="flex items-center space-x-2">
<svg class="w-6 h-6 text-ep-primary">
<use href="#icon-check"></use>
</svg>
<span x-text="service"></span>
</li>
</template>
</ul>
</div> </div>
</f:section> </f:section>
@@ -509,8 +541,8 @@
</f:format.raw> </f:format.raw>
})'> })'>
<div class="headerbar" x-text="headerLabel"></div> <div class="headerbar" x-text="headerLabel"></div>
<div class="row"> <div class="grid grid-cols-2 gap-8">
<div class="col-xs-12 col-md-6"> <div class="col-span-2 md:col-span-1">
<div class="date-select"> <div class="date-select">
<div class="date-select__picker"> <div class="date-select__picker">
<div class="daterange__panel"> <div class="daterange__panel">
@@ -519,7 +551,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-12 col-md-6"> <div class="col-span-2 md:col-span-1">
<table class="table table-striped pricetable" x-show="availableRooms.length"> <table class="table table-striped pricetable" x-show="availableRooms.length">
<thead> <thead>
<tr> <tr>
@@ -539,7 +571,9 @@
<a href="#" data-toggle="modal" <a href="#" data-toggle="modal"
data-target="'#services' + index" data-target="'#services' + index"
data-microtip-position="top" aria-label="Inklusivleistungen zeigen" role="tooltip"> data-microtip-position="top" aria-label="Inklusivleistungen zeigen" role="tooltip">
<i class="fa fa-info-circle"></i> <svg class="w-4 h-4">
<use href="#icon-info-circle"></use>
</svg>
</a> </a>
<div class="modal fade" id="'services' + index" role="dialog"> <div class="modal fade" id="'services' + index" role="dialog">
<div class="modal-dialog"> <div class="modal-dialog">
@@ -600,7 +634,7 @@
<div x-data='calendar({ <div x-data='calendar({
<f:format.raw> <f:format.raw>
url: "{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, format: 'html')}", url: "{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, format: 'html')}",
hotel: {hotel.uid} hotel: {product.calendarHotel.uid}
</f:format.raw> </f:format.raw>
})'> })'>
<select class="w-full border-gray-400 focus:border-gray-400" <select class="w-full border-gray-400 focus:border-gray-400"
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/HotelList.html
+23 -43
View File
@@ -5,52 +5,32 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<article> <div class="container">
<f:render partial="Product/HeaderDetail" arguments="{_all}"/> <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
<div class="container"> <f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/>
<div class="row"> {product.teaserLong -> f:format.html()}
<div class="col-md-12"> <div class="headerbar">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: product.name, header: product.headline}"/> Wähle deine Unterkunft
</div>
</div>
<div class="row">
<div class="col-md-12">
{product.teaserLong -> f:format.html()}
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="headerbar">
Wähle deine Unterkunft
</div>
</div>
</div>
</div> </div>
<div class="container"> <f:if condition="{hotels}">
<div class="row"> <f:then>
<div class="col-xs-12"> <f:for each="{hotels}" as="item">
<f:if condition="{hotels}"> <f:render partial="Hotel/TeaserWide" section="Teaser" arguments="{
<f:then> item: item,
<f:for each="{hotels}" as="item"> product: product,
<f:render partial="Hotel/TeaserWide" section="Teaser" arguments="{ referringPageUrl: referringPageUrl
item: item, }"/>
product: product, </f:for>
referringPageUrl: referringPageUrl </f:then>
}"/> <f:else>
</f:for> <div class="alert alert-info">
</f:then> Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
<f:else> eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
<div class="alert alert-info"> oder schreibe an <f:link.email email="[email protected]"/>.
Die von dir gewählte Reise ist aktuell nicht buchbar, aber wir helfen dir gerne dabei,
eine andere Reise zu finden. Ruf uns an unter <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" title="Service Telefon anrufen" rel="nofollow">{settings.phoneNumber}</a>
oder schreibe an <f:link.email email="[email protected]"/>.
</div>
</f:else>
</f:if>
</div> </div>
</div> </f:else>
</div> </f:if>
</article> </div>
</f:section> </f:section>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Reseller/Copypaste.html
+33 -57
View File
@@ -8,11 +8,7 @@
<f:section name="Main"> <f:section name="Main">
<div class="container"> <div class="container">
<div class="row"> <h1>Datenexport <em>{productData.name}</em></h1>
<div class="col-xs-12">
<h1>Datenexport <em>{productData.name}</em></h1>
</div>
</div>
<div class="panel-group" role="tablist" id="accordion"> <div class="panel-group" role="tablist" id="accordion">
<f:render section="CollapsibleSimple" arguments="{id: 1, label: 'Facts', facts: productData.facts.fact}"/> <f:render section="CollapsibleSimple" arguments="{id: 1, label: 'Facts', facts: productData.facts.fact}"/>
<f:render section="CollapsibleSimple" arguments="{id: 2, label: 'Konzept', name: productData.concept.name, description: productData.concept.description}"/> <f:render section="CollapsibleSimple" arguments="{id: 2, label: 'Konzept', name: productData.concept.name, description: productData.concept.description}"/>
@@ -34,11 +30,7 @@
</f:for> </f:for>
<f:render section="CollapsibleImages" arguments="{id: 13, label: 'Allgemeine Bilder/Video', images: productData.images.image, video: productData.video}"/> <f:render section="CollapsibleImages" arguments="{id: 13, label: 'Allgemeine Bilder/Video', images: productData.images.image, video: productData.video}"/>
</div> </div>
<div class="row"> <f:link.action action="list" arguments="{reseller: reseller}">zurück</f:link.action>
<div class="col-xs-12">
<f:link.action action="list" arguments="{reseller: reseller}">zurück</f:link.action>
</div>
</div>
</div> </div>
</f:section> </f:section>
@@ -247,23 +239,17 @@
</div> </div>
<div class="hidden" x-bind="container"> <div class="hidden" x-bind="container">
<div class="panel-body"> <div class="panel-body">
<div class="col-xs-12"> <div class="form-group">
<div class="form-group"> <label class="control-label">Name</label>
<label class="control-label">Name</label> <div class="well">{city.name}</div>
<div class="well">{city.name}</div>
</div>
</div> </div>
<div class="col-xs-12"> <div class="form-group">
<div class="form-group"> <label class="control-label">Beschreibung</label>
<label class="control-label">Beschreibung</label> <div class="well">{city.description -> f:format.html()}</div>
<div class="well">{city.description -> f:format.html()}</div>
</div>
</div> </div>
<div class="col-xs-4"> <div class="form-group">
<div class="form-group"> <label class="control-label">Facts</label>
<label class="control-label">Facts</label> <div class="well">{city.facts.fact -> v:iterator.implode(glue: '<br>')}</div>
<div class="well">{city.facts.fact -> v:iterator.implode(glue: '<br>')}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -281,47 +267,37 @@
</div> </div>
<div class="hidden" x-bind="container"> <div class="hidden" x-bind="container">
<div class="panel-body"> <div class="panel-body">
<div class="col-xs-12"> <div class="form-group">
<div class="form-group"> <label class="control-label">Name</label>
<label class="control-label">Name</label> <div class="well">{region.name -> f:format.html()}</div>
<div class="well">{region.name -> f:format.html()}</div>
</div>
</div> </div>
<div class="col-xs-12"> <div class="form-group">
<div class="form-group"> <label class="control-label">Beschreibung</label>
<label class="control-label">Beschreibung</label> <div class="well">{region.description -> f:format.html()} {region.descriptionExtended -> f:format.html()}</div>
<div class="well">{region.description -> f:format.html()} {region.descriptionExtended -> f:format.html()}</div>
</div>
</div> </div>
<div class="col-xs-12"> <div class="form-group">
<div class="form-group"> <label class="control-label">Skipass</label>
<label class="control-label">Skipass</label> <div class="well">{region.skipass -> f:format.html()}</div>
<div class="well">{region.skipass -> f:format.html()}</div>
</div>
</div> </div>
<div class="col-xs-12"> <div class="form-group">
<div class="form-group"> <label class="control-label">News</label>
<label class="control-label">News</label> <div class="well">{region.news -> f:format.html()}</div>
<div class="well">{region.news -> f:format.html()}</div>
</div>
</div> </div>
<div class="col-xs-4"> <div class="grid grid-cols-3 gap-8">
<div class="form-group"> <div class="form-group">
<label class="control-label">Facts</label> <label class="control-label">Facts</label>
<div class="well">{region.facts.fact -> v:iterator.implode(glue: '<br>')}</div> <div class="well">{region.facts.fact -> v:iterator.implode(glue: '<br>')}</div>
</div> </div>
</div> <div>
<div class="col-xs-4"> <div class="form-group">
<div class="form-group"> <label class="control-label">Pisten</label>
<label class="control-label">Pisten</label> <div class="well">{region.piste}</div>
<div class="well">{region.piste}</div> </div>
<div class="form-group">
<label class="control-label">Höhe</label>
<div class="well">{region.height}</div>
</div>
</div> </div>
<div class="form-group">
<label class="control-label">Höhe</label>
<div class="well">{region.height}</div>
</div>
</div>
<div class="col-xs-4">
<div class="form-group"> <div class="form-group">
<label class="control-label">Lifte</label> <label class="control-label">Lifte</label>
<div class="well">{region.lifts}</div> <div class="well">{region.lifts}</div>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Reseller/List.html
+21 -25
View File
@@ -6,31 +6,27 @@
<f:section name="Main"> <f:section name="Main">
<div class="container"> <div class="container">
<div class="row"> <f:if condition="{reseller}">
<div class="col-xs-12"> <h1>{reseller.name}</h1>
<f:if condition="{reseller}"> <h2>Gesamtexport XML</h2>
<h1>{reseller.name}</h1> <f:link.typolink parameter="fileadmin/reseller/export_{reseller.code}.xml" target="_blank">
<h2>Gesamtexport XML</h2> Export XML
<f:link.typolink parameter="fileadmin/reseller/export_{reseller.code}.xml" target="_blank"> </f:link.typolink>
Export XML <h2>Gesamtexport CSV (Facebook)</h2>
</f:link.typolink> <f:link.typolink parameter="fileadmin/reseller/export_{reseller.code}_google.csv" target="_blank">
<h2>Gesamtexport CSV (Facebook)</h2> Export CSV (Google)
<f:link.typolink parameter="fileadmin/reseller/export_{reseller.code}_google.csv" target="_blank"> </f:link.typolink>
Export CSV (Google) <h2>Gesamtexport CSV (Google)</h2>
</f:link.typolink> <f:link.typolink parameter="fileadmin/reseller/export_{reseller.code}_facebook.csv" target="_blank">
<h2>Gesamtexport CSV (Google)</h2> Export CSV (Facebook)
<f:link.typolink parameter="fileadmin/reseller/export_{reseller.code}_facebook.csv" target="_blank"> </f:link.typolink>
Export CSV (Facebook) <h2>Einzelexport für Copy&amp;Paste</h2>
</f:link.typolink> <ul>
<h2>Einzelexport für Copy&amp;Paste</h2> <f:for each="{products}" as="product">
<ul> <li><f:link.action action="copypaste" arguments="{product: product, reseller: reseller}">{product.nameInternal}</f:link.action></li>
<f:for each="{products}" as="product"> </f:for>
<li><f:link.action action="copypaste" arguments="{product: product, reseller: reseller}">{product.nameInternal}</f:link.action></li> </ul>
</f:for> </f:if>
</ul>
</f:if>
</div>
</div>
</div> </div>
</f:section> </f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbox.html
+37 -57
View File
@@ -5,7 +5,7 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div id="searchbox" class="searchbox hidden-lg" x-show="$store.show.searchBox" x-transition x-cloak x-data='searchBar({ <div class="searchbox hidden-lg" x-show="$store.show.searchBox" x-transition x-data='searchBar({
<f:format.raw> <f:format.raw>
uri: "{ep:uri.ajax(controller: "AjaxSearchbar", action: "update", pageUid: settings.defaultAjaxUid)}", uri: "{ep:uri.ajax(controller: "AjaxSearchbar", action: "update", pageUid: settings.defaultAjaxUid)}",
initialSearchParams: {searchParams -> f:format.json()}, initialSearchParams: {searchParams -> f:format.json()},
@@ -25,65 +25,45 @@
<f:form.hidden property="pax" additionalAttributes="{x-model: 'searchParams.pax'}"/> <f:form.hidden property="pax" additionalAttributes="{x-model: 'searchParams.pax'}"/>
<f:form.hidden property="conceptUid" additionalAttributes="{x-model: 'searchParams.conceptUid'}"/> <f:form.hidden property="conceptUid" additionalAttributes="{x-model: 'searchParams.conceptUid'}"/>
<f:form.hidden property="pageUid" additionalAttributes="{x-model: 'searchParams.pageUid'}"/> <f:form.hidden property="pageUid" additionalAttributes="{x-model: 'searchParams.pageUid'}"/>
<div class="row"> <div class="form-group">
<div class="col-md-12"> <label>Früheste Anreise</label>
<div class="form-group"> <input
<label>Früheste Anreise</label> type="date"
<input x-model="searchParams.dateFrom"
type="date" x-bind:min="filterOptions.dateFrom"
x-model="searchParams.dateFrom" x-bind:max="filterOptions.dateTo"
x-bind:min="filterOptions.dateFrom" x-on:change="load()"
x-bind:max="filterOptions.dateTo" x-bind:disabled="loading"
x-on:change="load()" class="border-gray-400 focus:border-gray-800"
x-bind:disabled="loading" >
class="form-control"
>
</div>
<div class="form-group">
<label>Späteste Abreise</label>
<input
type="date"
x-model="searchParams.dateTo"
x-bind:min="filterOptions.dateFrom"
x-bind:max="filterOptions.dateTo"
x-on:change="load()"
x-bind:disabled="loading"
class="form-control"
>
</div>
</div>
</div> </div>
<div class="row"> <div class="form-group">
<div class="col-md-12"> <label>Späteste Abreise</label>
<div class="form-group"> <input
<label>Personen</label> type="date"
<input x-model="searchParams.dateTo"
type="number" x-bind:min="filterOptions.dateFrom"
min="1" x-bind:max="filterOptions.dateTo"
max="20" x-on:change="load()"
x-model="searchParams.pax" x-bind:disabled="loading"
x-on:change="load()" class="border-gray-400 focus:border-gray-800"
x-bind:disabled="loading" >
class="form-control"
>
</div>
</div>
</div> </div>
<div class="row"> <div class="form-group">
<div class="col-md-12"> <label>Personen</label>
</div> <input
type="number"
min="1"
max="20"
x-model="searchParams.pax"
x-on:change="load()"
x-bind:disabled="loading"
class="border-gray-400 focus:border-gray-800"
>
</div> </div>
<div class="row"> <div class="form-group">
<div class="col-md-12"> <button type="submit" class="btn btn-warning">Suchen <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
</div> <button type="submit" class="searchbox__link">Detailsuche</button>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button type="submit" class="btn btn-warning">Suchen <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></button>
<button type="submit" class="searchbox__link">Detailsuche</button>
</div>
</div>
</div> </div>
</f:form> </f:form>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/List.html
+23 -15
View File
@@ -9,7 +9,7 @@
<f:section name="Main"> <f:section name="Main">
<div class="container"> <div class="container">
<f:for each="{members -> v:iterator.chunk(count: 4)}" as="group"> <f:for each="{members -> v:iterator.chunk(count: 4)}" as="group">
<div class="row"> <div class="grid grid-cols-4 gap-8 mb-8">
<f:for each="{group}" as="member"> <f:for each="{group}" as="member">
<f:render section="Member" arguments="{member: member}"/> <f:render section="Member" arguments="{member: member}"/>
</f:for> </f:for>
@@ -19,7 +19,7 @@
</f:section> </f:section>
<f:section name="Member"> <f:section name="Member">
<div class="col-xs-12 col-sm-6 col-md-3"> <div class="col-span-4 sm:col-span-2 md:col-span-1">
<a href="{f:uri.action( <a href="{f:uri.action(
pageUid: settings.teamShowPID, pageUid: settings.teamShowPID,
action: 'show', action: 'show',
@@ -27,19 +27,27 @@
pluginName: 'teammembers', pluginName: 'teammembers',
arguments: '{member: member}' arguments: '{member: member}'
)}"> )}">
<div class="ep-employee"> <f:if condition="{member.image}">
<div> <f:then>
<f:if condition="{member.image}"> <img data-src="{f:uri.image(image: member.image, width: '400', height: '400c')}"
<f:then> class="rounded-full block w-full h-auto lazyload"
<img data-src="{f:uri.image(image: member.image, width: '400', height: '400c')}" title="{member.name}"
class="lazyload" title="{member.name}" alt="{member.name}"> alt="{member.name}">
</f:then> </f:then>
<f:else> <f:else>
<img src="https://placehold.it/400x400" alt="{member.name}"> <img class="rounded-full block w-full h-auto lazyload"
</f:else> src="https://placehold.it/400x400"
</f:if> title="{member.name}"
</div> alt="{member.name}">
<div>{member.name}<br><span>{member.tasks -> f:format.nl2br()}</span></div> </f:else>
</f:if>
<div class="text-center text-gray-800">
<span class="block mb-2">
{member.name}
</span>
<span class="block">
{member.tasks -> f:format.nl2br()}
</span>
</div> </div>
</a> </a>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Team/Show.html
+45 -50
View File
@@ -7,60 +7,55 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<f:render section="Header" arguments="{_all}"/> <div class="container">
<f:render partial="Header/Header" arguments="{header: header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
<div class="container ep-employee-detail"> <div class="grid grid-cols-3 gap-8">
<div class="col-md-12"> <div class="col-span-3 md:col-span-1">
<div class="row"> <f:if condition="{member.image}">
<div class="col-md-4"> <f:then>
<div class="ep-employee"> <f:image class="rounded-full" image="{member.image}" width="400" height="400c" title="{member.name}" alt="{member.name}"/>
<div> </f:then>
<f:if condition="{member.image}"> <f:else>
<f:then> <img class="rounded-full" src="https://placehold.it/400x400" alt="{member.name}">
<f:image src="{member.image.uid}" treatIdAsReference="1" crop="{member.image.crop}" width="400" height="400c" title="{member.name}" alt="{member.name}"/> </f:else>
</f:then> </f:if>
<f:else>
<img src="https://placehold.it/400x400" alt="{member.name}">
</f:else>
</f:if>
</div>
</div>
</div>
<div class="col-md-8">
<span class="headline headline--secondary">{member.name}<br><span>{member.tasks}</span></span>
{member.description -> f:format.html()}
<f:if condition="{member.email}">
<p><f:link.email email="{member.email}"><i class="fa fa-envelope"></i> {member.email}</f:link.email></p>
</f:if>
<f:if condition="{member.phone}">
<p><a href="tel:{member.phone -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" rel="nofollow"><i class="fa fa-phone"></i> {member.phone}</a></p>
</f:if>
</div>
</div> </div>
<div class="row"> <div class="col-span-3 md:col-span-2">
<div class="col-md-8 col-md-offset-4"> <span class="headline headline--secondary">
<a href="{f:uri.action( {member.name}<br><span>{member.tasks}</span>
pageUid: settings.teamListPID, </span>
action: 'list', {member.description -> f:format.html()}
extensionName: 'epproducts', <f:if condition="{member.email}">
pluginName: 'teammembers' <p>
)}" class="button button-danger">zurück</a> <f:link.email class="flex items-center space-x-2" email="{member.email}">
</div> <svg class="w-6 h-6 text-ep-primary">
<use href="#icon-email"></use>
</svg>
<span>{member.email}</span>
</f:link.email>
</p>
</f:if>
<f:if condition="{member.phone}">
<p>
<a class="flex items-center space-x-2" href="tel:{member.phone -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" rel="nofollow">
<svg class="w-6 h-6 text-ep-primary">
<use href="#icon-phone"></use>
</svg>
<span>{member.phone}</span>
</a>
</p>
</f:if>
<a href="{f:uri.action(
pageUid: settings.teamListPid,
action: 'list',
extensionName: 'epproducts',
pluginName: 'teammembers'
)}" class="button button-danger">
zurück
</a>
</div> </div>
</div> </div>
</div> </div>
</f:section> </f:section>
<f:section name="Header">
<f:if condition="{header}">
<ep:container data="{data}">
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{header: header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
</div>
</div>
</ep:container>
</f:if>
</f:section>
</html> </html>
tailwind.config.js
+2 -1
View File
@@ -65,6 +65,7 @@ module.exports = {
'primary-dark': '#f0bc44', 'primary-dark': '#f0bc44',
'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(), 'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(), 'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
'overlay-secondary': tinycolor('#c20000').setAlpha(0.55).toRgbString(),
}, },
'snz': { 'snz': {
'primary': '#82C3C6', 'primary': '#82C3C6',
@@ -80,7 +81,6 @@ module.exports = {
}, },
}, },
height: { height: {
'96': '20rem',
'128': '32rem', '128': '32rem',
}, },
inset: { inset: {
@@ -88,6 +88,7 @@ module.exports = {
'1/2': '50%', '1/2': '50%',
}, },
zIndex: { zIndex: {
'-10': '-10',
'100': 100, '100': 100,
}, },
}, },