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

Fix position of skipass badge on product detail page

Browse Source
This commit is contained in:
Björn Fromme
2022-03-08 11:50:08 +01:00
parent 7de5a76368
commit 0833151956
2 changed files with 42 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+29 -25
View File
@@ -3,7 +3,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:if condition="{slide}"> <f:if condition="{slide}">
<div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8"> <div class="herounit h-80 lg:h-96 mb-8">
<f:alias map="{image: slide.image.0}"> <f:alias map="{image: slide.image.0}">
<f:if condition="{image}"> <f:if condition="{image}">
<picture> <picture>
@@ -35,36 +35,40 @@
</div> </div>
</div> </div>
</div> </div>
<f:if condition="{settings.showSkipassBadge}"> <f:if condition="{slide.skipass} || {badge}">
<f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive"> <div class="herounit__badge-wrapper">
<f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive" <f:if condition="{settings.showSkipassBadge}">
class="absolute top-0 right-8 lg:right-28 w-20 lg:w-auto" /> <f:link.typolink parameter="{settings.skipassPageUid}" title="Skipass inklusive">
</f:link.typolink> <f:image src="EXT:ep_theme/Resources/Public/images/badge_skipass.png" alt="Skipass inklusive"
</f:if> class="absolute top-0 right-8 lg:right-28 w-20 lg:w-auto" />
<f:if condition="{badge}"> </f:link.typolink>
<f:alias map="{badgeData: badge.0.data}"> </f:if>
<f:link.typolink parameter="{badgeData.link}" <f:if condition="{badge}">
title="{badgeData.title}" <f:alias map="{badgeData: badge.0.data}">
class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6"> <f:link.typolink parameter="{badgeData.link}"
<svg viewBox="0 0 200 200" title="{badgeData.title}"
xmlns="http://www.w3.org/2000/svg" class="hidden md:block absolute top-0 right-0 mt-12 mr-8 w-40 transform rotate-6">
preserveAspectRatio="xMinYMin meet" <svg viewBox="0 0 200 200"
class="w-full h-full"> xmlns="http://www.w3.org/2000/svg"
<circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/> preserveAspectRatio="xMinYMin meet"
<circle fill="currentColor" class="text-ep-primary" cx="100" cy="100" r="70"/> class="w-full h-full">
</svg> <circle fill="currentColor" class="text-ep-primary-50" cx="100" cy="100" r="100"/>
<div class="absolute top-0 left-0 inset-0 flex flex-col items-center justify-center p-8"> <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"> <span class="block text-center text-white uppercase font-bold leading-none text-xl">
{badgeData.title -> f:format.raw()} {badgeData.title -> f:format.raw()}
</span> </span>
<f:if condition="{badgeData.subtitle}"> <f:if condition="{badgeData.subtitle}">
<span class="block text-center text-white uppercase font-bold leading-none"> <span class="block text-center text-white uppercase font-bold leading-none">
{badgeData.subtitle -> f:format.raw()} {badgeData.subtitle -> f:format.raw()}
</span> </span>
</f:if> </f:if>
</div> </div>
</f:link.typolink> </f:link.typolink>
</f:alias> </f:alias>
</f:if>
</div>
</f:if> </f:if>
<f:if condition="{slide.image.0.description}"> <f:if condition="{slide.image.0.description}">
<div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700"> <div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+13 -11
View File
@@ -9,7 +9,7 @@
<ul class="splide__list"> <ul class="splide__list">
<f:for each="{product.images}" as="image" iteration="iteration"> <f:for each="{product.images}" as="image" iteration="iteration">
<li class="splide__slide"> <li class="splide__slide">
<div class="relative max-w-screen-2xl mx-auto h-80 lg:h-96 mb-8"> <div class="herounit h-80 lg:h-96 mb-8">
<picture> <picture>
<source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)"> <source srcset="{f:uri.image(image: image, width: '1370', cropVariant: 'sliderPageHeader')}" media="(min-width: 768px)">
<source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)"> <source srcset="{f:uri.image(image: image, height: '320', cropVariant: 'sliderPageHeader')}" media="(max-width: 767px)">
@@ -62,16 +62,18 @@
<f:render partial="Badge" arguments="{badge: product.badge}"/> <f:render partial="Badge" arguments="{badge: product.badge}"/>
</div> </div>
<f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}"> <f:if condition="{settings.showSkipassBadge} && {product.skipassIncluded}">
<f:link.typolink parameter="{settings.skipassPageUid}" <div class="herounit__badge-wrapper">
title="Skipass inklusive" <f:link.typolink parameter="{settings.skipassPageUid}"
class="herounit__badge herounit__badge--skipass"> title="Skipass inklusive"
<p class="uppercase text-4xl font-bold leading-7 mb-2"> class="herounit__badge herounit__badge--skipass">
Ski-<br>Pass <p class="uppercase text-4xl font-bold leading-7 mb-2">
</p> Ski-<br>Pass
<p class="uppercase"> </p>
inklusive <p class="uppercase">
</p> inklusive
</f:link.typolink> </p>
</f:link.typolink>
</div>
</f:if> </f:if>
<f:if condition="{slide.image.0.description}"> <f:if condition="{slide.image.0.description}">
<div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700"> <div class="absolute bottom-0 right-0 bg-overlay-white font-sm text-gray-700">