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

Adjust teaser styles depending on grid or single view

Browse Source
This commit is contained in:
Björn Fromme
2021-09-14 17:41:47 +02:00
parent 921bd17770
commit 547c7cbb4b
5 changed files with 86 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_teaser.scss
+64 -10
View File
@@ -1,19 +1,73 @@
.product-teaser {
@apply relative;
.product-teaser__flag {
@apply w-6 h-4 md:w-8 md:h-6;
}
.product-teaser__icon {
@apply w-4 h-4 md:w-8 md:h-8;
.product-teaser__label-concept {
@apply text-white uppercase font-semibold;
[data-teasergrid-disabled-value="false"] & {
@apply text-xs md:text-base;
}
}
.product-teaser__concept {
@apply text-sm md:text-base;
.product-teaser__watchlist-icon {
@apply text-white w-6 h-6;
[data-teasergrid-disabled-value="false"] & {
@apply w-4 h-4 md:w-6 md:h-6;
}
}
.product-teaser__content {
@apply px-2 py-4 md:p-4;
.product-teaser__label-name {
@apply text-gray-800 leading-none;
[data-teasergrid-disabled-value="false"] & {
@apply text-sm md:text-base;
}
}
.product-teaser__product {
@apply pl-8 md:pl-10;
.product-teaser__label-region {
@apply h-12 md:h-16 text-gray-800 leading-none font-bold text-3xl;
[data-teasergrid-disabled-value="false"] & {
@apply text-lg leading-none md:text-3xl md:leading-none;
}
}
.product-teaser__label-included {
@apply pb-2 text-gray-800 text-xl font-bold leading-none;
[data-teasergrid-disabled-value="false"] & {
@apply text-sm md:text-lg lg:text-xl;
}
}
.product-teaser__list-included {
[data-teasergrid-disabled-value="false"] & {
@apply text-sm md:text-base;
}
}
.product-teaser__list-icon {
@apply w-6 h-6 text-ep-primary;
[data-teasergrid-disabled-value="false"] & {
@apply w-4 h-4 md:w-6 md:h-6;
}
}
.product-teaser__price {
@apply text-3xl;
[data-teasergrid-disabled-value="false"] & {
@apply text-xl md:text-3xl;
}
}
.product-teaser__label-price {
@apply inline-block;
[data-teasergrid-disabled-value="false"] & {
@apply text-sm md:text-base lg:inline-block;
}
}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Icons.html
-2
View File
@@ -34,8 +34,6 @@
<symbol id="icon-mountainbike" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M400 96a48 48 0 1 0-48-48 48 48 0 0 0 48 48zm224 256h-5.2a110.19 110.19 0 0 0-8.65-20.89l3.67-3.67a16 16 0 0 0 0-22.63l-22.63-22.63a16 16 0 0 0-22.63 0l-3.66 3.67a110.72 110.72 0 0 0-20.9-8.65V272a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v5.2a110.19 110.19 0 0 0-20.89 8.65l-3.67-3.67a16 16 0 0 0-22.63 0l-22.62 22.63a16 16 0 0 0 0 22.63l3.67 3.67A110.45 110.45 0 0 0 405.2 352H400a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h5.2a110.19 110.19 0 0 0 8.65 20.89l-3.67 3.67a16 16 0 0 0 0 22.63l22.62 22.63a16 16 0 0 0 22.63 0l3.67-3.67a110.94 110.94 0 0 0 20.9 8.65v5.2a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-5.2a110.56 110.56 0 0 0 20.9-8.65l3.67 3.67a16 16 0 0 0 22.62 0l22.63-22.63a16 16 0 0 0 0-22.63l-3.67-3.67A110.45 110.45 0 0 0 618.8 416h5.2a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-112 96a64 64 0 1 1 64-64 64 64 0 0 1-64 64zm-272-96h-5.2a110.19 110.19 0 0 0-8.65-20.89l3.67-3.67a16 16 0 0 0 0-22.63l-22.63-22.63a16 16 0 0 0-22.63 0l-3.66 3.67a110.72 110.72 0 0 0-20.9-8.65V272a16 16 0 0 0-16-16h-32a16 16 0 0 0-16 16v5.2a110.19 110.19 0 0 0-20.89 8.65l-3.67-3.67a16 16 0 0 0-22.63 0l-22.63 22.63a16 16 0 0 0 0 22.63l3.67 3.67A110.45 110.45 0 0 0 21.2 352H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h5.2a110.19 110.19 0 0 0 8.65 20.89l-3.67 3.67a16 16 0 0 0 0 22.63l22.62 22.63a16 16 0 0 0 22.63 0l3.67-3.67A110.94 110.94 0 0 0 96 490.8v5.2a16 16 0 0 0 16 16h32a16 16 0 0 0 16-16v-5.2a110.56 110.56 0 0 0 20.9-8.65l3.67 3.67a16 16 0 0 0 22.62 0l22.63-22.63a16 16 0 0 0 0-22.63l-3.67-3.67A110.45 110.45 0 0 0 234.8 416h5.2a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-112 96a64 64 0 1 1 64-64 64 64 0 0 1-64 64zm273-237.27a24 24 0 0 0 15 5.27h64a24 24 0 0 0 0-48h-55.59L351 109.27a24 24 0 0 0-30.62.51l-112 96a24 24 0 0 0 2.31 38.22L296 300.84V416a24 24 0 0 0 48 0V288a24 24 0 0 0-10.69-20l-43.23-28.82 70.73-60.63zM159.19 172a35.53 35.53 0 0 0 49.45 3.77l87.3-74.45c16.82-14.24 14.56-37 3.27-49.84C270 18.45 219 13.88 185.93 42L132.2 87.91a34.9 34.9 0 0 0-3.26 49.85zm57.88-93.5c9.92-8.42 24-9.35 35.65-3.43l-65.64 56-13.54-15.31z"/></symbol>
<symbol id="icon-hotel" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M560 48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16H16C7.16 0 0 7.16 0 16v16c0 8.84 7.16 16 16 16h15.98v416H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h544c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-16V48h16zm-64 416H320v-80h64c0-53.02-42.98-96-96-96s-96 42.98-96 96h64v80H79.98V48H496v416zM268.8 160h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm128 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm-256 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8z"/></symbol>
<symbol id="icon-sportclub" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M560 48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16H16C7.16 0 0 7.16 0 16v16c0 8.84 7.16 16 16 16h15.98v416H16c-8.84 0-16 7.16-16 16v16c0 8.84 7.16 16 16 16h544c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16h-16V48h16zm-64 416H320v-80h64c0-53.02-42.98-96-96-96s-96 42.98-96 96h64v80H79.98V48H496v416zM268.8 160h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm128 0h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm-256 96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8zm0-96h38.4c6.4 0 12.8-6.4 12.8-12.8v-38.4c0-6.4-6.4-12.8-12.8-12.8h-38.4c-6.4 0-12.8 6.4-12.8 12.8v38.4c0 6.4 6.4 12.8 12.8 12.8z"/></symbol>
<symbol id="icon-block" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4,9.333C4,6.408 6.408,4 9.333,4L14.667,4C17.592,4 20,6.408 20,9.333L20,14.667C20,17.592 17.592,20 14.667,20L9.333,20C6.408,20 4,17.592 4,14.667L4,9.333Z"></path></symbol>
<symbol id="icon-grid" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></symbol>
<!-- Flags -->
<symbol id="icon-flag-at" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd"><path fill="#fff" d="M640 480H0V0h640z"/><path fill="#ed2939" d="M640 480H0V320h640zm0-319.9H0V.1h640z"/></g></symbol>
<symbol id="icon-flag-ch" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 480"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d52b1e" d="M0 0h640v480H0z"/><g fill="#fff"><path d="M170 195h300v90H170z"/><path d="M275 90h90v300h-90z"/></g></g></symbol>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 21 KiB

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+14 -15
View File
@@ -3,7 +3,7 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Teaser">
<div class="flex flex-col h-full bg-white group{f:if(condition: landscape, then: ' sm:flex-row sm:h-auto')}">
<div class="product-teaser flex flex-col h-full bg-white group{f:if(condition: landscape, then: ' sm:flex-row sm:h-auto')}{f:if(condition: '{index} > 2', then: ' lg:hidden')}">
<f:render section="TeaserImage" arguments="{_all}"/>
<f:render section="TeaserContent" arguments="{_all}"/>
</div>
@@ -19,7 +19,7 @@
<div class="absolute top-0 left-0 z-10 inset-x-0 p-2 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}', else: 'bg-ep-primary-80')}">
<div class="flex items-center space-x-2">
<f:if condition="{country.code}">
<svg class="w-6 h-4 md:w-8 md:h-6">
<svg class="product-teaser__flag">
<use href="#icon-flag-{country.code -> f:format.case(mode: 'lower')}"/>
</svg>
</f:if>
@@ -31,13 +31,12 @@
</svg>
</f:alias>
</div>
--></f:comment>
<span class="text-sm md:text-base text-white uppercase font-semibold">
--></f:comment>
<span class="product-teaser__label-concept">
{concept.name}
</span>
</div>
<button type="button"
class="px-2"
data-controller="watchlist-toggle"
data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}"
data-watchlist-toggle-target="ariaLabel"
@@ -45,7 +44,7 @@
data-cooltipz-dir="top-right"
aria-label="auf die Merkliste setzen"
role="tooltip">
<svg class="w-6 h-6 text-white" data-watchlist-toggle-target="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
<svg class="product-teaser__watchlist-icon" data-watchlist-toggle-target="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
</button>
</div>
</div>
@@ -55,18 +54,18 @@
<a href="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo)}"
title="{region.name} {product.name} Details und Buchen"
class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
<div class="text-gray-800 leading-none">
<div class="product-teaser__label-name">
{product.name}
</div>
<div class="relative h-12 md:h-16 text-gray-800 text-lg md:text-3xl leading-none font-bold">
<div class="product-teaser__label-region">
{region.name}
</div>
<div class="pb-2 text-gray-800 md:text-lg lg:text-xl font-bold leading-none">
<div class="product-teaser__label-included">
{ep:nightsOptions(options: nights, daytrip: daytrip)} inkl.
</div>
<ul class="flex-1 list-none m-0 text-gray-800 divide-y divide-gray-400">
<ul class="product-teaser__list-included flex-1 list-none m-0 text-gray-800 divide-y divide-gray-400">
<li class="flex items-center space-x-1 py-1">
<svg class="w-6 h-6 text-ep-primary">
<svg class="product-teaser__list-icon">
<use href="#icon-check"></use>
</svg>
<span class="block flex-1 leading-none">
@@ -75,7 +74,7 @@
</li>
<f:if condition="{product.feature}">
<li class="flex items-center space-x-1 py-1">
<svg class="w-6 h-6 text-ep-primary">
<svg class="product-teaser__list-icon">
<use href="#icon-check"></use>
</svg>
<span class="block flex-1 leading-none">
@@ -85,7 +84,7 @@
</f:if>
<f:if condition="{board}">
<li class="flex items-center space-x-1 py-1">
<svg class="w-6 h-6 text-ep-primary">
<svg class="product-teaser__list-icon">
<use href="#icon-check"></use>
</svg>
<span class="block flex-1 leading-none">
@@ -97,9 +96,9 @@
<div class="pt-8">
<div class="bg-ep-primary text-white font-bold px-4 py-1 group-hover:bg-ep-secondary transition-colors">
<div class="lg:inline-block">
ab <span class="text-xl md:text-3xl mx-1">{minPrice} €</span>
ab <span class="product-teaser__price mx-1">{minPrice} €</span>
</div>
<div class="text-sm md:text-base lg:inline-block">
<div class="product-teaser__label-price">
p. P. / inkl. {f:if(condition: '{season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Teasergroup.html
+5 -4
View File
@@ -21,19 +21,19 @@
data-action="teasergrid#grid"
data-teasergrid-target="button">
<svg class="w-6 h-6 text-ep-primary">
<use href="#icon-grid"></use>
<use href="#icon-minus-circle"></use>
</svg>
</button>
<button data-action="teasergrid#block"
data-teasergrid-target="button">
<svg class="w-6 h-6 text-ep-primary">
<use href="#icon-block"></use>
<use href="#icon-plus-circle"></use>
</svg>
</button>
</div>
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
data-teasergrid-target="container">
<f:for each="{teasers}" as="teaser">
<f:for each="{teasers}" as="teaser" iteration="iteration">
<f:render partial="Product/Teaser" section="Teaser" arguments="{
concept: teaser.concept,
hotel: teaser.hotel,
@@ -48,7 +48,8 @@
season: teaser.season,
forceHotelUid: teaser.forceHotelUid,
dateFrom: dateFrom,
dateTo: dateTo
dateTo: dateTo,
index: iteration.index
}"/>
</f:for>
</div>
tailwind.config.js
+3
View File
@@ -42,6 +42,9 @@ module.exports = {
xl: '1280px',
},
extend: {
fontSize: {
'xs': '.6rem',
},
colors: {
overlay: {
black: tinycolor('#000000').setAlpha(0.85).toRgbString(),