From 5fbc2c6c3fc1490a0fef1d61feb2ac7f7d27a060 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Fri, 10 Sep 2021 12:51:59 +0200
Subject: [PATCH] WIP Replace concept icon with country flag

---
 .../Private/Partials/Product/Teaser.html      | 38 ++++++++++---------
 1 file changed, 21 insertions(+), 17 deletions(-)

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 1821b62f..6c236faf 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
@@ -16,15 +16,22 @@
                  data-src="{f:uri.image(image: productImage, width: '640c', height: '480c')}"
                  alt="{product.name}"
                  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="flex items-center">
-                    <div class="p-2 mr-4 text-white {f:if(condition: concept, else: 'bg-ep-primary-80')}">
-                        <f:alias map="{ icons: { bik: 'Mountainbike', akt: 'Walking', prg: 'Sportclub' } }">
-                            <svg class="product-teaser__icon text-white">
-                                <use href="#icon-{icons.{concept.code} -> f:format.case(mode: 'lower')}"></use>
-                            </svg>
-                        </f:alias>
-                    </div>
+            <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">
+                            <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' } }">
+                                <svg class="product-teaser__icon text-white">
+                                    <use href="#icon-{icons.{concept.code} -> f:format.case(mode: 'lower')}"></use>
+                                </svg>
+                            </f:alias>
+                        </div>
+                        --></f:comment>
                     <span class="text-sm md:text-base text-white uppercase font-semibold">
                         {concept.name}
                     </span>
@@ -48,19 +55,16 @@
         <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 pl-8 md:pl-10">
+            <div class="text-gray-800 leading-none">
                 {product.name}
             </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}
-                <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 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.
             </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">
                     <svg class="w-6 h-6 text-ep-primary">
                         <use href="#icon-check"></use>
@@ -90,7 +94,7 @@
                     </li>
                 </f:if>
             </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="lg:inline-block">
                         ab <span class="text-xl md:text-3xl mx-1">{minPrice} €</span>