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

WIP Replace concept icon with country flag

Browse Source
This commit is contained in:
Björn Fromme
2021-09-10 12:51:59 +02:00
parent 61f622c2c2
commit 5fbc2c6c3f
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/Teaser.html
+15 -11
View File
@@ -16,15 +16,22 @@
data-src="{f:uri.image(image: productImage, width: '640c', height: '480c')}" data-src="{f:uri.image(image: productImage, width: '640c', height: '480c')}"
alt="{product.name}" alt="{product.name}"
width="640" height="480" /> width="640" height="480" />
<div class="absolute top-0 left-0 z-10 inset-x-0 flex justify-between items-center {f:if(condition: concept, then: 'bg-concept-{concept.code}', else: 'bg-ep-primary-80')}"> <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"> <div class="flex items-center space-x-2">
<div class="p-2 mr-4 text-white {f:if(condition: concept, else: 'bg-ep-primary-80')}"> <f:if condition="{country.code}">
<svg class="w-6 h-4 md:w-8 md:h-6">
<use href="#icon-flag-{country.code -> f:format.case(mode: 'lower')}"/>
</svg>
</f:if>
<f:comment><!--
<div class="p-2 text-white {f:if(condition: concept, else: 'bg-ep-primary-80')}">
<f:alias map="{ icons: { bik: 'Mountainbike', akt: 'Walking', prg: 'Sportclub' } }"> <f:alias map="{ icons: { bik: 'Mountainbike', akt: 'Walking', prg: 'Sportclub' } }">
<svg class="product-teaser__icon text-white"> <svg class="product-teaser__icon text-white">
<use href="#icon-{icons.{concept.code} -> f:format.case(mode: 'lower')}"></use> <use href="#icon-{icons.{concept.code} -> f:format.case(mode: 'lower')}"></use>
</svg> </svg>
</f:alias> </f:alias>
</div> </div>
--></f:comment>
<span class="text-sm md:text-base text-white uppercase font-semibold"> <span class="text-sm md:text-base text-white uppercase font-semibold">
{concept.name} {concept.name}
</span> </span>
@@ -48,19 +55,16 @@
<a href="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo)}" <a href="{ep:uri.product(forceHotelUid: forceHotelUid, product: product, hotel: hotel, dateFrom: dateFrom, dateTo: dateTo)}"
title="{region.name} {product.name} Details und Buchen" title="{region.name} {product.name} Details und Buchen"
class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4"> class="flex-1 flex flex-col space-y-1 px-2 py-4 md:p-4">
<div class="text-gray-800 leading-none pl-8 md:pl-10"> <div class="text-gray-800 leading-none">
{product.name} {product.name}
</div> </div>
<div class="relative h-16 md:h-24 text-gray-800 text-lg md:text-3xl leading-none font-bold pl-8 md:pl-10"> <div class="relative h-12 md:h-16 text-gray-800 text-lg md:text-3xl leading-none font-bold">
{region.name} {region.name}
<svg class="w-6 h-4 md:w-8 md:h-6 absolute top-0 left-0 md:mt-1">
<use href="#icon-flag-{country.code -> f:format.case(mode: 'lower')}"/>
</svg>
</div> </div>
<div class="pb-2 text-gray-800 text-lg md:text-xl font-bold leading-none pl-8 md:pl-10"> <div class="pb-2 text-gray-800 md:text-lg lg:text-xl font-bold leading-none">
{ep:nightsOptions(options: nights, daytrip: daytrip)} inkl. {ep:nightsOptions(options: nights, daytrip: daytrip)} inkl.
</div> </div>
<ul class="flex-1 list-none m-0 text-gray-800 divide-y divide-gray-400 pl-8 md:pl-10"> <ul class="flex-1 list-none m-0 text-gray-800 divide-y divide-gray-400">
<li class="flex items-center space-x-1 py-1"> <li class="flex items-center space-x-1 py-1">
<svg class="w-6 h-6 text-ep-primary"> <svg class="w-6 h-6 text-ep-primary">
<use href="#icon-check"></use> <use href="#icon-check"></use>
@@ -90,7 +94,7 @@
</li> </li>
</f:if> </f:if>
</ul> </ul>
<div class="pt-8 pl-8 md:pl-10"> <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="bg-ep-primary text-white font-bold px-4 py-1 group-hover:bg-ep-secondary transition-colors">
<div class="lg:inline-block"> <div class="lg:inline-block">
ab <span class="text-xl md:text-3xl mx-1">{minPrice} €</span> ab <span class="text-xl md:text-3xl mx-1">{minPrice} €</span>