WIP Upgrade tailwindcss and dependencies

This commit is contained in:
Björn Fromme
2022-08-13 10:02:02 +02:00
parent a6ac3acd71
commit 5de2c07042
100 changed files with 636 additions and 1146 deletions
+142 -652
View File
File diff suppressed because it is too large Load Diff
+5 -5
View File
@@ -44,19 +44,19 @@
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.16.0",
"@symfony/webpack-encore": "^1.6.1",
"@tailwindcss/aspect-ratio": "^0.3.0",
"@tailwindcss/forms": "^0.3.4",
"autoprefixer": "^10.4.0",
"@tailwindcss/aspect-ratio": "^0.4.0",
"@tailwindcss/forms": "^0.5.2",
"autoprefixer": "^10.4.8",
"core-js": "^3.19.1",
"document-register-element": "^1.14.10",
"file-loader": "^6.2.0",
"postcss": "^8.3.11",
"postcss": "^8.4.16",
"postcss-loader": "^6.2.0",
"sass": "^1.53.0",
"sass-loader": "^12.3.0",
"sass-mq": "^5.0.1",
"smoothscroll-polyfill": "^0.4.4",
"tailwindcss": "^2.2.19",
"tailwindcss": "^3.1.8",
"tailwindcss-alt": "^3.0.0",
"tinycolor2": "^1.4.2",
"vue-custom-element": "^3.3.0",
@@ -78,7 +78,7 @@ class ContingentViewHelper extends AbstractViewHelper
}
$now = new \DateTime('now');
if ($now > $day->getBegin()) {
$class = [ 'text-gray-400' ];
$class = [ 'text-zinc-400' ];
return static::getHtml($class, $day->format('d'));
}
$contingents = $events->find($day);
@@ -3,12 +3,12 @@ lib.breadcrumb {
special = rootline
special.range = 0|-1
1 = TMENU
1.wrap = <div class="hidden md:flex container mb-8 text-sm text-gray-400">|</div>
1.wrap = <div class="hidden md:flex container mb-8 text-sm text-zinc-400">|</div>
1.NO {
stdWrap.htmlSpecialChars = 1
ATagParams = class="text-gray-400"
ATagParams = class="text-zinc-400"
ATagTitle.field = nav_title // title
linkWrap = |<span class="text-gray-400 px-1">/</span>|*||*| |
linkWrap = |<span class="text-zinc-400 px-1">/</span>|*||*| |
doNotLinkIt = |*| 0 |*| 1
}
}
@@ -9,7 +9,7 @@ page {
bodyTagCObject = COA
bodyTagCObject {
10 = TEXT
10.value = <body class="antialiased text-gray-800 font-sans pt-14 lg:pt-8 bg-white
10.value = <body class="antialiased text-zinc-800 font-sans pt-14 lg:pt-8 bg-white
20 = TEXT
20 {
field = tx_eptheme_bodyclass
@@ -208,7 +208,7 @@ page {
[page["backend_layout"] == 'pagets__popup']
page.bodyTagCObject >
page.bodyTagCObject = TEXT
page.bodyTagCObject.value = <body class="antialiased text-gray-800 font-sans bg-white p-4">
page.bodyTagCObject.value = <body class="antialiased text-zinc-800 font-sans bg-white p-4">
page.headerData.333 >
page.headerData.990 >
page.headerData.995 >
@@ -87,28 +87,28 @@
<div class="p-2 uppercase bg-ep-primary-dark text-white w-full">
Preise
</div>
<div class="bg-gray-100 p-2">
<div class="bg-zinc-100 p-2">
<table class="w-full" v-show="nightsCount > 0">
<tbody>
<tr class="odd:bg-gray-100">
<tr class="odd:bg-zinc-100">
<th class="text-left py-2">Zeitraum</th>
<td>{{ rangeFormatted }}, {{ nightsCount }} Nächte</td>
</tr>
<tr class="odd:bg-gray-100">
<tr class="odd:bg-zinc-100">
<th class="text-left py-2">Basispreis</th>
<td>{{ formatCurrency(pricePax.base) }}</td>
</tr>
<tr class="odd:bg-gray-100"
<tr class="odd:bg-zinc-100"
v-if="pricePax.additional > 0">
<th class="text-left py-2">Aufpreis Personenzahl</th>
<td>{{ formatCurrency(pricePax.additional) }}</td>
</tr>
<tr class="odd:bg-gray-100"
<tr class="odd:bg-zinc-100"
v-if="priceShortTerm > 0">
<th class="text-left py-2">Aufpreis Kurzzeit</th>
<td>{{ formatCurrency(priceShortTerm) }}</td>
</tr>
<tr class="odd:bg-gray-100"
<tr class="odd:bg-zinc-100"
v-if="includesBonusCard">
<th class="text-left py-2">Inklusivleistungen</th>
<td>
@@ -117,27 +117,27 @@
</a>
</td>
</tr>
<tr class="odd:bg-gray-100"
<tr class="odd:bg-zinc-100"
v-if="selectedOptions.length > 0">
<th class="text-left py-2">Zusatzleistungen</th>
<td>{{ formatCurrency(priceOptions) }}</td>
</tr>
<tr class="odd:bg-gray-100"
<tr class="odd:bg-zinc-100"
v-if="priceBoard > 0">
<th class="text-left py-2">Verpflegung</th>
<td>{{ formatCurrency(priceBoard) }}</td>
</tr>
<tr class="odd:bg-gray-100"
<tr class="odd:bg-zinc-100"
v-if="pricePax.undersubscription > 0">
<th class="text-left py-2">Kleingruppen-Verpflegungszuschlag</th>
<td>{{ formatCurrency(pricePax.undersubscription) }}</td>
</tr>
<tr class="odd:bg-gray-100"
<tr class="odd:bg-zinc-100"
v-if="priceRunningCosts > 0">
<th class="text-left py-2">Strom- und Abfallgebühren</th>
<td>{{ formatCurrency(priceRunningCosts) }}</td>
</tr>
<tr class="odd:bg-gray-100">
<tr class="odd:bg-zinc-100">
<th class="text-left py-2">Gesamtpreis</th>
<td><strong>{{ formatCurrency(priceTotal) }}</strong><br><small>zzgl. vor Ort zu entrichtender
Ortstaxe</small></td>
@@ -155,7 +155,7 @@
<div class="p-2 uppercase bg-ep-primary-dark text-white w-full">
Angebot anfordern
</div>
<div class="bg-gray-100 p-2">
<div class="bg-zinc-100 p-2">
<div class="grid md:grid-cols-2 gap-4 mb-4">
<div :class="{ 'has-error': formErrors.name }">
<label class="font-bold mb-2">
@@ -5,20 +5,20 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<form-group label="Gender">
<select v-model="userData.gender" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<select v-model="userData.gender" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
<option value="w">W</option>
<option value="m">M</option>
<option value="d">D</option>
</select>
</form-group>
<form-group label="Title">
<input type="text" v-model="userData.title" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.title" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="Name" :error="formErrors.lastName">
<input type="text" v-model="userData.lastName" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.lastName" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="Vorname" :error="formErrors.firstName">
<input type="text" v-model="userData.firstName" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.firstName" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="Geburtsdatum">
<div ref="picker"></div>
@@ -26,28 +26,28 @@
</div>
<div>
<form-group label="Straße" :error="formErrors.street">
<input type="text" v-model="userData.street" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.street" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="PLZ" :error="formErrors.zipCode">
<input type="text" v-model="userData.zipCode" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.zipCode" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="Stadt" :error="formErrors.city">
<input type="text" v-model="userData.city" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.city" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="Land" :error="formErrors.country">
<select v-model="userData.country" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<select v-model="userData.country" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
<option v-for="country in countries"
:value="country['code']">{{ country['name'] }}</option>
</select>
</form-group>
<form-group label="E-Mail" :error="formErrors.email">
<input type="text" v-model="userData.email" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.email" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="Telefon" :error="formErrors.phonePrivate">
<input type="text" v-model="userData.phonePrivate" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.phonePrivate" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="Mobil" :error="formErrors.phoneMobile">
<input type="text" v-model="userData.phoneMobile" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.phoneMobile" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
</div>
<div class="col-span-1 md:col-span2">
@@ -1,19 +1,19 @@
<template>
<div id="myep" class="relative mb-16">
<nav class="w-full bg-gray-50 flex items-center justify-between mb-8 relative" v-if="isLoggedIn">
<nav class="w-full bg-zinc-50 flex items-center justify-between mb-8 relative" v-if="isLoggedIn">
<span class="block text-2xl px-4">My E&P</span>
<div class="absolute z-50 top-100 left-0 w-full bg-gray-50 shadow lg:relative lg:top-auto lg:left-auto lg:w-auto lg:shadow-none lg:flex lg:space-x-4"
<div class="absolute z-50 top-100 left-0 w-full bg-zinc-50 shadow lg:relative lg:top-auto lg:left-auto lg:w-auto lg:shadow-none lg:flex lg:space-x-4"
:class="{ 'hidden': !navVisible }">
<div class="lg:flex lg:items-center m-0">
<router-link @click.native="navVisible = false" :to="{ name: 'address' }" class="block p-4 text-black hover:bg-gray-400 hover:text-gray-800" active-class="bg-gray-400 text-gray-800">Adressdaten</router-link>
<router-link @click.native="navVisible = false" :to="{ name: 'newsletter' }" class="block p-4 text-black hover:bg-gray-400 hover:text-gray-800" active-class="bg-gray-400 text-gray-800">Newsletter</router-link>
<router-link @click.native="navVisible = false" :to="{ name: 'profile' }" class="block p-4 text-black hover:bg-gray-400 hover:text-gray-800" active-class="bg-gray-400 text-gray-800">Mein Profil</router-link>
<router-link @click.native="navVisible = false" :to="{ name: 'events' }" class="block p-4 text-black hover:bg-gray-400 hover:text-gray-800" active-class="bg-gray-400 text-gray-800">Buchungen</router-link>
<router-link @click.native="navVisible = false" :to="{ name: 'teamer' }" class="block p-4 text-black hover:bg-gray-400 hover:text-gray-800" active-class="bg-gray-400 text-gray-800" v-if="isTeamer">Teamer</router-link>
<router-link @click.native="navVisible = false" :to="{ name: 'address' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800">Adressdaten</router-link>
<router-link @click.native="navVisible = false" :to="{ name: 'newsletter' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800">Newsletter</router-link>
<router-link @click.native="navVisible = false" :to="{ name: 'profile' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800">Mein Profil</router-link>
<router-link @click.native="navVisible = false" :to="{ name: 'events' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800">Buchungen</router-link>
<router-link @click.native="navVisible = false" :to="{ name: 'teamer' }" class="block p-4 text-black hover:bg-zinc-400 hover:text-zinc-800" active-class="bg-zinc-400 text-zinc-800" v-if="isTeamer">Teamer</router-link>
</div>
<a class="block px-4 py-4 text-black hover:bg-gray-400 hover:text-gray-800" href="#" @click.prevent="logout()">Logout</a>
<a class="block px-4 py-4 text-black hover:bg-zinc-400 hover:text-zinc-800" href="#" @click.prevent="logout()">Logout</a>
</div>
<a href="#" class="lg:hidden p-4 transform text-black hover:text-gray-800" :class="{ 'rotate-90': navVisible }" @click.prevent="navVisible = !navVisible">
<a href="#" class="lg:hidden p-4 text-black hover:text-zinc-800" :class="{ 'rotate-90': navVisible }" @click.prevent="navVisible = !navVisible">
<svg class="w-8 h-8" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
</a>
</nav>
@@ -4,25 +4,25 @@
<div>
<panel title="Reisedaten">
<ul class="list-none">
<li class="p-2 border-b border-gray-200 last:border-0">
<li class="p-2 border-b border-zinc-200 last:border-0">
<strong>Reise:</strong> {{ travelData.productName }}
</li>
<li class="p-2 border-b border-gray-200 last:border-0">
<li class="p-2 border-b border-zinc-200 last:border-0">
<strong>Zeitraum:</strong> {{ travelData.dateFrom }} - {{ travelData.dateTo }}
</li>
<li class="p-2 border-b border-gray-200 last:border-0">
<li class="p-2 border-b border-zinc-200 last:border-0">
<strong>Inklusivleistungen:</strong> {{ travelData.servicesIncluded.join(', ') }}
</li>
<li class="p-2 border-b border-gray-200 last:border-0">
<li class="p-2 border-b border-zinc-200 last:border-0">
<strong>Anmelder:</strong> {{ bookingData.applicant.firstName }} {{ bookingData.applicant.lastName }}
</li>
<li class="p-2 border-b border-gray-200 last:border-0">
<li class="p-2 border-b border-zinc-200 last:border-0">
<strong>Gesamtpreis:</strong> {{ totalPrice.toFixed(2) }}
</li>
<li class="p-2 border-b border-gray-200 last:border-0">
<li class="p-2 border-b border-zinc-200 last:border-0">
<strong>Teilnehmer:</strong> {{ participantsCount.active }}
</li>
<li class="p-2 border-b border-gray-200 last:border-0">
<li class="p-2 border-b border-zinc-200 last:border-0">
<strong>Stornos:</strong> {{ participantsCount.canceled }}
</li>
</ul>
@@ -34,13 +34,13 @@
<contingents-overview :contingents="bookingData.accomodations"/>
<panel title="Beförderungsart (alle Teilnehmer)" :body="true">
<ul class="list-none">
<li class="p-2 border-b border-gray-200 last:border-0" v-for="transportation in bookingData.transportations" :key="transportation.id">
<li class="p-2 border-b border-zinc-200 last:border-0" v-for="transportation in bookingData.transportations" :key="transportation.id">
{{ transportation.name }}: {{ transportation.count }}
</li>
</ul>
</panel>
<panel title="Anmerkungen" :body="true">
<textarea class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full"
<textarea class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
rows="2"
v-model="bookingData.remarks"
@change="dirty = true"/>
@@ -66,14 +66,14 @@
Storniert am {{ participant.data.cancellationDate }}, Stornokosten {{ participant.data.cancellationFee.toFixed(2) }}
</template>
<template v-else>
<div class="p-2 border-b border-gray-200">
<div class="p-2 border-b border-zinc-200">
<participant-data-form :participant="participant"
:mutable="mutableFields.participantData.mutable"
:countries="countries"
v-on:updated="onParticipantDataUpdated($event, index)"
/>
</div>
<div class="flex flex-col space-y-1 md:flex-row md:space-y-0 md:space-x-1 py-4 border-b border-gray-200 p-2">
<div class="flex flex-col space-y-1 md:flex-row md:space-y-0 md:space-x-1 py-4 border-b border-zinc-200 p-2">
<participant-address-form :participant="participant"
:countries="countries"
:mutable="mutableFields.participantData.mutable"
@@ -131,7 +131,7 @@
</tr>
</tbody>
</table>
<textarea rows="2" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full"
<textarea rows="2" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
v-model="participant.data.additionRequest"
@change="dirty = true"
placeholder="Sonstiges (z. B. Allergien, Verleihgrößen)"
@@ -16,7 +16,7 @@
v-if="selection.changeable === true && isSelectionVisible(selection)">
<label class="inline-flex items-center" :class="{ 'opacity-50': !selection.changeable}">
<input type="checkbox"
class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
v-model="selection.value"
:disabled="!selection.changeable"/>
<span class="ml-2">
@@ -32,7 +32,7 @@
v-if="action.changeable === true">
<label class="inline-flex items-center" :class="{ 'opacity-50': !action.changeable}">
<input type="checkbox"
class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
v-model="action.value"
:disabled="!action.changeable"/>
<span class="ml-2">
@@ -4,57 +4,57 @@
Meine Buchungen
</h1>
<div class="w-full max-w-full overflow-x-scroll md:overflow-x-auto">
<table class="min-w-full border border-gray-200 border-collapse mb-8 text-sm">
<table class="min-w-full border border-zinc-200 border-collapse mb-8 text-sm">
<thead>
<tr>
<th class="px-2 py-1 border border-gray-200 text-left">
<th class="px-2 py-1 border border-zinc-200 text-left">
Buchungsdatum
</th>
<th class="px-2 py-1 border border-gray-200 text-left">
<th class="px-2 py-1 border border-zinc-200 text-left">
Reisedatum
</th>
<th class="px-2 py-1 border border-gray-200 text-left">
<th class="px-2 py-1 border border-zinc-200 text-left">
Reise
</th>
<th class="px-2 py-1 border border-gray-200 text-left">
<th class="px-2 py-1 border border-zinc-200 text-left">
Vorgang
</th>
<th class="px-2 py-1 border border-gray-200 text-center">
<th class="px-2 py-1 border border-zinc-200 text-center">
Preis
</th>
<th class="px-2 py-1 border border-gray-200 text-center">
<th class="px-2 py-1 border border-zinc-200 text-center">
offen
</th>
<th class="px-2 py-1 border border-gray-200 text-left">
<th class="px-2 py-1 border border-zinc-200 text-left">
Status
</th>
<th class="px-2 py-1 border border-gray-200"></th>
<th class="px-2 py-1 border border-zinc-200"></th>
</tr>
</thead>
<tbody>
<tr v-for="event of events" class="even:bg-gray-50">
<td class="px-2 py-1 border border-gray-200">
<tr v-for="event of events" class="even:bg-zinc-50">
<td class="px-2 py-1 border border-zinc-200">
{{ formatBookingDate(event.dateBooking) }}
</td>
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
{{ event.dateTravel | date }}
</td>
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
{{ event.product }}
</td>
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
{{ event.bookingNumber }}
</td>
<td class="px-2 py-1 border border-gray-200 whitespace-nowrap">
<td class="px-2 py-1 border border-zinc-200 whitespace-nowrap">
{{ formatCurrency(event.price) }}
</td>
<td class="px-2 py-1 border border-gray-200 whitespace-nowrap" :class="{ 'text-red-500': hasOutstandingPayment(event) }">
<td class="px-2 py-1 border border-zinc-200 whitespace-nowrap" :class="{ 'text-red-500': hasOutstandingPayment(event) }">
{{ calculateBalance(event) }}
</td>
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
{{ status[event.status] }}
</td>
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
<div class="grid grid-cols-1 xl:grid-cols-3 gap-2 w-32 xl:w-auto">
<a :href="getDownloadUrl(event, 'confirmation')" target="_blank" class="button bg-button button--small">
Bestätigung
@@ -7,10 +7,10 @@
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<form-group label="E-Mail" :error="formErrors.email">
<input type="email" v-model="email" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="email" v-model="email" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="Passwort" v-if="loginMode">
<input type="password" v-model="password" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="password" v-model="password" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 mt-4">
<button type="submit" class="button bg-button" :disabled="loading">
@@ -6,16 +6,16 @@
<form @submit.prevent="register()">
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 mb-4">
<form-group label="Vorname" :error="formErrors.firstName">
<input type="text" v-model="userData.firstName" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.firstName" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="Name" :error="formErrors.lastName">
<input type="text" v-model="userData.lastName" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.lastName" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="E-Mail" :error="formErrors.email">
<input type="text" v-model="userData.email" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<input type="text" v-model="userData.email" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
</form-group>
<form-group label="Gender" :error="formErrors.gender">
<select v-model="userData.gender" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full">
<select v-model="userData.gender" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full">
<option value="M">M</option>
<option value="W">W</option>
<option value="D">D</option>
@@ -1,6 +1,6 @@
<template>
<div class="border border-gray-200 rounded mb-4">
<div class="bg-gray-50 p-2">
<div class="border border-zinc-200 rounded mb-4">
<div class="bg-zinc-50 p-2">
<h3 class="text-base font-bold">
<a role="button" href="#" class="flex items-center justify-between"
@click.prevent="expanded = !expanded">
@@ -1,7 +1,7 @@
<template>
<panel title="Gebuchte Kontingente">
<ul class="list-none">
<li class="p-2 border-b border-gray-200 last:border-0" v-for="contingent in contingents" :key="contingent.id">
<li class="p-2 border-b border-zinc-200 last:border-0" v-for="contingent in contingents" :key="contingent.id">
{{ contingent.room }}: {{ contingent.count }}
</li>
</ul>
@@ -1,11 +1,11 @@
<template>
<panel title="Änderungen möglich bis">
<ul class="list-none">
<li class="p-2 border-b border-gray-200 last:border-0" v-for="field in fields" :key="field.prop">
<li class="p-2 border-b border-zinc-200 last:border-0" v-for="field in fields" :key="field.prop">
<strong>
{{ field.label }}:
</strong>
<span class="px-2 py-1 text-white" :class="mutableFields[field.prop].mutable ? 'bg-green-500' : 'bg-red-500'">
<span class="px-2 py-1 text-white" :class="mutableFields[field.prop].mutable ? 'bg-emerald-500' : 'bg-red-500'">
{{ mutableFields[field.prop].mutable ? mutableFields[field.prop].until : 'keine Änderung möglich' }}
</span>
</li>
@@ -1,6 +1,6 @@
<template>
<div class="border border-gray-50 rounded mb-4">
<div class="bg-gray-50 p-2">
<div class="border border-zinc-50 rounded mb-4">
<div class="bg-zinc-50 p-2">
<h3 class="text-base font-bold">
{{ title }}
</h3>
@@ -11,7 +11,7 @@
</svg>
</button>
<div class="absolute top-100 left-0 z-50 mt-4 border shadow-md p-4 bg-white w-screen max-w-xs space-y-2" v-show="visible">
<input class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="Mobil"
<input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="Mobil"
v-model="participant.data.phoneMobile" :disabled="!mutable"
@change="$emit('updated', participant)"
>
@@ -1,18 +1,18 @@
<template>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-1">
<input class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="Nachname"
<input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="Nachname"
v-model="participant.data.lastName" :disabled="!mutable"
@change="$emit('updated', participant)"
>
<input class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="Vorname"
<input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="Vorname"
v-model="participant.data.firstName" :disabled="!mutable"
@change="$emit('updated', participant)"
>
<input class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="E-Mail"
<input class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" type="text" placeholder="E-Mail"
v-model="participant.data.email" :disabled="!mutable"
@change="$emit('updated', participant)"
>
<select class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full"
<select class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
v-model="participant.data.gender" :disabled="!mutable"
@change="$emit('updated', participant)"
>
@@ -20,14 +20,14 @@
<option value="M">männlich</option>
<option value="D">divers</option>
</select>
<select class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full"
<select class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full"
v-model="participant.data.nationality" :disabled="!mutable"
@change="$emit('updated', participant)"
>
<option value="">Nationalität...</option>
<option v-for="country in countries" :key="country.code" :value="country.code">{{ country.adjective }}</option>
</select>
<input type="date" class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full" placeholder="Geburtsdatum"
<input type="date" class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 w-full" placeholder="Geburtsdatum"
v-model="participant.data.dateOfBirth" :disabled="!mutable"
@change="$emit('updated', participant)"
>
@@ -12,7 +12,7 @@
<div class="py-1" v-for="pickup in pickups" :key="pickup.id">
<label class="inline-flex items-center text-sm">
<input type="radio"
class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
:name="'pickup-' + participant.data.id"
v-model="pickupId"
:value="pickup.busproId"
@@ -12,7 +12,7 @@
<div class="py-1" v-for="service in availableServices" :key="service.id">
<label class="inline-flex items-center text-sm">
<input type="checkbox"
class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
v-model="participant.serviceIds"
:value="service.id"
:disabled="false === isServiceSelectable(service)"
@@ -1,7 +1,7 @@
<template>
<panel title="Gebuchte Zusatzleistungen">
<ul class="list-none" v-show="hasServiceAssignments">
<li class="p-2 border-b border-gray-200 last:border-0" v-for="(assignment, serviceId) in serviceAssignments">
<li class="p-2 border-b border-zinc-200 last:border-0" v-for="(assignment, serviceId) in serviceAssignments">
{{ services[serviceId].name }}: {{ assignment.length }}
</li>
</ul>
@@ -3,7 +3,7 @@
<label class="flex items-center"
v-for="service in services" :key="service.id">
<input type="checkbox"
class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
class="border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary"
v-model="selectedTransportationIds"
:value="service.id"
:disabled="isServiceUnavailable(service) || !mutable"
@@ -0,0 +1,11 @@
@layer base {
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
@import "base/typography";
@import "base/images";
[data-rte-content] {
@import "base/rte-content";
}
}
@@ -0,0 +1,14 @@
@layer components {
@import "components/topnav";
@import "components/background";
@import "components/badges";
@import "components/buttons";
@import "components/contact-bar";
@import "components/calendar";
@import "components/forms";
@import "components/herounit";
@import "components/misc";
@import "components/searchbar";
@import "components/teaser";
@import "components/tiles";
}
@@ -0,0 +1,40 @@
@layer utilities {
.max-w-screen-2xl {
max-width: 1440px;
}
.max-w-1\/2 {
max-width: 50%;
}
.has-validation-error input {
@apply text-red-500 border-red-500;
}
.container-wide {
@apply container;
max-width: 1440px;
}
.underlined {
@apply relative mb-4;
&:after {
content: "";
@apply absolute top-100 left-0 mt-2 mb-2 border-b-4 w-48;
@apply border-ep-primary-dark sbw:border-sbw-primary-dark snz:border-snz-primary-dark uch:border-uch-primary-dark;
}
}
.-translate-xy-1\/2 {
transform: translate(-50%, -50%);
}
.text-shadow {
text-shadow: 0 2px 2px theme('colors.zinc.400');
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
border: 0;
}
iframe:not([src]) {
display: none;
}
}
@@ -0,0 +1,100 @@
// Lightbox
@import "~glightbox/dist/css/glightbox.css";
// Tooltips
@import "~cooltipz-css/src/cooltipz";
:root {
--cooltipz-bg-color: theme('colors.zinc.700');
--cooltipz-border-color: theme('colors.zinc.700');
--cooltipz-text-color: theme('colors.white');
}
// Datepicker
@import "~flatpickr/dist/flatpickr.css";
[data-datepicker-inline-value="true"] .flatpickr-input {
@apply hidden;
}
.flatpickr-calendar {
border: none #{!important};
&.inline {
@apply shadow-none #{!important};
@apply border border-zinc-400 #{!important};
}
}
.flatpickr-day {
@apply rounded my-2 mx-0;
&.available:not(.inRange) {
@apply text-white bg-emerald-500;
}
}
.flatpickr-day.selected {
@apply bg-ep-secondary sbw:bg-sbw-secondary;
@apply border-ep-secondary sbw:border-sbw-secondary;
&.startRange, &.endRange {
@apply bg-ep-secondary sbw:bg-sbw-secondary;
@apply border-ep-secondary sbw:border-sbw-secondary;
}
}
// Maps
@import "~leaflet/dist/leaflet.css";
.leaflet-pane {
z-index: 10 !important;
}
.leaflet-top, .leaflet-bottom, .leaflet-control {
z-index: 20 !important;
}
// Slider
@import "~@splidejs/splide/dist/css/splide-core.min.css";
.slider-pagination {
@apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-8;
@apply list-none p-0;
@apply flex items-center space-x-2;
}
.slider-pagination__dot {
@apply hide-text block w-3 h-3 xl:w-4 xl:h-4 rounded-full bg-white shadow-md focus:outline-none;
&.is-active {
@apply bg-ep-secondary;
}
}
.slider-pagination__arrow {
@apply absolute z-10 text-ep-secondary bg-transparent focus:outline-none;
.slider--teasers & {
@apply bg-ep-secondary text-white rounded p-1;
}
&[disabled] {
@apply opacity-25;
}
&--prev {
@apply left-0 top-1/2 transform -translate-y-1/2 ml-4;
.slider--teasers & {
@apply -ml-8;
}
}
&--next {
@apply right-0 top-1/2 transform -translate-y-1/2 mr-4;
.slider--teasers & {
@apply -mr-8;
}
}
}
@@ -53,13 +53,13 @@ table,
thead {
tr {
@apply bg-gray-200;
@apply bg-zinc-200;
}
}
tbody {
tr {
@apply odd:bg-gray-100;
@apply odd:bg-zinc-100;
}
}
@@ -68,5 +68,5 @@ th {
}
td {
@apply border-r border-gray-200 px-2 py-1 md:p-2;
@apply border-r border-zinc-200 px-2 py-1 md:p-2;
}
@@ -1,21 +1,21 @@
h1,
.headline--primary {
@apply block text-3xl md:text-4xl text-gray-800 font-bold mb-2;
@apply block text-3xl md:text-4xl text-zinc-800 font-bold mb-2;
}
h2,
.headline--secondary {
@apply block text-2xl md:text-3xl text-gray-800 font-bold mb-2;
@apply block text-2xl md:text-3xl text-zinc-800 font-bold mb-2;
}
h3,
.headline--3 {
@apply block text-xl md:text-2xl text-gray-800 font-bold leading-6 mb-2;
@apply block text-xl md:text-2xl text-zinc-800 font-bold leading-6 mb-2;
}
h4,
.headline--4 {
@apply block md:text-lg text-gray-800 font-bold;
@apply block md:text-lg text-zinc-800 font-bold;
}
.headline--underlined:after {
@@ -25,7 +25,7 @@ h4,
}
.subline {
@apply block text-xs md:text-sm font-normal leading-6 text-gray-500;
@apply block text-xs md:text-sm font-normal leading-6 text-zinc-500;
}
// Lists
@@ -18,11 +18,11 @@
@apply snz:bg-snz-secondary;
@apply uch:bg-uch-secondary;
@apply ser:bg-ser-secondary;
@apply hover:bg-ep-secondary group-hover:bg-ep-secondary;
@apply sbw:hover:bg-sbw-primary-dark sbw:group-hover:bg-sbw-primary-dark;
@apply snz:hover:bg-snz-primary-dark snz:group-hover:bg-snz-primary-dark;
@apply uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
@apply ser:hover:bg-ser-primary ser:group-hover:bg-ser-primary;
@apply hover:bg-ep-secondary;
@apply sbw:hover:bg-sbw-primary-dark;
@apply snz:hover:bg-snz-primary-dark;
@apply uch:hover:bg-uch-primary-dark;
@apply ser:hover:bg-ser-primary;
&--active,
&--secondary {
@@ -34,13 +34,13 @@
}
&--muted {
@apply bg-gray-300 hover:bg-gray-300;
@apply bg-zinc-300 hover:bg-zinc-300;
}
&--dark {
@apply bg-ep-primary-dark;
@apply ser:bg-ser-primary;
@apply ser:hover:bg-ser-secondary ser:group-hover:bg-ser-secondary;
@apply ser:hover:bg-ser-secondary;
}
&--light {
@@ -1,9 +1,9 @@
.availability-full {
@apply bg-green-500;
@apply bg-emerald-500;
}
.availability-partial {
@apply bg-yellow-300;
@apply bg-amber-300;
}
.availability-none {
@@ -11,25 +11,25 @@
}
.availability-full-to-none {
@apply bg-gradient-to-br from-green-500 to-red-500;
@apply bg-gradient-to-br from-emerald-500 to-red-500;
}
.availability-full-to-partial {
@apply bg-gradient-to-br from-green-500 to-yellow-300;
@apply bg-gradient-to-br from-emerald-500 to-amber-300;
}
.availability-none-to-full {
@apply bg-gradient-to-br from-red-500 to-green-500;
@apply bg-gradient-to-br from-red-500 to-emerald-500;
}
.availability-partial-to-full {
@apply bg-gradient-to-br from-yellow-300 to-green-500;
@apply bg-gradient-to-br from-amber-300 to-emerald-500;
}
.availability-none-to-partial {
@apply bg-gradient-to-br from-red-500 to-yellow-300;
@apply bg-gradient-to-br from-red-500 to-amber-300;
}
.availability-partial-to-none {
@apply bg-gradient-to-br from-yellow-300 to-red-500;
@apply bg-gradient-to-br from-amber-300 to-red-500;
}
@@ -1,32 +0,0 @@
@import "~flatpickr/dist/flatpickr.css";
[data-datepicker-inline-value="true"] .flatpickr-input {
@apply hidden;
}
.flatpickr-calendar {
border: none #{!important};
&.inline {
@apply shadow-none #{!important};
@apply border border-gray-400 #{!important};
}
}
.flatpickr-day {
@apply rounded my-2 mx-0;
&.available:not(.inRange) {
@apply text-white bg-green-500;
}
}
.flatpickr-day.selected {
@apply bg-ep-secondary sbw:bg-sbw-secondary;
@apply border-ep-secondary sbw:border-sbw-secondary;
&.startRange, &.endRange {
@apply bg-ep-secondary sbw:bg-sbw-secondary;
@apply border-ep-secondary sbw:border-sbw-secondary;
}
}
@@ -1,5 +1,5 @@
.form-field {
@apply border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 block w-full;
@apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 block w-full;
&--has-error {
@apply border-red-500;
@@ -8,7 +8,7 @@
.form-checkbox,
.form-radio {
@apply border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-4 w-4;
@apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 text-ep-secondary sbw:text-sbw-secondary uch:text-uch-secondary h-4 w-4;
&--has-error {
@apply border-red-500;
@@ -1 +0,0 @@
@import "~glightbox/dist/css/glightbox.css";
@@ -1,8 +0,0 @@
@import "~leaflet/dist/leaflet.css";
.leaflet-pane {
z-index: 10 !important;
}
.leaflet-top, .leaflet-bottom, .leaflet-control {
z-index: 20 !important;
}
@@ -1,43 +0,0 @@
@import "~@splidejs/splide/dist/css/splide-core.min.css";
.slider-pagination {
@apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-8;
@apply list-none p-0;
@apply flex items-center space-x-2;
}
.slider-pagination__dot {
@apply hide-text block w-3 h-3 xl:w-4 xl:h-4 rounded-full bg-white shadow-md focus:outline-none;
&.is-active {
@apply bg-ep-secondary;
}
}
.slider-pagination__arrow {
@apply absolute z-10 text-ep-secondary bg-transparent focus:outline-none;
.slider--teasers & {
@apply bg-ep-secondary text-white rounded p-1;
}
&[disabled] {
@apply opacity-25;
}
&--prev {
@apply left-0 top-1/2 transform -translate-y-1/2 ml-4;
.slider--teasers & {
@apply -ml-8;
}
}
&--next {
@apply right-0 top-1/2 transform -translate-y-1/2 mr-4;
.slider--teasers & {
@apply -mr-8;
}
}
}
@@ -19,7 +19,7 @@
}
.product-teaser__label-name {
@apply text-gray-800 leading-none;
@apply text-zinc-800 leading-none;
[data-teasergrid-disabled-value="false"] & {
@apply text-sm md:text-base;
@@ -27,7 +27,7 @@
}
.product-teaser__label-region {
@apply h-12 md:h-16 text-gray-800 leading-none font-bold text-3xl;
@apply h-12 md:h-16 text-zinc-800 leading-none font-bold text-3xl;
[data-teasergrid-disabled-value="false"] & {
@apply text-lg leading-none md:text-3xl md:leading-none;
@@ -35,7 +35,7 @@
}
.product-teaser__label-included {
@apply pb-2 text-gray-800 text-xl font-bold leading-none;
@apply pb-2 text-zinc-800 text-xl font-bold leading-none;
[data-teasergrid-disabled-value="false"] & {
@apply text-sm md:text-lg lg:text-xl;
@@ -1,7 +0,0 @@
@import "~cooltipz-css/src/cooltipz";
:root {
--cooltipz-bg-color: theme('colors.gray.700');
--cooltipz-border-color: theme('colors.gray.700');
--cooltipz-text-color: theme('colors.white');
}
@@ -1,78 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "tailwindcss/base";
@import "base";
@layer base {
body {
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
@import "base/typography";
@import "base/images";
@import "tailwindcss/components";
@import "components";
[data-rte-content] {
@import "base/rte-content";
}
}
@import "tailwindcss/utilities";
@import "utilities";
@layer components {
@import "components/topnav";
@import "components/background";
@import "components/badges";
@import "components/buttons";
@import "components/contact-bar";
@import "components/calendar";
@import "components/datepicker";
@import "components/forms";
@import "components/herounit";
@import "components/lightbox";
@import "components/map";
@import "components/misc";
@import "components/searchbar";
@import "components/slider";
@import "components/teaser";
@import "components/tiles";
@import "components/tooltips";
}
@layer utilities {
@responsive {
.max-w-screen-2xl {
max-width: 1440px;
}
.max-w-1\/2 {
max-width: 50%;
}
}
.has-validation-error input {
@apply text-red-500 border-red-500;
}
.container-wide {
@apply container;
max-width: 1440px;
}
.underlined {
@apply relative mb-4;
&:after {
content: "";
@apply absolute top-100 left-0 mt-2 mb-2 border-b-4 w-48;
@apply border-ep-primary-dark sbw:border-sbw-primary-dark snz:border-snz-primary-dark uch:border-uch-primary-dark;
}
}
.-translate-xy-1\/2 {
transform: translate(-50%, -50%);
}
.text-shadow {
text-shadow: 0 2px 2px theme('colors.gray.400');
}
.hide-text {
font: 0/0 a;
color: transparent;
text-shadow: none;
border: 0;
}
iframe:not([src]) {
display: none;
}
}
@import "vendor";
@@ -1,7 +1,7 @@
@import "base/fonts";
body {
@apply antialiased text-gray-800 font-sans;
@apply antialiased text-zinc-800 font-sans;
}
table {
@@ -5,7 +5,7 @@
<f:if condition="{badge}">
<f:link.typolink parameter="{badge.link}"
title="{badge.title}"
class="hidden md:block absolute bottom-0 right-0 -mb-8 -mr-8 w-40 transform rotate-6">
class="hidden md:block absolute bottom-0 right-0 -mb-8 -mr-8 w-40 rotate-6">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
@@ -1,5 +1,5 @@
<div class="space-y-2">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<f:if condition="{bars}">
<f:then>
<div class="headline--3 headline--underlined">
@@ -18,7 +18,7 @@
<f:render partial="ImageGallery" arguments="{images: city.images, id: 'city-{city.uid}', thumbnails: 1}"/>
</f:if>
<f:if condition="{city.party}">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<f:if condition="{bars}">
<f:then>
<div class="headline--3 headline--underlined">
@@ -35,7 +35,7 @@
</div>
</f:if>
<f:if condition="{city.leisure}">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<f:if condition="{bars}">
<f:then>
<div class="headline--3 headline--underlined">
@@ -34,7 +34,7 @@
</f:if>
</f:alias>
</div>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-zinc-200">
<span class="headline--3 mb-4">
{city.name}
</span>
@@ -7,7 +7,7 @@
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block transform -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
</f:if>
<div class="relative container grid grid-cols-2 gap-8 py-4" data-rte-content>
<div class="col-span-2 md:col-span-1">
@@ -23,7 +23,7 @@
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 flex items-center space-x-2 {ep:themeClasses(classes: '{ep: \'bg-ep-secondary\', sbw: \'bg-sbw-secondary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
class="absolute bottom-0 left-1/2 -translate-x-1/2 -mb-8 rounded-full py-4 px-6 flex items-center space-x-2 {ep:themeClasses(classes: '{ep: \'bg-ep-secondary\', sbw: \'bg-sbw-secondary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
{ep:icon(icon: 'phone', class: 'w-10 h-10 text-white')}
<div class="text-center text-white">
<span class="block whitespace-nowrap">
@@ -61,7 +61,7 @@
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines"
section="Bottom1"
arguments="{classes: 'hidden md:block transform translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 2 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
arguments="{classes: 'hidden md:block translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 2 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
</f:if>
</div>
@@ -6,7 +6,7 @@
<div class="bg-ep-primary-dark my-1">
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block transform -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
<div class="max-w-screen-lg mx-auto" data-rte-content>
<div>{data.headline}</div>
<div>{data.text -> f:format.html()}</div>
@@ -17,7 +17,7 @@
</div>
<f:render partial="Disrupter/Outlines"
section="Bottom1"
arguments="{classes: 'hidden md:block transform translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 2 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
arguments="{classes: 'hidden md:block translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 2 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
</div>
</html>
@@ -6,7 +6,7 @@
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)} my-1">
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block transform -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
<div class="max-w-screen-lg mx-auto py-4" data-rte-content>
<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">
@@ -39,7 +39,7 @@
</div>
<f:render partial="Disrupter/Outlines"
section="Bottom1"
arguments="{classes: 'hidden md:block transform translate-y-2 {f:if(condition: \'{background} == 2 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
arguments="{classes: 'hidden md:block translate-y-2 {f:if(condition: \'{background} == 2 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
</div>
</html>
@@ -8,7 +8,7 @@
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block transform -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{background} == 1 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
</f:if>
<div class="relative container grid grid-cols-2 gap-8 py-8" data-rte-content>
<div class="col-span-2 md:col-span-1">
@@ -24,7 +24,7 @@
</f:if>
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 flex items-center space-x-2 {ep:themeClasses(classes: '{ep: \'bg-ep-secondary\', sbw: \'bg-sbw-secondary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
class="absolute bottom-0 left-1/2 -translate-x-1/2 -mb-8 rounded-full py-4 px-6 flex items-center space-x-2 {ep:themeClasses(classes: '{ep: \'bg-ep-secondary\', sbw: \'bg-sbw-secondary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
{ep:icon(icon: 'phone', class: 'w-10 h-10 text-white')}
<div class="text-center text-white">
<span class="block whitespace-nowrap">
@@ -62,7 +62,7 @@
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines"
section="Bottom1"
arguments="{classes: 'hidden md:block sbw:md:hidden transform translate-y-2 {f:if(condition: \'{background} == 2 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
arguments="{classes: 'hidden md:block sbw:md:hidden translate-y-2 {f:if(condition: \'{background} == 2 || {background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
</f:if>
</div>
@@ -6,7 +6,7 @@
<div class="{ep:themeClasses(classes: '{ep: \'bg-ep-primary-dark\', sbw: \'bg-sbw-primary-80\', snz: \'bg-snz-primary-80\', uch: \'bg-uch-primary-80\'}', key: settings.themekey)} my-1">
<f:render partial="Disrupter/Outlines"
section="Top1"
arguments="{classes: 'hidden md:block transform -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
arguments="{classes: 'hidden md:block -translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 1 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
<div class="max-w-screen-lg mx-auto" data-rte-content>
<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">
@@ -39,7 +39,7 @@
</div>
<f:render partial="Disrupter/Outlines"
section="Bottom1"
arguments="{classes: 'hidden md:block transform translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 2 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
arguments="{classes: 'hidden md:block translate-y-2 {f:if(condition: \'{data.tx_eptheme_background} == 2 || {data.tx_eptheme_background} == 3\', then: \'text-ep-primary-bg\', else: \'text-white\')}'}"/>
</div>
</html>
@@ -52,7 +52,7 @@
<circle id="bgouter" cx="100" cy="100" r="100" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary-50\', snz: \'text-snz-primary-50\', uch: \'text-uch-primary-50\'}', key: settings.themekey)}"/>
<circle id="bginner" cx="100" cy="100" r="70" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}"/>
</svg>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 flex flex-col items-center justify-around">
<div class="absolute top-1/2 left-1/2 -translate-xy-1/2 flex flex-col items-center justify-around">
<span class="text-white uppercase font-extrabold text-center leading-tight">{badgeData.title -> f:format.raw()}</span>
<span class="text-white uppercase text-center leading-tight">{badgeData.subtitle -> f:format.raw()}</span>
</div>
@@ -4,7 +4,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:if condition="{facts -> f:count()} > 0">
<div class="bg-gray-50 p-4 mb-4">
<div class="bg-zinc-50 p-4 mb-4">
<h2 class="text-base font-bold mb-1">
<f:if condition="{title}">
<f:then>
@@ -29,7 +29,7 @@
<button type="button"
class="uppercase text-lg text-white flex items-center space-x-4"
data-action="collapse#toggle">
{ep:icon(icon: 'chevron-right', class: 'w-4 h-4 text-white transform transition-transform duration-200 ease-in-out', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'chevron-right', class: 'w-4 h-4 text-white transition-transform duration-200 ease-in-out', data: '{collapse-target: \'icon\'}')}
<span>
{faq.question}
</span>
@@ -50,7 +50,7 @@
</div>
</f:if>
</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="Bottom2" arguments="{classes: 'hidden md:block translate-y-2 text-white'}"/>
</div>
</div>
</f:if>
@@ -5,7 +5,7 @@
<div class="bg-ep-primary-dark sbw:bg-sbw-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary mt-8">
<f:if condition="{settings.themekey} == 'ep'">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'transform -translate-y-2 text-white'}"/>
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: '-translate-y-2 text-white'}"/>
</f:if>
<div class="py-4 relative">
<div class="container grid grid-cols-2 lg:grid-cols-4 gap-8 pb-4">
@@ -2,7 +2,7 @@
<f:form.validationResults for="{element.rootForm.identifier}.{element.identifier}">
<label class="block mb-4">
<f:if condition="{doNotShowLabel} != 1">
<span class="{f:if(condition: '{validationResults.errors.0}', then: 'text-red-500', else: 'text-gray-700')}">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
<span class="{f:if(condition: '{validationResults.errors.0}', then: 'text-red-500', else: 'text-zinc-700')}">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
</f:if>
{elementContent -> f:format.raw()}
<f:if condition="{validationResults.flattenedErrors}">
@@ -2,7 +2,7 @@
<formvh:renderRenderable renderable="{element}">
<fieldset id="{element.uniqueIdentifier}" class="{f:if(condition: element.properties.elementClassAttribute, then: ' {element.properties.elementClassAttribute}')}">
<f:if condition="{element.label}">
<legend class="pb-2 mb-2 border-b border-gray-400">{formvh:translateElementProperty(element: element, property: 'label')}</legend>
<legend class="pb-2 mb-2 border-b border-zinc-400">{formvh:translateElementProperty(element: element, property: 'label')}</legend>
</f:if>
<f:for each="{element.elements}" as="element">
<f:render partial="{element.templateName}" arguments="{element: element}" />
@@ -1,7 +1,7 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element, doNotShowLabel: 1}" contentAs="elementContent">
<span class="block text-gray-700 mb-1">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
<span class="block text-zinc-700 mb-1">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
<f:for each="{element.properties.options}" as="label" key="value" iteration="idIterator">
<div>
<label class="inline-flex items-center">
@@ -1,7 +1,7 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:formvh="http://typo3.org/ns/TYPO3/CMS/Form/ViewHelpers" data-namespace-typo3-fluid="true">
<formvh:renderRenderable renderable="{element}">
<f:render partial="Field/Field" arguments="{element: element, doNotShowLabel: 1}" contentAs="elementContent">
<span class="block text-gray-700 mb-1">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
<span class="block text-zinc-700 mb-1">{formvh:translateElementProperty(element: element, property: 'label')}<f:if condition="{element.required}"><f:render partial="Field/Required" /></f:if></span>
<f:for each="{element.properties.options}" as="label" key="value" iteration="idIterator">
<div>
<label for="{element.uniqueIdentifier}-{idIterator.index}" class="inline-flex items-center">
@@ -21,7 +21,7 @@
</div>
</f:if>
</f:alias>
<div class="absolute left-0 bottom-0 inset-x-0 px-4 py-8 w-full md:bottom-1/2 md:transform md:translate-y-1/2">
<div class="absolute left-0 bottom-0 inset-x-0 px-4 py-8 w-full md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container px-0">
<div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-4 md:mb-8">
@@ -17,7 +17,7 @@
</picture>
</f:if>
</f:alias>
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container">
<div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-xl md:text-2xl text-white uppercase">
@@ -49,7 +49,7 @@
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}"
title="{badgeData.title}">
<div class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
<div class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 rotate-6">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
@@ -70,7 +70,7 @@
</div>
</f:if>
<f:if condition="{slide.image.0.description}">
<div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">
<div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-zinc-700">
{slide.image.0.description -> f:format.htmlspecialchars()}
</div>
</f:if>
@@ -1,7 +1,7 @@
{namespace ep=EP\EpTheme\ViewHelpers}
<f:variable name="hotelTitle">{hotel.name -> f:format.raw()}{f:if(condition: hotel.categoryLabel, then: ' ({hotel.categoryLabel -> f:format.raw()})')}</f:variable>
<div class="space-y-2">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<f:if condition="{bars}">
<f:then>
<div class="headline--3 headline--underlined">
@@ -26,7 +26,7 @@
<f:if condition="{teasers}">
<f:then>
<a id="teasers" class="anchor"></a>
<div class="bg-gray-50 p-4 mb-4"
<div class="bg-zinc-50 p-4 mb-4"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
@@ -91,7 +91,7 @@
<f:if condition="{hotel.images -> f:count()} > 0">
<f:render partial="ImageGallery" arguments="{images: hotel.images, id: 'hotel-{hotel.uid}', thumbnails: 1}"/>
</f:if>
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<f:if condition="{bars}">
<f:then>
<div class="headline--3 headline--underlined">
@@ -107,7 +107,7 @@
{hotel.features -> f:format.html()}
</div>
<f:if condition="{hotel.isApartment} || hotel.isHolidayFlat || hotel.isOther">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<f:if condition="{hotel.isApartment}">
<f:if condition="{bars}">
<f:then>
@@ -152,7 +152,7 @@
</div>
</f:if>
<f:if condition="{hotel.additionalInformation}">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<f:if condition="{bars}">
<f:then>
<div class="headline--3 headline--underlined">
@@ -25,7 +25,7 @@
</f:else>
</f:if>
</div>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200">
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-zinc-200">
<span class="headline--3 mb-4">
{hotel.name -> f:format.nl2br()}
</span>
@@ -3,7 +3,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<h3>
Eigenanreise
</h3>
@@ -20,20 +20,20 @@
<f:if condition="{settings.hideSearchbar}">
<f:else>
<button type="button"
class="focus:outline-none text-gray-800"
class="focus:outline-none text-zinc-800"
data-controller="overlay-toggle"
data-overlay-toggle-id-value="mobile-search"
data-action="overlay-toggle#invokeToggle">
{ep:icon(icon: 'search', class: 'w-8 h-8 text-gray-800')}
{ep:icon(icon: 'search', class: 'w-8 h-8 text-zinc-800')}
</button>
</f:else>
</f:if>
<button type="button"
class="focus:outline-none text-gray-800"
class="focus:outline-none text-zinc-800"
data-controller="overlay-toggle"
data-overlay-toggle-id-value="mobilenav"
data-action="overlay-toggle#invokeToggle">
{ep:icon(icon: 'menu', class: 'w-8 h-8 text-gray-800')}
{ep:icon(icon: 'menu', class: 'w-8 h-8 text-zinc-800')}
</button>
</div>
</div>
@@ -48,16 +48,16 @@
<f:if condition="{topitem.children}">
<f:then>
<a href="{f:uri.typolink(parameter: topitem.data.uid)}"
class="block text-gray-800 uppercase lg:text-lg font-bold flex items-center"
class="block text-zinc-800 uppercase lg:text-lg font-bold flex items-center"
title="{topitem.title}">
<span>{topitem.title}</span>
{ep:icon(icon: 'chevron-down', class: 'ml-1 w-4 h-4 transform group-hover:rotate-180')}
{ep:icon(icon: 'chevron-down', class: 'ml-1 w-4 h-4 group-hover:rotate-180')}
</a>
<f:render section="SecondLevel" arguments="{topitem: topitem}"/>
</f:then>
<f:else>
<a href="{topitem.link}"{f:if(condition: '{topitem.doktype} == 3', then: ' target="_blank"')}
class="block text-gray-800 uppercase lg:text-lg font-bold"
class="block text-zinc-800 uppercase lg:text-lg font-bold"
title="{topitem.title}">
{topitem.title}
</a>
@@ -101,7 +101,7 @@
<f:if condition="{subitem.data.tx_eptheme_context_country_code}">
{ep:icon(icon: 'flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6')}
</f:if>
<span class="text-gray-800 uppercase lg:text-lg">
<span class="text-zinc-800 uppercase lg:text-lg">
{subitem.title}
</span>
</a>
@@ -113,7 +113,7 @@
<f:if condition="{subitem.data.tx_eptheme_context_country_code}">
{ep:icon(icon: 'flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6')}
</f:if>
<span class="text-gray-800 uppercase lg:text-lg">
<span class="text-zinc-800 uppercase lg:text-lg">
{subitem.title}
</span>
</a>
@@ -133,7 +133,7 @@
<f:then>
<li>
<a href="{subsubitem.link}"
class="text-gray-800 text-lg"
class="text-zinc-800 text-lg"
target="_blank"
title="{subsubitem.title}">
{subsubitem.title}
@@ -143,7 +143,7 @@
<f:else>
<li>
<a href="{f:uri.typolink(parameter: subsubitem.data.uid)}"
class="text-gray-800 text-lg"
class="text-zinc-800 text-lg"
title="{subsubitem.title}">
{subsubitem.title}
</a>
@@ -5,7 +5,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Main">
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 hidden"
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-zinc-700 hidden"
data-controller="overlay-toggle"
data-overlay-toggle-id-value="mobilenav"
data-overlay-toggle-target="overlay"
@@ -20,11 +20,11 @@
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<button type="button"
class="focus:outline-none text-gray-800"
class="focus:outline-none text-zinc-800"
data-controller="overlay-toggle"
data-overlay-toggle-id-value="search"
data-action="overlay-toggle#invokeToggle">
{ep:icon(icon: 'search', class: 'w-8 h-8 text-gray-800')}
{ep:icon(icon: 'search', class: 'w-8 h-8 text-zinc-800')}
</button>
</f:else>
</f:if>
@@ -100,7 +100,7 @@
<button type="button"
class="focus:outline-none bg-ep-primary-dark p-1"
data-action="collapse#toggle">
{ep:icon(icon: 'chevron-right', class: 'w-6 h-6 transform text-white', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'chevron-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
</div>
<div data-collapse-target="container" class="bg-ep-primary-dark pr-4">
@@ -139,7 +139,7 @@
<button type="button"
class="focus:outline-none bg-ep-primary p-1"
data-action="collapse#toggle">
{ep:icon(icon: 'chevron-right', class: 'w-6 h-6 transform text-white', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'chevron-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
</div>
<div data-collapse-target="container">
@@ -1,5 +1,5 @@
<f:if condition="{officetip}">
<div class="bg-gray-50 p-4">
<div class="bg-zinc-50 p-4">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-3">
<p class="font-bold">
@@ -11,7 +11,7 @@
<div class="w-full max-w-full overflow-x-scroll md:overflow-x-auto"
data-controller="pricetable"
data-pricetable-show-all-rows-value="true">
<table class="min-w-full border border-gray-200 border-collapse mb-8">
<table class="min-w-full border border-zinc-200 border-collapse mb-8">
<thead>
<tr>
<th class="text-left">
@@ -29,8 +29,8 @@
</thead>
<tbody>
<f:for each="{pricetable}" as="row" iteration="iteration">
<tr class="even:bg-gray-50">
<td class="px-2 py-1 border border-gray-200 whitespace-nowrap">
<tr class="even:bg-zinc-50">
<td class="px-2 py-1 border border-zinc-200 whitespace-nowrap">
{row.roomName}
<div class="lg:hidden">
<f:if condition="{row.available}">
@@ -45,7 +45,7 @@
</f:if>
</div>
</td>
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
<f:if condition="{row.available}">
<f:then>
{row.minPrice} €
@@ -55,7 +55,7 @@
</f:else>
</f:if>
</td>
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
<f:if condition="{row.busIncluded}">
<span data-cooltipz-dir="top"
aria-label="Busfahrt"
@@ -74,7 +74,7 @@
</span>
</f:if>
</td>
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
<f:if condition="{row.optionalServices} && {row.available}">
<button type="button"
data-action="pricetable#openModal"
@@ -87,7 +87,7 @@
</button>
</f:if>
</td>
<td class="hidden lg:table-cell px-2 py-1 border border-gray-200">
<td class="hidden lg:table-cell px-2 py-1 border border-zinc-200">
<f:if condition="{row.available}">
<f:then>
<a class="button bg-button button--small w-full"
@@ -116,7 +116,7 @@
data-action="pricetable:options-modal:open@window->modal#open">
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25"
data-action="click->modal#close"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 w-full max-w-xl px-4">
<div class="absolute top-1/2 left-1/2 -translate-xy-1/2 w-full max-w-xl px-4">
<div class="shadow flex items-center justify-between p-4 bg-ep-primary-light text-white rounded-t">
<span class="text-xl font-bold">
Optionale Zusatzleistungen
@@ -138,7 +138,7 @@
{section.label}
</div>
<f:for each="{section.services}" as="service">
<dl class="flex items-start justify-between p-1 hover:bg-gray-50">
<dl class="flex items-start justify-between p-1 hover:bg-zinc-50">
<dt class="font-normal">
{service.label}:
</dt>
@@ -1,5 +1,5 @@
<div class="space-y-2">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<h2 class="headline--underlined">
Konzept
</h2>
@@ -15,20 +15,20 @@
Preisberechnung
</button>
</f:if>
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<h2 class="headline--underlined" data-rte-content>
Verpflegung
</h2>
{product.boardDescription -> f:format.html()}
</div>
<f:if condition="{product.includedServices}">
<div class="relative odd:bg-gray-50 p-4" data-rte-content>
<div class="relative odd:bg-zinc-50 p-4" data-rte-content>
<h2 class="headline--underlined">
Inklusivleistungen
</h2>
{product.includedServices -> f:format.html()}
<f:if condition="{product.minPrice}">
<div class="absolute top-0 right-0 mt-4 mr-4 w-32 transform rotate-6">
<div class="absolute top-0 right-0 mt-4 mr-4 w-32 rotate-6">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
@@ -46,7 +46,7 @@
</div>
</f:if>
<f:if condition="{product.additionalServices}">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<h2 class="headline--underlined">
Zusatzleistungen
</h2>
@@ -54,7 +54,7 @@
</div>
</f:if>
<f:if condition="{product.programmeDescription}">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<h2 class="headline--underlined">
Programm
</h2>
@@ -62,7 +62,7 @@
</div>
</f:if>
<f:if condition="{product.skiPassDescription}">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<h2 class="headline--underlined">
Skipass, Kurse, Leihmaterial
</h2>
@@ -21,7 +21,7 @@
height="320c"
alt="{image.alternative}"/>
</picture>
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container">
<div class="p-4 bg-ep-primary-dark-80 sbw:bg-sbw-primary-80 ser:bg-ser-primary-80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-xl md:text-2xl font-bold text-white uppercase">
@@ -75,7 +75,7 @@
</div>
</f:if>
<f:if condition="{slide.image.0.description}">
<div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">
<div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-zinc-700">
{slide.image.0.description -> f:format.htmlspecialchars()}
</div>
</f:if>
@@ -68,7 +68,7 @@
<div class="product-teaser__label-included">
{ep:nightsOptions(options: nights, daytrip: daytrip)} inkl.
</div>
<ul class="product-teaser__list-included flex-1 list-none m-0 text-gray-800 divide-y divide-gray-400">
<ul class="product-teaser__list-included flex-1 list-none m-0 text-zinc-800 divide-y divide-zinc-400">
<li class="flex items-center space-x-1 py-1">
{ep:icon(class: 'w-6 h-6 text-ep-primary-light', icon: 'check')}
<span class="block flex-1 leading-none">
@@ -1,6 +1,6 @@
<f:if condition="{product.ratingVotesCount} > 0">
<a href="{f:uri.typolink(parameter: targetPageUid)}"
class="block bg-gray-50 p-4 mb-4"
class="block bg-zinc-50 p-4 mb-4"
title="Reisebewertungen">
<p class="font-bold mb-1">
{label}
@@ -9,7 +9,7 @@
</a>
</f:if>
<f:if condition="{product.testimonials}">
<div class="bg-gray-50 p-4 mb-8">
<div class="bg-zinc-50 p-4 mb-8">
<p class="font-bold">
Kundenstimmen
</p>
@@ -1,6 +1,6 @@
{namespace ep=EP\EpTheme\ViewHelpers}
<div class="space-y-2">
<div class="odd:bg-gray-50 p-4">
<div class="odd:bg-zinc-50 p-4">
<f:if condition="{bars}">
<f:then>
<div class="headline--3 headline--underlined">
@@ -53,7 +53,7 @@
<f:if condition="{teasers}">
<f:then>
<a id="teasers" class="anchor"></a>
<div class="bg-gray-50 p-4 mb-4"
<div class="bg-zinc-50 p-4 mb-4"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
@@ -124,7 +124,7 @@
<f:render partial="ImageGallery" arguments="{images: region.images, id: 'region-{region.uid}', thumbnails: 1}"/>
</f:if>
</f:if>
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<f:if condition="{bars}">
<f:then>
<div class="headline--3 headline--underlined">
@@ -145,7 +145,7 @@
</f:if>
</div>
<f:if condition="{region.news}">
<div class="odd:bg-gray-50 p-4" data-rte-content>
<div class="odd:bg-zinc-50 p-4" data-rte-content>
<f:if condition="{bars}">
<f:then>
<div class="headline--3 headline--underlined">
@@ -14,7 +14,7 @@
height="300c"
alt="{region.name}" />
</div>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-zinc-200" data-rte-content>
<span class="headline--3 mb-4">
{region.name}
</span>
@@ -4,7 +4,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:if condition="{region.webcam.available}">
<div class="bg-gray-50 p-4 mb-8">
<div class="bg-zinc-50 p-4 mb-8">
<p class="font-bold mb-2">
Webcam
</p>
@@ -3,7 +3,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:if condition="{region.awardImage}">
<div class="bg-gray-50 p-4 mb-8">
<div class="bg-zinc-50 p-4 mb-8">
<span class="block font-bold mb-8">
{region.awardLabel -> v:or(alternative: 'Auszeichnung')}
</span>
@@ -4,7 +4,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:if condition="{region.regionMaps}">
<div class="bg-gray-50 p-4 mb-4"
<div class="bg-zinc-50 p-4 mb-4"
data-controller="lightbox">
<p class="font-bold mb-2">
Pistenplan
@@ -3,7 +3,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<div class="bg-gray-50 p-4 mb-4">
<div class="bg-zinc-50 p-4 mb-4">
<p class="font-bold mb-1">
Gebietsinfo
</p>
@@ -13,7 +13,7 @@
<span class="flex-1 uppercase font-bold text-white text-left">
Reisezeitraum
</span>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<f:form.hidden property="dateFrom"
@@ -32,7 +32,7 @@
<input type="text"
class="border-px border-white text-white text-xl p-2 w-full bg-transparent focus:border-white focus:ring-0"
data-datepicker-target="field">
{ep:icon(icon: 'calendar', class: 'w-6 h-6 text-white absolute top-0 right-0 transform translate-y-1/2 mr-2')}
{ep:icon(icon: 'calendar', class: 'w-6 h-6 text-white absolute top-0 right-0 translate-y-1/2 mr-2')}
</div>
<f:if condition="{settings.datePickerPresets}">
<div class="flex flex-col divide-y divide-overlay-white mt-2">
@@ -68,7 +68,7 @@
<span class="flex-1 uppercase font-bold text-white text-left">
Reisekonzepte
</span>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container"
class="p-4 border-t border-overlay-white bg-brand-gradient">
@@ -110,7 +110,7 @@
<span class="uppercase font-bold">
Reiseziel
</span>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4">
@@ -158,7 +158,7 @@
<span class="uppercase font-bold">
Preis
</span>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4 space-y-2">
@@ -188,10 +188,10 @@
<span class="uppercase font-bold">
Personen
</span>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<f:form.select class="w-full border-0 focus:ring-0 bg-right bg-transparent text-white lg:bg-white lg:text-gray-800 mt-2 p-0"
<f:form.select class="w-full border-0 focus:ring-0 bg-right bg-transparent text-white lg:bg-white lg:text-zinc-800 mt-2 p-0"
property="pax"
options="{filterOptions.pax}"
data="{action: '{stimulusController}#filter'}"/>
@@ -214,7 +214,7 @@
<span class="uppercase font-bold">
Unterkunft
</span>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4 space-y-2">
@@ -244,7 +244,7 @@
<span class="uppercase font-bold">
Verpflegung
</span>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4 space-y-2">
@@ -284,7 +284,7 @@
<span class="uppercase font-bold">
Zimmerarten/Apart.
</span>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 p-0 pt-4 space-y-2">
@@ -315,7 +315,7 @@
<span class="uppercase font-bold">
Anreise
</span>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 transform', data: '{collapse-target: \'icon\'}')}
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4 space-y-2">
@@ -2,7 +2,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
data-namespace-typo3-fluid="true">
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-gray-700 hidden"
<div class="fixed lg:hidden top-0 left-0 inset-0 w-screen h-screen pt-14 pb-10 z-50 bg-zinc-700 hidden"
data-controller="mobile-search"
data-mobile-search-uri-value="{ep:uri.ajax(controller: 'AjaxFilterPanel', action: 'index', pageUid: settings.defaultAjaxUid, format: 'html')}"
data-mobile-search-init-uri-value="{ep:uri.ajax(controller: 'AjaxFilterPanel', action: 'index', pageUid: settings.defaultAjaxUid, arguments: '{filterSettings: filterSettings}', format: 'html')}"
@@ -23,7 +23,7 @@
</div>
<div class="fixed top-0 left-0 z-20 w-full h-full hidden"
data-mobile-search-target="loadingIndicator">
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 flex items-center space-x-4 bg-ep-secondary text-white text-lg p-4 rounded">
<div class="absolute top-1/2 left-1/2 -translate-xy-1/2 flex items-center space-x-4 bg-ep-secondary text-white text-lg p-4 rounded">
{ep:icon(icon: 'spinner', class: 'w-6 h-6')}
<span>Suche wird geladen...</span>
</div>
@@ -3,7 +3,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<div class="flex items-center space-x-4 text-white text-lg p-4 mb-4 {f:if(condition: '{meta.organic} && {meta.total} > 0', then: 'bg-green-600', else: 'bg-red-600')}">
<div class="flex items-center space-x-4 text-white text-lg p-4 mb-4 {f:if(condition: '{meta.organic} && {meta.total} > 0', then: 'bg-emerald-600', else: 'bg-red-600')}">
<f:if condition="{meta.organic} && {meta.total} > 0">
<f:then>
{ep:icon(icon: 'emoji-happy', class: 'w-6 h-6')}
@@ -1,5 +1,5 @@
<f:if condition="{snowreport.snowLevelMountain}">
<div class="bg-gray-50 p-4 mb-4">
<div class="bg-zinc-50 p-4 mb-4">
<p class="font-bold mb-1">
Schneehöhe aktuell
</p>
@@ -15,7 +15,7 @@
</picture>
</f:if>
</f:alias>
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:translate-y-1/2">
<div class="lg:container px-0">
<div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 snz:bg-snz-primary-80 uch:bg-uch-primary-80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16">
<span class="block text-xl md:text-2xl font-light text-white uppercase">
@@ -6,7 +6,7 @@
<f:if condition="{teamer -> f:count()} > 0">
{teamer -> v:iterator.first() -> v:variable.set(name: 'teamerInCharge')}
<div class="bg-gray-50 p-4 mb-4">
<div class="bg-zinc-50 p-4 mb-4">
<p class="font-bold">
Teamer vor Ort
</p>
@@ -16,11 +16,11 @@
height="300c"
alt="{teaserImage.alternative}" />
</div>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-zinc-200" data-rte-content>
<span class="headline--3 mb-4">
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
</span>
<div class="text-gray-800">
<div class="text-zinc-800">
{data.bodytext -> f:format.html()}
</div>
</div>
@@ -17,11 +17,11 @@
<f:for each="{year}" as="month">
<ep:calendar.includes range="{range}" period="{month}">
<div class="w-full{f:if(condition: '{months} > 1', then: ' md:w-1/2 lg:w-1/3')}">
<table class="min-w-full border border-gray-400 border-collapse mb-0">
<table class="min-w-full border border-zinc-400 border-collapse mb-0">
<thead>
<tr>
<f:for each="{0: 'Mo', 1: 'Di', 2: 'Mi', 3: 'Do', 4: 'Fr', 5: 'Sa', 6: 'So'}" as="weekday">
<th class="px-1 py-2 border border-gray-300 text-center">
<th class="px-1 py-2 border border-zinc-300 text-center">
{weekday}
</th>
</f:for>
@@ -31,7 +31,7 @@
<f:for each="{month}" as="week">
<tr>
<f:for each="{week}" as="day">
<td class="px-1 py-2 border border-gray-300 text-center">
<td class="px-1 py-2 border border-zinc-300 text-center">
<ep:calendar.contingent day="{day}" month="{month}" events="{events}"/>
</td>
</f:for>
@@ -23,7 +23,7 @@
<div class="headline--3 mb-2">
Buchungsoptionen {hotel.name}
</div>
<table class="w-full mb-4 bg-gray-200">
<table class="w-full mb-4 bg-zinc-200">
<thead>
<tr>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
@@ -43,9 +43,9 @@
</thead>
<tbody>
<f:for each="{dates}" as="row" iteration="iteration">
<tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
<tr class="odd:bg-zinc-50 hover:bg-zinc-100 odd:hover:bg-zinc-100{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
data-pricetable-target="row">
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
<f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
<f:then>
<button type="button"
@@ -62,12 +62,12 @@
</f:else>
</f:if>
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
<span class="block text-sm md:text-base">
{row.nights}
</span>
</td>
<td class="border-r border-gray-200 px-2 p-1">
<td class="border-r border-zinc-200 px-2 p-1">
<div class="flex flex-wrap items-center">
<f:if condition="{row.busIncluded}">
<span class="block p-1"
@@ -103,7 +103,7 @@
</button>
</div>
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
<f:if condition="{row.pseudoPrice}">
<span class="block text-sm line-through">
{row.pseudoPrice} €
@@ -121,7 +121,7 @@
<f:if condition="{row.showBookingButton}">
<f:then>
<button type="button"
class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light ser:text-ser-primary', else: 'text-gray-300')}"
class="flex space-x-1 items-center {f:if(condition: row.available, then: 'text-ep-primary-light ser:text-ser-primary', else: 'text-zinc-300')}"
data-action="product-details#loadPrices"
data-date-uid="{row.dateUid}">
<svg class="w-6 h-6 hidden md:block">
@@ -151,7 +151,7 @@
</tbody>
</table>
<ul class="divide-y divide-gray-200">
<ul class="divide-y divide-zinc-200">
<f:if condition="{hasSurcharge}">
<li class="py-2">
<button type="button"
@@ -18,7 +18,7 @@
</f:section>>
<f:section name="Table">
<table class="w-full mb-4 bg-gray-200 text-sm xl:text-base">
<table class="w-full mb-4 bg-zinc-200 text-sm xl:text-base">
<thead>
<tr>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
@@ -36,14 +36,14 @@
</thead>
<tbody>
<f:for each="{rooms}" as="row" iteration="iteration">
<tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100">
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
<tr class="odd:bg-zinc-50 hover:bg-zinc-100 odd:hover:bg-zinc-100">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
{row.label}
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2 whitespace-nowrap">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 whitespace-nowrap">
ab {row.priceForSelection} €
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
<f:if condition="{row.skipassIncluded}">
<span data-cooltipz-dir="top"
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
@@ -65,8 +65,8 @@
</svg>
</button>
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
<a class="button button--small bg-green-500 border-green-500"
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
<a class="button button--small bg-emerald-500 border-emerald-500"
href="{row.bookingUrl}" target="_blank">
Buchen
</a>
@@ -18,22 +18,22 @@
<f:section name="Table">
<div class="w-full max-w-full overflow-x-scroll md:overflow-x-auto">
<table class="min-w-full border border-gray-200 border-collapse mb-8">
<table class="min-w-full border border-zinc-200 border-collapse mb-8">
<f:for each="{categories}" as="category" key="categoryKey">
<f:if condition="{v:variable.get(name: 'pricetable.{categoryKey}', useRawKeys: 1) -> f:count()} > 0">
<tr class="text-white {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary\', snz: \'bg-snz-primary\', uch: \'bg-uch-primary\'}', key: themekey)}">
<td class="px-2 py-1 font-bold border border-gray-200">
<td class="px-2 py-1 font-bold border border-zinc-200">
Apartments {category}
</td>
<f:for each="{roomTypesLabels}" as="type">
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
{type}
</td>
</f:for>
</tr>
<f:for each="{pricetable.{categoryKey}}" as="row">
<tr>
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
<f:if condition="{row.hotelShortName}">
<f:then>
{row.hotelShortName}
@@ -51,7 +51,7 @@
</f:if>
</td>
<f:for each="{roomTypesPax}" as="type">
<td class="px-2 py-1 border border-gray-200">
<td class="px-2 py-1 border border-zinc-200">
<f:if condition="{row.rooms.{type}.available}">
<f:then>
<a class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}"
@@ -64,7 +64,7 @@
<f:else>
<f:if condition="{row.rooms.{type}.available}">
<f:else>
<span class="line-through text-gray-500">{row.rooms.{type}.price}</span>
<span class="line-through text-zinc-500">{row.rooms.{type}.price}</span>
</f:else>
</f:if>
</f:else>
@@ -20,7 +20,7 @@
</f:else>
</f:if>
<table class="w-full mb-4 bg-gray-200">
<table class="w-full mb-4 bg-zinc-200">
<thead>
<tr>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-left text-sm md:text-base">
@@ -44,9 +44,9 @@
</thead>
<tbody>
<f:for each="{prices}" as="row">
<tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100"
<tr class="odd:bg-zinc-50 hover:bg-zinc-100 odd:hover:bg-zinc-100"
data-pricetable-target="row">
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
<f:if condition="{row.showBookingButton} && {row.available}">
<f:then>
<a class="inline-block text-ep-primary-light text-xs sm:text-sm md:text-base leading-tight"
@@ -68,7 +68,7 @@
</f:else>
</f:if>
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
<div class="flex items-center justify-around space-x-1">
<f:if condition="{row.busIncluded}">
<span data-cooltipz-dir="top"
@@ -93,7 +93,7 @@
</f:if>
</div>
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
<f:if condition="{row.hasOptionalServices} && {row.available}">
<button type="button"
class="text-ep-primary-light text-sm md:text-base text-left leading-none p-1"
@@ -152,7 +152,7 @@
</tbody>
</table>
<ul class="divide-y divide-gray-200 mb-4">
<ul class="divide-y divide-zinc-200 mb-4">
<f:if condition="{hasSurcharge}">
<li class="py-2">
<button type="button"
@@ -205,7 +205,7 @@
<div class="headline--3 headline--underlined">
Inklusivleistungen
</div>
<div class="bg-gray-50 p-4 mb-8 flex items-center">
<div class="bg-zinc-50 p-4 mb-8 flex items-center">
<ul class="list-none m-0 p-0 flex-1">
<f:for each="{servicesIncluded}" as="service">
<li class="flex items-center space-x-2">
@@ -265,7 +265,7 @@
{section.label}
</div>
<f:for each="{section.services}" as="service">
<dl class="flex items-start justify-between p-1 hover:bg-gray-50">
<dl class="flex items-start justify-between p-1 hover:bg-zinc-50">
<dt class="font-normal">
{service.label}:
</dt>
@@ -29,7 +29,7 @@
<f:render partial="City/Details" arguments="{city: city}"/>
<f:if condition="{teasers}">
<a id="teasers" class="anchor"></a>
<div class="bg-gray-50 p-4 mb-4"
<div class="bg-zinc-50 p-4 mb-4"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
@@ -19,7 +19,7 @@
</div>
<f:if condition="{teasers}">
<a class="anchor" id="teasers"></a>
<div class="bg-gray-50 p-4 mb-4"
<div class="bg-zinc-50 p-4 mb-4"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
@@ -30,7 +30,7 @@
{country.description -> f:format.html()}
</div>
<f:if condition="{teasers}">
<div class="bg-gray-50 p-4 mb-4"
<div class="bg-zinc-50 p-4 mb-4"
data-controller="teasergrid"
data-teasergrid-grid-class="grid-cols-2"
data-teasergrid-disabled-value="false">
@@ -11,7 +11,7 @@
<div data-controller="calendar"
data-calendar-uri-value="{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, format: 'html')}"
data-calendar-hotel-uid-value="{product.calendarHotel.uid}">
<select class="w-full border-gray-400 focus:border-gray-400"
<select class="w-full border-zinc-400 focus:border-zinc-400"
data-calendar-target="field"
data-action="calendar#select">
</select>
@@ -19,7 +19,7 @@
data-calendar-target="container"></div>
<div class="absolute top-0 left-0 inset-0 w-full h-full bg-overlay-white"
data-calendar-target="loadingIndicator">
<svg class="w-6 h-6 text-gray-800 absolute top-1/2 left-1/2 transform -translate-xy-1/2">
<svg class="w-6 h-6 text-zinc-800 absolute top-1/2 left-1/2 transform -translate-xy-1/2">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-spinner"></use>
</svg>
</div>
@@ -7,7 +7,7 @@
<f:layout name="Default"/>
<f:section name="Main">
<div class="bg-gray-50 p-4 mb-8">
<div class="bg-zinc-50 p-4 mb-8">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-1">
<f:if condition="{contact.0.image.0}">
@@ -20,7 +20,7 @@
alt="{country.name}" />
</f:if>
</div>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-gray-200" data-rte-content>
<div class="flex-1 py-4 px-2 bg-white border-l border-r border-zinc-200" data-rte-content>
<span class="headline--3 mb-4">
{country.name}
</span>
@@ -45,7 +45,7 @@
<f:render partial="Snowreport" arguments="{snowreport: hotel.region.snowreport}"/>
<f:render partial="Regioninfo" arguments="{region: hotel.region}"/>
</f:if>
<div class="bg-gray-50 p-4">
<div class="bg-zinc-50 p-4">
<p><strong>Lage</strong></p>
<div>
<div class="w-full aspect-w-16 aspect-h-9"
@@ -221,7 +221,7 @@
</div>
</div>
</f:if>
<div class="bg-gray-50 p-4 mb-4">
<div class="bg-zinc-50 p-4 mb-4">
<p class="font-bold mb-2">
Lage
</p>
@@ -236,7 +236,7 @@
<f:render partial="RegionMaps" arguments="{region: product.region}"/>
<f:render partial="RegionAward" arguments="{region: product.region}"/>
<f:if condition="{product.banner}">
<div class="bg-gray-50 p-4 mb-4">
<div class="bg-zinc-50 p-4 mb-4">
<f:link.typolink parameter="{product.banner.originalResource.link}"
title="{product.banner.title}">
<f:image src="{product.banner.uid}" treatIdAsReference="1"
@@ -303,14 +303,14 @@
Preisberechnung
</button>
</f:if>
<div class="bg-gray-50 p-4 relative mb-8">
<div class="bg-zinc-50 p-4 relative mb-8">
<span class="block font-bold mb-2">
Belegungskalender
</span>
<div data-controller="calendar"
data-calendar-uri-value="{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, format: 'html')}"
data-calendar-hotel-uid-value="{product.calendarHotel.uid}">
<select class="w-full border-gray-400 focus:border-gray-400"
<select class="w-full border-zinc-400 focus:border-zinc-400"
data-calendar-target="field"
data-action="calendar#select">
</select>
@@ -367,7 +367,7 @@
<f:section name="SidebarGallery">
<f:if condition="{product.images}">
<div class="bg-gray-50 p-4 mb-4"
<div class="bg-zinc-50 p-4 mb-4"
data-controller="lightbox">
<p class="font-bold mb-2">
Galerie
@@ -44,7 +44,7 @@
</div>
</f:then>
<f:else>
<div class="flex items-center space-x-4 text-lg p-4 mb-4 bg-gray-50">
<div class="flex items-center space-x-4 text-lg p-4 mb-4 bg-zinc-50">
<svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-emoji-sad"></use>
</svg>
@@ -54,7 +54,7 @@
</svg>
<div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
data-collapse-target="container">
<div class="flex justify-between divide-x divide-gray-200">
<div class="flex justify-between divide-x divide-zinc-200">
<div class="pr-2">
<input type="hidden"
data-datepicker-target="field">
@@ -8,7 +8,7 @@
<f:section name="Main">
<ep:container data="{data}">
<div class="w-full max-w-full overflow-x-scroll md:overflow-x-auto">
<table class="w-full mb-4 bg-gray-200">
<table class="w-full mb-4 bg-zinc-200">
<thead>
<tr>
<th class="border-r border-overlay-white-50 px-2 py-1 md:p-2 text-sm md:text-base">
@@ -33,8 +33,8 @@
</thead>
<tbody>
<f:for each="{list}" as="snowreport">
<tr class="odd:bg-gray-50 hover:bg-gray-100 odd:hover:bg-gray-100">
<td class="border-r border-gray-200 px-2 py-1 md:p-2">
<tr class="odd:bg-zinc-50 hover:bg-zinc-100 odd:hover:bg-zinc-100">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2">
<f:link.typolink parameter="{snowreport.regionDetailPage}"
title="{snowreport.regionName}"
class="text-ep-primary">
@@ -49,22 +49,22 @@
</td>
<f:if condition="{snowreport.inSeason}">
<f:then>
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
{snowreport.snow_level_mountain -> v:or(alternative: '-')}/{snowreport.snow_level_valley -> v:or(alternative: '-')} cm
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
{snowreport.snow_quality}
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
<f:if condition="{snowreport.lifts_opened} > 0">
<f:then>{snowreport.lifts_opened}/{snowreport.lifts_total}</f:then>
<f:else>k. A.</f:else>
</f:if>
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
{f:if(condition: snowreport.last_snowfall, then: '{snowreport.last_snowfall -> f:format.date(format: \'%d.%m.%Y\')}', else: '-')}
</td>
<td class="border-r border-gray-200 px-2 py-1 md:p-2 text-center">
<td class="border-r border-zinc-200 px-2 py-1 md:p-2 text-center">
{snowreport.last_update -> f:format.date(format: '%d.%m.%Y')}
</td>
</f:then>
@@ -36,7 +36,7 @@
alt="{member.name}"
title="{member.name}" />
</f:if>
<div class="text-center text-gray-800 pt-2">
<div class="text-center text-zinc-800 pt-2">
<span class="block font-bold text-xl">
{member.name}
</span>
+35 -41
View File
@@ -2,38 +2,36 @@ const plugin = require('tailwindcss/plugin')
const tinycolor = require('tinycolor2')
module.exports = {
purge: {
content: [
'./public/typo3conf/ext/ep_theme/Configuration/RTE/*.yaml',
'./public/typo3conf/ext/ep_theme/Configuration/TypoScript/**/*.typoscript',
'./public/typo3conf/ext/ep_theme/Resources/Private/Layouts/**/*.html',
'./public/typo3conf/ext/ep_theme/Resources/Private/Partials/**/*.html',
'./public/typo3conf/ext/ep_theme/Resources/Private/Templates/**/*.html',
'./public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/**/*.{js,vue}',
'./public/typo3conf/ext/ep_theme/Classes/ViewHelpers/**/*.php',
],
safelist: [
'pt-8', 'pt-16', 'pb-8', 'pb-16',
'bg-red-600',
'bg-header-season-w',
'bg-header-season-s',
'bg-concept-bdg', 'bg-concept-bdg-overlay',
'bg-concept-skr', 'bg-concept-skr-overlay',
'bg-concept-evt', 'bg-concept-evt-overlay',
'bg-concept-fam', 'bg-concept-fam-overlay',
'bg-concept-grp', 'bg-concept-grp-overlay',
'bg-concept-prg', 'bg-concept-prg-overlay',
'bg-concept-ind', 'bg-concept-ind-overlay',
'bg-concept-wkd', 'bg-concept-wkd-overlay',
'bg-concept-kt', 'bg-concept-kt-overlay',
'bg-concept-spz', 'bg-concept-spz-overlay',
'bg-concept-epe', 'bg-concept-epe-overlay',
'bg-concept-sfl', 'bg-concept-sfl-overlay',
/^flatpickr-.*/,
/^leaflet-.*/,
/^availability-.*/,
],
},
content: [
'./public/typo3conf/ext/ep_theme/Configuration/RTE/*.yaml',
'./public/typo3conf/ext/ep_theme/Configuration/TypoScript/**/*.typoscript',
'./public/typo3conf/ext/ep_theme/Resources/Private/Layouts/**/*.html',
'./public/typo3conf/ext/ep_theme/Resources/Private/Partials/**/*.html',
'./public/typo3conf/ext/ep_theme/Resources/Private/Templates/**/*.html',
'./public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/**/*.{js,vue}',
'./public/typo3conf/ext/ep_theme/Classes/ViewHelpers/**/*.php',
],
safelist: [
'pt-8', 'pt-16', 'pb-8', 'pb-16',
'bg-red-600',
'bg-header-season-w',
'bg-header-season-s',
'bg-concept-bdg', 'bg-concept-bdg-overlay',
'bg-concept-skr', 'bg-concept-skr-overlay',
'bg-concept-evt', 'bg-concept-evt-overlay',
'bg-concept-fam', 'bg-concept-fam-overlay',
'bg-concept-grp', 'bg-concept-grp-overlay',
'bg-concept-prg', 'bg-concept-prg-overlay',
'bg-concept-ind', 'bg-concept-ind-overlay',
'bg-concept-wkd', 'bg-concept-wkd-overlay',
'bg-concept-kt', 'bg-concept-kt-overlay',
'bg-concept-spz', 'bg-concept-spz-overlay',
'bg-concept-epe', 'bg-concept-epe-overlay',
'bg-concept-sfl', 'bg-concept-sfl-overlay',
'flatpickr-input', 'flatpickr-calendar', 'flatpickr-day', 'flatpickr-day.selected',
'availability-full-to-none', 'availability-full-to-partial', 'availability-none-to-full',
'availability-partial-to-full', 'availability-none-to-partial', 'availability-partial-to-none',
],
theme: {
container: {
center: true,
@@ -150,20 +148,16 @@ module.exports = {
},
variants: {
extend: {
backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'ser', 'ser-hover', 'ser-group-hover', 'even', 'odd' ],
backgroundColor: [ 'sbw', 'sbw-hover', 'sbw-group-hover', 'snz', 'snz-hover', 'snz-group-hover', 'uch', 'uch-hover', 'uch-group-hover', 'ser', 'ser-hover', 'ser-group-hover' ],
backgroundImage: [ 'ser' ],
borderWidth: [ 'even', 'odd', 'first', 'last' ],
textColor: [ 'sbw', 'sbw-hover', 'snz', 'snz-hover', 'uch', 'uch-hover', 'ser', 'ser-hover' ],
borderColor: [ 'sbw','snz', 'uch', 'ser' ],
display: [ 'group-hover', 'reduced' ],
visibility: [ 'group-hover' ],
opacity: [ 'group-hover' ],
rotate: [ 'group-hover' ],
display: [ 'reduced' ],
flex: [ 'reduced' ],
flexDirection: [ 'even', 'odd', 'reduced' ],
flexDirection: [ 'reduced' ],
alignItems: [ 'reduced' ],
padding: [ 'even', 'odd', 'first', 'last', 'reduced' ],
margin: [ 'even', 'odd', 'first', 'last', 'reduced' ],
padding: [ 'reduced' ],
margin: [ 'reduced' ],
maxWidth: [ 'reduced' ],
},
},