Replace tooltips library

2021-08-22 21:13:32 +02:00
parent 2dffa36a24
commit f98805472d
19 changed files with 152 additions and 156 deletions
@@ -16,6 +16,7 @@
        "bootstrap-sass": "^3.4.1",
        "bourbon": "^4.3.2",
        "cookieconsent": "^3.1.0",
+        "cooltipz-css": "^1.6.8",
        "dayjs": "^1.10.6",
        "es6-slide-up-down": "^1.0.0",
        "flatpickr": "^4.6.9",
@@ -24,7 +25,6 @@
        "jquery": "^3.6.0",
        "lazysizes": "^4.1.8",
        "leaflet": "^1.7.1",
-        "microtip": "^0.2.2",
        "normalize.css": "^8.0.1",
        "picturefill": "^3.0.3",
        "slick-carousel": "^1.8.1",
@@ -3491,6 +3491,11 @@
      "resolved": "https://registry.npmjs.org/cookieconsent/-/cookieconsent-3.1.1.tgz",
      "integrity": "sha512-v8JWLJcI7Zs9NWrs8hiVldVtm3EBF70TJI231vxn6YToBGj0c9dvdnYwltydkAnrbBMOM/qX1xLFrnTfm5wTag=="
    },
+    "node_modules/cooltipz-css": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/cooltipz-css/-/cooltipz-css-1.6.8.tgz",
+      "integrity": "sha512-AlLfZm1XYhM8tFLlHG9gXb6GzYZE523Op5JPx5qgA2AzLYl0w87boFsxDCuaeVMz+uQ9py9wFQ8wGpNssKwzUA=="
+    },
    "node_modules/core-js": {
      "version": "3.16.1",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz",
@@ -6447,11 +6452,6 @@
        "node": ">=8.6"
      }
    },
-    "node_modules/microtip": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/microtip/-/microtip-0.2.2.tgz",
-      "integrity": "sha512-oah38eH5vSHVFP6yXjbKWOYt92mav++0j3zh844h1vhOscqEg7Rf4agDEIwUTFCcAPPdlhYUQMe6eZfHgD+4oQ=="
-    },
    "node_modules/mime": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -13827,6 +13827,11 @@
      "resolved": "https://registry.npmjs.org/cookieconsent/-/cookieconsent-3.1.1.tgz",
      "integrity": "sha512-v8JWLJcI7Zs9NWrs8hiVldVtm3EBF70TJI231vxn6YToBGj0c9dvdnYwltydkAnrbBMOM/qX1xLFrnTfm5wTag=="
    },
+    "cooltipz-css": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/cooltipz-css/-/cooltipz-css-1.6.8.tgz",
+      "integrity": "sha512-AlLfZm1XYhM8tFLlHG9gXb6GzYZE523Op5JPx5qgA2AzLYl0w87boFsxDCuaeVMz+uQ9py9wFQ8wGpNssKwzUA=="
+    },
    "core-js": {
      "version": "3.16.1",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz",
@@ -16108,11 +16113,6 @@
        "picomatch": "^2.2.3"
      }
    },
