diff --git a/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/ContainerViewHelper.php b/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/ContainerViewHelper.php index 54e08046..11053aae 100644 --- a/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/ContainerViewHelper.php +++ b/public/typo3conf/ext/ep_theme/Classes/ViewHelpers/ContainerViewHelper.php @@ -59,9 +59,9 @@ class ContainerViewHelper extends AbstractViewHelper parent::initializeArguments(); $this->registerArgument('content', 'string', 'The content'); - $this->registerArgument('cssClasses', 'string', 'Additional css classes'); - $this->registerArgument('rteContent', 'boolean', 'Is rte content', false, false); - $this->registerArgument('data', 'Array', 'The data', true); + $this->registerArgument('cssClasses', 'string', 'Additional CSS classes'); + $this->registerArgument('rteContent', 'boolean', 'Is RTE content', false, false); + $this->registerArgument('data', 'Array', 'The record data', true); } /** @@ -90,17 +90,24 @@ class ContainerViewHelper extends AbstractViewHelper $classes[] = $arguments['cssClasses']; } - $scaleTop = empty($data['space_before_class']) ? static::$scale['default'] : static::$scale[$data['space_before_class']]; - $scaleBottom = empty($data['space_after_class']) ? static::$scale['default'] : static::$scale[$data['space_after_class']]; - - $classes[] = sprintf('pt-%d', $scaleTop); - $classes[] = sprintf('pb-%d', $scaleBottom); - - if ('default' !== $data['frame_class']) { - $classes[] = $data['frame_class']; + if (!empty($arguments['data']['space_before_class'])) { + $scaleTop = static::$scale[$arguments['data']['space_before_class']]; + $classes[] = sprintf('pt-%d', $scaleTop); + } elseif (true === $arguments['rteContent']) { + $scaleTop = static::$scale['default']; + $classes[] = sprintf('pt-%d', $scaleTop); } - if (true === $arguments['rteContent'] || count($classes) > 0) { + if (!empty($arguments['data']['space_after_class'])) { + $scaleBottom = static::$scale[$arguments['data']['space_after_class']]; + $classes[] = sprintf('pb-%d', $scaleBottom); + } + + if ('default' !== $arguments['data']['frame_class']) { + $classes[] = $arguments['data']['frame_class']; + } + + if (count($classes) > 0) { return sprintf('
%s
', implode(' ', $classes), $arguments['rteContent'] ? ' data-rte-content' : '', $content); } diff --git a/public/typo3conf/ext/ep_theme/Configuration/TSconfig/Page/TCEFORM.tsconfig b/public/typo3conf/ext/ep_theme/Configuration/TSconfig/Page/TCEFORM.tsconfig index 7544d0fd..d5f1b43a 100644 --- a/public/typo3conf/ext/ep_theme/Configuration/TSconfig/Page/TCEFORM.tsconfig +++ b/public/typo3conf/ext/ep_theme/Configuration/TSconfig/Page/TCEFORM.tsconfig @@ -105,6 +105,10 @@ TCEFORM { } space_before_class { + types { + gridelements_pi1.disabled = 1 + list.disabled = 1 + } removeItems := addToList(extra-small, small, medium, extra-large) altLabels.. = Standard addItems { diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/lazy.png b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/lazy.png index c128acbb..a84a4a8d 100644 Binary files a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/lazy.png and b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/lazy.png differ diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teasergrid_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teasergrid_controller.js new file mode 100644 index 00000000..405977ae --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/teasergrid_controller.js @@ -0,0 +1,24 @@ +import { Controller } from 'stimulus' + +export default class extends Controller { + + static classes = [ 'grid' ] + + static targets = [ + 'icon', + 'container', + ] + + static values = { disabled: Boolean } + + toggle(e) { + e.preventDefault() + this.disabledValue = !this.disabledValue + } + + disabledValueChanged() { + this.containerTarget.classList.toggle(this.gridClass, this.disabledValue === false) + let icon = this.disabledValue ? '#icon-grid' : '#icon-block' + this.iconTarget.setAttribute('href', icon) + } +} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaser.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaser.scss new file mode 100644 index 00000000..7a173d99 --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaser.scss @@ -0,0 +1,19 @@ +.product-teaser { + @apply relative; +} + +.product-teaser__icon { + @apply w-4 h-4 md:w-8 md:h-8; +} + +.product-teaser__concept { + @apply text-sm md:text-base; +} + +.product-teaser__content { + @apply px-2 py-4 md:p-4; +} + +.product-teaser__product { + @apply pl-8 md:pl-10; +} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaserbox.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaserbox.scss deleted file mode 100644 index 200afe3e..00000000 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaserbox.scss +++ /dev/null @@ -1,389 +0,0 @@ -@keyframes stayvisible { - from { - visibility: visible; - } - to { - visibility: visible; - } -} - -@-ms-keyframes donothing { - 0% { - } - 100% { - } -} - -.teaserbox { - display: block; - text-decoration: none; - color: theme('colors.gray.800'); - margin-bottom: 20px; - position: relative; - - &:hover { - color: theme('colors.gray.800'); - } - - &--concept { - margin-top: 10px; - transition: all .5s ease-in-out; - - @screen lg { - - &:hover { - transform: translateY(-10px); - box-shadow: 0 15px 59px -9px rgba(0, 0, 0, 0.2); - - .teaserbox__button { - opacity: 1; - } - - } - } - - } - - &--flippable { - perspective: 1000px; - - margin: 20px 0 40px; - - @screen lg { - height: 450px; - margin: 30px 0; - } - - } - - &--landscape { - - @screen md { - display: flex; - flex-wrap: nowrap; - - &:not(:last-child) { - padding-bottom: 20px; - border-bottom: 2px solid theme('colors.gray.400'); - } - } - - } - - span { - display: block; - } - - hr { - margin: 8px 0; - } - - p, ul { - margin-bottom: 8px; - - &:last-child { - margin-bottom: 0; - } - } -} - -.teaserbox__image { - position: relative; - - .teaserbox--landscape & { - - @screen md { - flex: 0 0 260px; - } - - @screen lg { - flex: 0 0 320px; - } - - } - - &--social-media { - height: 0; - padding-bottom: 100%; - background-size: cover; - } -} - -.teaserbox__icon { - position: absolute; - z-index: 10; - top: 8px; - left: 8px; - color: white; - font-size: 125%; -} - -.teaserbox__main { - height: auto; - border-width: 2px; - border-color: theme('colors.gray.200'); - border-style: none solid; - padding: 8px; - display: flex; - flex-direction: column; - - .teaserbox--default & { - min-height: 280px; - - @screen md { - min-height: 260px; - } - - @screen lg { - min-height: 220px; - } - } - - .teaserbox--country &, - .teaserbox--region &, - .teaserbox--city & { - min-height: 170px; - overflow: hidden; - } - - .teaserbox--hotel & { - min-height: 300px; - } - - .teaserbox--product & { - border-style: none solid solid; - min-height: 250px; - - @screen md { - min-height: 230px; - } - } - - .teaserbox--concept & { - min-height: 130px; - border-style: none solid solid; - } - - .teaserbox--landscape & { - height: auto; - border-style: none; - - @screen md { - display: flex; - flex: 1; - flex-direction: column; - justify-content: space-between; - padding: 8px 16px; - border-style: none; - } - - } - - .teaserbox--searchresult & { - padding: 16px 0; - border: none; - - @screen md { - padding: 0 16px; - } - } - - &--fixed-height { - height: 100px; - border-bottom: 12px solid white; - overflow: hidden; - } -} - -.teaserbox__aside { - display: block; - padding: 8px; - border-width: 2px; - border-color: theme('colors.gray.600'); - border-style: none solid solid; - - @screen md { - display: flex; - flex-direction: column; - justify-content: space-between; - flex: 0 0 300px; - border-style: solid solid solid none; - } - - .teaserbox--searchresult &, - .teaserbox--landscape & { - border: none; - - @screen md { - flex: 0 0 220px; - padding: 0; - } - } - -} - -.teaserbox__header { - padding-bottom: 8px; - - @screen md { - min-height: 100px; - padding-bottom: 0; - } - - .teaserbox--searchresult & { - min-height: 0; - } - -} - -.teaserbox__flag { - position: absolute; - z-index: 10; - top: 0; - left: 0; - border-style: none solid solid none; - border-width: 2px; - border-color: white; -} - -.teaserbox__button { - margin: -2px 0 0; - - &--fadein { - opacity: 0; - transition: opacity 0.5s ease-in-out; - } - - .teaserbox--flippable & { - - @screen lg { - position: absolute; - left: 0; - bottom: 0; - margin: 0; - } - - } - -} - -.teaserbox__flip { - width: 100%; - height: 100%; - display: block; - color: inherit; - - &:hover { - color: theme('colors.gray.800'); - } - - &:focus, - &:active { - color: theme('colors.gray.800'); - outline: none; - } - - @screen lg { - transition: 0.5s ease-out; - transform-style: preserve-3d; - backface-visibility: visible; - - .teaserbox--flippable:hover & { - transform: rotateY(180deg); - } - - } - -} - -.teaserbox__side { - - @screen lg { - width: 100%; - height: 100%; - backface-visibility: hidden; - position: absolute; - top: 0; - left: 0; - } - -} - -.teaserbox__side--front { - - @screen lg { - animation: stayvisible 0.5s both; - visibility: visible; - transform: rotateY(0deg); - - .teaserbox--flippable:hover & { - animation: stayvisible 0.5s both; - visibility: hidden; - } - - } - -} - -.teaserbox__side--back { - - @screen lg { - animation: stayvisible 0.5s both; - visibility: hidden; - transform: rotateY(-180deg); - - .teaserbox--flippable:hover & { - animation: stayvisible 0.5s both; - visibility: visible; - } - - } - -} - -.teaserbox__back { - display: none; - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; - padding: 15px 20px; - background-color: theme('colors.ep.primary'); - color: white; - - @screen lg { - display: block; - } - -} - -.teaserbox-watchlist { - position: absolute; - top: 0; - right: 0; - z-index: 10; - width: 48px; - height: 48px; - display: block; - color: white; - - &:hover, - &:focus, - &:visited, - &:active { - color: white; - } - - cursor: pointer; - padding: 4px 0 0 28px; - - &:before { - content: ""; - position: absolute; - z-index: -1; - top: 0; - left: 0; - display: block; - } -} diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss index e023561e..fa8efb44 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/main.scss @@ -14,11 +14,9 @@ // LEGACY @import "components/product"; @import "components/searchresult"; - @import "components/teaserbox"; } @layer components { - @import "components/tooltips"; @import "components/background"; @import "components/badges"; @import "components/buttons"; @@ -32,7 +30,9 @@ @import "components/misc"; @import "components/searchbar"; @import "components/slider"; + @import "components/teaser"; @import "components/tiles"; + @import "components/tooltips"; } @layer utilities { diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/FluidStyledContent/Bare.html b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/FluidStyledContent/Bare.html new file mode 100644 index 00000000..d2413b03 --- /dev/null +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Layouts/FluidStyledContent/Bare.html @@ -0,0 +1 @@ + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html index 9b0e5492..53a37436 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html @@ -1,23 +1,26 @@ - -
- {city.country.name} + +
+ + +
-
- {city.name} -
+
+ + {city.name} + {city.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
- + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html index 1e990d16..3b9810cc 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Concept/Teaser.html @@ -1,21 +1,23 @@ - -
- - -
{concept.name}
- -
-
+ + + +
+ {concept.name} +
+ +
{concept.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()}
- + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html index 741bf50b..acd0ad51 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html @@ -1,30 +1,36 @@ - -
- {hotel.country.name} + +
+ + +
-
- {hotel.name -> f:format.nl2br()} +
+ + {hotel.name -> f:format.nl2br()} + - Kategorie {hotel.category} + + Kategorie {hotel.category} + -
{hotel.teaser -> f:format.crop(maxCharacters: settings.teaserTextMaxChars) -> f:format.html()} -
- {f:if(condition: '{hotel.available} > 0', then: 'ab {hotel.minPrice} €', else: 'ausgebucht')} + + {f:if(condition: '{hotel.available} > 0', then: 'ab {hotel.minPrice} €', else: 'ausgebucht')} +
- + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html index 479b0a8b..836cf6dd 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html @@ -34,6 +34,8 @@ + + diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html index ab76b50b..09015952 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html @@ -3,19 +3,19 @@ xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> -
+
- +
- - {teaser.concept.name} - + + {teaser.concept.name} +
+ diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html index 90a362dd..bdab6419 100644 --- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html +++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html @@ -1,24 +1,22 @@ -
+ class="flex flex-col"> +
- + + +
-
- +
+ {data.header -> f:format.nl2br()}{f:if(condition: data.subheader, then: '
{data.subheader}')} -
{data.bodytext -> f:format.html()}
+
+ + +
+ +
+ + Alle anzeigen + +
+
- - - - - - - - - -
- - - -
- - - - -