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

Migrate event hero element, adjust header slider image size by cropping

Browse Source
This commit is contained in:
Björn Fromme
2021-12-23 13:00:14 +01:00
parent eb2bdf17bb
commit baba0df0af
4 changed files with 56 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Configuration/TCA/tx_eptheme_domain_model_slide.php
+16 -3
View File
@@ -196,15 +196,15 @@ return [
'value' => 1.79069767,
],
'sliderProductHeader' => [
'title' => 'Slider Produkt Header',
'title' => 'Slider Produkt-Header',
'value' => 1.625,
],
'sliderPageHeader' => [
'title' => 'Slider Seiten Header',
'title' => 'Slider Seiten-Header',
'value' => 3.805,
],
'sliderPageHeaderHome' => [
'title' => 'Slider Seiten Header Startseite',
'title' => 'Slider Seiten-Header Startseite',
'value' => 2.342,
],
'free' => [
@@ -213,6 +213,19 @@ return [
],
],
],
'mobile' => [
'title' => 'Mobile',
'allowedAspectRatios' => [
'sliderPageHeader' => [
'title' => 'Slider Seiten-Header',
'value' => 1,
],
'free' => [
'title' => 'Frei',
'value' => 'NaN',
],
],
],
],
],
],
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_herounit.scss
-52
View File
@@ -1,23 +1,5 @@
.herounit {
@apply relative w-full overflow-hidden;
height: 400px;
@screen md {
height: 430px;
}
@screen lg {
@apply container-wide;
height: 580px;
}
&--event {
@apply h-auto;
}
}
.herounit__image {
height: 300px;
@screen md {
@apply h-full;
}
}
.herounit__badge {
@@ -48,39 +30,5 @@
top: 75px;
right: 20%;
}
.herounit--event & {
width: 100px;
height: 100px;
top: 2px;
right: 8px;
left: auto;
z-index: 10;
.custom-badge__title {
font-size: 12px;
}
.custom-badge__subtitle {
font-size: 10px;
}
@screen md {
width: 200px;
height: 200px;
.custom-badge__title {
font-size: 24px;
}
.custom-badge__subtitle {
font-size: 18px;
}
}
@screen lg {
display: block;
top: 180px;
right: 20%;
}
}
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventHero.html
+37 -37
View File
@@ -3,61 +3,61 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="relative max-w-screen-2xl mx-auto">
<div class="absolute bottom-0 left-0 inset-x-0 py-8 sbw:bg-sbw-overlay-secondary">
<div class="max-w-screen-md mx-auto px-4 md:px-0 flex">
<div class="sbw:bg-sbw-primary hidden md:flex flex-col justify-center">
<div class="text-white font-extrabold text-5xl flex-1 flex flex-col justify-around items-center text-center leading-none py-2 px-16">
<span>{settings.eventDateDayFrom -> f:format.raw()}</span>
<span>-</span>
<span>{settings.eventDateDayTo -> f:format.raw()}</span>
<div class="absolute bottom-0 left-0 inset-x-0">
<div class="py-8 {ep:themeClasses(classes: '{sbw: \'bg-sbw-overlay-secondary\', snz: \'bg-snz-primary-50\', uch: \'bg-uch-primary-50\'}', key: settings.themekey)}">
<div class="max-w-screen-md mx-auto px-4 md:px-0 flex">
<div class="hidden sm:flex flex-col justify-center {ep:themeClasses(classes: '{sbw: \'bg-sbw-primary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
<div class="text-white font-extrabold text-3xl lg:text-5xl flex-1 flex flex-col justify-around items-center text-center leading-none py-2 px-8 md:px-16">
<span>{settings.eventDateDayFrom -> f:format.raw()}</span>
<span>-</span>
<span>{settings.eventDateDayTo -> f:format.raw()}</span>
</div>
<div class="w-full px-4 bg-white text-center sbw:text-sbw-primary p-2 whitespace-nowrap text-xl md:text-2xl uppercase font-bold leading-tight">
{settings.eventDateMonth -> f:format.raw()}
</div>
</div>
<div class="w-full px-4 bg-white text-center sbw:text-sbw-primary p-2 whitespace-nowrap text-2xl uppercase font-bold leading-tight">
{settings.eventDateMonth -> f:format.raw()}
<div class="text-white uppercase text-3xl sm:text-5xl lg:text-7xl text-right sm:text-left font-extrabold px-4 md:px-8">
{settings.eventHeroClaim -> f:format.raw()}
</div>
<div class="text-white text-xl lg:text-2xl font-light border-l-4 md:border-l-8 border-white pl-4">
{settings.eventHeroDescription -> f:format.raw()}
</div>
</div>
<div class="text-white uppercase text-7xl text-right md:text-left font-extrabold pr-8 md:px-8">
{settings.eventHeroClaim -> f:format.raw()}
</div>
<div class="text-white text-2xl font-light border-l-8 border-white pl-2">
{settings.eventHeroDescription -> f:format.raw()}
</div>
</div>
<div class="sm:hidden text-white text-2xl uppercase text-center leading-none py-4 {ep:themeClasses(classes: '{sbw: \'bg-sbw-secondary\', snz: \'bg-snz-primary\', uch: \'bg-uch-primary\'}', key: settings.themekey)}">
{settings.eventDateDayFrom -> f:format.raw()} - {settings.eventDateDayTo -> f:format.raw()} {settings.eventDateMonth -> f:format.raw()}
</div>
</div>
<f:alias map="{image: slide.image.0}">
<f:if condition="{image}">
<f:then>
<picture>
<source srcset="{f:uri.image(image: image, width: '1370')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, height: '320')}" media="(max-width: 767px)">
<img class="block w-full h-full object-cover"
src="{f:uri.image(image: image, height: '320')}"
alt="{image.alternative}">
</picture>
</f:then>
<f:else>
<img src="https://placehold.it/1370x700" alt="">
</f:else>
<picture>
<source srcset="{f:uri.image(image: image, width: '1560')}" media="(min-width: 1280px)">
<source srcset="{f:uri.image(image: image, width: '1280')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, height: '1024', cropVariant: 'mobile')}" media="(max-width: 767px)">
<img class="block w-full h-full object-cover"
src="{f:uri.image(image: image, height: '1024', cropVariant: 'mobile')}"
alt="{image.alternative}">
</picture>
</f:if>
</f:alias>
<f:comment><!--
<f:if condition="{badge}">
<f:alias map="{badgeData: badge.0.data}">
<f:link.typolink parameter="{badgeData.link}">
<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">
<circle id="bgouter" cx="100" cy="100" r="100"/>
<circle id="bginner" cx="100" cy="100" r="70"/>
<div class="absolute top-0 right-0 mt-8 mr-4">
<svg viewBox="0 0 200 200"
class="w-40 h-40">
<circle id="bgouter" cx="100" cy="100" r="100" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary-50\', snz: \'text-snz-primary-50\', uch: \'text-uch-primary-50\'}', key: settings.themekey)}"/>
<circle id="bginner" cx="100" cy="100" r="70" fill="currentColor" class="{ep:themeClasses(classes: '{sbw: \'text-sbw-primary\', snz: \'text-snz-primary\', uch: \'text-uch-primary\'}', key: settings.themekey)}"/>
</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-1/2 left-1/2 transform -translate-xy-1/2 flex flex-col items-center justify-around">
<span class="text-white uppercase font-extrabold text-center leading-tight">{badgeData.title -> f:format.raw()}</span>
<span class="text-white uppercase text-center leading-tight">{badgeData.subtitle -> f:format.raw()}</span>
</div>
</div>
</f:link.typolink>
</f:alias>
</f:if>
--></f:comment>
<f:comment><!--
<f:if condition="{settings.eventAddon}">
<f:link.typolink parameter="{settings.eventAddon.link}" class="{settings.eventAddon.class}"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+3 -3
View File
@@ -14,9 +14,9 @@
<f:if condition="{image}">
<div class="herounit__image">
<picture class="w-full h-full">
<source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeaderHome')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeaderHome')}" media="(max-width: 767px)">
<f:image image="{image}" height="320" class="w-full h-full object-cover" alt="{image.alternative}"/>
<source srcset="{f:uri.image(image: image, width: '1370')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, height: '640', cropVariant: 'mobile')}" media="(max-width: 767px)">
<f:image image="{image}" cropVariant="mobile" height="640" class="w-full h-auto" alt="{image.alternative}"/>
</picture>
</div>
</f:if>