From a02c6ccafe53022dce268fabb04a0b6501a3d681 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Thu, 21 Oct 2021 13:49:59 +0200
Subject: [PATCH] WIP Migrate filterpanel

---
 .../Private/Partials/Search/FilterPanel.html   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
index 8abe4c8e..7ff88b85 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
@@ -108,7 +108,9 @@
                                                  property="conceptUids"
                                                  data="{action: 'search#filter'}"
                                                  value="{concept.uid}"/>
-                                {concept.name}
+                                <span class="inline-block py-1 px-2 bg-concept-{concept.code} text-white">
+                                    {concept.name}
+                                </span>
                             </label>
                         </li>
                     </f:for>
@@ -132,20 +134,20 @@
                     </svg>
                 </button>
                 <div data-collapse-target="container">
-                    <ul class="mb-0 p-0 pt-2 space-y-1">
+                    <ul class="mb-0 p-0 pt-2">
                         <f:for each="{filterOptions.destinations}" as="destination">
-                            <li>
+                            <li class="relative border-b last:border-0 mb-2">
                                 <label class="flex items-start">
                                     <f:form.checkbox class="w-5 h-5 border-ep-primary ring-0 bg-transparent focus:ring-0 focus:border-none text-ep-primary"
                                                      property="countryUids"
                                                      data="{action: 'search#filter'}"
                                                      value="{destination.country.uid}"/>
-                                    <svg class="ml-2 w-6 h-4">
+                                    <span class="pl-2 leading-none">
+                                        <strong>{destination.country.label}</strong>
+                                    </span>
+                                    <svg class="absolute top-0 right-0 w-8 h-6">
                                         <use href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/>
                                     </svg>
-                                    <span class="pl-2 leading-none">
-                                        {destination.country.label}
-                                    </span>
                                 </label>
                                 <f:if condition="{destination.regions}">
                                     <ul class="py-2 space-y-1">
@@ -156,7 +158,7 @@
                                                                      property="regionUids"
                                                                      data="{action: 'search#filter'}"
                                                                      value="{region.uid}"/>
-                                                    <span class="leading-none pl-4">
+                                                    <span class="leading-none pl-2">
                                                         {region.label}
                                                     </span>
                                                 </label>