Replace tooltips library
This commit is contained in:
Björn Fromme
Generated
+11
-11
@@ -16,6 +16,7 @@
|
|||||||
"bootstrap-sass": "^3.4.1",
|
"bootstrap-sass": "^3.4.1",
|
||||||
"bourbon": "^4.3.2",
|
"bourbon": "^4.3.2",
|
||||||
"cookieconsent": "^3.1.0",
|
"cookieconsent": "^3.1.0",
|
||||||
|
"cooltipz-css": "^1.6.8",
|
||||||
"dayjs": "^1.10.6",
|
"dayjs": "^1.10.6",
|
||||||
"es6-slide-up-down": "^1.0.0",
|
"es6-slide-up-down": "^1.0.0",
|
||||||
"flatpickr": "^4.6.9",
|
"flatpickr": "^4.6.9",
|
||||||
@@ -24,7 +25,6 @@
|
|||||||
"jquery": "^3.6.0",
|
"jquery": "^3.6.0",
|
||||||
"lazysizes": "^4.1.8",
|
"lazysizes": "^4.1.8",
|
||||||
"leaflet": "^1.7.1",
|
"leaflet": "^1.7.1",
|
||||||
"microtip": "^0.2.2",
|
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"picturefill": "^3.0.3",
|
"picturefill": "^3.0.3",
|
||||||
"slick-carousel": "^1.8.1",
|
"slick-carousel": "^1.8.1",
|
||||||
@@ -3491,6 +3491,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/cookieconsent/-/cookieconsent-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/cookieconsent/-/cookieconsent-3.1.1.tgz",
|
||||||
"integrity": "sha512-v8JWLJcI7Zs9NWrs8hiVldVtm3EBF70TJI231vxn6YToBGj0c9dvdnYwltydkAnrbBMOM/qX1xLFrnTfm5wTag=="
|
"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": {
|
"node_modules/core-js": {
|
||||||
"version": "3.16.1",
|
"version": "3.16.1",
|
||||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz",
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz",
|
||||||
@@ -6447,11 +6452,6 @@
|
|||||||
"node": ">=8.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": {
|
"node_modules/mime": {
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/cookieconsent/-/cookieconsent-3.1.1.tgz",
|
||||||
"integrity": "sha512-v8JWLJcI7Zs9NWrs8hiVldVtm3EBF70TJI231vxn6YToBGj0c9dvdnYwltydkAnrbBMOM/qX1xLFrnTfm5wTag=="
|
"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": {
|
"core-js": {
|
||||||
"version": "3.16.1",
|
"version": "3.16.1",
|
||||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz",
|
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.16.1.tgz",
|
||||||
@@ -16108,11 +16113,6 @@
|
|||||||
"picomatch": "^2.2.3"
|
"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": {
|
"mime": {
|
||||||
"version": "1.6.0",
|
"version": "1.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
|
||||||
|
|||||||
+1
-1
@@ -16,6 +16,7 @@
|
|||||||
"bootstrap-sass": "^3.4.1",
|
"bootstrap-sass": "^3.4.1",
|
||||||
"bourbon": "^4.3.2",
|
"bourbon": "^4.3.2",
|
||||||
"cookieconsent": "^3.1.0",
|
"cookieconsent": "^3.1.0",
|
||||||
|
"cooltipz-css": "^1.6.8",
|
||||||
"dayjs": "^1.10.6",
|
"dayjs": "^1.10.6",
|
||||||
"es6-slide-up-down": "^1.0.0",
|
"es6-slide-up-down": "^1.0.0",
|
||||||
"flatpickr": "^4.6.9",
|
"flatpickr": "^4.6.9",
|
||||||
@@ -24,7 +25,6 @@
|
|||||||
"jquery": "^3.6.0",
|
"jquery": "^3.6.0",
|
||||||
"lazysizes": "^4.1.8",
|
"lazysizes": "^4.1.8",
|
||||||
"leaflet": "^1.7.1",
|
"leaflet": "^1.7.1",
|
||||||
"microtip": "^0.2.2",
|
|
||||||
"normalize.css": "^8.0.1",
|
"normalize.css": "^8.0.1",
|
||||||
"picturefill": "^3.0.3",
|
"picturefill": "^3.0.3",
|
||||||
"slick-carousel": "^1.8.1",
|
"slick-carousel": "^1.8.1",
|
||||||
|
|||||||
+3
-7
@@ -4,7 +4,7 @@ export default class extends Controller {
|
|||||||
|
|
||||||
static values = { count: Number }
|
static values = { count: Number }
|
||||||
|
|
||||||
static targets = [ 'label' ]
|
static targets = [ 'label', 'icon' ]
|
||||||
|
|
||||||
connect() {
|
connect() {
|
||||||
this.watchlist = JSON.parse(sessionStorage.getItem('myep-watchlist')) || []
|
this.watchlist = JSON.parse(sessionStorage.getItem('myep-watchlist')) || []
|
||||||
@@ -24,11 +24,7 @@ export default class extends Controller {
|
|||||||
}
|
}
|
||||||
|
|
||||||
countValueChanged() {
|
countValueChanged() {
|
||||||
if (0 === this.countValue) {
|
this.iconTarget.setAttribute('fill', this.countValue > 0 ? 'currentColor' : 'none')
|
||||||
this.element.classList.add('hidden')
|
this.labelTarget.innerText = `Merkliste (${this.countValue})`
|
||||||
} else {
|
|
||||||
this.element.classList.remove('hidden')
|
|
||||||
this.labelTarget.innerText = `Merkliste (${this.watchlist.length})`
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-1
@@ -36,7 +36,7 @@ export default class extends Controller {
|
|||||||
this.labelTarget.innerText = true === this.onListValue ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen'
|
this.labelTarget.innerText = true === this.onListValue ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen'
|
||||||
}
|
}
|
||||||
if (this.hasIconTarget) {
|
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) {
|
if (this.hasAriaLabelTarget) {
|
||||||
this.ariaLabelTarget.setAttribute('aria-label', true === this.onListValue ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen')
|
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 {
|
@layer components {
|
||||||
@import "~microtip/microtip";
|
@import "components/tooltips";
|
||||||
@import "components/background";
|
@import "components/background";
|
||||||
@import "components/badges";
|
@import "components/badges";
|
||||||
@import "components/buttons";
|
@import "components/buttons";
|
||||||
|
|||||||
@@ -9,10 +9,10 @@
|
|||||||
data-controller="watchlist-label"
|
data-controller="watchlist-label"
|
||||||
data-action="watchlist-toggle:toggle@window->watchlist-label#update"
|
data-action="watchlist-toggle:toggle@window->watchlist-label#update"
|
||||||
rel="nofollow">
|
rel="nofollow">
|
||||||
<svg class="contact-bar__icon">
|
<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>
|
||||||
<use href="#icon-heart"></use>
|
<div class="contact-bar__label" data-watchlist-label-target="label">
|
||||||
</svg>
|
Merkliste
|
||||||
<div class="contact-bar__label" data-watchlist-label-target="label"></div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a href="tel:{settings.phoneNumberLink}"
|
<a href="tel:{settings.phoneNumberLink}"
|
||||||
class="contact-bar__item"
|
class="contact-bar__item"
|
||||||
|
|||||||
@@ -121,14 +121,7 @@
|
|||||||
data-controller="watchlist-toggle"
|
data-controller="watchlist-toggle"
|
||||||
data-watchlist-toggle-key-value="{item.key}"
|
data-watchlist-toggle-key-value="{item.key}"
|
||||||
data-action="watchlist-toggle#toggle">
|
data-action="watchlist-toggle#toggle">
|
||||||
<span data-microtip-position="top"
|
<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>
|
||||||
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>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|||||||
@@ -31,6 +31,9 @@
|
|||||||
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="960ms" repeatCount="indefinite"></animateTransform>
|
<animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="960ms" repeatCount="indefinite"></animateTransform>
|
||||||
</g>
|
</g>
|
||||||
</symbol>
|
</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 -->
|
<!-- 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-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>
|
<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>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 17 KiB After Width: | Height: | Size: 21 KiB |
@@ -56,12 +56,12 @@
|
|||||||
</td>
|
</td>
|
||||||
<td class="px-2 py-1 border border-gray-200">
|
<td class="px-2 py-1 border border-gray-200">
|
||||||
<f:if condition="{row.dateBusIncluded}">
|
<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>
|
<i class="fa fa-bus"></i>
|
||||||
</span>
|
</span>
|
||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{row.dateSkipassIncluded}">
|
<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>
|
<i class="fa fa-tag"></i>
|
||||||
</span>
|
</span>
|
||||||
</f:if>
|
</f:if>
|
||||||
|
|||||||
@@ -3,54 +3,60 @@
|
|||||||
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
|
||||||
|
|
||||||
<f:section name="Teaser">
|
<f:section name="Teaser">
|
||||||
<a href="{ep:uri.product(forceHotelUid: teaser.forceHotelUid, product: teaser.product, hotel: teaser.hotel, dateFrom: dateFrom, dateTo: dateTo, slug: slug)}"
|
<div class="relative">
|
||||||
title="{teaser.region.name} {teaser.product.name} Details und Buchen"
|
<div class="absolute top-0 left-0 z-10 inset-x-0 flex justify-between items-center bg-ep-primary-80">
|
||||||
class="block w-full max-w-xl mx-auto sm:max-w-none bg-white sm:flex sm:flex-wrap">
|
<div class="w-2/3 flex items-center">
|
||||||
<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="bg-ep-primary p-2 mr-4 text-white">
|
<div class="bg-ep-primary p-2 mr-4 text-white">
|
||||||
<svg class="w-8 h-8 fill-current text-white">
|
<f:alias map="{ icons: { bik: 'Mountainbike', akt: 'Walking', prg: 'Sportclub' } }">
|
||||||
<use href="#icon-{icons.{teaser.concept.code} -> f:format.case(mode: 'lower')}"></use>
|
<svg class="w-8 h-8 fill-current text-white">
|
||||||
</svg>
|
<use href="#icon-{icons.{teaser.concept.code} -> f:format.case(mode: 'lower')}"></use>
|
||||||
|
</svg>
|
||||||
|
</f:alias>
|
||||||
</div>
|
</div>
|
||||||
<span class="text-white uppercase font-semibold">
|
<span class="text-white uppercase font-semibold">
|
||||||
{teaser.concept.name}
|
{teaser.concept.name}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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-controller="watchlist-toggle"
|
||||||
data-watchlist-toggle-key-value="{item.key}"
|
data-watchlist-toggle-key-value="{teaser.product.uid}:{teaser.hotel.uid}"
|
||||||
data-action="watchlist-toggle#toggle">
|
data-watchlist-toggle-target="ariaLabel"
|
||||||
<span data-microtip-position="top"
|
data-action="watchlist-toggle#toggle"
|
||||||
role="tooltip"
|
data-cooltipz-dir="top"
|
||||||
aria-label="auf die Merkliste setzen"
|
aria-label="auf die Merkliste setzen"
|
||||||
data-watchlist-toggle-target="ariaLabel">
|
role="tooltip">
|
||||||
<svg class="w-5 h-5 text-ep-secondary">
|
<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>
|
||||||
<use href="#icon-heart" data-watchlist-toggle-target="icon"></use>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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>
|
||||||
|
|
||||||
<f:section name="TeaserContent">
|
<f:section name="TeaserContent">
|
||||||
<div class="w-full py-4 px-4 flex items-start">
|
<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>
|
<svg class="w-10 h-6 mr-2 mt-8">
|
||||||
<div class="flex-grow pt-1">
|
<use href="#icon-flag-{teaser.country.code -> f:format.case(mode: 'lower')}"/>
|
||||||
<div class="text-gray-800 leading-none">{teaser.product.name}</div>
|
</svg>
|
||||||
<div class="pt-2 h-32 text-gray-800 text-3xl leading-none font-bold">{teaser.region.name}</div>
|
<div class="flex-1 pt-1">
|
||||||
<div class="pb-2 text-gray-800 text-xl font-bold">{ep:nightsOptions(options: teaser.nights, daytrip: teaser.daytrip)}</div>
|
<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">
|
<ul class="list-none p-0 m-0 w-2/3 text-gray-800 divide-y divide-gray-400">
|
||||||
<li>
|
<li>
|
||||||
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
||||||
@@ -65,9 +71,13 @@
|
|||||||
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
{f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="w-full bg-ep-primary text-white font-bold px-4 py-1 mt-10 mb-4">
|
<div class="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>
|
<div class="lg:inline-block">
|
||||||
<span class="block lg:inline-block">p. P. / inkl. {f:if(condition: '{teaser.season} == "s"', then: 'Bergbahnticket', else: 'Skipass')}</span>
|
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -93,7 +93,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a href="#" class="teaserbox-watchlist" x-data="watchlistToggle('{hotel.uid}:{product.uid}')" x-bind="trigger">
|
<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>
|
<i class="fa fa-plus-circle" x-bind:class="icon"></i>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -145,14 +145,7 @@
|
|||||||
data-controller="watchlist-toggle"
|
data-controller="watchlist-toggle"
|
||||||
data-watchlist-toggle-key-value="{item.key}"
|
data-watchlist-toggle-key-value="{item.key}"
|
||||||
data-action="watchlist-toggle#toggle">
|
data-action="watchlist-toggle#toggle">
|
||||||
<span data-microtip-position="top"
|
<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>
|
||||||
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>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</f:for>
|
</f:for>
|
||||||
|
|||||||
@@ -50,7 +50,7 @@
|
|||||||
Termin
|
Termin
|
||||||
</th>
|
</th>
|
||||||
<th class="p-1 text-left">
|
<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">
|
<svg class="w-4 h-4">
|
||||||
<use href="#icon-bed"></use>
|
<use href="#icon-bed"></use>
|
||||||
</svg>
|
</svg>
|
||||||
@@ -116,7 +116,7 @@
|
|||||||
<td class="px-2 py-1">
|
<td class="px-2 py-1">
|
||||||
<div class="hidden md:flex items-center space-x-2">
|
<div class="hidden md:flex items-center space-x-2">
|
||||||
<f:if condition="{row.busIncluded}">
|
<f:if condition="{row.busIncluded}">
|
||||||
<span data-microtip-position="top"
|
<span data-cooltipz-dir="top"
|
||||||
aria-label="Busfahrt"
|
aria-label="Busfahrt"
|
||||||
role="tooltip"
|
role="tooltip"
|
||||||
data-pricetable-target="busIcon"
|
data-pricetable-target="busIcon"
|
||||||
@@ -128,7 +128,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{row.skipassIncluded}">
|
<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')}"
|
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
|
||||||
role="tooltip">
|
role="tooltip">
|
||||||
<svg class="w-4 h-4">
|
<svg class="w-4 h-4">
|
||||||
@@ -140,7 +140,7 @@
|
|||||||
data-action="pricetable#openModal"
|
data-action="pricetable#openModal"
|
||||||
data-type="services"
|
data-type="services"
|
||||||
data-uid="{row.dateUid}"
|
data-uid="{row.dateUid}"
|
||||||
data-microtip-position="top"
|
data-cooltipz-dir="top"
|
||||||
aria-label="Alle Inklusivleistungen anzeigen"
|
aria-label="Alle Inklusivleistungen anzeigen"
|
||||||
role="tooltip">
|
role="tooltip">
|
||||||
Leistungen
|
Leistungen
|
||||||
|
|||||||
+2
-2
@@ -25,7 +25,7 @@
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<f:if condition="{row.skipassIncluded}">
|
<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')}"
|
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
|
||||||
role="tooltip">
|
role="tooltip">
|
||||||
<svg class="w-4 h-4">
|
<svg class="w-4 h-4">
|
||||||
@@ -37,7 +37,7 @@
|
|||||||
data-action="daytrip#openModal"
|
data-action="daytrip#openModal"
|
||||||
data-type="services"
|
data-type="services"
|
||||||
data-uid="{iteration.cycle}"
|
data-uid="{iteration.cycle}"
|
||||||
data-microtip-position="top"
|
data-cooltipz-dir="top"
|
||||||
aria-label="Alle Inklusivleistungen anzeigen"
|
aria-label="Alle Inklusivleistungen anzeigen"
|
||||||
role="tooltip">
|
role="tooltip">
|
||||||
Leistungen
|
Leistungen
|
||||||
|
|||||||
@@ -104,7 +104,7 @@
|
|||||||
<td class="px-2 py-1">
|
<td class="px-2 py-1">
|
||||||
<div class="flex items-center space-x-1">
|
<div class="flex items-center space-x-1">
|
||||||
<f:if condition="{row.busIncluded}">
|
<f:if condition="{row.busIncluded}">
|
||||||
<span data-microtip-position="top"
|
<span data-cooltipz-dir="top"
|
||||||
aria-label="Busfahrt"
|
aria-label="Busfahrt"
|
||||||
role="tooltip"
|
role="tooltip"
|
||||||
data-pricetable-target="busIcon"
|
data-pricetable-target="busIcon"
|
||||||
@@ -116,7 +116,7 @@
|
|||||||
</span>
|
</span>
|
||||||
</f:if>
|
</f:if>
|
||||||
<f:if condition="{row.skipassIncluded}">
|
<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')}"
|
aria-label="{f:if(condition: row.summer, then: 'Bergbahnticket inklusive', else: 'Skipass inklusive')}"
|
||||||
role="tooltip">
|
role="tooltip">
|
||||||
<svg class="w-4 h-4">
|
<svg class="w-4 h-4">
|
||||||
@@ -132,7 +132,7 @@
|
|||||||
data-action="pricetable#openModal"
|
data-action="pricetable#openModal"
|
||||||
data-type="options"
|
data-type="options"
|
||||||
data-uid="{row.roomUid}"
|
data-uid="{row.roomUid}"
|
||||||
data-microtip-position="top"
|
data-cooltipz-dir="top"
|
||||||
aria-label="Alle Zusatzleistungen anzeigen"
|
aria-label="Alle Zusatzleistungen anzeigen"
|
||||||
role="tooltip">
|
role="tooltip">
|
||||||
Optionen
|
Optionen
|
||||||
|
|||||||
@@ -140,7 +140,7 @@
|
|||||||
data-controller="watchlist-toggle"
|
data-controller="watchlist-toggle"
|
||||||
data-watchlist-toggle-key-value="{item.key}"
|
data-watchlist-toggle-key-value="{item.key}"
|
||||||
data-action="watchlist-toggle#toggle">
|
data-action="watchlist-toggle#toggle">
|
||||||
<span data-microtip-position="top"
|
<span data-cooltipz-dir="top"
|
||||||
role="tooltip"
|
role="tooltip"
|
||||||
aria-label="auf die Merkliste setzen"
|
aria-label="auf die Merkliste setzen"
|
||||||
data-watchlist-toggle-target="ariaLabel">
|
data-watchlist-toggle-target="ariaLabel">
|
||||||
|
|||||||
@@ -6,8 +6,8 @@
|
|||||||
|
|
||||||
<f:section name="Main">
|
<f:section name="Main">
|
||||||
<div class="py-8 bg-ep-primary-10">
|
<div class="py-8 bg-ep-primary-10">
|
||||||
<ep:container data="{data}">
|
<f:render partial="Header/Standalone" arguments="{_all}"/>
|
||||||
<f:render partial="Header/Standalone" arguments="{_all}"/>
|
<div class="container">
|
||||||
<f:render section="Teasers" arguments="{_all}"/>
|
<f:render section="Teasers" arguments="{_all}"/>
|
||||||
<f:if condition="{settings.showMoreLink}">
|
<f:if condition="{settings.showMoreLink}">
|
||||||
<div class="text-right mt-4">
|
<div class="text-right mt-4">
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
</f:link.action>
|
</f:link.action>
|
||||||
</div>
|
</div>
|
||||||
</f:if>
|
</f:if>
|
||||||
</ep:container>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
</f:for>
|
</f:for>
|
||||||
</f:then>
|
</f:then>
|
||||||
<f:else>
|
<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:for each="{teasers}" as="teaser">
|
||||||
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
|
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser, dateFrom: dateFrom, dateTo: dateTo}"/>
|
||||||
</f:for>
|
</f:for>
|
||||||
|
|||||||
@@ -6,48 +6,44 @@
|
|||||||
<div data-controller="searchbar"
|
<div data-controller="searchbar"
|
||||||
data-action="datepicker:range-select->searchbar#setDateRange"
|
data-action="datepicker:range-select->searchbar#setDateRange"
|
||||||
data-searchbar-uri-value="{ep:uri.ajax(controller: 'Searchbar', action: 'index', pageUid: settings.defaultAjaxUid, format: 'html')}">
|
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')}"
|
<f:form action="processSearch" controller="Search" method="post" name="searchParams"
|
||||||
data-controller="sticky"
|
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
|
||||||
data-sticky-offset-value="650"
|
pageUid="{settings.defaultSearchPageUid}" data="{'searchbar-target': 'form'}">
|
||||||
data-sticky-disabled-value="{fixed -> f:format.json()}"
|
<f:form.hidden property="dateFrom" data="{'searchbar-target': 'dateFrom'}"/>
|
||||||
data-searchbar-target="container">
|
<f:form.hidden property="dateTo" data="{'searchbar-target': 'dateTo'}"/>
|
||||||
<f:form action="processSearch" controller="Search" method="post" name="searchParams"
|
<f:form.hidden property="pax" data="{'searchbar-target': 'pax'}"/>
|
||||||
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
|
<f:form.hidden property="destinationUid" data="{'searchbar-target': 'destinationUid'}"/>
|
||||||
pageUid="{settings.defaultSearchPageUid}" data="{'searchbar-target': 'form'}">
|
<f:form.hidden property="destinationType" data="{'searchbar-target': 'destinationType'}"/>
|
||||||
<f:form.hidden property="dateFrom" data="{'searchbar-target': 'dateFrom'}"/>
|
<f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
|
||||||
<f:form.hidden property="dateTo" data="{'searchbar-target': 'dateTo'}"/>
|
<div class="searchbar {f:if(condition: fixed, then: ' sticky')}"
|
||||||
<f:form.hidden property="pax" data="{'searchbar-target': 'pax'}"/>
|
data-controller="sticky"
|
||||||
<f:form.hidden property="destinationUid" data="{'searchbar-target': 'destinationUid'}"/>
|
data-sticky-offset-value="650"
|
||||||
<f:form.hidden property="destinationType" data="{'searchbar-target': 'destinationType'}"/>
|
data-sticky-disabled-value="{fixed -> f:format.json()}"
|
||||||
<f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
|
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="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">
|
<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"
|
<div class="flex-1"
|
||||||
data-controller="collapse datepicker"
|
data-controller="collapse datepicker"
|
||||||
<f:if condition="{searchParams.dateFrom} && {searchParams.dateTo}">
|
data-datepicker-date-from-value="{searchParams.dateFrom}"
|
||||||
data-datepicker-date-from-value="{searchParams.dateFrom}"
|
data-datepicker-date-to-value="{searchParams.dateTo}"
|
||||||
data-datepicker-date-to-value="{searchParams.dateTo}"
|
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
|
||||||
</f:if>
|
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||||
data-datepicker-min-date-value="{f:format.date(date: 'now', format: 'Y-m-d')}"
|
data-collapse-collapsed-value="true">
|
||||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
|
||||||
data-collapse-collapsed-value="true">
|
|
||||||
<div class="relative border-b border-r border-white mr-8">
|
<div class="relative border-b border-r border-white mr-8">
|
||||||
<input type="text"
|
<input type="text"
|
||||||
data-action="click->collapse#toggle"
|
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"
|
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"
|
placeholder="Zeitraum"
|
||||||
<f:if condition="{searchParams.dateFrom} && {searchParams.dateTo}">
|
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
|
||||||
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
|
data-searchbar-target="dateRangeLabel"/>
|
||||||
</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"
|
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
|
||||||
data-action="click->collapse#toggle">
|
data-action="click->collapse#toggle">
|
||||||
<use href="#icon-calendar"></use>
|
<use href="#icon-calendar"></use>
|
||||||
</svg>
|
</svg>
|
||||||
<div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
|
<div
|
||||||
data-collapse-target="container">
|
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="flex justify-between divide-x divide-gray-200">
|
||||||
<div class="pr-2">
|
<div class="pr-2">
|
||||||
<input type="hidden"
|
<input type="hidden"
|
||||||
@@ -58,11 +54,11 @@
|
|||||||
<div class="flex flex-col space-y-4">
|
<div class="flex flex-col space-y-4">
|
||||||
<f:for each="{settings.datePickerPresets}" as="preset">
|
<f:for each="{settings.datePickerPresets}" as="preset">
|
||||||
<button class="button button--small button--light w-full"
|
<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">
|
data-action="datepicker#selectPreset">
|
||||||
<span>
|
<span>
|
||||||
{preset.label}
|
{preset.label}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</f:for>
|
</f:for>
|
||||||
</div>
|
</div>
|
||||||
@@ -82,9 +78,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /Date range -->
|
|
||||||
|
|
||||||
<!-- Pax -->
|
|
||||||
<div class="w-24"
|
<div class="w-24"
|
||||||
data-controller="collapse"
|
data-controller="collapse"
|
||||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||||
@@ -99,8 +93,9 @@
|
|||||||
data-action="click->collapse#toggle">
|
data-action="click->collapse#toggle">
|
||||||
<use href="#icon-user-group"></use>
|
<use href="#icon-user-group"></use>
|
||||||
</svg>
|
</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
|
||||||
data-collapse-target="container">
|
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">
|
<ul class="m-0 p-0">
|
||||||
<f:for each="{filterOptions.pax}" as="option">
|
<f:for each="{filterOptions.pax}" as="option">
|
||||||
<li>
|
<li>
|
||||||
@@ -119,9 +114,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /Pax -->
|
|
||||||
|
|
||||||
<!-- Destination -->
|
|
||||||
<div class="flex-1"
|
<div class="flex-1"
|
||||||
data-controller="collapse"
|
data-controller="collapse"
|
||||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||||
@@ -132,12 +125,14 @@
|
|||||||
data-searchbar-target="destinationLabel"
|
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"
|
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"/>
|
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
|
||||||
data-action="click->collapse#toggle">
|
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>
|
<use href="#icon-airplane"></use>
|
||||||
</svg>
|
</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
|
||||||
data-collapse-target="container">
|
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">
|
<div class="grid grid-cols-5 gap-4">
|
||||||
<f:for each="{filterOptions.destinations}" as="destination">
|
<f:for each="{filterOptions.destinations}" as="destination">
|
||||||
<div class="col-span-3">
|
<div class="col-span-3">
|
||||||
@@ -147,11 +142,12 @@
|
|||||||
data-option-type="country"
|
data-option-type="country"
|
||||||
data-option-label="{destination.country.label}">
|
data-option-label="{destination.country.label}">
|
||||||
<svg class="block w-8 h-6">
|
<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>
|
</svg>
|
||||||
<span>
|
<span>
|
||||||
{destination.country.label}
|
{destination.country.label}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-2">
|
<div class="col-span-2">
|
||||||
@@ -190,9 +186,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /Destination -->
|
|
||||||
|
|
||||||
<!-- Price range -->
|
|
||||||
<div class="w-32"
|
<div class="w-32"
|
||||||
data-controller="collapse"
|
data-controller="collapse"
|
||||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||||
@@ -207,8 +201,9 @@
|
|||||||
data-action="click->collapse#toggle">
|
data-action="click->collapse#toggle">
|
||||||
<use href="#icon-euro"></use>
|
<use href="#icon-euro"></use>
|
||||||
</svg>
|
</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
|
||||||
data-collapse-target="container">
|
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">
|
<ul class="m-0 p-0">
|
||||||
<li>
|
<li>
|
||||||
<button data-action="searchbar#setPriceRange"
|
<button data-action="searchbar#setPriceRange"
|
||||||
@@ -230,14 +225,14 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- /Price range -->
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<button type="submit" class="hidden sticky:block sticky:ml-4">
|
||||||
|
<svg class="w-8 h-8 text-white">
|
||||||
|
<use href="#icon-chevron-right"></use>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit" class="hidden sticky:block sticky:ml-4">
|
|
||||||
<svg class="w-8 h-8 text-white">
|
|
||||||
<use href="#icon-chevron-right"></use>
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
<div class="flex justify-end mt-4 sticky:hidden">
|
<div class="flex justify-end mt-4 sticky:hidden">
|
||||||
<button type="submit" class="w-1/3 text-white uppercase py-2">
|
<button type="submit" class="w-1/3 text-white uppercase py-2">
|
||||||
Detailsuche
|
Detailsuche
|
||||||
@@ -246,8 +241,8 @@
|
|||||||
Alle anzeigen
|
Alle anzeigen
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</f:form>
|
</div>
|
||||||
</div>
|
</f:form>
|
||||||
</div>
|
</div>
|
||||||
</f:section>
|
</f:section>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user