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

feat: a11y improvements

Browse Source
This commit is contained in:
Björn Fromme
2025-06-27 18:41:32 +02:00
parent ef62ecd376
commit dbbdcac6e8
25 changed files with 197 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_events/Resources/Private/Assets/scss/_iconbar.scss
+3
View File
@@ -1,3 +1,6 @@
.iconbar {
@apply hidden lg:block fixed z-100 top-[30vh] right-0 overflow-hidden;
}
.iconbar {
display: none;
@include mq($from: desktop) {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/nav_controller.js
+32
View File
@@ -0,0 +1,32 @@
import { Controller } from '@hotwired/stimulus'
import { useClickOutside } from 'stimulus-use'
export default class extends Controller {
static classes = ['hidden']
static targets = ['button', 'subnav']
static values = { expanded: Boolean }
connect() {
useClickOutside(this)
}
toggle(e) {
e.preventDefault()
this.expandedValue = !this.expandedValue
}
clickOutside(e) {
this.expandedValue = false
}
expandedValueChanged(expanded) {
this.buttonTarget.setAttribute('aria-expanded', expanded)
this.subnavTarget.setAttribute('aria-hidden', !expanded)
if (true === expanded) {
this.subnavTarget.classList.remove(...this.hiddenClasses)
} else {
this.subnavTarget.classList.add(...this.hiddenClasses)
}
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
+5 -1
View File
@@ -32,7 +32,7 @@ a:not(.button):not(.rte-button):not(.rte-button--full) {
a.rte-button {
@apply inline-flex items-center justify-center px-4 py-2 md:px-8;
@apply uppercase leading-none text-center;
@apply transition-colors outline-none focus:outline-none;
@apply transition-colors outline-none;
@apply bg-ep-primary-light text-white;
@apply sbw:bg-sbw-secondary;
@apply snz:bg-snz-secondary;
@@ -45,6 +45,10 @@ a.rte-button {
@apply suz:hover:bg-suz-primary-dark suz:group-hover:bg-suz-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 focus:outline focus:outline-2 focus:outline-offset-2;
@apply focus:outline-ep-primary-dark sbw:focus:outline-sbw-secondary uch:focus:outline-uch-secondary;
@apply suz:focus:outline-suz-secondary ser:focus:outline-ser-secondary snz:focus:outline-snz-secondary;
}
a.rte-button--full {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+44 -34
View File
@@ -2,6 +2,9 @@
@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 transition-colors outline-none;
@apply focus:outline focus:outline-2 focus:outline-offset-2;
@apply focus:outline-ep-primary-dark sbw:focus:outline-sbw-secondary uch:focus:outline-uch-secondary;
@apply suz:focus:outline-suz-secondary ser:focus:outline-ser-secondary snz:focus:outline-snz-secondary;
&--small {
@apply px-2 py-1 md:px-4 text-xs sm:text-sm;
@@ -12,6 +15,28 @@
}
}
.teaser-button {
@apply w-full;
@apply bg-ep-primary-dark text-white;
@apply sbw:bg-sbw-secondary;
@apply snz:bg-snz-secondary;
@apply suz:bg-suz-secondary;
@apply uch:bg-uch-secondary;
@apply ser:bg-ser-secondary;
@apply hover:bg-badge-gradient hover:text-white;
@apply peer-hover:bg-badge-gradient peer-hover:text-white;
@apply sbw:hover:bg-none sbw:hover:bg-sbw-primary-dark;
@apply snz:hover:bg-none snz:hover:bg-snz-primary-dark;
@apply suz:hover:bg-none suz:hover:bg-suz-primary-dark;
@apply uch:hover:bg-none uch:hover:bg-uch-primary-dark;
@apply ser:hover:bg-none ser:hover:bg-ser-primary;
@apply sbw:peer-hover:bg-none sbw:peer-hover:bg-sbw-primary-dark;
@apply snz:peer-hover:bg-none snz:peer-hover:bg-snz-primary-dark;
@apply suz:peer-hover:bg-none suz:peer-hover:bg-suz-primary-dark;
@apply uch:peer-hover:bg-none uch:peer-hover:bg-uch-primary-dark;
@apply ser:peer-hover:bg-none ser:peer-hover:bg-ser-primary;
}
.bg-button {
@apply bg-ep-primary-dark text-white;
@apply sbw:bg-sbw-secondary;
@@ -19,41 +44,27 @@
@apply suz:bg-suz-secondary;
@apply uch:bg-uch-secondary;
@apply ser:bg-ser-secondary;
@apply hover:bg-ep-secondary;
@apply hover:text-gray-900;
@apply sbw:hover:bg-sbw-primary-dark;
@apply snz:hover:bg-snz-primary-dark;
@apply suz:hover:bg-suz-primary-dark;
@apply uch:hover:bg-uch-primary-dark;
@apply ser:hover:bg-ser-primary;
@apply peer-hover:bg-ep-secondary;
@apply peer-hover:text-gray-900;
@apply sbw:peer-hover:bg-sbw-primary-dark;
@apply snz:peer-hover:bg-snz-primary-dark;
@apply suz:peer-hover:bg-suz-primary-dark;
@apply uch:peer-hover:bg-uch-primary-dark;
@apply ser:peer-hover:bg-ser-primary;
@apply hover:bg-badge-gradient hover:text-white;
@apply sbw:hover:bg-none sbw:hover:bg-sbw-primary-dark;
@apply snz:hover:bg-none snz:hover:bg-snz-primary-dark;
@apply suz:hover:bg-none suz:hover:bg-suz-primary-dark;
@apply uch:hover:bg-none uch:hover:bg-uch-primary-dark;
@apply ser:hover:bg-none ser:hover:bg-ser-primary;
&--active,
&--secondary {
@apply bg-ep-secondary text-gray-900;
@apply sbw:bg-sbw-primary;
@apply snz:bg-snz-primary;
@apply suz:bg-suz-primary;
@apply uch:bg-uch-primary;
@apply ser:bg-ser-secondary;
@apply hover:bg-ep-primary-dark hover:text-white;
@apply sbw:hover:bg-sbw-primary-dark;
@apply snz:hover:bg-snz-primary-dark;
@apply suz:hover:bg-suz-primary-dark;
@apply uch:hover:bg-uch-primary-dark;
@apply ser:hover:bg-ser-primary;
@apply peer-hover:bg-ep-primary-dark peer-hover:text-white;
@apply sbw:peer-hover:bg-sbw-primary-dark;
@apply snz:peer-hover:bg-snz-primary-dark;
@apply suz:peer-hover:bg-suz-primary-dark;
@apply uch:peer-hover:bg-uch-primary-dark;
@apply ser:peer-hover:bg-ser-primary;
@apply bg-badge-gradient text-white;
@apply sbw:bg-none sbw:bg-sbw-secondary;
@apply snz:bg-none snz:bg-snz-secondary;
@apply suz:bg-none suz:bg-suz-secondary;
@apply uch:bg-none uch:bg-uch-secondary;
@apply ser:bg-none ser:bg-ser-secondary;
@apply hover:bg-none hover:bg-ep-pink hover:text-white;
@apply sbw:hover:bg-none sbw:hover:bg-sbw-primary-dark;
@apply snz:hover:bg-none snz:hover:bg-snz-primary-dark;
@apply suz:hover:bg-none suz:hover:bg-suz-primary-dark;
@apply uch:hover:bg-none uch:hover:bg-uch-primary-dark;
@apply ser:hover:bg-none ser:hover:bg-ser-primary;
}
&--muted {
@@ -78,8 +89,7 @@
&:hover,
&.button--active {
@apply bg-white;
@apply border-ep-secondary text-ep-secondary;
@apply bg-none bg-ep-pink border-ep-pink;
@apply sbw:bg-white sbw:border-sbw-secondary sbw:text-sbw-secondary;
@apply snz:bg-white snz:border-snz-secondary snz:text-snz-secondary;
@apply suz:bg-white suz:border-suz-secondary suz:text-suz-secondary;
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
+1 -1
View File
@@ -9,7 +9,7 @@
.contact-bar__item {
@apply flex-1 text-white py-2 bg-ep-primary-dark border-r border-white last:border-0;
@apply ser:bg-ser-primary sbw:bg-sbw-primary snz:bg-snz-primary suz:bg-suz-primary uch:bg-uch-primary;
@apply ser:bg-ser-primary sbw:bg-sbw-secondary snz:bg-snz-primary suz:bg-suz-primary uch:bg-uch-primary;
@screen md {
@apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md focus:text-white border-0;
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
+3 -1
View File
@@ -1,5 +1,6 @@
.form-field {
@apply border-zinc-400 focus:border-zinc-800 ring-0 focus:ring-0 mt-1 block w-full;
@apply border-zinc-400 focus:border-zinc-800 ring-0 block w-full mt-1;
@apply focus:ring-0 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-zinc-800;
&--has-error {
@apply border-red-500;
@@ -9,6 +10,7 @@
.form-checkbox,
.form-radio {
@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;
@apply focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-zinc-800;
&--has-error {
@apply border-red-500;
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html
+2 -2
View File
@@ -14,11 +14,11 @@
<circle fill="currentColor" class="text-ep-primary-dark" cx="100" cy="100" r="70"/>
</svg>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
<span class="block text-center text-white uppercase font-bold leading-none text-xl">
<span class="block text-center text-white bg-ep-primary-dark uppercase font-bold leading-none text-xl">
{badge.title -> f:format.raw()}
</span>
<f:if condition="{badge.subtitle}">
<span class="block text-center text-white uppercase font-bold leading-none">
<span class="block text-center text-white bg-ep-primary-dark uppercase font-bold leading-none">
{badge.subtitle -> f:format.raw()}
</span>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html
+1 -1
View File
@@ -42,7 +42,7 @@
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
{city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div>
<div class="button bg-button w-full">
<div class="button teaser-button">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
+15 -3
View File
@@ -5,6 +5,7 @@
<div class="contact-bar">
<a href="{f:uri.typolink(parameter: settings.watchlistPageUid)}"
tabindex="0"
class="contact-bar__item"
data-controller="watchlist-label"
data-action="watchlist-toggle:toggle@window->watchlist-label#update"
@@ -15,6 +16,7 @@
</div>
</a>
<a href="tel:{settings.phoneNumberLink}"
tabindex="0"
class="contact-bar__item"
rel="nofollow">
{ep:icon(icon: 'phone', class: 'contact-bar__icon')}
@@ -23,7 +25,8 @@
</div>
</a>
<f:link.email email="{settings.contactFormToEmail}"
class="contact-bar__item">
class="contact-bar__item"
additionalAttributes="{tabindex: 0}">
{ep:icon(icon: 'email', class: 'contact-bar__icon')}
<div class="contact-bar__label">
{settings.contactFormToEmail}
@@ -31,6 +34,7 @@
</f:link.email>
<f:if condition="{settings.whatsApp}">
<a href="{settings.whatsAppNumberLink}"
tabindex="0"
class="contact-bar__item"
target="_blank"
rel="nofollow">
@@ -41,6 +45,7 @@
</a>
</f:if>
<a href="{settings.facebookUrl}"
tabindex="0"
class="contact-bar__item"
target="_blank"
rel="nofollow">
@@ -50,6 +55,7 @@
</div>
</a>
<a href="{settings.instagramUrl}"
tabindex="0"
class="contact-bar__item"
target="_blank"
rel="nofollow">
@@ -59,6 +65,7 @@
</div>
</a>
<a href="{settings.youtubeUrl}"
tabindex="0"
class="contact-bar__item"
target="_blank"
rel="nofollow">
@@ -69,6 +76,7 @@
</a>
<f:if condition="{settings.tiktokUrl}">
<a href="{settings.tiktokUrl}"
tabindex="0"
class="contact-bar__item"
target="_blank"
rel="nofollow">
@@ -79,7 +87,9 @@
</a>
</f:if>
<f:if condition="{settings.englishPageUid}">
<f:link.typolink parameter="{settings.englishPageUid}" class="contact-bar__item">
<f:link.typolink parameter="{settings.englishPageUid}"
class="contact-bar__item"
additionalAttributes="{tabindex: 0}">
{ep:icon(icon: 'flag-gb', class: 'contact-bar__icon')}
<div class="contact-bar__label">
English
@@ -87,7 +97,9 @@
</f:link.typolink>
</f:if>
<f:if condition="{settings.germanPageUid}">
<f:link.typolink parameter="{settings.germanPageUid}" class="contact-bar__item">
<f:link.typolink parameter="{settings.germanPageUid}"
class="contact-bar__item"
additionalAttributes="{tabindex: 0}">
{ep:icon(icon: 'flag-de', class: 'contact-bar__icon')}
<div class="contact-bar__label">
Deutsch
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+1 -1
View File
@@ -179,7 +179,7 @@
data-action="scroll-top#scroll"
data-scroll-top-hidden-class="hidden"
data-scroll-top-visible-class="flex"
class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 items-center justify-center rounded bg-ep-secondary/80 ser:bg-ser-secondary">
class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 items-center justify-center rounded bg-ep-pink/80 sbw:bg-sbw-secondary/80 snz:bg-snz-secondary/80 uch:bg-uch-secondary/80 ser:bg-ser-secondary/80">
{ep:icon(icon: 'chevron-up', class: 'w-8 h-8 text-white')}
</button>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+1 -1
View File
@@ -35,7 +35,7 @@
<f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}"
additionalAttributes="{'tabindex': '-1'}"
class="button bg-button--secondary inline-block">
class="button bg-badge-gradient hover:bg-none hover:bg-ep-pink text-white inline-block">
{slide.button}
</f:link.typolink>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html
+3 -3
View File
@@ -31,9 +31,9 @@
<span class="absolute inset-0"></span>
</a>
<f:if condition="{hotel.category}">
<span class="searchresult-item__category">
<div class="px-2">
<strong>Kategorie</strong> {hotel.category}
</span>
</div>
</f:if>
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
{hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
@@ -43,7 +43,7 @@
</span>
</f:if>
</div>
<div class="button bg-button w-full">
<div class="button teaser-button">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+12 -3
View File
@@ -44,13 +44,19 @@
<f:section name="FirstLevel">
<nav role="navigation" aria-label="Hauptnavigation">
<ul class="m-0 p-0 list-none flex items-center justify-end space-x-4" role="menubar">
<ul class="m-0 p-0 list-none flex items-center justify-end space-x-4"
role="menubar" >
<f:for each="{mainnav}" as="topitem">
<li class="group pb-4" role="none">
<li class="group pb-4" role="none" data-controller="nav" data-nav-hidden-class="invisible opacity-0">
<f:if condition="{topitem.children}">
<f:then>
<a href="{f:uri.typolink(parameter: topitem.data.uid)}"
role="menuitem"
id="mainnav-{topitem.data.uid}"
aria-haspopup="true"
aria-expanded="false"
data-nav-target="button"
data-action="keydown.space->nav#toggle"
class="text-zinc-800 uppercase lg:text-lg font-bold flex items-center">
<span>{topitem.title}</span>
{ep:icon(icon: 'chevron-down', class: 'ml-1 w-4 h-4 group-hover:rotate-180')}
@@ -93,7 +99,10 @@
</f:section>
<f:section name="SecondLevel">
<div class="absolute top-100 left-0 inset-x-0 pt-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
<div class="absolute top-100 left-0 inset-x-0 pt-4 invisible opacity-0 group-hover:visible group-hover:opacity-100 transition-opacity duration-300 ease-in-out"
aria-hidden="true"
aria-labelledby="mainnav-{topitem.data.uid}"
data-nav-target="subnav">
<div class="bg-white grid grid-cols-3 lg:grid-cols-4 gap-8 p-4 shadow-lg rounded">
<f:for each="{topitem.children}" as="subitem">
<ul class="m-0 p-0 list-none" role="menu">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+3 -3
View File
@@ -13,7 +13,7 @@
</f:section>
<f:section name="TeaserImage">
<div class="{f:if(condition: landscape, then: ' sm:w-2/5')}">
<div class="relative{f:if(condition: landscape, then: ' sm:w-2/5')}">
<f:if condition="{productImage}">
<f:then>
<ep:lazyLoadImage image="{productImage}"
@@ -88,10 +88,10 @@
<div class="product-teaser__label-included">
{ep:nightsOptions(options: nights, daytrip: daytrip)}{f:if(condition: including, then: ' inkl.')}
</div>
<ul class="product-teaser__list-included flex-1 list-none m-0 text-zinc-800 divide-y divide-zinc-400">
<ul class="product-teaser__list-included flex-1 list-none m-0 text-zinc-800 divide-y divide-zinc-400 pb-8">
{including -> f:format.raw()}
</ul>
<div class="mt-8 bg-ep-primary-dark text-white font-bold px-4 py-1 peer-hover:bg-ep-secondary peer-hover:text-gray-900 transition-colors">
<div class="bg-ep-primary-dark text-white font-bold px-4 py-1 peer-hover:bg-badge-gradient peer-hover:text-white transition-colors">
<div class="lg:inline-block">
ab <span class="product-teaser__price mx-1">{minPrice} €</span>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html
+1 -1
View File
@@ -42,7 +42,7 @@
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
{region.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div>
<div class="button bg-button w-full">
<div class="button teaser-button">
{f:translate(key: 'tx_eptheme.label.teaserbutton.default', extensionName: 'ep_theme')}
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+19 -17
View File
@@ -30,6 +30,7 @@
<div class="flex flex-col">
<div class="relative pb-2 md:pb-0">
<input type="text"
aria-label="Reisezeitraum"
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 translate-y-1/2 mr-2')}
@@ -75,14 +76,13 @@
<ul class="mb-0 p-0 space-y-2">
<f:for each="{filterOptions.concepts}" as="concept">
<li>
<label class="flex items-center">
<label class="flex items-center" for="form-concept-{concept.uid}">
<f:form.checkbox class="mr-2 rounded-full w-5 h-5 border-white ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
id="form-concept-{concept.uid}"
property="conceptUids"
data="{action: '{stimulusController}#filter'}"
value="{concept.uid}"/>
<span class="block w-full py-1 px-2 bg-concept-{concept.code} text-white rounded">
{concept.name}
</span>
<span class="block w-full py-1 px-2 bg-concept-{concept.code} text-white text-lg rounded">{concept.name}</span>
</label>
</li>
</f:for>
@@ -99,7 +99,7 @@
</div>
</f:if>
<div class="px-4 divide-y py-2 px-4 hover-hover:lg:bg-white">
<div class="divide-y py-2 px-4 hover-hover:lg:bg-white">
<div class="py-2"
data-controller="collapse"
@@ -219,17 +219,19 @@
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4 space-y-2">
<f:for each="{filterOptions.hotelTypes}" as="type">
<li>
<label class="flex items-start">
<f:form.checkbox class="w-5 h-5 border-ep-primary-light ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="hotelTypes"
data="{action: '{stimulusController}#filter'}"
value="{type}"/>
<span class="leading-none pl-2">
{hotelTypes.{type}}
</span>
</label>
</li>
<f:if condition="{hotelTypes.{type}}">
<li>
<label class="flex items-start">
<f:form.checkbox class="w-5 h-5 border-ep-primary-light ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
property="hotelTypes"
data="{action: '{stimulusController}#filter'}"
value="{type}"/>
<span class="leading-none pl-2">
{hotelTypes.{type}}
</span>
</label>
</li>
</f:if>
</f:for>
</ul>
</div>
@@ -287,7 +289,7 @@
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 hover-none: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">
<ul class="mb-0 p-0 pt-4 space-y-2">
<f:for each="{filterOptions.roomTypes}" as="type">
<li>
<label class="flex items-start">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
+13 -11
View File
@@ -3,16 +3,18 @@
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-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')}
</f:then>
<f:else>
{ep:icon(icon: 'emoji-sad', class: 'w-6 h-6')}
</f:else>
</f:if>
<span class="flex-1">
<div class="flex mb-4 border-2 rounded-sm {f:if(condition: '{meta.organic} && {meta.total} > 0', then: 'border-emerald-600', else: 'border-red-600')}">
<div class="flex flex-col items-center justify-center px-2 {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 text-white')}
</f:then>
<f:else>
{ep:icon(icon: 'emoji-sad', class: 'w-6 h-6 text-white')}
</f:else>
</f:if>
</div>
<div class="flex-1 px-4 py-2 bg-white text-lg">
Deine Suche
<f:if condition="{meta.organic}">
<f:then>
@@ -28,7 +30,7 @@
ergab leider keine genauen Treffer. Bitte benutze die Filter.
</f:else>
</f:if>
</span>
</div>
</div>
<button type="button"
class="lg:hidden mb-4 text-white bg-badge-gradient uppercase py-2 w-full"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
+3 -3
View File
@@ -17,14 +17,14 @@
alt="{teaserImage.alternative}" />
</div>
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
<a href="{f:uri.typolink(parameter: data.header_link)}" class="px-2 peer headline--3 mb-4 no-underline">
<a href="{f:uri.typolink(parameter: data.header_link)}" class="px-2 peer headline--3 mb-2 no-underline">
{data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '<br>{data.subheader}')}
<span class="absolute inset-0"></span>
</a>
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
<div class="flex-1 px-2 pb-6 text-zinc-800" data-rte-content>
{data.bodytext -> f:format.html()}
</div>
<div class="button bg-button w-full">
<div class="button teaser-button">
{data.button -> v:or(alternative: 'Details')}
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Textmedia/LinkPanel.html
+15 -15
View File
@@ -8,53 +8,53 @@
<div class="container lg:max-w-screen-2xl">
<div class="grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-3 lg:grid-flow-col gap-4 lg:gap-1 lg:h-128 bg-white">
<f:if condition="{images.0}">
<div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1">
<f:link.typolink parameter="{images.0.link}" class="absolute inset-0 z-20 flex items-center justify-center">
<div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1 overflow-hidden">
<f:link.typolink parameter="{images.0.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.0.title -> f:format.raw()}
</div>
</f:link.typolink>
<f:image image="{images.0}" alt="{images.0.alternative}" class="w-full h-full object-cover" />
<f:image image="{images.0}" alt="{images.0.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
</div>
</f:if>
<f:if condition="{images.1}">
<div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1">
<f:link.typolink parameter="{images.1.link}" class="absolute inset-0 z-20 flex items-center justify-center">
<div class="relative h-32 lg:h-auto lg:col-span-2 lg:row-span-1 overflow-hidden">
<f:link.typolink parameter="{images.1.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.1.title -> f:format.raw()}
</div>
</f:link.typolink>
<f:image image="{images.1}" alt="{images.1.alternative}" class="w-full h-full object-cover" />
<f:image image="{images.1}" alt="{images.1.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
</div>
</f:if>
<f:if condition="{images.4}">
<div class="relative h-32 lg:h-auto lg:col-span-12 lg:row-span-1">
<f:link.typolink parameter="{images.4.link}" class="absolute inset-0 z-20 flex items-center justify-center">
<div class="relative h-32 lg:h-auto lg:col-span-12 lg:row-span-1 overflow-hidden">
<f:link.typolink parameter="{images.4.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.4.title -> f:format.raw()}
</div>
</f:link.typolink>
<f:image image="{images.4}" alt="{images.4.alternative}" class="w-full h-full object-cover" />
<f:image image="{images.4}" alt="{images.4.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
</div>
</f:if>
<f:if condition="{images.2}">
<div class="relative h-32 lg:h-auto lg:col-span-4 lg:row-span-2">
<f:link.typolink parameter="{images.2.link}" class="absolute inset-0 z-20 flex items-center justify-center">
<div class="relative h-32 lg:h-auto lg:col-span-4 lg:row-span-2 overflow-hidden">
<f:link.typolink parameter="{images.2.link}" class="absolute inset-0 z-20 flex items-center justify-center peer">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.2.title -> f:format.raw()}
</div>
</f:link.typolink>
<f:image image="{images.2}" alt="{images.2.alternative}" class="w-full h-full object-cover" />
<f:image image="{images.2}" alt="{images.2.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
</div>
</f:if>
<f:if condition="{images.3}">
<div class="relative h-32 lg:h-auto lg:col-span-6 lg:row-span-2">
<f:link.typolink parameter="{images.3.link}" class="absolute inset-0 z-20 w-full h-full flex items-center justify-center">
<div class="relative h-32 lg:h-auto lg:col-span-6 lg:row-span-2 overflow-hidden">
<f:link.typolink parameter="{images.3.link}" class="absolute inset-0 z-20 w-full h-full flex items-center justify-center peer">
<div class="inline-block px-4 py-2 text-center leading-none text-white hover:text-white text-2xl font-bold uppercase break-normal sbw:bg-sbw-secondary/90 uch:bg-uch-secondary/90 snz:bg-snz-secondary/90">
{images.3.title -> f:format.raw()}
</div>
</f:link.typolink>
<f:image image="{images.3}" alt="{images.3.alternative}" class="w-full h-full object-cover" />
<f:image image="{images.3}" alt="{images.3.alternative}" class="w-full h-full object-cover transition-transform duration-300 peer-hover:scale-110" />
</div>
</f:if>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+2 -2
View File
@@ -3,10 +3,10 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<a href="#main-content" class="fixed left-0 top-0 bg-ep-primary-dark text-white py-1 px-4 z-50 transform focus:translate-y-12 transition">
<a href="#main-content" class="hidden lg:block fixed left-0 top-0 bg-ep-primary-dark text-white py-1 px-4 z-50 transform focus:translate-y-12 transition">
zum Inhalt springen
</a>
<f:if condition="{settings.hideAreaNavigation}">
<f:else>
<div class="topnav">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/TeaserCountry.html
+12 -10
View File
@@ -6,7 +6,7 @@
<f:layout name="Bare"/>
<f:section name="Main">
<a href="{f:uri.typolink(parameter: country.detailPage)}" class="flex flex-col group">
<div class="relative flex flex-col">
<div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{country.code -> f:format.case(mode: 'lower')}"></use>
@@ -20,17 +20,19 @@
alt="{country.name}" />
</f:if>
</div>
<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">
<div class="flex-1 flex flex-col pt-4 bg-white border border-t-0 border-zinc-200">
<a href="{f:uri.typolink(parameter: country.detailPage)}" class="px-2 peer headline--3 mb-4 no-underline">
{country.name}
</span>
{country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
<span class="absolute inset-0"></span>
</a>
<div class="flex-1 px-2 text-zinc-800" data-rte-content>
{country.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
</div>
<div class="button teaser-button w-full">
{data.button -> v:or(alternative: 'Details')}
</div>
</div>
<button type="button"
class="button bg-button w-full">
{data.button -> v:or(alternative: 'Details')}
</button>
</a>
</div>
</f:section>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Detail.html
+1 -1
View File
@@ -32,7 +32,7 @@
<f:if condition="{teasers}">
<p class="hidden lg:block">
<button type="button"
class="button bg-button w-full mb-8 ml-4"
class="button bg-button w-full mb-8"
data-controller="scroll-to"
data-scroll-to-target-value="teasers"
data-action="scroll-to#scroll">
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
+1 -1
View File
@@ -15,7 +15,7 @@
</div>
<div class="fixed top-0 left-0 z-20 w-screen h-screen hidden"
data-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 transform -translate-xy-1/2 flex items-center space-x-4 bg-badge-gradient text-white text-lg p-4 rounded">
<svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-spinner"></use>
</svg>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+1 -1
View File
@@ -266,7 +266,7 @@
Detailsuche
</button>
<button type="submit"
class="w-1/3 text-white bg-badge-gradient uppercase py-2">
class="w-1/3 text-white bg-badge-gradient hover:bg-none hover:bg-ep-pink transition-colors uppercase py-2">
Alle Reisen anzeigen
</button>
</div>