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

WIP Migrate to tailwind and alpine

Browse Source
This commit is contained in:
Björn Fromme
2021-08-12 15:15:12 +02:00
parent 463e4c9b5a
commit c70675b0a2
36 changed files with 485 additions and 741 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Classes/ViewHelpers/Calendar/ContingentViewHelper.php
+5 -5
View File
@@ -134,18 +134,18 @@ class ContingentViewHelper extends AbstractViewHelper
{ {
$classes = [ 'block p-1 leading-none text-sm text-white' ]; $classes = [ 'block p-1 leading-none text-sm text-white' ];
if ($levelFrom === static::LEVEL_RED) { if ($levelFrom === static::LEVEL_RED) {
$class = 'full'; $class = 'availability-none';
} elseif ($levelFrom === static::LEVEL_YELLOW) { } elseif ($levelFrom === static::LEVEL_YELLOW) {
$class = 'partial'; $class = 'availability-partial';
} else { } else {
$class = 'free'; $class = 'availability-full';
} }
if ($levelTo === static::LEVEL_RED) { if ($levelTo === static::LEVEL_RED) {
$class .= '-to-full'; $class .= '-to-none';
} elseif ($levelTo === static::LEVEL_YELLOW) { } elseif ($levelTo === static::LEVEL_YELLOW) {
$class .= '-to-partial'; $class .= '-to-partial';
} elseif ($levelTo !== null) { } elseif ($levelTo !== null) {
$class .= '-to-free'; $class .= '-to-full';
} }
$classes[] = $class; $classes[] = $class;
return $classes; return $classes;
public/typo3conf/ext/ep_theme/Configuration/TypoScript/Extensions/PxaSocialFeed.typoscript
-29
View File
@@ -1,29 +0,0 @@
@import "EXT:pxa_social_feed/Configuration/TypoScript/setup.txt"
plugin.tx_pxasocialfeed {
view {
layoutRootPaths.100 = EXT:ep_theme/Resources/Private/Layouts/SocialMedia/
templateRootPaths.100 = EXT:ep_theme/Resources/Private/Templates/SocialMedia/
partialRootPaths.100 = EXT:ep_theme/Resources/Private/Partials/SocialMedia/
}
settings.defaultAjaxUid = {$plugin.tx_eptheme.settings.defaultAjaxUid}
}
page.includeCSS {
pxa_social_feed_1 >
}
page.includeJSFooter {
pxa_social_feed_1 >
pxa_social_feed_2 >
pxa_social_feed_3 >
pxa_social_feed_4 >
pxa_social_feed_5 >
}
page.includeJSFooterlibs {
pxa_social_feed_1 >
pxa_social_feed_2 >
pxa_social_feed_3 >
pxa_social_feed_4 >
}
public/typo3conf/ext/ep_theme/Configuration/TypoScript/constants.typoscript
+5 -6
View File
@@ -181,9 +181,8 @@ plugin.tx_eptheme {
} }
} }
@import "EXT:fluid_styled_content/Configuration/TypoScript/constants.typoscript" @import 'EXT:fluid_styled_content/Configuration/TypoScript/constants.typoscript'
@import "EXT:ep_products/Configuration/TypoScript/constants.typoscript" @import 'EXT:ep_products/Configuration/TypoScript/constants.typoscript'
@import "EXT:gridelements/Configuration/TypoScript/constants.typoscript" @import 'EXT:gridelements/Configuration/TypoScript/constants.typoscript'
@import "EXT:pxa_social_feed/Configuration/TypoScript/constants.txt" @import 'EXT:seo/Configuration/TypoScript/XmlSitemap/constants.typoscript'
@import "EXT:seo/Configuration/TypoScript/XmlSitemap/constants.typoscript" @import 'EXT:typo3_encore/Configuration/TypoScript/constants.typoscript'
@import "EXT:typo3_encore/Configuration/TypoScript/constants.typoscript"
public/typo3conf/ext/ep_theme/Configuration/TypoScript/setup.typoscript
+4 -30
View File
@@ -1,30 +1,6 @@
@import "EXT:ep_theme/Configuration/TypoScript/Extensions/FluidStyledContent.typoscript" @import 'EXT:ep_theme/Configuration/TypoScript/Extensions/*'
@import "EXT:ep_theme/Configuration/TypoScript/Extensions/Form.typoscript" @import 'EXT:ep_theme/Configuration/TypoScript/Library/*'
@import "EXT:ep_theme/Configuration/TypoScript/Extensions/News.typoscript" @import 'EXT:ep_theme/Configuration/TypoScript/ContentElements/*'
@import "EXT:ep_theme/Configuration/TypoScript/Extensions/Typo3Encore.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Extensions/GridElements.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Extensions/EpProducts.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Extensions/PxaSocialFeed.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Extensions/Seo.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Library/SearchBar.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Library/SearchBox.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Library/Sitemap.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Library/DynamicContent.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Library/ParseFunc.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/calendar.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/contact.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/disturber.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/disrupter.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/event_pricetable.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/gmap.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/lineup.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/list.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/nlform.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/teaser.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/ytvideo.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/ContentElements/button.typoscript"
plugin.tx_eptheme { plugin.tx_eptheme {
settings < lib.contentElement.settings settings < lib.contentElement.settings
@@ -115,9 +91,7 @@ plugin.tx_eptheme {
tt_content.stdWrap.innerWrap > tt_content.stdWrap.innerWrap >
lib.stdheader.3.headerClass > lib.stdheader.3.headerClass >
@import "EXT:ep_theme/Configuration/TypoScript/Page/Main.typoscript" @import 'EXT:ep_theme/Configuration/TypoScript/Page/*'
@import "EXT:ep_theme/Configuration/TypoScript/Page/Ajax.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Page/Export.typoscript"
config { config {
compressJs = 0 compressJs = 0
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_badges.scss
+12 -75
View File
@@ -1,110 +1,47 @@
.concept-badge { .concept-badge {
width: 100%; @apply w-full h-8 text-white px-4 leading-none uppercase bg-concept-default;
height: 34px;
color: white;
padding: 0 10px;
margin: 0;
line-height: 34px;
font-size: 16px;
text-transform: uppercase;
background-color: theme('colors.concept.default');
&--bdg { &--bdg {
background-color: theme('colors.concept.bdg'); @apply bg-concept-bdg;
} }
&--skr { &--skr {
background-color: theme('colors.concept.skr'); @apply bg-concept-skr;
} }
&--evt { &--evt {
background-color: theme('colors.concept.evt'); @apply bg-concept-evt;
} }
&--fam { &--fam {
background-color: theme('colors.concept.fam'); @apply bg-concept-fam;
} }
&--grp { &--grp {
background-color: theme('colors.concept.grp'); @apply bg-concept-grp;
} }
&--prg { &--prg {
background-color: theme('colors.concept.prg'); @apply bg-concept-prg;
} }
&--ind { &--ind {
background-color: theme('colors.concept.ind'); @apply bg-concept-ind;
} }
&--wkd { &--wkd {
background-color: theme('colors.concept.wkd'); @apply bg-concept-wkd;
} }
&--spz { &--spz {
background-color: theme('colors.concept.spz'); @apply bg-concept-spz;
} }
&--epe { &--epe {
background-color: theme('colors.concept.epe'); @apply bg-concept-epe;
} }
&--sfl { &--sfl {
background-color: theme('colors.concept.sfl'); @apply bg-concept-sfl;
} }
} }
.custom-badge {
position: relative;
}
.custom-badge__background {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
#bgouter {
fill: theme('colors.ep.primary-50');
}
#bginner {
fill: theme('colors.ep.primary');
}
}
.custom-badge__content {
position: absolute;
width: 60%;
height: 60%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
text-align: center;
color: white;
display: flex;
flex-flow: column;
justify-content: center;
}
.custom-badge__title {
display: block;
text-transform: uppercase;
font-weight: 700;
font-size: 2vw;
line-height: 1;
padding-bottom: 4px;
@screen md {
font-size: 24px;
}
}
.custom-badge__subtitle {
display: block;
text-transform: uppercase;
font-size: 18px;
line-height: 1;
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+4 -4
View File
@@ -2,15 +2,15 @@
@apply inline-flex items-center justify-center px-4 py-2 md:px-8; @apply inline-flex items-center justify-center px-4 py-2 md:px-8;
@apply uppercase leading-none; @apply uppercase leading-none;
@apply transition-colors outline-none focus:outline-none; @apply transition-colors outline-none focus:outline-none;
@apply bg-ep-secondary text-white; @apply bg-ep-secondary border-2 border-ep-secondary text-white;
&--active, &--active,
&--secondary { &--secondary {
@apply bg-ep-primary; @apply bg-ep-primary border-ep-primary;
} }
&:hover { &:hover {
@apply bg-ep-primary-dark; @apply bg-ep-primary-dark border-ep-primary-dark;
} }
&--light { &--light {
@@ -24,6 +24,6 @@
} }
&--small { &--small {
@apply px-2 py-1 md:px-4 text-sm; @apply px-2 py-1 md:px-4 text-xs border;
} }
} }
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_calendar.scss
+15 -24
View File
@@ -1,44 +1,35 @@
.label-success, .availability-full {
.free {
@apply bg-green-500; @apply bg-green-500;
} }
.label-warning, .availability-partial {
.partial {
@apply bg-yellow-300; @apply bg-yellow-300;
} }
.label-danger, .availability-none {
.full {
@apply bg-red-500; @apply bg-red-500;
} }
.label-success-danger, .availability-full-to-none {
.free-to-full { @apply bg-gradient-to-br from-green-500 to-red-500;
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%);
} }
.label-success-warning, .availability-full-to-partial {
.free-to-partial { @apply bg-gradient-to-br from-green-500 to-yellow-300;
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.yellow.300') 50%);
} }
.label-danger-success, .availability-none-to-full {
.full-to-free { @apply bg-gradient-to-br from-red-500 to-green-500;
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%);
} }
.label-warning-success, .availability-partial-to-full {
.partial-to-free { @apply bg-gradient-to-br from-yellow-300 to-green-500;
background: linear-gradient(to bottom right, theme('colors.yellow.300') 50%, theme('colors.green.500') 50%);
} }
.label-danger-warning, .availability-none-to-partial {
.full-to-partial { @apply bg-gradient-to-br from-red-500 to-yellow-300;
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.yellow.300') 50%);
} }
.label-warning-danger, .availability-partial-to-none {
.partial-to-full { @apply bg-gradient-to-br from-yellow-300 to-red-500;
background: linear-gradient(to bottom right, theme('colors.yellow.300') 50%, theme('colors.red.500') 50%);
} }
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
+3 -3
View File
@@ -1,5 +1,5 @@
.contact-bar { .contact-bar {
@apply fixed z-100 bottom-0 left-0 w-full flex justify-between divide-x divide-white; @apply fixed z-100 bottom-0 left-0 w-full flex justify-between;
@screen md { @screen md {
@apply bottom-auto left-auto top-1/2 right-0 w-auto flex-col divide-x-0 space-y-1; @apply bottom-auto left-auto top-1/2 right-0 w-auto flex-col divide-x-0 space-y-1;
@@ -8,10 +8,10 @@
} }
.contact-bar__item { .contact-bar__item {
@apply flex-1 text-white py-2 bg-ep-primary; @apply flex-1 text-white py-2 bg-ep-primary border-r border-white last:border-0;
@screen md { @screen md {
@apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md focus:text-white; @apply flex flex-none items-start transition-transform duration-300 ease-in-out p-1 shadow-md focus:text-white border-0;
&:hover { &:hover {
@apply text-white; @apply text-white;
transform: translateX(calc(-100% + theme('spacing.8'))); transform: translateX(calc(-100% + theme('spacing.8')));
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_forms.scss
View File
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_header.scss
-82
View File
@@ -1,82 +0,0 @@
.header-caption {
padding: 16px 10px;
background-color: theme('colors.ep.primary-80');
margin-bottom: 8px;
@screen md {
max-width: 55%;
padding: 30px;
}
}
.header-caption__headline {
display: block;
font-size: 24px;
line-height: 28px;
font-weight: 900;
color: #fff;
text-transform: uppercase;
max-width: 60%;
@screen md {
font-size: 40px;
line-height: 40px;
min-height: 100px;
margin-bottom: 10px;
max-width: none;
}
@screen lg {
font-size: 50px;
line-height: 50px;
}
}
.header-caption__subline {
display: none;
@screen md {
display: block;
}
font-size: 16px;
line-height: 22px;
min-height: 70px;
overflow-y: hidden;
font-weight: 300;
color: #fff;
padding-bottom: 20px;
}
.header-caption__text {
font-size: 18px;
text-transform: uppercase;
line-height: 22px;
margin-bottom: 10px;
color: white;
@screen md {
font-size: 28px;
}
span {
font-size: 16px;
font-weight: 300;
letter-spacing: 2px;
line-height: 50px;
@screen md {
font-size: 20px;
}
}
}
.header-caption__button {
display: none;
@screen md {
display: inline-block;
}
}
.header__button {
display: block;
width: 100%;
@screen md {
display: none;
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
-13
View File
@@ -20,19 +20,6 @@
} }
} }
.herounit__main {
@apply absolute left-0 bottom-0 inset-x-0 p-8 w-full;
@screen md {
@apply bottom-1/2 transform translate-y-1/2;
}
}
.herounit__inner {
@screen lg {
@apply container px-0;
}
}
.herounit__badge { .herounit__badge {
@apply absolute; @apply absolute;
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_slider.scss
+9 -136
View File
@@ -1,170 +1,43 @@
@import "~@splidejs/splide/dist/css/splide-core.min.css"; @import "~@splidejs/splide/dist/css/splide-core.min.css";
.slider {
position: relative;
margin-bottom: 20px;
padding: 0;
&--header {
margin-bottom: 0;
}
&--teasers {
margin-bottom: 0;
}
}
.slider__item {
position: relative;
background-size: cover;
background-position: left center;
&--product {
height: 240px;
@screen md {
height: 400px;
}
@screen lg {
height: 320px;
}
@screen xl {
height: 360px;
}
}
}
.slider__zoom-icon {
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
color: white;
font-size: 24px;
@screen md {
font-size: 32px;
}
}
.slider__image {
max-width: 100%;
height: auto;
}
.slider__thumbs {
padding: 20px 0;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.slider__thumb {
display: block;
width: 20%;
padding: 0 1%;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
.slider-pagination { .slider-pagination {
@apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-4; @apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-4;
@apply list-none p-0; @apply list-none p-0;
@apply flex items-center space-x-2; @apply flex items-center space-x-2;
&--header {
bottom: 10px;
@screen lg {
bottom: 90px;
}
}
} }
.slider-pagination__dot { .slider-pagination__dot {
@apply hide-text; @apply hide-text block w-3 h-3 xl:w-4 xl:h-4 rounded-full bg-white shadow-md focus:outline-none;
display: block;
width: 10px;
height: 10px;
border-radius: 5px;
background-color: white;
border: none;
box-shadow: 0 0 2px theme('colors.gray.200');
padding: 0;
@screen md {
width: 14px;
height: 14px;
border-radius: 7px;
}
&:focus {
outline: none;
}
&.is-active { &.is-active {
background-color: theme('colors.ep.secondary'); @apply bg-ep-secondary;
} }
} }
.slider-pagination__arrow { .slider-pagination__arrow {
border: none; @apply absolute z-10 text-ep-secondary bg-transparent focus:outline-none;
background: transparent;
position: absolute;
z-index: 10;
color: theme('colors.ep.secondary');
.slider--teasers & { .slider--teasers & {
background-color: theme('colors.ep.secondary'); @apply bg-ep-secondary text-white rounded p-1;
color: white;
border-radius: 4px;
padding: 4px 2px 0 2px;
}
&:focus {
outline: none;
} }
&[disabled] { &[disabled] {
opacity: 0.1; @apply opacity-25;
} }
&--prev { &--prev {
left: 5%; @apply left-0 top-1/2 transform -translate-y-1/2 ml-4;
top: 50%;
transform: translateY(-50%);
.slider--teasers & { .slider--teasers & {
left: -28px; @apply -ml-8;
} }
} }
&--next { &--next {
right: 5%; @apply right-0 top-1/2 transform -translate-y-1/2 mr-4;
top: 50%;
transform: translateY(-50%);
.slider--teasers & { .slider--teasers & {
right: -28px; @apply -mr-8;
} }
} }
} }
.slider-pagination__zone {
position: absolute;
top: 0;
z-index: 10;
height: 100%;
width: 10%;
display: block;
&--prev {
left: 0;
}
&--next {
right: 0;
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaserbox.scss
-8
View File
@@ -25,14 +25,6 @@
color: theme('colors.gray.800'); color: theme('colors.gray.800');
} }
//.slick-slide &--default {
// margin: 20px 0 30px;
//
// @include mq($from: desktop) {
// margin: 30px 0;
// }
//}
&--concept { &--concept {
margin-top: 10px; margin-top: 10px;
transition: all .5s ease-in-out; transition: all .5s ease-in-out;
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss
-3
View File
@@ -17,7 +17,6 @@
// LEGACY FROM HERE // LEGACY FROM HERE
@import "components/badges"; @import "components/badges";
@import "components/header";
@import "components/product"; @import "components/product";
@import "components/searchresult"; @import "components/searchresult";
@import "components/slider"; @import "components/slider";
@@ -34,7 +33,6 @@
@import "components/map"; @import "components/map";
@import "components/lightbox"; @import "components/lightbox";
@import "components/datepicker"; @import "components/datepicker";
@import "components/forms";
@import "components/contact-bar"; @import "components/contact-bar";
@import "components/misc"; @import "components/misc";
@import "components/tiles"; @import "components/tiles";
@@ -76,7 +74,6 @@
font: 0/0 a; font: 0/0 a;
color: transparent; color: transparent;
text-shadow: none; text-shadow: none;
background-color: transparent;
border: 0; border: 0;
} }
} }
public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html
+1 -1
View File
@@ -4,7 +4,7 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/> <f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/> <f:render partial="FacebookPixelCode"/>
<div class="lg:mt-8"> <div class="lg:mt-32">
<f:if condition="{data.tx_eptheme_hide_searchbar}"> <f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else> <f:else>
<f:cObject typoscriptObjectPath="lib.searchBarFixed"/> <f:cObject typoscriptObjectPath="lib.searchBarFixed"/>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Badge.html
+27 -15
View File
@@ -1,17 +1,29 @@
<f:if condition="{badge}"> <html data-namespace-typo3-fluid="true" lang="en"
<f:alias map="{badgeData: badge.0.data}"> xmlns="http://www.w3.org/1999/xhtml"
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="herounit__badge herounit__badge--custom custom-badge">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" <f:if condition="{badge}">
preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background"> <f:link.typolink parameter="{badge.link}"
<circle id="bgouter" cx="100" cy="100" r="100"/> title="{badge.title}"
<circle id="bginner" cx="100" cy="100" r="70"/> class="hidden md:block absolute bottom-0 right-0 -mb-8 -mr-8 w-40 transform rotate-6">
</svg> <svg viewBox="0 0 200 200"
<div class="custom-badge__content"> xmlns="http://www.w3.org/2000/svg"
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span> preserveAspectRatio="xMinYMin meet"
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span> class="w-full h-full">
</div> <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary" 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">
{badge.title -> f:format.raw()}
</span>
<f:if condition="{badge.subtitle}">
<span class="block text-center text-white uppercase font-bold leading-none">
{badge.subtitle -> f:format.raw()}
</span>
</f:if>
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:alias> </f:if>
</f:if>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Details.html
+1 -1
View File
@@ -14,7 +14,7 @@
{city.description -> f:format.html()} {city.description -> f:format.html()}
</div> </div>
<f:if condition="{city.images -> f:count()} > 0"> <f:if condition="{city.images -> f:count()} > 0">
<f:render partial="ContentSlider" arguments="{images: city.images, id: 'city-{city.uid}', thumbnails: 1}"/> <f:render partial="ImageGallery" arguments="{images: city.images, id: 'city-{city.uid}', thumbnails: 1}"/>
</f:if> </f:if>
<f:if condition="{city.party}"> <f:if condition="{city.party}">
<f:if condition="{bars}"> <f:if condition="{bars}">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContentSlider.html
-64
View File
@@ -1,64 +0,0 @@
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:comment>
This content element was implemented as a slider initially and has been turned into a lightbox gallery.
ToDo: Adjust naming accordingly
</f:comment>
<div class="slider">
<div class="slider__zoom-icon">
<i class="fa fa-search-plus"></i> {images -> f:count()}
</div>
<div class="slider__items">
<f:alias map="{image: images.0}">
<a href="javascript:;" data-glightbox="gallery-{id}">
<f:image image="{image}" width="770" height="430c+100" class="slider__image"
alt="{image.alternative}" title="{image.title}"/>
</a>
</f:alias>
</div>
<f:if condition="{thumbnails}">
<f:if condition="{images -> f:count()} > 1">
<div class="slider__thumbs hidden-sm hidden-xs">
<f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} <= 5">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}" class="slider__thumb">
<f:image image="{image}" width="150" height="85c+100" class="img-responsive"
alt="{image.originalResource.alternative}" title="{image.originalResource.title}"/>
</a>
</f:if>
</f:for>
</div>
</f:if>
</f:if>
<div class="slider__zoom" style="display: none">
<f:if condition="{thumbnails}">
<f:then>
<f:if condition="{images -> f:count()} == 1">
<f:then>
<f:alias map="{image: images.0}">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
title="{image.title}">1</a>
</f:alias>
</f:then>
<f:else>
<f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} > 5">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
title="{image.originalResource.title}">{iteration.index}</a>
</f:if>
</f:for>
</f:else>
</f:if>
</f:then>
<f:else>
<f:for each="{images}" as="image">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
title="{image.originalResource.title}">{iteration.index}</a>
</f:for>
</f:else>
</f:if>
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+8 -8
View File
@@ -95,7 +95,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bg-ep-primary-dark py-4 text-sm lg:text-base text-white"> <div class="bg-ep-primary-dark pt-4 pb-16 md:py-4 text-sm lg:text-base text-white">
<div class="container"> <div class="container">
<div class="grid grid-cols-1 md:grid-cols-12 gap-4"> <div class="grid grid-cols-1 md:grid-cols-12 gap-4">
<div class="md:col-span-4 text-center md:text-left"> <div class="md:col-span-4 text-center md:text-left">
@@ -133,7 +133,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div class="md:col-span-3 text-center md:text-left"> <div class="md:col-span-4 text-center md:text-left">
<div class="inline-flex md:flex items-start space-x-2"> <div class="inline-flex md:flex items-start space-x-2">
<a href="{settings.facebookUrl}" <a href="{settings.facebookUrl}"
title="E&amp;P bei Facebook" title="E&amp;P bei Facebook"
@@ -161,14 +161,14 @@
</a> </a>
</div> </div>
</div> </div>
<div class="md:col-span-2"> <div class="md:col-span-1">
<a class="block" <a class="block bg-white p-2 w-24 mx-auto rounded"
href="https://www.unglobalcompact.org/" href="https://www.unglobalcompact.org/"
target="_blank" target="_blank"
title="Global Compact"> title="Global Compact">
<img class="mx-auto lazyload" <img class="w-full h-auto lazyload"
data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/global_compact.png', height: '48')}" data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/global_compact.png')}"
alt="Global Compact" width="40" height="48"/> alt="Global Compact"/>
</a> </a>
</div> </div>
</div> </div>
@@ -177,7 +177,7 @@
<button x-data="scrollTop" <button x-data="scrollTop"
x-bind="trigger" x-bind="trigger"
x-cloak x-cloak
class="fixed bottom-0 right-0 mb-8 mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80"> class="fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80">
<svg class="w-8 h-8 text-white"> <svg class="w-8 h-8 text-white">
<use href="#icon-chevron-up"></use> <use href="#icon-chevron-up"></use>
</svg> </svg>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+38 -20
View File
@@ -3,7 +3,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="lg:-mt-8"> <div class="lg:-mt-8">
<div class="splide slider slider--header" data-slider="header"> <div class="splide" data-slider="header">
<div class="splide__track"> <div class="splide__track">
<ul class="splide__list"> <ul class="splide__list">
<f:for each="{slides}" as="slide" iteration="iteration"> <f:for each="{slides}" as="slide" iteration="iteration">
@@ -20,15 +20,27 @@
</div> </div>
</f:if> </f:if>
</f:alias> </f:alias>
<div class="herounit__main"> <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="herounit__inner"> <div class="lg:container px-0">
<div class="header-caption"> <div class="p-4 bg-ep-primary-80 mb-4 md:p-8 md:max-w-2xl">
<span class="header-caption__headline">{slide.headline}</span> <span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-8">
<span class="header-caption__subline">{slide.subline}</span> {slide.headline}
</span>
<span class="hidden md:block md:text-lg font-light text-white mb-8">
{slide.subline}
</span>
<f:if condition="{slide.button}"> <f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}" class="button header-caption__button">{slide.button}</f:link.typolink> <f:link.typolink parameter="{slide.page_uid}"
class="hidden md:inline-block button">
{slide.button}
</f:link.typolink>
</f:if> </f:if>
</div> </div>
<f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}" class="button w-full justify-start md:hidden">
{slide.button}
</f:link.typolink>
</f:if>
</div> </div>
</div> </div>
<f:if condition="{slide.skipass}"> <f:if condition="{slide.skipass}">
@@ -39,19 +51,25 @@
</f:if> </f:if>
<f:if condition="{badge}"> <f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}"> <f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}"> <f:link.typolink parameter="{badgeData.link}"
<div class="herounit__badge herounit__badge--custom custom-badge"> title="{badgeData.title}"
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
viewBox="0 0 200 200" class="custom-badge__background"> <svg viewBox="0 0 200 200"
<g> xmlns="http://www.w3.org/2000/svg"
<circle id="bgouter" cx="100" cy="100" r="100"></circle> preserveAspectRatio="xMinYMin meet"
<circle id="bginner" cx="100" cy="100" r="70"></circle> class="w-full h-full">
</g> <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
</svg> <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
<div class="custom-badge__content"> </svg>
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span> <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span> <span class="block text-center text-white uppercase font-bold leading-none text-xl">
</div> {badgeData.title -> f:format.raw()}
</span>
<f:if condition="{badgeData.subtitle}">
<span class="block text-center text-white uppercase font-bold leading-none">
{badgeData.subtitle -> f:format.raw()}
</span>
</f:if>
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:alias> </f:alias>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+35 -23
View File
@@ -17,18 +17,24 @@
</f:alias> </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:transform md:translate-y-1/2">
<div class="lg:container"> <div class="lg:container">
<div class="bg-ep-primary-80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16"> <div class="p-4 bg-ep-primary-80 mb-4 md:p-8 md:max-w-2xl">
<div class="header-caption__inner header-caption__inner--small"> <span class="block text-xl md:text-2xl font-light text-white uppercase">
<div class="header-caption__text"> {slide.headline}
<span>{slide.headline}</span><br>{slide.subline} </span>
</div> <span class="block text-2xl md:text-3xl lg:text-4xl text-white uppercase">
<f:if condition="{slide.button}"> {slide.subline}
<f:link.typolink parameter="{slide.page_uid}" class="button header-caption__button">{slide.button}</f:link.typolink> </span>
</f:if> <f:if condition="{slide.button}">
</div> <f:link.typolink parameter="{slide.page_uid}"
class="hidden md:inline-block button">
{slide.button}
</f:link.typolink>
</f:if>
</div> </div>
<f:if condition="{slide.button}"> <f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}" class="button header__button">{slide.button}</f:link.typolink> <f:link.typolink parameter="{slide.page_uid}" class="button w-full justify-start md:hidden">
{slide.button}
</f:link.typolink>
</f:if> </f:if>
</div> </div>
</div> </div>
@@ -40,19 +46,25 @@
</f:if> </f:if>
<f:if condition="{badge}"> <f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}"> <f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}"> <f:link.typolink parameter="{badgeData.link}"
<div class="pagehead__badge pagehead__badge--custom custom-badge"> title="{badgeData.title}"
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet" class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
viewBox="0 0 200 200" class="custom-badge__background"> <svg viewBox="0 0 200 200"
<g> xmlns="http://www.w3.org/2000/svg"
<circle id="bgouter" cx="100" cy="100" r="100"></circle> preserveAspectRatio="xMinYMin meet"
<circle id="bginner" cx="100" cy="100" r="70"></circle> class="w-full h-full">
</g> <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
</svg> <circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
<div class="custom-badge__content"> </svg>
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span> <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span> <span class="block text-center text-white uppercase font-bold leading-none text-xl">
</div> {badgeData.title -> f:format.raw()}
</span>
<f:if condition="{badgeData.subtitle}">
<span class="block text-center text-white uppercase font-bold leading-none">
{badgeData.subtitle -> f:format.raw()}
</span>
</f:if>
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:alias> </f:alias>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html
+1 -1
View File
@@ -48,7 +48,7 @@
</f:else> </f:else>
</f:if> </f:if>
<f:if condition="{hotel.images -> f:count()} > 0"> <f:if condition="{hotel.images -> f:count()} > 0">
<f:render partial="ContentSlider" arguments="{images: hotel.images, id: 'hotel-{hotel.uid}', thumbnails: 1}"/> <f:render partial="ImageGallery" arguments="{images: hotel.images, id: 'hotel-{hotel.uid}', thumbnails: 1}"/>
</f:if> </f:if>
<f:if condition="{bars}"> <f:if condition="{bars}">
<f:then> <f:then>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/ImageGallery.html
+72
View File
@@ -0,0 +1,72 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="relative mb-8">
<div class="absolute top-0 right-0 mt-4 mr-4 flex space-x-2 text-white">
<svg class="w-8 h-8 md:w-10 h-10">
<use href="#icon-search"></use>
</svg>
<span class="text-4xl">
{images -> f:count()}
</span>
</div>
<f:alias map="{image: images.0}">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}" data-glightbox="gallery-{id}">
<img data-src="{f:uri.image(image: image, width: '770', height: '430x+100')}"
class="block w-full h-auto lazyload"
alt="{image.alternative}"
title="{image.title}">
</a>
</f:alias>
<f:if condition="{thumbnails}">
<f:if condition="{images -> f:count()} > 1">
<div class="hidden md:grid md:grid-cols-5 md:gap-2 md:pt-4 md:pb-8">
<f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} <= 5">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-glightbox data-gallery="gallery-{id}"
data-caption="{image.originalResource.description}"
class="block">
<f:image image="{image}" width="150" height="85c+100" class="block w-full h-auto"
alt="{image.originalResource.alternative}" title="{image.originalResource.title}"/>
</a>
</f:if>
</f:for>
</div>
</f:if>
</f:if>
<div class="hidden">
<f:if condition="{thumbnails}">
<f:then>
<f:if condition="{images -> f:count()} == 1">
<f:then>
<f:alias map="{image: images.0}">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
title="{image.title}">1</a>
</f:alias>
</f:then>
<f:else>
<f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} > 5">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
title="{image.originalResource.title}">{iteration.index}</a>
</f:if>
</f:for>
</f:else>
</f:if>
</f:then>
<f:else>
<f:for each="{images}" as="image">
<a href="{f:uri.image(image: image, cropVariant: 'zoom', maxWidth: '2560')}"
data-glightbox data-gallery="gallery-{id}" data-caption="{image.originalResource.description}"
title="{image.originalResource.title}">{iteration.index}</a>
</f:for>
</f:else>
</f:if>
</div>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/News/Detail/MediaContainer.html
+9 -7
View File
@@ -4,26 +4,28 @@
<f:alias map="{images: '{media -> v:iterator.filter(propertyName: \'showinpreview\', filter: 0)}'}"> <f:alias map="{images: '{media -> v:iterator.filter(propertyName: \'showinpreview\', filter: 0)}'}">
<f:if condition="{images}"> <f:if condition="{images}">
<div data-slider="content" class="splide slider slider--content"> <div data-slider="content" class="splide">
<div id="carousel-{id}" class="splide__track slider__items"> <div id="carousel-{id}" class="splide__track">
<ul class="splide__list"> <ul class="splide__list">
<f:for each="{images}" as="image" iteration="iteration"> <f:for each="{images}" as="image" iteration="iteration">
<li class="splide__slide"> <li class="splide__slide">
<f:link.typolink parameter="{image.originalResource.link}" class="slider__item"> <f:link.typolink parameter="{image.originalResource.link}"
class="relative bg-cover bg-center">
<img src="{f:uri.image(image: image, width: '770', height: '430c+100')}" <img src="{f:uri.image(image: image, width: '770', height: '430c+100')}"
class="slider__image" alt="{image.alternative}" title="{image.title}"> class="block w-full h-auto"
alt="{image.alternative}" title="{image.title}">
</f:link.typolink> </f:link.typolink>
</li> </li>
</f:for> </f:for>
</ul> </ul>
</div> </div>
<f:if condition="{images -> f:count()} > 1"> <f:if condition="{images -> f:count()} > 1">
<div class="slider__thumbs hidden-sm hidden-xs"> <div class="hidden md:grid md:grid-cols-5 md:gap-2 md:pt-4 md:pb-8">
<f:for each="{images}" as="image" iteration="iteration"> <f:for each="{images}" as="image" iteration="iteration">
<f:if condition="{iteration.cycle} <= 5"> <f:if condition="{iteration.cycle} <= 5">
<a href="#" class="slider__thumb" data-slide="{iteration.index}"> <a href="#" class="block" data-slide="{iteration.index}">
<img src="{f:uri.image(image: image, width: '150', height: '85c+100')}" <img src="{f:uri.image(image: image, width: '150', height: '85c+100')}"
class="img-responsive" alt="{image.alternative}" title="{image.title}"> class="block w-full h-auto" alt="{image.alternative}" title="{image.title}">
</a> </a>
</f:if> </f:if>
</f:for> </f:for>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+96 -95
View File
@@ -1,107 +1,108 @@
{namespace v=FluidTYPO3\Vhs\ViewHelpers} <html data-namespace-typo3-fluid="true" lang="en"
{namespace ep=EP\EpTheme\ViewHelpers} xmlns="http://www.w3.org/1999/xhtml"
<div class="bg-cover bg-center bg-header-season-{product.region.season} mb-8"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
<div class="md:container"> xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<div class="md:flex md:flex-row-reverse md:items-stretch">
<div class="md:w-5/12 md:py-4 splide" data-slider="content"> <div class="bg-cover bg-center bg-header-season-{product.region.season} mb-8">
<div class="splide__track"> <div class="md:container">
<ul class="splide__list"> <div class="md:flex md:flex-row-reverse md:items-stretch">
<f:for each="{product.images}" as="image" iteration="iteration"> <div class="md:w-5/12 md:py-4 splide" data-slider="content">
<li class="splide__slide h-64 md:h-auto"> <div class="splide__track">
<picture class="w-full h-full"> <ul class="splide__list">
<source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)"> <f:for each="{product.images}" as="image" iteration="iteration">
<source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)"> <li class="splide__slide h-64 md:h-auto">
<img class="block w-full h-full object-cover" <picture class="w-full h-full">
src="{f:uri.image(image: image, width: '400')}" <source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
alt="{image.alternative}"> <source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
</picture> <img class="block w-full h-full object-cover"
</li> src="{f:uri.image(image: image, width: '400')}"
</f:for> alt="{image.alternative}">
</ul> </picture>
</div> </li>
<div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between md:hidden"> </f:for>
<button class="splide__arrow splide__arrow--prev"> </ul>
<svg class="w-10 h-10 text-ep-secondary pointer-events-none">
<use href="#icon-chevron-left"></use>
</svg>
</button>
<button class="splide__arrow splide__arrow--next">
<svg class="w-10 h-10 text-ep-secondary pointer-events-none">
<use href="#icon-chevron-right"></use>
</svg>
</button>
</div>
</div>
<div class="hidden md:block md:w-2/12 relative">
<f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
<f:link.typolink parameter="{settings.skipassPageUid}"
title="Skipass inklusive">
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
class="block w-20 xl:w-auto h-auto mx-auto"
alt="Skipass inklusive" />
</f:link.typolink>
</f:if>
<f:if condition="{product.badge}">
<f:link.typolink parameter="{product.badge.link}"
title="{product.badge.title}"
class="absolute top-0 left-0">
<div class="custom-badge">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"
viewBox="0 0 200 200" class="custom-badge__background">
<g>
<circle id="bgouter" cx="100" cy="100" r="100"></circle>
<circle id="bginner" cx="100" cy="100" r="70"></circle>
</g>
</svg>
<div class="custom-badge__content">
<span class="custom-badge__title">{product.badge.title -> f:format.raw()}</span>
<span class="custom-badge__subtitle">{product.badge.subtitle -> f:format.raw()}</span>
</div>
</div>
</f:link.typolink>
</f:if>
</div>
<div class="px-4 md:px-0 md:w-5/12 md:self-center">
<div class="relative z-10 max-w-md mx-auto shadow-md -mt-16 md:mt-0 mx-0">
<div class="bg-concept-{product.concept.code} text-white text-xl px-4 py-2 leading-none">
{product.concept.name}
</div> </div>
<div class="bg-white p-4"> <div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between md:hidden">
<span class="headline--3"> <button class="splide__arrow splide__arrow--prev">
{product.name}{f:if(condition: product.subline, then: ' {product.subline}')} <svg class="w-10 h-10 text-ep-secondary pointer-events-none">
</span> <use href="#icon-chevron-left"></use>
<span class="block">
{product.region.name}
</span>
<div class="flex space-x-4 mt-4">
<svg class="w-8 h-6 md:w-10 md:h-8">
<use href="#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
</svg> </svg>
<f:if condition="{hotel}"> </button>
<button class="splide__arrow splide__arrow--next">
<svg class="w-10 h-10 text-ep-secondary pointer-events-none">
<use href="#icon-chevron-right"></use>
</svg>
</button>
</div>
</div>
<div class="hidden md:flex md:flex-col md:justify-between md:items-center md:w-2/12 md:px-8">
<f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
<f:link.typolink parameter="{settings.skipassPageUid}"
title="Skipass inklusive">
<f:if condition="{product.badge}">
<f:then> <f:then>
<a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1"> <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
<svg class="w-4 h-4 md:w-6 md:h-6 text-white"> class="block w-20 h-auto mx-auto"
<use href="#icon-location-marker"></use> alt="Skipass inklusive" />
</svg>
</a>
</f:then> </f:then>
<f:else> <f:else>
<a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class=""> <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
<svg class="w-6 h-6"> class="block w-20 xl:w-auto h-auto mx-auto"
<use href="#icon-location-marker"></use> alt="Skipass inklusive" />
</svg>
</a>
</f:else> </f:else>
</f:if> </f:if>
</div> </f:link.typolink>
</div> </f:if>
</div> </div>
<f:if condition="{referringUrl}"> <div class="px-4 md:px-0 md:w-5/12 md:self-center py-4">
<div class="ep-backlink"> <div class="relative z-10 max-w-md shadow-md -mt-16 md:mt-0">
<a href="{referringUrl}" class="button button--small">{backlinkLabel}</a> <div class="bg-concept-{product.concept.code} text-white text-xl px-4 py-2 leading-none">
{product.concept.name}
</div>
<div class="bg-white p-4">
<span class="headline--3">
{product.name}{f:if(condition: product.subline, then: ' {product.subline}')}
</span>
<span class="block">
{product.region.name}
</span>
<div class="flex space-x-4 mt-4">
<svg class="w-8 h-6 md:w-10 md:h-8">
<use href="#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
<f:if condition="{hotel}">
<f:then>
<a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
<svg class="w-4 h-4 md:w-6 md:h-6 text-white">
<use href="#icon-location-marker"></use>
</svg>
</a>
</f:then>
<f:else>
<a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="">
<svg class="w-6 h-6">
<use href="#icon-location-marker"></use>
</svg>
</a>
</f:else>
</f:if>
</div>
</div>
<f:render partial="Badge" arguments="{badge: product.badge}"/>
</div> </div>
</f:if> <f:if condition="{referringUrl}">
<a href="{referringUrl}" class="button button--small mt-8">
<svg class="w-4 h-4 text-white">
<use href="#icon-chevron-left"></use>
</svg>
<span>
{backlinkLabel}
</span>
</a>
</f:if>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html
+1 -1
View File
@@ -47,7 +47,7 @@
<f:if condition="{region.skiAreaExtended}">{region.skiAreaExtended -> f:format.html()}</f:if> <f:if condition="{region.skiAreaExtended}">{region.skiAreaExtended -> f:format.html()}</f:if>
</div> </div>
<f:if condition="{region.images -> f:count()} > 0"> <f:if condition="{region.images -> f:count()} > 0">
<f:render partial="ContentSlider" arguments="{images: region.images, id: 'region-{region.uid}', thumbnails: 1}"/> <f:render partial="ImageGallery" arguments="{images: region.images, id: 'region-{region.uid}', thumbnails: 1}"/>
</f:if> </f:if>
<f:if condition="{bars}"> <f:if condition="{bars}">
<f:then> <f:then>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
+58 -40
View File
@@ -1,45 +1,63 @@
{namespace v=FluidTYPO3\Vhs\ViewHelpers} <html data-namespace-typo3-fluid="true" lang="en"
{images -> v:iterator.first() -> v:variable.set(name: 'headerImage')} xmlns="http://www.w3.org/1999/xhtml"
<div class="pagehead"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:if condition="{headerImage.uid}">
<picture class="w-full h-full"> <div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8 lg:-mt-8">
<source srcset="{f:uri.image(image: headerImage, width: '1360c', height: '360')}" media="(min-width: 768px)"> <f:alias map="{headerImage: images.0}">
<source srcset="{f:uri.image(image: headerImage, width: '640c', height: '320')}" media="(max-width: 767px)"> <f:if condition="{headerImage}">
<f:image image="{headerImage}" width="640" class="w-full h-full object-cover" alt="{image.alternative}"/> <picture>
</picture> <source srcset="{f:uri.image(image: headerImage, width: '1370c', height: '360')}" media="(min-width: 768px)">
</f:if> <source srcset="{f:uri.image(image: headerImage, width: '640c', height: '320')}" media="(max-width: 767px)">
<div class="pagehead__main"> <img class="block w-full h-full object-cover"
<div class="pagehead__inner"> src="{f:uri.image(image: headerImage, height: '640')}"
<div class="header-caption"> alt="{headerImage.alternative}">
<div class="header-caption__inner header-caption__inner--small"> </picture>
<div class="header-caption__text"><span>{topline}</span><br>{headline}</div> </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="lg:container px-0">
<div class="bg-ep-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">
{topline}
</span>
<span class="block text-2xl md:text-3xl lg:text-4xl text-white uppercase">
{headline}
</span>
</div> </div>
</div> </div>
</div> </div>
</div> <f:if condition="{settings.showSkipassBadge}">
<f:if condition="{settings.showSkipassBadge}"> <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive" class="pagehead__badge pagehead__badge--skipass" /> alt="Skipass inklusive"
</f:if> class="absolute top-0 lg:top-8 right-8 lg:right-28 w-20 lg:w-auto" />
<f:if condition="{headerImage.originaldescription}"> </f:if>
<div class="pagehead__picturecredit">{headerImage.description -> f:format.htmlspecialchars()}</div> <f:if condition="{headerImage.originaldescription}">
</f:if> <div class="pagehead__picturecredit">{headerImage.description -> f:format.htmlspecialchars()}</div>
<f:if condition="{badge}"> </f:if>
<f:alias map="{badgeData: badge.0.data}"> <f:if condition="{badge}">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}"> <f:alias map="{badgeData: badge.0.data}">
<div class="pagehead__badge pagehead__badge--custom custom-badge"> <f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}"
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background"> <svg viewBox="0 0 200 200"
<g> xmlns="http://www.w3.org/2000/svg"
<circle id="bgouter" cx="100" cy="100" r="100"/> preserveAspectRatio="xMinYMin meet"
<circle id="bginner" cx="100" cy="100" r="70"/> class="w-full h-full">
</g> <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/>
</svg> </svg>
<div class="custom-badge__content"> <div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8">
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span> <span class="block text-center text-white uppercase font-bold leading-none text-xl">
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span> {badgeData.title -> f:format.raw()}
</span>
<f:if condition="{badgeData.subtitle}">
<span class="block text-center text-white uppercase font-bold leading-none">
{badgeData.subtitle -> f:format.raw()}
</span>
</f:if>
</div> </div>
</div> </f:link.typolink>
</f:link.typolink> </f:alias>
</f:alias> </f:if>
</f:if> </div>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/City/Detail.html
+2 -2
View File
@@ -13,7 +13,7 @@
<div class="mb-8 lg:hidden"> <div class="mb-8 lg:hidden">
<a href="#teasers" <a href="#teasers"
x-data="scrollTo('teasers')" x-data="scrollTo('teasers')"
class="button button--full"> class="button w-full mb-8">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</div> </div>
@@ -28,7 +28,7 @@
<p class="hidden lg:block"> <p class="hidden lg:block">
<a href="#teasers" <a href="#teasers"
x-data="scrollTo('teasers')" x-data="scrollTo('teasers')"
class="button button--full"> class="button w-full mb-8">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</p> </p>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Concept/Detail.html
+2 -2
View File
@@ -13,7 +13,7 @@
<div class="mb-8 lg:hidden"> <div class="mb-8 lg:hidden">
<a href="#teasers" <a href="#teasers"
x-data="scrollTo('teasers')" x-data="scrollTo('teasers')"
class="button button--full"> class="button w-full mb-8">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</div> </div>
@@ -52,7 +52,7 @@
<p class="hidden lg:block"> <p class="hidden lg:block">
<a href="#teasers" <a href="#teasers"
x-data="scrollTo('teasers')" x-data="scrollTo('teasers')"
class="button button--full"> class="button w-full mb-8">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</p> </p>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Country/Detail.html
+3 -3
View File
@@ -13,7 +13,7 @@
<div class="mb-8 lg:hidden"> <div class="mb-8 lg:hidden">
<a href="#teasers" <a href="#teasers"
x-data="scrollTo('teasers')" x-data="scrollTo('teasers')"
class="button button--full"> class="button w-full mb-8">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</div> </div>
@@ -47,7 +47,7 @@
</f:if> </f:if>
<f:if condition="{country.descriptionExtended}">{country.descriptionExtended -> f:format.html()}</f:if> <f:if condition="{country.descriptionExtended}">{country.descriptionExtended -> f:format.html()}</f:if>
<f:if condition="{country.images -> f:count()} > 0"> <f:if condition="{country.images -> f:count()} > 0">
<f:render partial="ContentSlider" arguments="{images: country.images, id: 'country-{country.uid}'}"/> <f:render partial="ImageGallery" arguments="{images: country.images, id: 'country-{country.uid}'}"/>
</f:if> </f:if>
</div> </div>
<div class="col-span-3 lg:col-span-1"> <div class="col-span-3 lg:col-span-1">
@@ -55,7 +55,7 @@
<p class="hidden lg:block"> <p class="hidden lg:block">
<a href="#teasers" <a href="#teasers"
x-data="scrollTo('teasers')" x-data="scrollTo('teasers')"
class="button button--full"> class="button w-full mb-8">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</p> </p>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Textmedia.html
+2 -2
View File
@@ -8,10 +8,10 @@
<f:section name="Main"> <f:section name="Main">
<f:switch expression="{data.layout}"> <f:switch expression="{data.layout}">
<f:case value="2"> <f:case value="2">
<f:render partial="ContentSlider" arguments="{images: files, thumbnails: 1, id: data.uid}"/> <f:render partial="ImageGallery" arguments="{images: files, thumbnails: 1, id: data.uid}"/>
</f:case> </f:case>
<f:case value="4"> <f:case value="4">
<f:render partial="ContentSlider" arguments="{images: files, thumbnails: 0, id: data.uid}"/> <f:render partial="ImageGallery" arguments="{images: files, thumbnails: 0, id: data.uid}"/>
</f:case> </f:case>
<f:case value="3"> <f:case value="3">
<f:render partial="Textmedia/LinkPanel" section="Content" arguments="{images: files}"/> <f:render partial="Textmedia/LinkPanel" section="Content" arguments="{images: files}"/>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/Textpic.html
+2 -2
View File
@@ -8,10 +8,10 @@
<f:section name="Main"> <f:section name="Main">
<f:switch expression="{data.layout}"> <f:switch expression="{data.layout}">
<f:case value="2"> <f:case value="2">
<f:render partial="ContentSlider" arguments="{images: files, thumbnails: 1, id: data.uid}"/> <f:render partial="ImageGallery" arguments="{images: files, thumbnails: 1, id: data.uid}"/>
</f:case> </f:case>
<f:case value="4"> <f:case value="4">
<f:render partial="ContentSlider" arguments="{images: files, thumbnails: 0, id: data.uid}"/> <f:render partial="ImageGallery" arguments="{images: files, thumbnails: 0, id: data.uid}"/>
</f:case> </f:case>
<f:case value="3"> <f:case value="3">
<f:render partial="Textmedia/LinkPanel" section="Content" arguments="{images: files}"/> <f:render partial="Textmedia/LinkPanel" section="Content" arguments="{images: files}"/>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/Detail.html
+2 -2
View File
@@ -12,7 +12,7 @@
<div class="mb-8 lg:hidden"> <div class="mb-8 lg:hidden">
<a href="#teasers" <a href="#teasers"
x-data="scrollTo('teasers')" x-data="scrollTo('teasers')"
class="button button--full"> class="button w-full mb-8">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</div> </div>
@@ -27,7 +27,7 @@
<p class="hidden lg:block"> <p class="hidden lg:block">
<a href="#teasers" <a href="#teasers"
x-data="scrollTo('teasers')" x-data="scrollTo('teasers')"
class="button button--full"> class="button w-full mb-8">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</p> </p>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Hotel/DetailEvent.html
+1 -1
View File
@@ -8,7 +8,7 @@
<f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/> <f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/>
<div class="grid grid-cols-2 gap-8"> <div class="grid grid-cols-2 gap-8">
<div class="col-span-2 md:col-span-1"> <div class="col-span-2 md:col-span-1">
<f:render partial="ContentSlider" arguments="{id: hotel.uid, images: hotel.images, thumbnails: 0}"/> <f:render partial="ImageGallery" arguments="{id: hotel.uid, images: hotel.images, thumbnails: 0}"/>
</div> </div>
<div class="col-span-2 md:col-span-1"> <div class="col-span-2 md:col-span-1">
{hotel.description -> f:format.html()} {hotel.description -> f:format.html()}
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html
+65 -31
View File
@@ -225,20 +225,20 @@
<table class="min-w-full border-collapse"> <table class="min-w-full border-collapse">
<thead> <thead>
<tr> <tr>
<th class="p-1"> <th class="p-1 text-left">
Termin Termin
</th> </th>
<th class="p-1"> <th class="p-1 text-left">
<span data-microtip-position="bottom" aria-label="Nächte" role="tooltip"> <span data-microtip-position="bottom" aria-label="Nächte" role="tooltip">
<svg class="w-4 h-4"> <svg class="w-4 h-4">
<use href="#icon-bed"></use> <use href="#icon-bed"></use>
</svg> </svg>
</span> </span>
</th> </th>
<th class="p-1 whitespace-nowrap"> <th class="p-1 text-left whitespace-nowrap">
Preis ab Preis ab
</th> </th>
<th class="p-1"> <th class="p-1 text-left">
inkl. inkl.
</th> </th>
<th class="hidden lg:table-cell"></th> <th class="hidden lg:table-cell"></th>
@@ -249,14 +249,14 @@
<tr class="even:bg-gray-200" x-bind:class="{ 'hidden': index > 4 && !showAll }"> <tr class="even:bg-gray-200" x-bind:class="{ 'hidden': index > 4 && !showAll }">
<td class="px-2 py-1"> <td class="px-2 py-1">
<template x-if="bookable && row.available && !row.isHideBookingButton"> <template x-if="bookable && row.available && !row.isHideBookingButton">
<a class="dates-table__date" href="#" <a class="text-ep-primary-light" href="#"
x-on:click.prevent="loadPrices(row.dateUid)" x-on:click.prevent="loadPrices(row.dateUid)"
x-text="row.dateStart + ' - ' + row.dateEnd"></a> x-text="row.dateStart + ' - ' + row.dateEnd"></a>
<div class="hidden-md hidden-lg dates-table__links"> <div class="md:hidden">
<button x-on:click.prevent="loadPrices(row.dateUid)" class="button button--small"> <button x-on:click.prevent="loadPrices(row.dateUid)" class="button button--small">
Details Details
</button> </button>
<a x-bind:href="row.bookingUrl" target="_blank" class="button button--small button--action"> <a x-bind:href="row.bookingUrl" target="_blank" class="button button--small bg-green-500 border-green-500">
Buchen Buchen
</a> </a>
</div> </div>
@@ -297,16 +297,21 @@
</div> </div>
</td> </td>
<td class="px-2 py-1 hidden sm:table-cell"> <td class="px-2 py-1 hidden sm:table-cell">
<button x-show="row.available || row.isHideBookingButton" class="button button--small" x-on:click.prevent="loadPrices(row.dateUid)"> <button x-show="row.available || row.isHideBookingButton" class="button button--small"
x-on:click.prevent="loadPrices(row.dateUid)">
Details Details
</button> </button>
<a x-show="row.available && !row.isHideBookingButton" x-bind:href="row.bookingUrl" target="_blank" class="button button--small button--action"> <a x-show="row.available && !row.isHideBookingButton" x-bind:href="row.bookingUrl"
target="_blank"
class="button button--small bg-green-500 border-green-500">
Buchen Buchen
</a> </a>
<a x-show="row.isHideBookingButton" x-bind:href="uris.travelAlertUrl" class="button button--small button--mute"> <a x-show="row.isHideBookingButton" x-bind:href="uris.travelAlertUrl"
class="button button--small bg-gray-300">
Reisen-Alert Reisen-Alert
</a> </a>
<span x-show="!row.available && !row.isHideBookingButton" class="label label-default"> <span x-show="!row.available && !row.isHideBookingButton"
class="inline-block px-2 mx-1 text-xs text-gray-500">
ausgebucht ausgebucht
</span> </span>
</td> </td>
@@ -338,7 +343,16 @@
</div> </div>
</template> </template>
<template x-for="row in datesRows"> <template x-for="row in datesRows">
<div x-bind:id="'services-' + row.dateUid" x-show="$store.show.modal === $el.id" x-transition x-cloak class="fixed inset-0 w-full h-full z-50"> <div x-bind:id="'services-' + row.dateUid"
x-show="$store.show.modal === $el.id"
x-transition:enter="transition duration-200 ease-in-out"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition duration-200 ease-in-out"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak
class="fixed inset-0 w-full h-full z-50">
<div class="absolute inset-0 w-full h-full bg-overlay-black" x-on:click="$store.show.modal = null"></div> <div class="absolute inset-0 w-full h-full bg-overlay-black" x-on:click="$store.show.modal = null"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl rounded"> <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl rounded">
<div class="flex justify-between border-b border-gray-200 pb-2 mb-4"> <div class="flex justify-between border-b border-gray-200 pb-2 mb-4">
@@ -377,13 +391,13 @@
<table class="min-w-full border-collapse"> <table class="min-w-full border-collapse">
<thead> <thead>
<tr> <tr>
<th> <th class="text-left">
Zimmertyp Zimmertyp
</th> </th>
<th> <th class="text-left">
Preis Preis
</th> </th>
<th> <th class="text-left">
inkl. inkl.
</th> </th>
<th></th> <th></th>
@@ -405,7 +419,7 @@
</a> </a>
<div class="lg:hidden" <div class="lg:hidden"
x-show="!row.roomAvailable"> x-show="!row.roomAvailable">
<span class="label label-default"> <span class="inline-block px-2 mx-1 text-xs text-gray-500">
ausgebucht ausgebucht
</span> </span>
</div> </div>
@@ -442,11 +456,20 @@
</button> </button>
</td> </td>
<td class="hidden lg:table-cell px-2 py-1"> <td class="hidden lg:table-cell px-2 py-1">
<a class="button button--small button--action" x-show="row.roomAvailable && !row.isHideBookingButton" <a class="button button--small button--action"
x-bind:href="row.bookingUrl" target="_blank">Buchen</a> x-show="row.roomAvailable && !row.isHideBookingButton"
<a class="button button--small button--mute" x-show="row.isHideBookingButton" x-bind:href="row.bookingUrl" target="_blank">
x-bind:href="uris.travelAlertUrl">Reisen-Alert</a> Buchen
<span x-show="!row.roomAvailable && !row.isHideBookingButton" class="label label-default">ausgebucht</span> </a>
<a class="button button--small button--mute"
x-show="row.isHideBookingButton"
x-bind:href="uris.travelAlertUrl">
Reisen-Alert
</a>
<span x-show="!row.roomAvailable && !row.isHideBookingButton"
class="inline-block px-2 mx-1 text-xs text-gray-500">
ausgebucht
</span>
</td> </td>
</tr> </tr>
</template> </template>
@@ -454,10 +477,19 @@
</table> </table>
</div> </div>
<template x-for="row in pricesRows"> <template x-for="row in pricesRows">
<div x-bind:id="'optional-services-' + row.roomUid" x-show="$store.show.modal === $el.id" x-transition x-cloak class="fixed inset-0 w-full h-full z-50"> <div x-bind:id="'optional-services-' + row.roomUid"
x-show="$store.show.modal === $el.id"
x-transition:enter="transition duration-200 ease-in-out"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition duration-200 ease-in-out"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
x-cloak
class="fixed inset-0 w-full h-full z-50">
<div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center" x-on:click="$store.show.modal = null"></div> <div class="absolute inset-0 w-full h-full bg-overlay-black z-25 flex items-center justify-center" x-on:click="$store.show.modal = null"></div>
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl h-128 overflow-y-scroll rounded"> <div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 bg-white p-8 shadow w-full max-w-3xl h-128 overflow-y-scroll rounded">
<div class="flex justify-between border-b border-gray-200 pb-2 mb-4"> <div class="flex justify-between pb-2 mb-4">
<span class="text-2xl font-bold"> <span class="text-2xl font-bold">
Optionale Zusatzleistungen Optionale Zusatzleistungen
</span> </span>
@@ -466,10 +498,10 @@
</button> </button>
</div> </div>
<template x-for="section in row.roomOptionalServices"> <template x-for="section in row.roomOptionalServices">
<div class="pb-2 border-t border-gray-200 first:border-0"> <div class="py-2 -mx-1">
<div class="font-bold text-xl" x-text="section.label"></div> <div class="font-bold text-xl px-1" x-text="section.label"></div>
<template x-for="optionalService in section.services"> <template x-for="optionalService in section.services">
<dl class="flex items-start justify-between mb-0"> <dl class="flex items-start justify-between p-1 hover:bg-gray-200">
<dt class="font-normal" x-text="optionalService.label + ':'"></dt> <dt class="font-normal" x-text="optionalService.label + ':'"></dt>
<dd class="whitespace-nowrap" x-text="optionalService.price + ' €'"></dd> <dd class="whitespace-nowrap" x-text="optionalService.price + ' €'"></dd>
</dl> </dl>
@@ -480,11 +512,13 @@
</div> </div>
</template> </template>
<template x-if="!singleDate"> <template x-if="!singleDate">
<p> <button class="button button--small mb-4"
<button class="button button--small" x-on:click.prevent="tableMode = 'dates'"> x-on:click.prevent="tableMode = 'dates'">
<i class="fa fa-undo"></i> zurück zur Terminübersicht <svg class="w-4 h-4 text-white">
</button> <use href="#icon-chevron-left"></use>
</p> </svg>
<span>zurück zur Terminübersicht</span>
</button>
</template> </template>
<div class="headerbar"> <div class="headerbar">
Inklusivleistungen Inklusivleistungen
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Region/Detail.html
+2 -2
View File
@@ -13,7 +13,7 @@
<div class="mb-8 lg:hidden"> <div class="mb-8 lg:hidden">
<a href="#teasers" <a href="#teasers"
x-data="scrollTo('teasers')" x-data="scrollTo('teasers')"
class="button button--full"> class="button w-full mb-8">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</div> </div>
@@ -28,7 +28,7 @@
<p class="hidden lg:block"> <p class="hidden lg:block">
<a href="#teasers" <a href="#teasers"
x-data="scrollTo('teasers')" x-data="scrollTo('teasers')"
class="button button--full"> class="button w-full mb-8">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</p> </p>