-    "microtip": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/microtip/-/microtip-0.2.2.tgz",
-      "integrity": "sha512-oah38eH5vSHVFP6yXjbKWOYt92mav++0j3zh844h1vhOscqEg7Rf4agDEIwUTFCcAPPdlhYUQMe6eZfHgD+4oQ=="
-    },
    "mime": {
      "version": "1.6.0",
      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -16,6 +16,7 @@
    "bootstrap-sass": "^3.4.1",
    "bourbon": "^4.3.2",
    "cookieconsent": "^3.1.0",
+    "cooltipz-css": "^1.6.8",
    "dayjs": "^1.10.6",
    "es6-slide-up-down": "^1.0.0",
    "flatpickr": "^4.6.9",
@@ -24,7 +25,6 @@
    "jquery": "^3.6.0",
    "lazysizes": "^4.1.8",
    "leaflet": "^1.7.1",
-    "microtip": "^0.2.2",
    "normalize.css": "^8.0.1",
    "picturefill": "^3.0.3",
    "slick-carousel": "^1.8.1",
@@ -4,7 +4,7 @@ export default class extends Controller {

    static values = { count: Number }

-    static targets = [ 'label' ]
+    static targets = [ 'label', 'icon' ]

    connect() {
        this.watchlist = JSON.parse(sessionStorage.getItem('myep-watchlist')) || []
@@ -24,11 +24,7 @@ export default class extends Controller {
    }

    countValueChanged() {
-        if (0 === this.countValue) {
-            this.element.classList.add('hidden')
-        } else {
-            this.element.classList.remove('hidden')
-            this.labelTarget.innerText = `Merkliste (${this.watchlist.length})`
-        }
+        this.iconTarget.setAttribute('fill', this.countValue > 0 ? 'currentColor' : 'none')
+        this.labelTarget.innerText = `Merkliste (${this.countValue})`
    }
 }
@@ -36,7 +36,7 @@ export default class extends Controller {
            this.labelTarget.innerText = true === this.onListValue ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen'
        }
        if (this.hasIconTarget) {
-            this.iconTarget.setAttribute('href', true === this.onListValue ? '#icon-minus-circle' : '#icon-plus-circle')
+            this.iconTarget.setAttribute('fill', true === this.onListValue ? 'currentColor' : 'none')
        }
        if (this.hasAriaLabelTarget) {
            this.ariaLabelTarget.setAttribute('aria-label', true === this.onListValue ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen')
@@ -0,0 +1,6 @@
+@import "~cooltipz-css/src/cooltipz";
+
+:root {
+    --cooltipz-bg-color: theme('colors.ep.secondary');
+    --cooltipz-text-color: theme('colors.white');
+}
@@ -18,7 +18,7 @@
 }

@layer components {
-    @import "~microtip/microtip";
+    @import "components/tooltips";
    @import "components/background";
    @import "components/badges";
    @import "components/buttons";
@@ -9,10 +9,10 @@
           data-controller="watchlist-label"
           data-action="watchlist-toggle:toggle@window->watchlist-label#update"
           rel="nofollow">
-            <svg class="contact-bar__icon">
-                <use href="#icon-heart"></use>
-            </svg>
-            <div class="contact-bar__label" data-watchlist-label-target="label"></div>
+            <svg class="contact-bar__icon" data-watchlist-label-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>
+            <div class="contact-bar__label" data-watchlist-label-target="label">
+                Merkliste
+            </div>
        </a>
        <a href="tel:{settings.phoneNumberLink}"
           class="contact-bar__item"
@@ -121,14 +121,7 @@
                    data-controller="watchlist-toggle"
                    data-watchlist-toggle-key-value="{item.key}"
                    data-action="watchlist-toggle#toggle">
-                <span data-microtip-position="top"
-                      role="tooltip"
-                      aria-label="auf die Merkliste setzen"
-                      data-watchlist-toggle-target="ariaLabel">
-                    <svg class="w-5 h-5 text-ep-secondary">
-                        <use href="#icon-plus-circle" data-watchlist-toggle-target="icon"></use>
-                    </svg>
-                </span>
+                <svg class="w-5 h-5 text-ep-secondary" 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>
    </f:section>
@@ -31,6 +31,9 @@
            <animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="960ms" repeatCount="indefinite"></animateTransform>
        </g>
    </symbol>
+    <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>
    <!-- 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>
@@ -56,12 +56,12 @@
                                    </td>
                                    <td class="px-2 py-1 border border-gray-200">
                                        <f:if condition="{row.dateBusIncluded}">
-                                            <span data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip">
+                                            <span data-cooltipz-dir="top" aria-label="Busfahrt inklusive" role="tooltip">
                                                <i class="fa fa-bus"></i>
                                            </span>
                                        </f:if>
                                        <f:if condition="{row.dateSkipassIncluded}">
-                                            <span data-microtip-position="top" aria-label="Skipass inklusive" role="tooltip">
+                                            <span data-cooltipz-dir="top" aria-label="Skipass inklusive" role="tooltip">
                                                <i class="fa fa-tag"></i>
                                            </span>
                                        </f:if>
@@ -3,54 +3,60 @@
      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

    <f:section name="Teaser">
-        <a href="{ep:uri.product(forceHotelUid: teaser.forceHotelUid, product: teaser.product, hotel: teaser.hotel, dateFrom: dateFrom, dateTo: dateTo, slug: slug)}"
-           title="{teaser.region.name} {teaser.product.name} Details und Buchen"
-           class="block w-full max-w-xl mx-auto sm:max-w-none bg-white sm:flex sm:flex-wrap">
-            <f:render section="TeaserImage" arguments="{_all}"/>
-            <f:render section="TeaserContent" arguments="{_all}"/>
-        </a>
-    </f:section>
-
-    <f:section name="TeaserImage">
-        <f:alias map="{ icons: { bik: 'Mountainbike', akt: 'Walking', prg: 'Sportclub' } }">
        <div class="relative">
-                <img class="block w-full h-auto lazyload"
-                     data-src="{f:uri.image(image: teaser.product.images.original.0, width: '640', height: '480c')}"
-                     width="640" height="480" />
-                <div class="absolute top-0 left-0 w-full md:w-2/3 bg-ep-primary-80 flex items-center">
+            <div class="absolute top-0 left-0 z-10 inset-x-0 flex justify-between items-center bg-ep-primary-80">
+                <div class="w-2/3 flex items-center">
                    <div class="bg-ep-primary p-2 mr-4 text-white">
+                        <f:alias map="{ icons: { bik: 'Mountainbike', akt: 'Walking', prg: 'Sportclub' } }">
                            <svg class="w-8 h-8 fill-current text-white">
                                <use href="#icon-{icons.{teaser.concept.code} -> f:format.case(mode: 'lower')}"></use>
                            </svg>
+                        </f:alias>
                    </div>
                    <span class="text-white uppercase font-semibold">
                            {teaser.concept.name}
                        </span>
                </div>
-                <button class="absolute bottom-0 md:bottom-auto md:top-0 right-0 p-2 text-white hover:text-ep-primary"
+                <button type="button"
+                        class="px-2"
                        data-controller="watchlist-toggle"
-                        data-watchlist-toggle-key-value="{item.key}"
-                        data-action="watchlist-toggle#toggle">
-                      <span data-microtip-position="top"
-                            role="tooltip"
+                        data-watchlist-toggle-key-value="{teaser.product.uid}:{teaser.hotel.uid}"
+                        data-watchlist-toggle-target="ariaLabel"
+                        data-action="watchlist-toggle#toggle"
+                        data-cooltipz-dir="top"
                        aria-label="auf die Merkliste setzen"
-                            data-watchlist-toggle-target="ariaLabel">
-                        <svg class="w-5 h-5 text-ep-secondary">
-                            <use href="#icon-heart" data-watchlist-toggle-target="icon"></use>
-                        </svg>
-                      </span>
+                        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>
                </button>
            </div>
-        </f:alias>
+            <a href="{ep:uri.product(forceHotelUid: teaser.forceHotelUid, product: teaser.product, hotel: teaser.hotel, dateFrom: dateFrom, dateTo: dateTo, slug: slug)}"
+               title="{teaser.region.name} {teaser.product.name} Details und Buchen"
+               class="block sm:flex sm:flex-wrap bg-white">
+                <div class="relative w-full">
+                    <img class="block w-full h-auto lazyload"
+                         data-src="{f:uri.image(image: teaser.product.images.original.0, width: '640', height: '480c')}"
+                         width="640" height="480" />
+                </div>
+                <f:render section="TeaserContent" arguments="{_all}"/>
+            </a>
+        </div>
    </f:section>

    <f:section name="TeaserContent">
-        <div class="w-full py-4 px-4 flex items-start">
-            <svg class="w-10 h-6 mr-2 mt-8"><use href="#icon-flag-{teaser.country.code -> f:format.case(mode: 'lower')}"/></svg>
-            <div class="flex-grow pt-1">
-                <div class="text-gray-800 leading-none">{teaser.product.name}</div>
-                <div class="pt-2 h-32 text-gray-800 text-3xl leading-none font-bold">{teaser.region.name}</div>
-                <div class="pb-2 text-gray-800 text-xl font-bold">{ep:nightsOptions(options: teaser.nights, daytrip: teaser.daytrip)}</div>
+        <div class="w-full flex items-start py-4 px-4">
+            <svg class="w-10 h-6 mr-2 mt-8">
+                <use href="#icon-flag-{teaser.country.code -> f:format.case(mode: 'lower')}"/>
+            </svg>
+            <div class="flex-1 pt-1">
+                <div class="text-gray-800 leading-none">
+                    {teaser.product.name}
+                </div>
+                <div class="pt-2 h-32 text-gray-800 text-3xl leading-none font-bold">
+                    {teaser.region.name}
+                </div>
+                <div class="pb-2 text-gray-800 text-xl font-bold">
+                    {ep:nightsOptions(options: teaser.nights, daytrip: teaser.daytrip)}
+                </div>
                <ul class="list-none p-0 m-0 w-2/3 text-gray-800 divide-y divide-gray-400">
                    <li>
                        {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
@@ -65,9 +71,13 @@
                        {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
                    </li>
                </ul>
-                <div class="w-full bg-ep-primary text-white font-bold px-4 py-1 mt-10 mb-4">
-                    <span class="block lg:inline-block">ab <span class="text-3xl mx-1">{teaser.minPrice} €</span></span>
-                    <span class="block lg:inline-block">p. P. / inkl. {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}</span>
+                <div class="bg-ep-primary text-white font-bold px-4 py-1 mt-10 mb-4">
+                    <div class="lg:inline-block">
+                        ab <span class="text-3xl mx-1">{teaser.minPrice} €</span>
+                    </div>
+                    <div class="lg:inline-block">
+                        p. P. / inkl. {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
+                    </div>
                </div>
            </div>
        </div>
@@ -93,7 +93,7 @@
                </div>
            </div>
            <a href="#" class="teaserbox-watchlist" x-data="watchlistToggle('{hotel.uid}:{product.uid}')" x-bind="trigger">
-              <span data-microtip-position="top" x-bind:aria-label="label" role="tooltip">
+              <span data-cooltipz-dir="top" x-bind:aria-label="label" role="tooltip">
                <i class="fa fa-plus-circle" x-bind:class="icon"></i>
              </span>
            </a>
@@ -145,14 +145,7 @@
                                    data-controller="watchlist-toggle"
                                    data-watchlist-toggle-key-value="{item.key}"
                                    data-action="watchlist-toggle#toggle">
-                                  <span data-microtip-position="top"
-                                        role="tooltip"
-                                        aria-label="auf die Merkliste setzen"
-                                        data-watchlist-toggle-target="ariaLabel">
-                                    <svg class="w-5 h-5 text-ep-secondary">
-                                        <use href="#icon-plus-circle" data-watchlist-toggle-target="icon"></use>
-                                    </svg>
-                                  </span>
+                                <svg class="w-5 h-5 text-ep-secondary" 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>
                    </f:for>
@@ -50,7 +50,7 @@
                            Termin
                        </th>
                        <th class="p-1 text-left">
-                            <span data-microtip-position="bottom" aria-label="Nächte" role="tooltip">
+                            <span data-cooltipz-dir="bottom" aria-label="Nächte" role="tooltip">
                                <svg class="w-4 h-4">
                                    <use href="#icon-bed"></use>
                                </svg>
@@ -116,7 +116,7 @@
                            <td class="px-2 py-1">
                                <div class="hidden md:flex items-center space-x-2">
                                    <f:if condition="{row.busIncluded}">
-                                        <span data-microtip-position="top"
+                                        <span data-cooltipz-dir="top"
                                              aria-label="Busfahrt"
                                              role="tooltip"
                                              data-pricetable-target="busIcon"
@@ -128,7 +128,7 @@
                                        </span>
                                    </f:if>
                                    <f:if condition="{row.skipassIncluded}">
-                                        <span data-microtip-position="top"
+                                        <span data-cooltipz-dir="top"
                                             aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
                                             role="tooltip">
                                            <svg class="w-4 h-4">
@@ -140,7 +140,7 @@
                                            data-action="pricetable#openModal"
                                            data-type="services"
                                            data-uid="{row.dateUid}"
-                                            data-microtip-position="top"
+                                            data-cooltipz-dir="top"
                                            aria-label="Alle Inklusivleistungen anzeigen"
                                            role="tooltip">
                                        Leistungen
@@ -25,7 +25,7 @@
                    </td>
                    <td>
                        <f:if condition="{row.skipassIncluded}">
-                            <span data-microtip-position="top"
+                            <span data-cooltipz-dir="top"
                                  aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
                                  role="tooltip">
                                <svg class="w-4 h-4">
@@ -37,7 +37,7 @@
                                data-action="daytrip#openModal"
                                data-type="services"
                                data-uid="{iteration.cycle}"
-                                data-microtip-position="top"
+                                data-cooltipz-dir="top"
                                aria-label="Alle Inklusivleistungen anzeigen"
                                role="tooltip">
                            Leistungen
@@ -104,7 +104,7 @@
                            <td class="px-2 py-1">
                                <div class="flex items-center space-x-1">
                                    <f:if condition="{row.busIncluded}">
-                                        <span data-microtip-position="top"
+                                        <span data-cooltipz-dir="top"
                                              aria-label="Busfahrt"
                                              role="tooltip"
                                              data-pricetable-target="busIcon"
@@ -116,7 +116,7 @@
                                        </span>
                                    </f:if>
                                    <f:if condition="{row.skipassIncluded}">
-                                        <span data-microtip-position="top"
+                                        <span data-cooltipz-dir="top"
                                              aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
                                              role="tooltip">
                                          <svg class="w-4 h-4">
@@ -132,7 +132,7 @@
                                            data-action="pricetable#openModal"
                                            data-type="options"
                                            data-uid="{row.roomUid}"
-                                            data-microtip-position="top"
+                                            data-cooltipz-dir="top"
                                            aria-label="Alle Zusatzleistungen anzeigen"
                                            role="tooltip">
                                        Optionen
@@ -140,7 +140,7 @@
                                            data-controller="watchlist-toggle"
                                            data-watchlist-toggle-key-value="{item.key}"
                                            data-action="watchlist-toggle#toggle">
-                                      <span data-microtip-position="top"
+                                      <span data-cooltipz-dir="top"
                                            role="tooltip"
                                            aria-label="auf die Merkliste setzen"
                                            data-watchlist-toggle-target="ariaLabel">
@@ -6,8 +6,8 @@

    <f:section name="Main">
        <div class="py-8 bg-ep-primary-10">
-            <ep:container data="{data}">
            <f:render partial="Header/Standalone" arguments="{_all}"/>
+            <div class="container">
                <f:render section="Teasers" arguments="{_all}"/>
                <f:if condition="{settings.showMoreLink}">
                    <div class="text-right mt-4">
@@ -18,7 +18,7 @@
                        </f:link.action>
                    </div>
                </f:if>
-            </ep:container>
+            </div>
        </div>
    </f:section>

@@ -31,7 +31,7 @@
                    </f:for>
                </f:then>
                <f:else>
-                    <div class="grid grid-cols-3 gap-8">
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <f:for each="{teasers}" as="teaser">
                            <f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
                        </f:for>
@@ -6,11 +6,6 @@
        <div data-controller="searchbar"
             data-action="datepicker:range-select->searchbar#setDateRange"
             data-searchbar-uri-value="{ep:uri.ajax(controller: 'Searchbar', action: 'index', pageUid: settings.defaultAjaxUid, format: 'html')}">
-            <div class="searchbar {f:if(condition: fixed, then: ' sticky')}"
-                 data-controller="sticky"
-                 data-sticky-offset-value="650"
-                 data-sticky-disabled-value="{fixed -> f:format.json()}"
-                 data-searchbar-target="container">
            <f:form action="processSearch" controller="Search" method="post" name="searchParams"
                    object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
                    pageUid="{settings.defaultSearchPageUid}" data="{'searchbar-target': 'form'}">
@@ -20,16 +15,18 @@
                <f:form.hidden property="destinationUid" data="{'searchbar-target': 'destinationUid'}"/>
                <f:form.hidden property="destinationType" data="{'searchbar-target': 'destinationType'}"/>
                <f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
+                <div class="searchbar {f:if(condition: fixed, then: ' sticky')}"
+                     data-controller="sticky"
+                     data-sticky-offset-value="650"
+                     data-sticky-disabled-value="{fixed -> f:format.json()}"
+                     data-searchbar-target="container">
                    <div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
                        <div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">

-                            <!-- Date range -->
                            <div class="flex-1"
                                 data-controller="collapse datepicker"
-                            <f:if condition="{searchParams.dateFrom} && {searchParams.dateTo}">
                                 data-datepicker-date-from-value="{searchParams.dateFrom}"
                                 data-datepicker-date-to-value="{searchParams.dateTo}"
-                            </f:if>
                                 data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
                                 data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
                                 data-collapse-collapsed-value="true">
@@ -38,15 +35,14 @@
                                           data-action="click->collapse#toggle"
                                           class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
                                           placeholder="Zeitraum"
-                                    <f:if condition="{searchParams.dateFrom} && {searchParams.dateTo}">
                                           value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
-                                    </f:if>
                                           data-searchbar-target="dateRangeLabel"/>
                                    <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
                                         data-action="click->collapse#toggle">
                                        <use href="#icon-calendar"></use>
                                    </svg>
-                                    <div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
+                                    <div
+                                        class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
                                        data-collapse-target="container">
                                        <div class="flex justify-between divide-x divide-gray-200">
                                            <div class="pr-2">
@@ -58,7 +54,7 @@
                                                    <div class="flex flex-col space-y-4">
                                                        <f:for each="{settings.datePickerPresets}" as="preset">
                                                            <button class="button button--small button--light w-full"
-                                                                    data-preset='{preset -> f:format.json()}'
+                                                                    data-preset='{preset -> f:format.json() -> f:format.raw()}'
                                                                    data-action="datepicker#selectPreset">
                                                                    <span>
                                                                        {preset.label}
@@ -82,9 +78,7 @@
                                    </div>
                                </div>
                            </div>
-                            <!-- /Date range -->

-                            <!-- Pax -->
                            <div class="w-24"
                                 data-controller="collapse"
                                 data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
@@ -99,7 +93,8 @@
                                         data-action="click->collapse#toggle">
                                        <use href="#icon-user-group"></use>
                                    </svg>
-                                    <div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded w-full h-48 overflow-y-scroll"
+                                    <div
+                                        class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded w-full h-48 overflow-y-scroll"
                                        data-collapse-target="container">
                                        <ul class="m-0 p-0">
                                            <f:for each="{filterOptions.pax}" as="option">
@@ -119,9 +114,7 @@
                                    </div>
                                </div>
                            </div>
-                            <!-- /Pax -->

-                            <!-- Destination -->
                            <div class="flex-1"
                                 data-controller="collapse"
                                 data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
@@ -132,11 +125,13 @@
                                           data-searchbar-target="destinationLabel"
                                           class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
                                           placeholder="Reiseziel/Konzept"/>
-                                    <svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45 cursor-pointer"
+                                    <svg
+                                        class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45 cursor-pointer"
                                        data-action="click->collapse#toggle">
                                        <use href="#icon-airplane"></use>
                                    </svg>
-                                    <div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded min-w-full h-64 overflow-y-scroll"
+                                    <div
+                                        class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded min-w-full h-64 overflow-y-scroll"
                                        data-collapse-target="container">
                                        <div class="grid grid-cols-5 gap-4">
                                            <f:for each="{filterOptions.destinations}" as="destination">
@@ -147,7 +142,8 @@
                                                            data-option-type="country"
                                                            data-option-label="{destination.country.label}">
                                                        <svg class="block w-8 h-6">
-                                                            <use href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/>
+                                                            <use
+                                                                href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/>
                                                        </svg>
                                                        <span>
                                                                {destination.country.label}
@@ -190,9 +186,7 @@
                                    </div>
                                </div>
                            </div>
-                            <!-- /Destination -->

-                            <!-- Price range -->
                            <div class="w-32"
                                 data-controller="collapse"
                                 data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
@@ -207,7 +201,8 @@
                                         data-action="click->collapse#toggle">
                                        <use href="#icon-euro"></use>
                                    </svg>
-                                    <div class="hidden absolute z-20 top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
+                                    <div
+                                        class="hidden absolute z-20 top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
                                        data-collapse-target="container">
                                        <ul class="m-0 p-0">
                                            <li>
@@ -230,7 +225,6 @@
                                    </div>
                                </div>
                            </div>
-                            <!-- /Price range -->

                        </div>
                        <button type="submit" class="hidden sticky:block sticky:ml-4">
@@ -238,6 +232,7 @@
                                <use href="#icon-chevron-right"></use>
                            </svg>
                        </button>
+                    </div>
                    <div class="flex justify-end mt-4 sticky:hidden">
                        <button type="submit" class="w-1/3 text-white uppercase py-2">
                            Detailsuche
@@ -246,8 +241,8 @@
                            Alle anzeigen
                        </button>
                    </div>
-                </f:form>
                </div>
+            </f:form>
        </div>
    </f:section>