Add dedicated button background class to simplify theming

This commit is contained in:
Björn Fromme
2022-06-07 15:14:35 +02:00
parent 2f766a3ba9
commit 48b6f1a9db
50 changed files with 101 additions and 503 deletions
@@ -10,8 +10,8 @@ editor:
- "EXT:ep_theme/Resources/Public/css/rte.css?v=2020.02-01" - "EXT:ep_theme/Resources/Public/css/rte.css?v=2020.02-01"
stylesSet: stylesSet:
- { name: "Button", element: "a", attributes: { 'class': 'button' } } - { name: "Button", element: "a", attributes: { 'class': 'button bg-button' } }
- { name: "Button (volle Breite)", element: "a", attributes: { 'class': 'button button--full' } } - { name: "Button (volle Breite)", element: "a", attributes: { 'class': 'button bg-button button--full' } }
toolbarGroups: toolbarGroups:
- { name: styles, groups: [ format, styles ] } - { name: styles, groups: [ format, styles ] }
@@ -2,12 +2,23 @@
@apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer; @apply inline-flex items-center justify-center space-x-2 px-4 py-2 md:px-8 cursor-pointer;
@apply uppercase leading-none text-center; @apply uppercase leading-none text-center;
@apply transition-colors outline-none focus:outline-none; @apply transition-colors outline-none focus:outline-none;
&--small {
@apply px-2 py-1 md:px-4 text-xs sm:text-sm;
}
&--full {
@apply block w-full;
}
}
.bg-button {
@apply bg-ep-primary-light text-white; @apply bg-ep-primary-light text-white;
@apply sbw:bg-sbw-secondary; @apply sbw:bg-sbw-secondary;
@apply snz:bg-snz-secondary; @apply snz:bg-snz-secondary;
@apply uch:bg-uch-secondary; @apply uch:bg-uch-secondary;
@apply ser:bg-ser-secondary; @apply ser:bg-ser-secondary;
@apply hover:bg-ep-primary-dark group-hover:bg-ep-primary-dark; @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 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 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 uch:hover:bg-uch-primary-dark uch:group-hover:bg-uch-primary-dark;
@@ -19,13 +30,18 @@
@apply sbw:bg-sbw-primary; @apply sbw:bg-sbw-primary;
@apply snz:bg-snz-primary; @apply snz:bg-snz-primary;
@apply uch:bg-uch-primary; @apply uch:bg-uch-primary;
@apply ser:bg-ser-primary; @apply ser:bg-ser-secondary;
} }
&--muted { &--muted {
@apply bg-gray-300 hover:bg-gray-300; @apply bg-gray-300 hover:bg-gray-300;
} }
&--dark {
@apply bg-ep-primary-dark;
@apply ser:bg-ser-primary;
}
&--light { &--light {
@apply bg-white border-2; @apply bg-white border-2;
@apply font-bold; @apply font-bold;
@@ -45,12 +61,4 @@
@apply ser:bg-white ser:border-ser-secondary ser:text-ser-secondary; @apply ser:bg-white ser:border-ser-secondary ser:text-ser-secondary;
} }
} }
&--small {
@apply px-2 py-1 md:px-4 text-xs sm:text-sm;
}
&--full {
@apply block w-full;
}
} }
@@ -41,7 +41,7 @@
{city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()} {city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div> </div>
<button type="button" <button type="button"
class="button w-full"> class="button bg-button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')} {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button> </button>
</a> </a>
@@ -8,7 +8,7 @@
</p> </p>
<p> <p>
<button type="button" <button type="button"
class="button button--small" class="button bg-button button--small"
data-action="contactform#reset"> data-action="contactform#reset">
Neue Anfrage Neue Anfrage
</button> </button>
@@ -1,91 +0,0 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:form id="contactform" object="{contactForm}" name="contactForm"
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
pageUid="{settings.defaultAjaxUid}"
data="{'contactform-target': 'form', 'action': 'contactform#submit'}">
<f:form.hidden property="pageUrl"/>
<label class="block mb-4 hidden">
<span class="text-gray-700">Betreff*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="subject"/>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name">
<span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 ring-0 focus:ring-0 mt-1 w-full" property="name"/>
<div class="text-red-500 mt-2" x-show="formErrors.name" x-html="formErrors.name"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName">
<span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="firstName"/>
<div class="text-red-500 mt-2" x-show="formErrors.firstName" x-html="formErrors.firstName"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
<span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
<f:form.select class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
<div class="text-red-500 mt-2" x-show="formErrors.gender" x-html="formErrors.gender"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.company">
<span x-bind:class="formErrors.company ? 'text-red-500' : 'text-gray-700'">Firma/Verein*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="company"/>
<div class="text-red-500 mt-2" x-show="formErrors.company" x-html="formErrors.company"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email">
<span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="email"/>
<div class="text-red-500 mt-2" x-show="formErrors.email" x-html="formErrors.email"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone">
<span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="phone"/>
<div class="text-red-500 mt-2" x-show="formErrors.phone" x-html="formErrors.phone"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.period">
<span x-bind:class="formErrors.period ? 'text-red-500' : 'text-gray-700'">Zeitraum</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="period" placeholder="tt.mm.jjjj - tt.mm.jjjj"/>
<div class="text-red-500 mt-2" x-show="formErrors.period" x-html="formErrors.period"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.duration">
<span x-bind:class="formErrors.duration ? 'text-red-500' : 'text-gray-700'">Aufenthaltsdauer</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="duration" placeholder="Tage inkl. An- & Abreisetag"/>
<div class="text-red-500 mt-2" x-show="formErrors.duration" x-html="formErrors.duration"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.pax">
<span x-bind:class="formErrors.pax ? 'text-red-500' : 'text-gray-700'">Anzahl der Personen</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="pax" placeholder="ab 25 Personen"/>
<div class="text-red-500 mt-2" x-show="formErrors.pax" x-html="formErrors.pax"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.age">
<span x-bind:class="formErrors.age ? 'text-red-500' : 'text-gray-700'">Durchschnittsalter</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="age"/>
<div class="text-red-500 mt-2" x-show="formErrors.age" x-html="formErrors.age"></div>
</label>
<div class="mb-4">
<label class="inline-flex items-center">
<f:form.checkbox class="border-gray-400 focus:border-gray-800 text-ep-secondary sbw:text-sbw-secondary" property="children" value="Ja"/>
<span class="ml-2">Kinder (ja/nein)</span>
</label>
</div>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry">
<span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
<f:form.textarea class="border-gray-400 focus:border-gray-800 mt-1 w-full"
property="inquiry"
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
cols="30" rows="5"/>
<div class="text-red-500 mt-2" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div>
</label>
<div class="mb-4">
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
title="Datenschutzerklärung"
target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
</div>
<div class="mb-4">
<button type="submit"
class="button button-warning">
Jetzt anfragen
</button>
</div>
</f:form>
</html>
@@ -1,60 +0,0 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:form id="contactform" object="{contactForm}" name="contactForm"
action="processForm" controller="AjaxForm" pluginName="Ajax" pageType="1803"
pageUid="{settings.defaultAjaxUid}"
data="{'contactform-target': 'form', 'action': 'contactform#submit'}">
<f:form.hidden property="pageUrl"/>
<label class="block mb-4 hidden">
<span class="text-gray-700">Betreff*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="subject"/>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.gender">
<span x-bind:class="formErrors.gender ? 'text-red-500' : 'text-gray-700'">Gender*</span>
<f:form.select class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="gender" options="{M: 'M', W: 'W', D: 'D'}"/>
<div class="text-red-500" x-show="formErrors.gender" x-html="formErrors.gender"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.name">
<span x-bind:class="formErrors.name ? 'text-red-500' : 'text-gray-700'">Name*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="name"/>
<div class="text-red-500" x-show="formErrors.name" x-html="formErrors.name"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.firstName">
<span x-bind:class="formErrors.firstName ? 'text-red-500' : 'text-gray-700'">Vorname*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="firstName"/>
<div class="text-red-500" x-show="formErrors.firstName" x-html="formErrors.firstName"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.email">
<span x-bind:class="formErrors.email ? 'text-red-500' : 'text-gray-700'">E-Mail*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="email"/>
<div class="text-red-500" x-show="formErrors.email" x-html="formErrors.email"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.phone">
<span x-bind:class="formErrors.phone ? 'text-red-500' : 'text-gray-700'">Telefon/Fax*</span>
<f:form.textfield class="border-gray-400 focus:border-gray-800 mt-1 w-full" property="phone"/>
<div class="text-red-500" x-show="formErrors.phone" x-html="formErrors.phone"></div>
</label>
<label class="block mb-4" x-bind:class="'has-validation-error' && formErrors.inquiry">
<span x-bind:class="formErrors.inquiry ? 'text-red-500' : 'text-gray-700'">(Zusatz-) Wünsche</span>
<f:form.textarea class="border-gray-400 focus:border-gray-800 mt-1 w-full"
property="inquiry"
placeholder="z. B. Reiseleiter, Halbpension, Bus Anreise, Programm"
cols="30" rows="5"/>
<div class="text-red-500" x-show="formErrors.inquiry" x-html="formErrors.inquiry"></div>
</label>
<div class="mb-4">
Ich habe die <f:link.typolink parameter="{settings.dataProtectionPageUid}"
title="Datenschutzerklärung"
target="_blank">Datenschutzbestimmungen</f:link.typolink> gelesen und akzeptiert.
</div>
<div class="mb-4">
<button type="submit"
class="button button-warning">
Jetzt anfragen
</button>
</div>
</f:form>
</html>
@@ -9,7 +9,7 @@
</p> </p>
<p> <p>
<button type="button" <button type="button"
class="button button--small" class="button bg-button button--small"
data-action="contactform#reset"> data-action="contactform#reset">
Neue Anfrage Neue Anfrage
</button> </button>
@@ -50,7 +50,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
<f:for each="{data.flexForm.buttons}" as="button"> <f:for each="{data.flexForm.buttons}" as="button">
<f:link.typolink parameter="{button.container.link}" <f:link.typolink parameter="{button.container.link}"
class="button shadow-lg"> class="button bg-button shadow-lg">
{button.container.label} {button.container.label}
</f:link.typolink> </f:link.typolink>
</f:for> </f:for>
@@ -28,7 +28,7 @@
<div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4"> <div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4">
<f:for each="{data.flexForm.buttons}" as="button" iteration="iteration"> <f:for each="{data.flexForm.buttons}" as="button" iteration="iteration">
<f:if condition="{iteration.cycle} <= 3"> <f:if condition="{iteration.cycle} <= 3">
<f:link.typolink parameter="{button.container.link}" class="button shadow-lg"> <f:link.typolink parameter="{button.container.link}" class="button bg-button shadow-lg">
{button.container.label} {button.container.label}
</f:link.typolink> </f:link.typolink>
</f:if> </f:if>
@@ -51,7 +51,7 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
<f:for each="{data.flexForm.buttons}" as="button"> <f:for each="{data.flexForm.buttons}" as="button">
<f:link.typolink parameter="{button.container.link}" <f:link.typolink parameter="{button.container.link}"
class="button shadow-lg"> class="button bg-button shadow-lg">
{button.container.label} {button.container.label}
</f:link.typolink> </f:link.typolink>
</f:for> </f:for>
@@ -28,7 +28,7 @@
<div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4"> <div class="flex flex-col space-y-4 md:flex-row md:items-center md:space-y-0 md:space-x-4">
<f:for each="{data.flexForm.buttons}" as="button" iteration="iteration"> <f:for each="{data.flexForm.buttons}" as="button" iteration="iteration">
<f:if condition="{iteration.cycle} <= 3"> <f:if condition="{iteration.cycle} <= 3">
<f:link.typolink parameter="{button.container.link}" class="button shadow-lg"> <f:link.typolink parameter="{button.container.link}" class="button bg-button shadow-lg">
{button.container.label} {button.container.label}
</f:link.typolink> </f:link.typolink>
</f:if> </f:if>
@@ -21,7 +21,7 @@
</ul> </ul>
</div> </div>
<div class="w-full lg:w-1/3 lg:px-4"> <div class="w-full lg:w-1/3 lg:px-4">
<a class="button w-full" <a class="button bg-button w-full"
href="{f:uri.typolink(parameter: buttonLink)}" href="{f:uri.typolink(parameter: buttonLink)}"
title="{buttonLabel -> f:format.raw()}"> title="{buttonLabel -> f:format.raw()}">
{buttonLabel -> f:format.raw()} {buttonLabel -> f:format.raw()}
@@ -3,14 +3,14 @@
<div class="button-group" role="group"> <div class="button-group" role="group">
<f:if condition="{form.previousPage}"> <f:if condition="{form.previousPage}">
<f:form.hidden property="__currentPage" value="{form.previousPage.index}" /> <f:form.hidden property="__currentPage" value="{form.previousPage.index}" />
<f:form.button type="button" onclick="document.forms['{form.formDefinition.identifier}'].submit();" class="button" formnovalidate="formnovalidate">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'previousButtonLabel')}</f:form.button> <f:form.button type="button" onclick="document.forms['{form.formDefinition.identifier}'].submit();" class="button bg-button" formnovalidate="formnovalidate">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'previousButtonLabel')}</f:form.button>
</f:if> </f:if>
<f:if condition="{form.nextPage}"> <f:if condition="{form.nextPage}">
<f:then> <f:then>
<f:form.button property="__currentPage" value="{form.nextPage.index}" class="button">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'nextButtonLabel')}</f:form.button> <f:form.button property="__currentPage" value="{form.nextPage.index}" class="button bg-button">{formvh:translateElementProperty(element: form.currentPage, renderingOptionProperty: 'nextButtonLabel')}</f:form.button>
</f:then> </f:then>
<f:else> <f:else>
<f:form.button property="__currentPage" value="{form.pages -> f:count()}" class="button"> <f:form.button property="__currentPage" value="{form.pages -> f:count()}" class="button bg-button">
{formvh:translateElementProperty(element: form, renderingOptionProperty: 'submitButtonLabel')} {formvh:translateElementProperty(element: form, renderingOptionProperty: 'submitButtonLabel')}
</f:form.button> </f:form.button>
</f:else> </f:else>
@@ -34,12 +34,12 @@
</f:if> </f:if>
<f:if condition="{slide.button}"> <f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}" <f:link.typolink parameter="{slide.page_uid}"
class="button hidden md:inline-block"> class="button bg-button hidden md:inline-block">
{slide.button} {slide.button}
</f:link.typolink> </f:link.typolink>
</f:if> </f:if>
<button type="button" <button type="button"
class="button inline-block md:hidden" class="button bg-button inline-block md:hidden"
data-controller="overlay-toggle" data-controller="overlay-toggle"
data-overlay-toggle-id-value="mobile-search" data-overlay-toggle-id-value="mobile-search"
data-action="overlay-toggle#invokeToggle"> data-action="overlay-toggle#invokeToggle">
@@ -28,7 +28,7 @@
</span> </span>
<f:if condition="{slide.button}"> <f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}" <f:link.typolink parameter="{slide.page_uid}"
class="inline-block button"> class="button bg-button inline-block">
{slide.button} {slide.button}
</f:link.typolink> </f:link.typolink>
</f:if> </f:if>
@@ -17,7 +17,7 @@
{hotel.description -> f:format.html()} {hotel.description -> f:format.html()}
<f:if condition="{hotel.groupsPriceConfigs}"> <f:if condition="{hotel.groupsPriceConfigs}">
<f:else> <f:else>
<f:link.typolink class="button" parameter="{settings.groupsContactFormPageUid}" additionalParams="&ref={currentPageUid}"> <f:link.typolink class="button bg-button" parameter="{settings.groupsContactFormPageUid}" additionalParams="&ref={currentPageUid}">
<f:translate key="tx_eptheme.label.to_inquiry_form" extensionName="ep_theme"/> <f:translate key="tx_eptheme.label.to_inquiry_form" extensionName="ep_theme"/>
</f:link.typolink> </f:link.typolink>
</f:else> </f:else>
@@ -69,7 +69,7 @@
<f:if condition="{settings.hideMoreLink}"> <f:if condition="{settings.hideMoreLink}">
<f:else> <f:else>
<div class="text-right mt-4"> <div class="text-right mt-4">
<f:link.typolink class="button" <f:link.typolink class="button bg-button"
parameter="{settings.defaultSearchPageUid}" parameter="{settings.defaultSearchPageUid}"
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"> additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
Alle anzeigen Alle anzeigen
@@ -42,7 +42,7 @@
</f:if> </f:if>
</div> </div>
<button type="button" <button type="button"
class="button w-full"> class="button bg-button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')} {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button> </button>
</a> </a>
@@ -1,32 +0,0 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<f:link.typolink class="teaserbox teaserbox--hotel" parameter="{hotel.detailPage}" title="{hotel.name}">
<div class="teaserbox__image">
<img class="teaserbox__flag"
src="{hotel.country.flag}"
alt="{hotel.country.name}"/>
<f:render partial="TeaserImage" arguments="{image: hotel.images.original.0}"/>
</div>
<div class="teaserbox__main">
<span class="headline headline--3 headline--teaser">{hotel.name -> f:format.nl2br()}</span>
<f:if condition="{hotel.category}">
<span class="searchresult-item__category"><strong>Kategorie</strong> {hotel.category}</span>
</f:if>
<hr>
{hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
<f:if condition="{hotel.available} != -1">
<hr>
<span class="teaserbox__price"><strong>{f:if(condition: '{hotel.available} > 0', then: 'ab {hotel.minPrice} €', else: 'ausgebucht')}</strong></span>
</f:if>
</div>
<button type="button"
class="button button--full teaserbox__button">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button>
</f:link.typolink>
</f:section>
</html>
@@ -1,30 +0,0 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<f:link.typolink class="teaserbox teaserbox--hotel" parameter="{hotel.detailPage}" title="{hotel.name}">
<div class="teaserbox__image">
<img class="teaserbox__flag"
src="{hotel.country.flag}"
alt="{hotel.country.name}"/>
<f:render partial="TeaserImage" arguments="{image: hotel.images.original.0}"/>
</div>
<div class="teaserbox__main">
<span class="headline headline--3 headline--teaser">{hotel.name -> f:format.nl2br()}</span>
<f:if condition="{hotel.category}">
<span class="searchresult-item__category"><strong>Kategorie</strong> {hotel.category}</span>
</f:if>
<f:if condition="{hotel.available} != -1">
<hr>
{hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</f:if>
</div>
<button type="button"
class="button button--full teaserbox__button">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button>
</f:link.typolink>
</f:section>
</html>
@@ -1,173 +0,0 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:layout name="Default"/>
<f:section name="Teaser">
<div class="teaserbox teaserbox--landscape teaserbox--searchresult searchresult-item">
<div class="teaserbox__image">
<img class="teaserbox__flag"
src="{item.country.flag}"
alt="{item.country.name}"/>
<f:link.action action="detail" controller="Product"
pageUid="{detailPage}"
arguments="{product: product.uid, hotel: item.hotel.uid}"
additionalParams="{ref: '{f:uri.page()}'}"
>
<f:render section="Image" arguments="{_all}"/>
</f:link.action>
<f:if condition="{product.concept.code}">
<div class="concept-badge concept-badge--{product.concept.code}">{product.concept.name}</div>
</f:if>
</div>
<div class="teaserbox__main">
<div class="teaserbox__header">
<p class="subline searchresult-item__headline">
{product.region.name}<f:if condition="{product.concept.code} == 'evt'"><strong> | {product.name}</strong></f:if>
</p>
<p class="searchresult-item__subline">{item.hotel.name -> f:format.nl2br()}</p>
<f:if condition="{item.hotel.category}">
<span class="searchresult-item__category"><strong>Kategorie</strong> {item.hotel.category}</span>
</f:if>
</div>
<f:if condition="{item.available} > 0">
<f:then>
<ul class="check-list searchresult-item__checklist">
<f:if condition="{item.hotel.fact}">
<li>{item.hotel.fact}</li>
</f:if>
<f:if condition="{item.product.fact}">
<li>{item.product.fact}</li>
</f:if>
<f:if condition="{product.region.feature}">
<f:then>
<li>{product.region.feature}</li>
</f:then>
<f:else>
<f:if condition="{item.region.fact}">
<li>{item.region.fact}</li>
</f:if>
</f:else>
</f:if>
</ul>
<ul class="check-list check-list--inverted searchresult-item__featurelist">
<li>Skipass</li>
<f:if condition="{item.board}">
<li>{item.board}</li>
</f:if>
<f:if condition="{product.feature}">
<li>{product.feature}</li>
</f:if>
</ul>
</f:then>
<f:else>
{item.hotel.teaser -> f:format.html()}
</f:else>
</f:if>
</div>
<div class="teaserbox__aside">
<f:if condition="{item.available} > 0">
<f:then>
<div class="teaserbox__aside__top">
<span class="searchresult-item__label">{f:if(condition: '{item.dates -> f:count()} > 1', then: 'Zeitraum', else: 'Termin')}</span>
<span class="searchresult-item__daterange">{ep:dateRange(dateFrom: item.minDateStart, dateTo: item.maxDateEnd, includeLabel: 0)}</span>
<f:if condition="{item.dates -> f:count()} > 1">
<f:link.action action="detail" controller="Product"
pageUid="{detailPage}"
arguments="{product: product.uid, hotel: item.hotel.uid}"
additionalParams="{ref: '{f:uri.page()}'}"
additionalAttributes="{rel: 'nofollow'}"
>
<span class="searchresult-item__daterange">
<i class="fa fa-arrow-circle-right"></i> {item.dates -> f:count()} Termin{f:if(condition: '{item.dates -> f:count()} > 1', then: 'e')}
</span>
</f:link.action>
</f:if>
<hr>
<span class="searchresult-item__label">{ep:nightsOptions(options: item.nights)}</span>
</div>
<div class="teaserbox__aside__bottom">
<span class="searchresult-item__price">ab {item.minPrice} €</span>
<f:link.action action="detail" controller="Product"
pageUid="{detailPage}"
arguments="{product: product.uid, hotel: item.hotel.uid}"
additionalParams="{ref: '{f:uri.page()}'}"
additionalAttributes="{rel: 'nofollow'}"
class="button button--full searchresult-item__button"
>
Details &amp; Buchen
</f:link.action>
</div>
</f:then>
<f:else>
<div class="teaserbox__aside__top">&nbsp;</div>
<div class="teaserbox__aside__bottom">
<span class="searchresult-item__price">ausgebucht</span>
<f:link.action action="detail" controller="Product"
pageUid="{detailPage}"
arguments="{product: product.uid, hotel: item.hotel.uid}"
additionalParams="{ref: '{f:uri.page()}'}"
additionalAttributes="{rel: 'nofollow'}"
class="button button--full searchresult-item__button"
>
Details
</f:link.action>
</div>
</f:else>
</f:if>
</div>
<button type="button"
class="teaserbox-watchlist"
data-controller="watchlist-toggle"
data-watchlist-toggle-key-value="{item.key}"
data-action="watchlist-toggle#toggle">
<svg class="w-5 h-5 text-ep-secondary" data-watchlist-toggle-target="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
</button>
</div>
</f:section>
<f:section name="Image">
<f:if condition="{item.hotel.images.original}">
<f:then>
<f:alias map="{image: item.hotel.images.original.0}">
<picture class="searchresult-item__image">
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
image: image, width: '260', height: '200c-100'
)} 260w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
image: image, width: '280', height: '220c-100'
)} 280w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
image: image, width: '220', height: '130c-100'
)} 220w"/>
<img class="scale lazyload" data-src="{f:uri.image(
image: image, width: '260', height: '200c-100'
)}" title="{image.title}" alt="{image.alternative}">
</picture>
</f:alias>
</f:then>
<f:else>
<picture class="searchresult-item__image">
<source media="(min-width: 1201px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '260', height: '200c-100'
)} 260w"/>
<source media="(max-width: 1200px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '280', height: '220c-100'
)} 280w"/>
<source media="(max-width: 768px)" data-srcset="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '220', height: '130c-100'
)} 220w"/>
<img class="scale lazyload" data-src="{f:uri.image(
src: 'EXT:ep_theme/Resources/Public/images/header-winter.jpg',
width: '260', height: '200c-100'
)}" title="" alt="">
</picture>
</f:else>
</f:if>
</f:section>
</html>
@@ -1,24 +0,0 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<ce:menu.section column="4" as="contentElements" type="header">
<ul class="list-unstyled">
<f:if condition="{contentElements}">
<f:for each="{contentElements}" as="contentElement">
<li>
<button type="button"
class="button w-full"
data-controller="scroll-to"
data-scroll-to-target-value="c{contentElement.uid}"
data-action="scroll-to#scroll">
{contentElement.header}
</button>
</li>
</f:for>
</f:if>
</ul>
</ce:menu.section>
</html>
@@ -50,7 +50,7 @@
</p> </p>
<div class="grid grid-cols-3 gap-4"> <div class="grid grid-cols-3 gap-4">
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" <a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
class="button button--primary flex items-center space-x-2" class="button bg-button flex items-center space-x-2"
title="Anrufen" title="Anrufen"
rel="nofollow"> rel="nofollow">
{ep:icon(icon: 'phone', class: 'w-6 h-6 text-white')} {ep:icon(icon: 'phone', class: 'w-6 h-6 text-white')}
@@ -59,7 +59,7 @@
</span> </span>
</a> </a>
<a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}" <a href="https://api.whatsapp.com/send?phone={settings.whatsAppNumberLink}"
class="button button--primary flex items-center space-x-2" class="button bg-button flex items-center space-x-2"
title="WhatsApp" title="WhatsApp"
rel="nofollow" rel="nofollow"
target="_blank"> target="_blank">
@@ -70,7 +70,7 @@
</a> </a>
<f:if condition="{settings.faqPageUid}"> <f:if condition="{settings.faqPageUid}">
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}" <a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
class="button button--primary flex items-center space-x-2" class="button bg-button flex items-center space-x-2"
title="FAQ"> title="FAQ">
{ep:icon(icon: 'faq', class: 'w-6 h-6 text-white')} {ep:icon(icon: 'faq', class: 'w-6 h-6 text-white')}
<span class="hidden sm:block"> <span class="hidden sm:block">
@@ -59,7 +59,7 @@
</f:if> </f:if>
</div> </div>
</n:removeMediaTags> </n:removeMediaTags>
<n:link newsItem="{newsItem}" settings="{settings}" class="button button--default button--small" title="{newsItem.title}"> <n:link newsItem="{newsItem}" settings="{settings}" class="button bg-button button--small" title="{newsItem.title}">
<f:translate key="more-link"/> <f:translate key="more-link"/>
</n:link> </n:link>
</div> </div>
@@ -90,7 +90,7 @@
<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-gray-200">
<f:if condition="{row.available}"> <f:if condition="{row.available}">
<f:then> <f:then>
<a class="button button--small w-full" <a class="button bg-button button--small w-full"
href="{row.bookingUrl}" href="{row.bookingUrl}"
title="{row.roomName} buchen" title="{row.roomName} buchen"
target="_blank"> target="_blank">
@@ -7,7 +7,7 @@
</div> </div>
<f:if condition="{product.calendarHotel} && {hotel.groupsPriceConfigs}"> <f:if condition="{product.calendarHotel} && {hotel.groupsPriceConfigs}">
<button type="button" <button type="button"
class="button w-full" class="button bg-button w-full"
data-controller="lightbox" data-controller="lightbox"
data-lightbox-height-value="85vh" data-lightbox-height-value="85vh"
data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}" data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}"
@@ -51,7 +51,7 @@
</f:if> </f:if>
</div> </div>
<f:if condition="{referringUrl}"> <f:if condition="{referringUrl}">
<a href="{referringUrl}" class="button button--small mt-8"> <a href="{referringUrl}" class="button bg-button button--small mt-8">
{ep:icon(icon: 'chevron-left', class: 'w-4 h-4 text-white')} {ep:icon(icon: 'chevron-left', class: 'w-4 h-4 text-white')}
<span>{backlinkLabel}</span> <span>{backlinkLabel}</span>
</a> </a>
@@ -93,7 +93,7 @@
</f:if> </f:if>
</ul> </ul>
<div class="pt-8"> <div class="pt-8">
<div class="bg-ep-primary-light ser:bg-ser-secondary text-white font-bold px-4 py-1 group-hover:bg-ep-secondary ser:group-hover:bg-ser-primary transition-colors"> <div class="bg-button text-white font-bold px-4 py-1 group-hover:bg-button transition-colors">
<div class="lg:inline-block"> <div class="lg:inline-block">
ab <span class="product-teaser__price mx-1">{minPrice} €</span> ab <span class="product-teaser__price mx-1">{minPrice} €</span>
</div> </div>
@@ -96,7 +96,7 @@
<f:if condition="{settings.hideMoreLink}"> <f:if condition="{settings.hideMoreLink}">
<f:else> <f:else>
<div class="text-right mt-4"> <div class="text-right mt-4">
<f:link.typolink class="button" <f:link.typolink class="button bg-button"
parameter="{settings.defaultSearchPageUid}" parameter="{settings.defaultSearchPageUid}"
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"> additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
Alle anzeigen Alle anzeigen
@@ -21,7 +21,7 @@
{region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()} {region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div> </div>
<button type="button" <button type="button"
class="button w-full"> class="button bg-button w-full">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')} {f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</button> </button>
</a> </a>
@@ -16,7 +16,7 @@
</f:form> </f:form>
<div class="mt-4"> <div class="mt-4">
<button type="button" <button type="button"
class="button button--secondary w-full" class="button bg-button bg-button--secondary w-full"
data-action="search#reset"> data-action="search#reset">
Filter zurücksetzen Filter zurücksetzen
</button> </button>
@@ -25,7 +25,7 @@
</div> </div>
</div> </div>
<button type="button" <button type="button"
class="button w-full"> class="button bg-button w-full">
{data.button -> v:or(alternative: 'Details')} {data.button -> v:or(alternative: 'Details')}
</button> </button>
</a> </a>
@@ -16,7 +16,7 @@
{data.bodytext -> f:format.html()} {data.bodytext -> f:format.html()}
</div> </div>
<button type="button" <button type="button"
class="button button--full"> class="button bg-button button--full">
{data.button -> v:or(alternative: 'Details')} {data.button -> v:or(alternative: 'Details')}
</button> </button>
</a> </a>
@@ -22,7 +22,7 @@
</f:if> </f:if>
<div class="mt-4"> <div class="mt-4">
<button type="button" <button type="button"
class="button button--secondary w-full" class="button bg-button bg-button--secondary w-full"
data-action="mobile-search#reset"> data-action="mobile-search#reset">
Filter zurücksetzen Filter zurücksetzen
</button> </button>
@@ -111,14 +111,14 @@
<f:if condition="{row.isHideBookingButton}"> <f:if condition="{row.isHideBookingButton}">
<f:then> <f:then>
<f:link.typolink parameter="{settings.travelAlertPageUid}" <f:link.typolink parameter="{settings.travelAlertPageUid}"
class="button button--small"> class="button bg-button button--small">
Reisen-Alert Reisen-Alert
</f:link.typolink> </f:link.typolink>
</f:then> </f:then>
<f:else> <f:else>
<f:if condition="{row.available}"> <f:if condition="{row.available}">
<f:then> <f:then>
<a class="button button--small w-full" <a class="button bg-button button--small w-full"
href="{row.bookingUrl}" href="{row.bookingUrl}"
title="{row.roomName}, {hotel.name}, {dateRange} buchen" title="{row.roomName}, {hotel.name}, {dateRange} buchen"
target="_blank"> target="_blank">
@@ -132,7 +132,7 @@
</a> </a>
</f:then> </f:then>
<f:else> <f:else>
<span class="button button--small button--muted block cursor-not-allowed font-bold normal-case whitespace-nowrap" <span class="button bg-button bg-button--muted button--small block cursor-not-allowed font-bold normal-case whitespace-nowrap"
data-cooltipz-dir="top" data-cooltipz-dir="top"
aria-label="Leider ausgebucht" aria-label="Leider ausgebucht"
role="tooltip" role="tooltip"
@@ -14,7 +14,7 @@
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<div class="mb-8 lg:hidden"> <div class="mb-8 lg:hidden">
<button type="button" <button type="button"
class="button w-full mb-8" class="button bg-button w-full mb-8"
data-controller="scroll-to" data-controller="scroll-to"
data-scroll-to-target-value="teasers" data-scroll-to-target-value="teasers"
data-action="scroll-to#scroll"> data-action="scroll-to#scroll">
@@ -75,7 +75,7 @@
</div> </div>
<f:if condition="{settings.hideMoreLink}"> <f:if condition="{settings.hideMoreLink}">
<f:else> <f:else>
<f:link.typolink class="button" <f:link.typolink class="button bg-button"
parameter="{settings.defaultSearchPageUid}" parameter="{settings.defaultSearchPageUid}"
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}" additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"
additionalAttributes="{rel: 'nofollow'}"> additionalAttributes="{rel: 'nofollow'}">
@@ -89,7 +89,7 @@
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<p class="hidden lg:block"> <p class="hidden lg:block">
<button type="button" <button type="button"
class="button w-full mb-8" class="button bg-button w-full mb-8"
data-controller="scroll-to" data-controller="scroll-to"
data-scroll-to-target-value="teasers" data-scroll-to-target-value="teasers"
data-action="scroll-to#scroll"> data-action="scroll-to#scroll">
@@ -65,7 +65,7 @@
<f:if condition="{settings.hideMoreLink}"> <f:if condition="{settings.hideMoreLink}">
<f:else> <f:else>
<div class="text-right mt-4"> <div class="text-right mt-4">
<f:link.typolink class="button" <f:link.typolink class="button bg-button"
parameter="{settings.defaultSearchPageUid}" parameter="{settings.defaultSearchPageUid}"
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"> additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
Alle anzeigen Alle anzeigen
@@ -88,7 +88,7 @@
<f:else> <f:else>
<li> <li>
<f:link.typolink parameter="{page.uid}" <f:link.typolink parameter="{page.uid}"
class="button button--light{f:if(condition: '{data.pid} == {page.uid}', then: ' button--active')} w-full"> class="button bg-button {f:if(condition: '{data.pid} == {page.uid}', then: 'bg-button--active', else: 'bg-button--light')} w-full">
{page.title} {page.title}
</f:link.typolink> </f:link.typolink>
</li> </li>
@@ -14,7 +14,7 @@
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0"> <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<div class="mb-8 lg:hidden"> <div class="mb-8 lg:hidden">
<button type="button" <button type="button"
class="button w-full mb-8" class="button bg-button w-full mb-8"
data-controller="scroll-to" data-controller="scroll-to"
data-scroll-to-target-value="teasers" data-scroll-to-target-value="teasers"
data-action="scroll-to#scroll"> data-action="scroll-to#scroll">
@@ -76,7 +76,7 @@
<f:if condition="{settings.hideMoreLink}"> <f:if condition="{settings.hideMoreLink}">
<f:else> <f:else>
<div class="text-right mt-4"> <div class="text-right mt-4">
<f:link.typolink class="button" <f:link.typolink class="button bg-button"
parameter="{settings.defaultSearchPageUid}" parameter="{settings.defaultSearchPageUid}"
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"> additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
Alle anzeigen Alle anzeigen
@@ -99,7 +99,7 @@
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0"> <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<p class="hidden lg:block"> <p class="hidden lg:block">
<button type="button" <button type="button"
class="button w-full mb-8" class="button bg-button w-full mb-8"
data-controller="scroll-to" data-controller="scroll-to"
data-scroll-to-target-value="teasers" data-scroll-to-target-value="teasers"
data-action="scroll-to#scroll"> data-action="scroll-to#scroll">
@@ -7,7 +7,7 @@
<f:section name="Main"> <f:section name="Main">
<ep:container data="{data}"> <ep:container data="{data}">
<f:link.typolink class="button" parameter="{data.header_link}" additionalParams="&ref={referrerPid}"> <f:link.typolink class="button bg-button" parameter="{data.header_link}" additionalParams="&ref={referrerPid}">
{data.header} {data.header}
</f:link.typolink> </f:link.typolink>
</ep:container> </ep:container>
@@ -15,7 +15,7 @@
<f:for each="{page.content}" as="element"> <f:for each="{page.content}" as="element">
<f:if condition="{element.data.header}"> <f:if condition="{element.data.header}">
<button type="button" <button type="button"
class="button" class="button bg-button"
data-controller="scroll-to" data-controller="scroll-to"
data-scroll-to-target-value="c{element.data.uid}" data-scroll-to-target-value="c{element.data.uid}"
data-action="scroll-to#scroll"> data-action="scroll-to#scroll">
@@ -11,14 +11,14 @@
<ep:container data="{data}"> <ep:container data="{data}">
<div class="flex flex-col space-y-2 max-w-screen-sm"> <div class="flex flex-col space-y-2 max-w-screen-sm">
<f:for each="{menu}" as="page"> <f:for each="{menu}" as="page">
<a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}" class="button"> <a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}" class="button bg-button">
{page.title} {page.title}
</a> </a>
<f:if condition="{page.content}"> <f:if condition="{page.content}">
<ul> <ul>
<f:for each="{page.content}" as="element"> <f:for each="{page.content}" as="element">
<li> <li>
<a href="{page.link}#c{element.data.uid}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{element.data.header}" class="button"> <a href="{page.link}#c{element.data.uid}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{element.data.header}" class="button bg-button">
{element.data.header} {element.data.header}
</a> </a>
</li> </li>
@@ -8,7 +8,7 @@
<div class="flex flex-col space-y-2 mb-8"> <div class="flex flex-col space-y-2 mb-8">
<f:for each="{menu}" as="page"> <f:for each="{menu}" as="page">
<f:link.typolink parameter="{page.data.uid}" <f:link.typolink parameter="{page.data.uid}"
class="button button--light w-full{f:if(condition: '{page.active}', then: ' button--active')}"> class="button w-full bg-button {f:if(condition: '{page.active}', then: 'bg-button--active', else: 'bg-button--light')}">
{page.data.title} {page.data.title}
</f:link.typolink> </f:link.typolink>
</f:for> </f:for>
@@ -27,7 +27,7 @@
{country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()} {country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div> </div>
<button type="button" <button type="button"
class="button w-full"> class="button bg-button w-full">
{data.button -> v:or(alternative: 'Details')} {data.button -> v:or(alternative: 'Details')}
</button> </button>
</a> </a>
@@ -13,7 +13,7 @@
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0"> <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<div class="mb-8 lg:hidden"> <div class="mb-8 lg:hidden">
<button type="button" <button type="button"
class="button w-full mb-8" class="button bg-button w-full mb-8"
data-controller="scroll-to" data-controller="scroll-to"
data-scroll-to-target-value="teasers" data-scroll-to-target-value="teasers"
data-action="scroll-to#scroll"> data-action="scroll-to#scroll">
@@ -32,7 +32,7 @@
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0"> <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<p class="hidden lg:block"> <p class="hidden lg:block">
<button type="button" <button type="button"
class="button w-full mb-8" class="button bg-button w-full mb-8"
data-controller="scroll-to" data-controller="scroll-to"
data-scroll-to-target-value="teasers" data-scroll-to-target-value="teasers"
data-action="scroll-to#scroll"> data-action="scroll-to#scroll">
@@ -84,7 +84,7 @@
</ul> </ul>
</f:if> </f:if>
<f:if condition="{settings.backPid}"> <f:if condition="{settings.backPid}">
<f:link.typolink parameter="{settings.backPid}" class="button button--default button--small"> <f:link.typolink parameter="{settings.backPid}" class="button bg-button button--small">
<f:translate key="back-link" /> <f:translate key="back-link" />
</f:link.typolink> </f:link.typolink>
</f:if> </f:if>
@@ -28,17 +28,17 @@
<li> <li>
<f:if condition="{pagination.previousPage} > 1"> <f:if condition="{pagination.previousPage} > 1">
<f:then> <f:then>
<f:widget.link arguments="{currentPage: pagination.previousPage}" class="button button--small">&laquo;</f:widget.link> <f:widget.link arguments="{currentPage: pagination.previousPage}" class="button bg-button button--small">&laquo;</f:widget.link>
</f:then> </f:then>
<f:else> <f:else>
<f:widget.link class="button button--small">&laquo;</f:widget.link> <f:widget.link class="button bg-button button--small">&laquo;</f:widget.link>
</f:else> </f:else>
</f:if> </f:if>
</li> </li>
</f:if> </f:if>
<f:if condition="{pagination.displayRangeStart} > 1"> <f:if condition="{pagination.displayRangeStart} > 1">
<li class="first"> <li class="first">
<f:widget.link class="button button--small">1</f:widget.link> <f:widget.link class="button bg-button button--small">1</f:widget.link>
</li> </li>
</f:if> </f:if>
<f:if condition="{pagination.hasLessPages}"> <f:if condition="{pagination.hasLessPages}">
@@ -47,16 +47,16 @@
<f:for each="{pagination.pages}" as="page"> <f:for each="{pagination.pages}" as="page">
<f:if condition="{page.isCurrent}"> <f:if condition="{page.isCurrent}">
<f:then> <f:then>
<li class="active"><span class="button button--active button--small">{page.number}</span></li> <li class="active"><span class="button bg-button bg-button--active button--small">{page.number}</span></li>
</f:then> </f:then>
<f:else> <f:else>
<li> <li>
<f:if condition="{page.number} > 1"> <f:if condition="{page.number} > 1">
<f:then> <f:then>
<f:widget.link arguments="{currentPage: page.number}" class="button button--small">{page.number}</f:widget.link> <f:widget.link arguments="{currentPage: page.number}" class="button bg-button button--small">{page.number}</f:widget.link>
</f:then> </f:then>
<f:else> <f:else>
<f:widget.link class="button button--secondary button--small">{page.number}</f:widget.link> <f:widget.link class="button bg-button bg-button--secondary button--small">{page.number}</f:widget.link>
</f:else> </f:else>
</f:if> </f:if>
</li> </li>
@@ -68,12 +68,12 @@
</f:if> </f:if>
<f:if condition="{pagination.displayRangeEnd} < {pagination.numberOfPages}"> <f:if condition="{pagination.displayRangeEnd} < {pagination.numberOfPages}">
<li class="last"> <li class="last">
<f:widget.link arguments="{currentPage: pagination.numberOfPages}" class="button button--small">{pagination.numberOfPages}</f:widget.link> <f:widget.link arguments="{currentPage: pagination.numberOfPages}" class="button bg-button button--small">{pagination.numberOfPages}</f:widget.link>
</li> </li>
</f:if> </f:if>
<f:if condition="{pagination.nextPage}"> <f:if condition="{pagination.nextPage}">
<li class="last next"> <li class="last next">
<f:widget.link arguments="{currentPage: pagination.nextPage}" class="button button--small">&raquo;</f:widget.link> <f:widget.link arguments="{currentPage: pagination.nextPage}" class="button bg-button button--small">&raquo;</f:widget.link>
</li> </li>
</f:if> </f:if>
</ul> </ul>
@@ -25,8 +25,8 @@
arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/> arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
<div class="flex flex-col lg:flex-row-reverse lg:items-start" <div class="flex flex-col lg:flex-row-reverse lg:items-start"
data-controller="tabs" data-controller="tabs"
data-tabs-button-class="bg-ep-primary-dark" data-tabs-button-class="bg-button--dark"
data-tabs-button-active-class="bg-ep-secondary" data-tabs-button-active-class="bg-button--active"
data-tabs-scroll-value="true"> data-tabs-scroll-value="true">
<div class="w-full lg:w-1/3"> <div class="w-full lg:w-1/3">
<div class="lg:pl-4"> <div class="lg:pl-4">
@@ -45,14 +45,14 @@
data-action="tabs#select" data-action="tabs#select"
data-tabs-target="button" data-tabs-target="button"
data-tab="hotel" data-tab="hotel"
class="py-2 uppercase bg-ep-primary-dark"> class="py-2 uppercase bg-button bg-button--dark">
Unterkunft Unterkunft
</button> </button>
<button type="button" <button type="button"
data-action="tabs#select" data-action="tabs#select"
data-tabs-target="button" data-tabs-target="button"
data-tab="dates" data-tab="dates"
class="col-span-2 py-2 uppercase bg-ep-primary-dark"> class="col-span-2 py-2 uppercase bg-button bg-button--dark">
Termine/Preise Termine/Preise
</button> </button>
</f:then> </f:then>
@@ -61,14 +61,14 @@
data-action="tabs#select" data-action="tabs#select"
data-tabs-target="button" data-tabs-target="button"
data-tab="dates" data-tab="dates"
class="col-span-2 py-2 uppercase bg-ep-primary-dark"> class="col-span-2 py-2 uppercase bg-button bg-button--dark">
Termine/Preise Termine/Preise
</button> </button>
<button type="button" <button type="button"
data-action="tabs#select" data-action="tabs#select"
data-tabs-target="button" data-tabs-target="button"
data-tab="hotel" data-tab="hotel"
class="py-2 uppercase bg-ep-primary-dark"> class="py-2 uppercase bg-button bg-button--dark">
Unterkunft Unterkunft
</button> </button>
</f:else> </f:else>
@@ -77,14 +77,14 @@
data-action="tabs#select" data-action="tabs#select"
data-tabs-target="button" data-tabs-target="button"
data-tab="region" data-tab="region"
class="py-2 uppercase bg-ep-primary-dark"> class="py-2 uppercase bg-button bg-button--dark">
Gebiet Gebiet
</button> </button>
<button type="button" <button type="button"
data-action="tabs#select" data-action="tabs#select"
data-tabs-target="button" data-tabs-target="button"
data-tab="city" data-tab="city"
class="py-2 uppercase bg-ep-primary-dark"> class="py-2 uppercase bg-button bg-button--dark">
Ort Ort
</button> </button>
<f:if condition="{product.journey}"> <f:if condition="{product.journey}">
@@ -92,7 +92,7 @@
data-action="tabs#select" data-action="tabs#select"
data-tabs-target="button" data-tabs-target="button"
data-tab="journey" data-tab="journey"
class="py-2 uppercase bg-ep-primary-dark"> class="py-2 uppercase bg-button bg-button--dark">
Anreise Anreise
</button> </button>
</f:if> </f:if>
@@ -152,7 +152,7 @@
<f:else> <f:else>
<div class="mb-4 hidden" <div class="mb-4 hidden"
data-product-details-target="loadingIndicator"> data-product-details-target="loadingIndicator">
<div class="flex items-center space-x-4 bg-ep-secondary text-white text-lg p-4 rounded"> <div class="flex items-center space-x-4 bg-button--secondary text-white text-lg p-4 rounded">
<svg class="w-6 h-6"> <svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-spinner"></use> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-spinner"></use>
</svg> </svg>
@@ -297,7 +297,7 @@
<f:if condition="{product.calendarHotel}"> <f:if condition="{product.calendarHotel}">
<f:if condition="{hotel.groupsPriceConfigs}"> <f:if condition="{hotel.groupsPriceConfigs}">
<button type="button" <button type="button"
class="button w-full" class="button bg-button w-full"
data-controller="lightbox" data-controller="lightbox"
data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}" data-lightbox-url-value="{f:uri.action(action: 'index', controller: 'GroupsPrice', arguments: '{hotel: hotel}', pageUid: settings.groupsPricePopupPageUid)}"
data-lightbox-height-value="85vh" data-lightbox-height-value="85vh"
@@ -328,7 +328,7 @@
</f:section> </f:section>
<f:section name="SidebarButtons"> <f:section name="SidebarButtons">
<div class="grid grid-cols-2 gap-px mb-4"> <div class=" mb-4{f:if(condition: product.faqs, then: ' grid grid-cols-2 gap-px')}">
<f:comment><!-- <f:comment><!--
<a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}" <a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}"
class="block px-4 py-2 bg-red-500 text-white flex items-center space-x-2 col-span-2 md:col-span-3" class="block px-4 py-2 bg-red-500 text-white flex items-center space-x-2 col-span-2 md:col-span-3"
@@ -341,7 +341,7 @@
--></f:comment> --></f:comment>
<f:if condition="{product.faqs}"> <f:if condition="{product.faqs}">
<button type="button" <button type="button"
class="bg-ep-primary-dark text-white py-2" class="w-full bg-button bg-button--dark text-white py-2"
data-controller="scroll-to" data-controller="scroll-to"
data-scroll-to-target-value="faq" data-scroll-to-target-value="faq"
data-action="scroll-to#scroll" data-action="scroll-to#scroll"
@@ -353,7 +353,7 @@
</button> </button>
</f:if> </f:if>
<button type="button" <button type="button"
class="bg-ep-primary-dark text-white py-2" class="w-full bg-button bg-button--dark text-white py-2"
data-controller="watchlist-toggle" data-controller="watchlist-toggle"
data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}" data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}"
data-watchlist-toggle-target="ariaLabel" data-watchlist-toggle-target="ariaLabel"
@@ -55,7 +55,7 @@
<f:if condition="{settings.hideMoreLink}"> <f:if condition="{settings.hideMoreLink}">
<f:else> <f:else>
<div class="text-right mt-4"> <div class="text-right mt-4">
<f:link.typolink class="button" <f:link.typolink class="button bg-button"
parameter="{settings.defaultSearchPageUid}" parameter="{settings.defaultSearchPageUid}"
additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}"> additionalParams="f={filterSettings -> ep:filterSettingsEncoder()}">
Alle anzeigen Alle anzeigen
@@ -14,7 +14,7 @@
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<div class="mb-8 lg:hidden"> <div class="mb-8 lg:hidden">
<button type="button" <button type="button"
class="button w-full mb-8" class="button bg-button w-full mb-8"
data-controller="scroll-to" data-controller="scroll-to"
data-scroll-to-target-value="teasers" data-scroll-to-target-value="teasers"
data-action="scroll-to#scroll"> data-action="scroll-to#scroll">
@@ -32,7 +32,7 @@
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<p class="hidden lg:block"> <p class="hidden lg:block">
<button type="button" <button type="button"
class="button w-full mb-8" class="button bg-button w-full mb-8"
data-controller="scroll-to" data-controller="scroll-to"
data-scroll-to-target-value="teasers" data-scroll-to-target-value="teasers"
data-action="scroll-to#scroll"> data-action="scroll-to#scroll">
@@ -64,7 +64,7 @@
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<f:for each="{settings.datePickerPresets}" as="preset"> <f:for each="{settings.datePickerPresets}" as="preset">
<button type="button" <button type="button"
class="button button--small button--light w-full" class="button bg-button bg-button--light button--small w-full"
data-preset='{preset -> f:format.json() -> f:format.raw()}' data-preset='{preset -> f:format.json() -> f:format.raw()}'
data-action="datepicker#selectPreset"> data-action="datepicker#selectPreset">
<span> <span>
@@ -76,12 +76,12 @@
</f:if> </f:if>
<div class="flex flex-col space-y-4"> <div class="flex flex-col space-y-4">
<button type="button" <button type="button"
class="button button--small button--light w-full" class="button bg-button bg-button--light button--small w-full"
data-action="collapse#close"> data-action="collapse#close">
schließen schließen
</button> </button>
<button type="button" <button type="button"
class="button button--small button--light w-full" class="button bg-button bg-button--light button--small w-full"
data-action="datepicker#reset"> data-action="datepicker#reset">
zurücksetzen zurücksetzen
</button> </button>
@@ -198,7 +198,7 @@
</div> </div>
</div> </div>
<button type="button" <button type="button"
class="button button--small" class="button bg-button button--small"
data-action="searchbar#resetDestination"> data-action="searchbar#resetDestination">
zurücksetzen zurücksetzen
</button> </button>
@@ -46,7 +46,7 @@
action: 'list', action: 'list',
extensionName: 'epproducts', extensionName: 'epproducts',
pluginName: 'teammembers' pluginName: 'teammembers'
)}" class="button button-danger"> )}" class="button bg-button">
zurück zurück
</a> </a>
</div> </div>