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' ];
if ($levelFrom === static::LEVEL_RED) {
$class = 'full';
$class = 'availability-none';
} elseif ($levelFrom === static::LEVEL_YELLOW) {
$class = 'partial';
$class = 'availability-partial';
} else {
$class = 'free';
$class = 'availability-full';
}
if ($levelTo === static::LEVEL_RED) {
$class .= '-to-full';
$class .= '-to-none';
} elseif ($levelTo === static::LEVEL_YELLOW) {
$class .= '-to-partial';
} elseif ($levelTo !== null) {
$class .= '-to-free';
$class .= '-to-full';
}
$classes[] = $class;
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:ep_products/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:typo3_encore/Configuration/TypoScript/constants.typoscript"
@import 'EXT:fluid_styled_content/Configuration/TypoScript/constants.typoscript'
@import 'EXT:ep_products/Configuration/TypoScript/constants.typoscript'
@import 'EXT:gridelements/Configuration/TypoScript/constants.typoscript'
@import 'EXT:seo/Configuration/TypoScript/XmlSitemap/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/Form.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Extensions/News.typoscript"
@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"
@import 'EXT:ep_theme/Configuration/TypoScript/Extensions/*'
@import 'EXT:ep_theme/Configuration/TypoScript/Library/*'
@import 'EXT:ep_theme/Configuration/TypoScript/ContentElements/*'
plugin.tx_eptheme {
settings < lib.contentElement.settings
@@ -115,9 +91,7 @@ plugin.tx_eptheme {
tt_content.stdWrap.innerWrap >
lib.stdheader.3.headerClass >
@import "EXT:ep_theme/Configuration/TypoScript/Page/Main.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Page/Ajax.typoscript"
@import "EXT:ep_theme/Configuration/TypoScript/Page/Export.typoscript"
@import 'EXT:ep_theme/Configuration/TypoScript/Page/*'
config {
compressJs = 0
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_badges.scss
+12 -75
View File
@@ -1,110 +1,47 @@
.concept-badge {
width: 100%;
height: 34px;
color: white;
padding: 0 10px;
margin: 0;
line-height: 34px;
font-size: 16px;
text-transform: uppercase;
background-color: theme('colors.concept.default');
@apply w-full h-8 text-white px-4 leading-none uppercase bg-concept-default;
&--bdg {
background-color: theme('colors.concept.bdg');
@apply bg-concept-bdg;
}
&--skr {
background-color: theme('colors.concept.skr');
@apply bg-concept-skr;
}
&--evt {
background-color: theme('colors.concept.evt');
@apply bg-concept-evt;
}
&--fam {
background-color: theme('colors.concept.fam');
@apply bg-concept-fam;
}
&--grp {
background-color: theme('colors.concept.grp');
@apply bg-concept-grp;
}
&--prg {
background-color: theme('colors.concept.prg');
@apply bg-concept-prg;
}
&--ind {
background-color: theme('colors.concept.ind');
@apply bg-concept-ind;
}
&--wkd {
background-color: theme('colors.concept.wkd');
@apply bg-concept-wkd;
}
&--spz {
background-color: theme('colors.concept.spz');
@apply bg-concept-spz;
}
&--epe {
background-color: theme('colors.concept.epe');
@apply bg-concept-epe;
}
&--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 uppercase leading-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,
&--secondary {
@apply bg-ep-primary;
@apply bg-ep-primary border-ep-primary;
}
&:hover {
@apply bg-ep-primary-dark;
@apply bg-ep-primary-dark border-ep-primary-dark;
}
&--light {
@@ -24,6 +24,6 @@
}
&--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,
.free {
.availability-full {
@apply bg-green-500;
}
.label-warning,
.partial {
.availability-partial {
@apply bg-yellow-300;
}
.label-danger,
.full {
.availability-none {
@apply bg-red-500;
}
.label-success-danger,
.free-to-full {
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.red.500') 50%);
.availability-full-to-none {
@apply bg-gradient-to-br from-green-500 to-red-500;
}
.label-success-warning,
.free-to-partial {
background: linear-gradient(to bottom right, theme('colors.green.500') 50%, theme('colors.yellow.300') 50%);
.availability-full-to-partial {
@apply bg-gradient-to-br from-green-500 to-yellow-300;
}
.label-danger-success,
.full-to-free {
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.green.500') 50%);
.availability-none-to-full {
@apply bg-gradient-to-br from-red-500 to-green-500;
}
.label-warning-success,
.partial-to-free {
background: linear-gradient(to bottom right, theme('colors.yellow.300') 50%, theme('colors.green.500') 50%);
.availability-partial-to-full {
@apply bg-gradient-to-br from-yellow-300 to-green-500;
}
.label-danger-warning,
.full-to-partial {
background: linear-gradient(to bottom right, theme('colors.red.500') 50%, theme('colors.yellow.300') 50%);
.availability-none-to-partial {
@apply bg-gradient-to-br from-red-500 to-yellow-300;
}
.label-warning-danger,
.partial-to-full {
background: linear-gradient(to bottom right, theme('colors.yellow.300') 50%, theme('colors.red.500') 50%);
.availability-partial-to-none {
@apply bg-gradient-to-br from-yellow-300 to-red-500;
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_contact-bar.scss
+3 -3
View File
@@ -1,5 +1,5 @@
.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 {
@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 {
@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 {
@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 {
@apply text-white;
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 {
@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";
.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 {
@apply absolute bottom-0 left-1/2 transform -translate-x-1/2 md:mb-4;
@apply list-none p-0;
@apply flex items-center space-x-2;
&--header {
bottom: 10px;
@screen lg {
bottom: 90px;
}
}
}
.slider-pagination__dot {
@apply hide-text;
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;
}
@apply hide-text block w-3 h-3 xl:w-4 xl:h-4 rounded-full bg-white shadow-md focus:outline-none;
&.is-active {
background-color: theme('colors.ep.secondary');
@apply bg-ep-secondary;
}
}
.slider-pagination__arrow {
border: none;
background: transparent;
position: absolute;
z-index: 10;
color: theme('colors.ep.secondary');
@apply absolute z-10 text-ep-secondary bg-transparent focus:outline-none;
.slider--teasers & {
background-color: theme('colors.ep.secondary');
color: white;
border-radius: 4px;
padding: 4px 2px 0 2px;
}
&:focus {
outline: none;
@apply bg-ep-secondary text-white rounded p-1;
}
&[disabled] {
opacity: 0.1;
@apply opacity-25;
}
&--prev {
left: 5%;
top: 50%;
transform: translateY(-50%);
@apply left-0 top-1/2 transform -translate-y-1/2 ml-4;
.slider--teasers & {
left: -28px;
@apply -ml-8;
}
}
&--next {
right: 5%;
top: 50%;
transform: translateY(-50%);
@apply right-0 top-1/2 transform -translate-y-1/2 mr-4;
.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');
}
//.slick-slide &--default {
// margin: 20px 0 30px;
//
// @include mq($from: desktop) {
// margin: 30px 0;
// }
//}
&--concept {
margin-top: 10px;
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
@import "components/badges";
@import "components/header";
@import "components/product";
@import "components/searchresult";
@import "components/slider";
@@ -34,7 +33,6 @@
@import "components/map";
@import "components/lightbox";
@import "components/datepicker";
@import "components/forms";
@import "components/contact-bar";
@import "components/misc";
@import "components/tiles";
@@ -76,7 +74,6 @@
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
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="FacebookPixelCode"/>
<div class="lg:mt-8">
<div class="lg:mt-32">
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<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}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
<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"
preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background">
<circle id="bgouter" cx="100" cy="100" r="100"/>
<circle id="bginner" cx="100" cy="100" r="70"/>
</svg>
<div class="custom-badge__content">
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
</div>
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:if condition="{badge}">
<f:link.typolink parameter="{badge.link}"
title="{badge.title}"
class="hidden md:block absolute bottom-0 right-0 -mb-8 -mr-8 w-40 transform rotate-6">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<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>
</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()}
</div>
<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 condition="{city.party}">
<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 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="grid grid-cols-1 md:grid-cols-12 gap-4">
<div class="md:col-span-4 text-center md:text-left">
@@ -133,7 +133,7 @@
</li>
</ul>
</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">
<a href="{settings.facebookUrl}"
title="E&amp;P bei Facebook"
@@ -161,14 +161,14 @@
</a>
</div>
</div>
<div class="md:col-span-2">
<a class="block"
<div class="md:col-span-1">
<a class="block bg-white p-2 w-24 mx-auto rounded"
href="https://www.unglobalcompact.org/"
target="_blank"
title="Global Compact">
<img class="mx-auto lazyload"
data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/global_compact.png', height: '48')}"
alt="Global Compact" width="40" height="48"/>
<img class="w-full h-auto lazyload"
data-src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/global_compact.png')}"
alt="Global Compact"/>
</a>
</div>
</div>
@@ -177,7 +177,7 @@
<button x-data="scrollTop"
x-bind="trigger"
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">
<use href="#icon-chevron-up"></use>
</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">
<div class="lg:-mt-8">
<div class="splide slider slider--header" data-slider="header">
<div class="splide" data-slider="header">
<div class="splide__track">
<ul class="splide__list">
<f:for each="{slides}" as="slide" iteration="iteration">
@@ -20,15 +20,27 @@
</div>
</f:if>
</f:alias>
<div class="herounit__main">
<div class="herounit__inner">
<div class="header-caption">
<span class="header-caption__headline">{slide.headline}</span>
<span class="header-caption__subline">{slide.subline}</span>
<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="lg:container px-0">
<div class="p-4 bg-ep-primary-80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-8">
{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: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>
</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>
<f:if condition="{slide.skipass}">
@@ -39,19 +51,25 @@
</f:if>
<f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
<div class="herounit__badge herounit__badge--custom 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">{badgeData.title -> f:format.raw()}</span>
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
</div>
<f:link.typolink parameter="{badgeData.link}"
title="{badgeData.title}"
class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<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">
{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>
</f:link.typolink>
</f:alias>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+35 -23
View File
@@ -17,18 +17,24 @@
</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">
<div class="bg-ep-primary-80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16">
<div class="header-caption__inner header-caption__inner--small">
<div class="header-caption__text">
<span>{slide.headline}</span><br>{slide.subline}
</div>
<f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}" class="button header-caption__button">{slide.button}</f:link.typolink>
</f:if>
</div>
<div class="p-4 bg-ep-primary-80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-xl md:text-2xl font-light text-white uppercase">
{slide.headline}
</span>
<span class="block text-2xl md:text-3xl lg:text-4xl text-white uppercase">
{slide.subline}
</span>
<f:if condition="{slide.button}">
<f:link.typolink parameter="{slide.page_uid}"
class="hidden md:inline-block button">
{slide.button}
</f:link.typolink>
</f:if>
</div>
<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>
</div>
</div>
@@ -40,19 +46,25 @@
</f:if>
<f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
<div class="pagehead__badge pagehead__badge--custom 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">{badgeData.title -> f:format.raw()}</span>
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
</div>
<f:link.typolink parameter="{badgeData.link}"
title="{badgeData.title}"
class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<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">
{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>
</f:link.typolink>
</f:alias>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html
+1 -1
View File
@@ -48,7 +48,7 @@
</f:else>
</f:if>
<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 condition="{bars}">
<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:if condition="{images}">
<div data-slider="content" class="splide slider slider--content">
<div id="carousel-{id}" class="splide__track slider__items">
<div data-slider="content" class="splide">
<div id="carousel-{id}" class="splide__track">
<ul class="splide__list">
<f:for each="{images}" as="image" iteration="iteration">
<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')}"
class="slider__image" alt="{image.alternative}" title="{image.title}">
class="block w-full h-auto"
alt="{image.alternative}" title="{image.title}">
</f:link.typolink>
</li>
</f:for>
</ul>
</div>
<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: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')}"
class="img-responsive" alt="{image.alternative}" title="{image.title}">
class="block w-full h-auto" alt="{image.alternative}" title="{image.title}">
</a>
</f:if>
</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}
{namespace ep=EP\EpTheme\ViewHelpers}
<div class="bg-cover bg-center bg-header-season-{product.region.season} mb-8">
<div class="md:container">
<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="splide__track">
<ul class="splide__list">
<f:for each="{product.images}" as="image" iteration="iteration">
<li class="splide__slide h-64 md:h-auto">
<picture class="w-full h-full">
<source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
<img class="block w-full h-full object-cover"
src="{f:uri.image(image: image, width: '400')}"
alt="{image.alternative}">
</picture>
</li>
</f:for>
</ul>
</div>
<div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between md:hidden">
<button class="splide__arrow splide__arrow--prev">
<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}
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<div class="bg-cover bg-center bg-header-season-{product.region.season} mb-8">
<div class="md:container">
<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="splide__track">
<ul class="splide__list">
<f:for each="{product.images}" as="image" iteration="iteration">
<li class="splide__slide h-64 md:h-auto">
<picture class="w-full h-full">
<source srcset="{f:uri.image(image: image, width: '585')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, width: '400')}" media="(max-width: 767px)">
<img class="block w-full h-full object-cover"
src="{f:uri.image(image: image, width: '400')}"
alt="{image.alternative}">
</picture>
</li>
</f:for>
</ul>
</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>
<div class="splide__arrows absolute z-10 top-1/2 left-0 transform -translate-y-1/2 w-full flex justify-between md:hidden">
<button class="splide__arrow splide__arrow--prev">
<svg class="w-10 h-10 text-ep-secondary pointer-events-none">
<use href="#icon-chevron-left"></use>
</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>
<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:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
class="block w-20 h-auto mx-auto"
alt="Skipass inklusive" />
</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: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:else>
</f:if>
</div>
</div>
</f:link.typolink>
</f:if>
</div>
<f:if condition="{referringUrl}">
<div class="ep-backlink">
<a href="{referringUrl}" class="button button--small">{backlinkLabel}</a>
<div class="px-4 md:px-0 md:w-5/12 md:self-center py-4">
<div class="relative z-10 max-w-md shadow-md -mt-16 md:mt-0">
<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>
</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>
</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>
</div>
<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 condition="{bars}">
<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}
{images -> v:iterator.first() -> v:variable.set(name: 'headerImage')}
<div class="pagehead">
<f:if condition="{headerImage.uid}">
<picture class="w-full h-full">
<source srcset="{f:uri.image(image: headerImage, width: '1360c', height: '360')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: headerImage, width: '640c', height: '320')}" media="(max-width: 767px)">
<f:image image="{headerImage}" width="640" class="w-full h-full object-cover" alt="{image.alternative}"/>
</picture>
</f:if>
<div class="pagehead__main">
<div class="pagehead__inner">
<div class="header-caption">
<div class="header-caption__inner header-caption__inner--small">
<div class="header-caption__text"><span>{topline}</span><br>{headline}</div>
<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 max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8 lg:-mt-8">
<f:alias map="{headerImage: images.0}">
<f:if condition="{headerImage}">
<picture>
<source srcset="{f:uri.image(image: headerImage, width: '1370c', height: '360')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: headerImage, width: '640c', height: '320')}" media="(max-width: 767px)">
<img class="block w-full h-full object-cover"
src="{f:uri.image(image: headerImage, height: '640')}"
alt="{headerImage.alternative}">
</picture>
</f:if>
</f:alias>
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
<div class="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>
<f:if condition="{settings.showSkipassBadge}">
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive" class="pagehead__badge pagehead__badge--skipass" />
</f:if>
<f:if condition="{headerImage.originaldescription}">
<div class="pagehead__picturecredit">{headerImage.description -> f:format.htmlspecialchars()}</div>
</f:if>
<f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}">
<div class="pagehead__badge pagehead__badge--custom custom-badge">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMinYMin meet" viewBox="0 0 200 200" class="custom-badge__background">
<g>
<circle id="bgouter" cx="100" cy="100" r="100"/>
<circle id="bginner" cx="100" cy="100" r="70"/>
</g>
<f:if condition="{settings.showSkipassBadge}">
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png"
alt="Skipass inklusive"
class="absolute top-0 lg:top-8 right-8 lg:right-28 w-20 lg:w-auto" />
</f:if>
<f:if condition="{headerImage.originaldescription}">
<div class="pagehead__picturecredit">{headerImage.description -> f:format.htmlspecialchars()}</div>
</f:if>
<f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}" title="{badgeData.title}"
class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
<svg viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
preserveAspectRatio="xMinYMin meet"
class="w-full h-full">
<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="custom-badge__content">
<span class="custom-badge__title">{badgeData.title -> f:format.raw()}</span>
<span class="custom-badge__subtitle">{badgeData.subtitle -> f:format.raw()}</span>
<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">
{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:alias>
</f:if>
</div>
</f:link.typolink>
</f:alias>
</f:if>
</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">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
class="button w-full mb-8">
Direkt zu den Angeboten
</a>
</div>
@@ -28,7 +28,7 @@
<p class="hidden lg:block">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
class="button w-full mb-8">
Direkt zu den Angeboten
</a>
</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">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
class="button w-full mb-8">
Direkt zu den Angeboten
</a>
</div>
@@ -52,7 +52,7 @@
<p class="hidden lg:block">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
class="button w-full mb-8">
Direkt zu den Angeboten
</a>
</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">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
class="button w-full mb-8">
Direkt zu den Angeboten
</a>
</div>
@@ -47,7 +47,7 @@
</f:if>
<f:if condition="{country.descriptionExtended}">{country.descriptionExtended -> f:format.html()}</f:if>
<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>
</div>
<div class="col-span-3 lg:col-span-1">
@@ -55,7 +55,7 @@
<p class="hidden lg:block">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
class="button w-full mb-8">
Direkt zu den Angeboten
</a>
</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:switch expression="{data.layout}">
<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 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 value="3">
<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:switch expression="{data.layout}">
<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 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 value="3">
<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">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
class="button w-full mb-8">
Direkt zu den Angeboten
</a>
</div>
@@ -27,7 +27,7 @@
<p class="hidden lg:block">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
class="button w-full mb-8">
Direkt zu den Angeboten
</a>
</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}"/>
<div class="grid grid-cols-2 gap-8">
<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 class="col-span-2 md:col-span-1">
{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">
<thead>
<tr>
<th class="p-1">
<th class="p-1 text-left">
Termin
</th>
<th class="p-1">
<th class="p-1 text-left">
<span data-microtip-position="bottom" aria-label="Nächte" role="tooltip">
<svg class="w-4 h-4">
<use href="#icon-bed"></use>
</svg>
</span>
</th>
<th class="p-1 whitespace-nowrap">
<th class="p-1 text-left whitespace-nowrap">
Preis ab
</th>
<th class="p-1">
<th class="p-1 text-left">
inkl.
</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 }">
<td class="px-2 py-1">
<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-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">
Details
</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
</a>
</div>
@@ -297,16 +297,21 @@
</div>
</td>
<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
</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
</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
</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
</span>
</td>
@@ -338,7 +343,16 @@
</div>
</template>
<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 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">
@@ -377,13 +391,13 @@
<table class="min-w-full border-collapse">
<thead>
<tr>
<th>
<th class="text-left">
Zimmertyp
</th>
<th>
<th class="text-left">
Preis
</th>
<th>
<th class="text-left">
inkl.
</th>
<th></th>
@@ -405,7 +419,7 @@
</a>
<div class="lg:hidden"
x-show="!row.roomAvailable">
<span class="label label-default">
<span class="inline-block px-2 mx-1 text-xs text-gray-500">
ausgebucht
</span>
</div>
@@ -442,11 +456,20 @@
</button>
</td>
<td class="hidden lg:table-cell px-2 py-1">
<a class="button button--small button--action" x-show="row.roomAvailable && !row.isHideBookingButton"
x-bind:href="row.bookingUrl" target="_blank">Buchen</a>
<a class="button button--small button--mute" x-show="row.isHideBookingButton"
x-bind:href="uris.travelAlertUrl">Reisen-Alert</a>
<span x-show="!row.roomAvailable && !row.isHideBookingButton" class="label label-default">ausgebucht</span>
<a class="button button--small button--action"
x-show="row.roomAvailable && !row.isHideBookingButton"
x-bind:href="row.bookingUrl" target="_blank">
Buchen
</a>
<a class="button button--small button--mute"
x-show="row.isHideBookingButton"
x-bind:href="uris.travelAlertUrl">
Reisen-Alert
</a>
<span x-show="!row.roomAvailable && !row.isHideBookingButton"
class="inline-block px-2 mx-1 text-xs text-gray-500">
ausgebucht
</span>
</td>
</tr>
</template>
@@ -454,10 +477,19 @@
</table>
</div>
<template x-for="row in pricesRows">
<div x-bind:id="'optional-services-' + row.roomUid" x-show="$store.show.modal === $el.id" x-transition x-cloak class="fixed inset-0 w-full h-full z-50">
<div 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 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">
Optionale Zusatzleistungen
</span>
@@ -466,10 +498,10 @@
</button>
</div>
<template x-for="section in row.roomOptionalServices">
<div class="pb-2 border-t border-gray-200 first:border-0">
<div class="font-bold text-xl" x-text="section.label"></div>
<div class="py-2 -mx-1">
<div class="font-bold text-xl px-1" x-text="section.label"></div>
<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>
<dd class="whitespace-nowrap" x-text="optionalService.price + ' €'"></dd>
</dl>
@@ -480,11 +512,13 @@
</div>
</template>
<template x-if="!singleDate">
<p>
<button class="button button--small" x-on:click.prevent="tableMode = 'dates'">
<i class="fa fa-undo"></i> zurück zur Terminübersicht
</button>
</p>
<button class="button button--small mb-4"
x-on:click.prevent="tableMode = 'dates'">
<svg class="w-4 h-4 text-white">
<use href="#icon-chevron-left"></use>
</svg>
<span>zurück zur Terminübersicht</span>
</button>
</template>
<div class="headerbar">
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">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
class="button w-full mb-8">
Direkt zu den Angeboten
</a>
</div>
@@ -28,7 +28,7 @@
<p class="hidden lg:block">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
class="button w-full mb-8">
Direkt zu den Angeboten
</a>
</p>