WIP Deebootstrapify

This commit is contained in:
Björn Fromme
2021-08-02 18:42:13 +02:00
parent 141e53b745
commit 44f91eda01
39 changed files with 762 additions and 651 deletions
+44 -35
View File
@@ -10,6 +10,7 @@
"license": "proprietary",
"dependencies": {
"@splidejs/splide": "^2.4.21",
"@tailwindcss/aspect-ratio": "^0.1.4",
"alpinejs": "^3.2.2",
"axios": "^0.21.1",
"axios-auth-refresh": "^1.0.7",
@@ -51,7 +52,7 @@
"sass-loader": "^9.0.3",
"sass-mq": "^3.3.2",
"smoothscroll-polyfill": "^0.4.4",
"tailwindcss": "^1.8.10",
"tailwindcss": "^1.9.6",
"tinycolor2": "^1.4.1",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14"
@@ -1942,6 +1943,11 @@
"node": ">=10"
}
},
"node_modules/@tailwindcss/aspect-ratio": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.1.4.tgz",
"integrity": "sha512-+qgdwfPTwnlp7DOd2fmYGuJjUMFaXPt1n3Y4jbYIojX6npsaQDG+f+lt1ANXVXyQg/0aUW4vcm169tK+SXnIHw=="
},
"node_modules/@tailwindcss/custom-forms": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
@@ -3189,9 +3195,9 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001239",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz",
"integrity": "sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ==",
"version": "1.0.30001248",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001248.tgz",
"integrity": "sha512-NwlQbJkxUFJ8nMErnGtT0QTM2TJ33xgz4KXJSMIrjXIbDVdaYueGyjOrLKRtJC+rTiWfi6j5cnZN1NBiSBJGNw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
@@ -3392,12 +3398,12 @@
}
},
"node_modules/color": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
"integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
"integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
"dependencies": {
"color-convert": "^1.9.1",
"color-string": "^1.5.4"
"color-convert": "^1.9.3",
"color-string": "^1.6.0"
}
},
"node_modules/color-convert": {
@@ -3414,9 +3420,9 @@
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"node_modules/color-string": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz",
"integrity": "sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==",
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
"integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
"dependencies": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
@@ -4634,17 +4640,16 @@
"dev": true
},
"node_modules/fast-glob": {
"version": "3.2.5",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
"integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
"integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
"dev": true,
"dependencies": {
"@nodelib/fs.stat": "^2.0.2",
"@nodelib/fs.walk": "^1.2.3",
"glob-parent": "^5.1.0",
"glob-parent": "^5.1.2",
"merge2": "^1.3.0",
"micromatch": "^4.0.2",
"picomatch": "^2.2.1"
"micromatch": "^4.0.4"
},
"engines": {
"node": ">=8"
@@ -12463,6 +12468,11 @@
}
}
},
"@tailwindcss/aspect-ratio": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/@tailwindcss/aspect-ratio/-/aspect-ratio-0.1.4.tgz",
"integrity": "sha512-+qgdwfPTwnlp7DOd2fmYGuJjUMFaXPt1n3Y4jbYIojX6npsaQDG+f+lt1ANXVXyQg/0aUW4vcm169tK+SXnIHw=="
},
"@tailwindcss/custom-forms": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
@@ -13510,9 +13520,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001239",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz",
"integrity": "sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ=="
"version": "1.0.30001248",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001248.tgz",
"integrity": "sha512-NwlQbJkxUFJ8nMErnGtT0QTM2TJ33xgz4KXJSMIrjXIbDVdaYueGyjOrLKRtJC+rTiWfi6j5cnZN1NBiSBJGNw=="
},
"caseless": {
"version": "0.12.0",
@@ -13660,12 +13670,12 @@
"dev": true
},
"color": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz",
"integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==",
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
"integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
"requires": {
"color-convert": "^1.9.1",
"color-string": "^1.5.4"
"color-convert": "^1.9.3",
"color-string": "^1.6.0"
}
},
"color-convert": {
@@ -13682,9 +13692,9 @@
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
},
"color-string": {
"version": "1.5.5",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz",
"integrity": "sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==",
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
"integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
"requires": {
"color-name": "^1.0.0",
"simple-swizzle": "^0.2.2"
@@ -14648,17 +14658,16 @@
"dev": true
},
"fast-glob": {
"version": "3.2.5",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
"integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
"version": "3.2.7",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
"integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
"dev": true,
"requires": {
"@nodelib/fs.stat": "^2.0.2",
"@nodelib/fs.walk": "^1.2.3",
"glob-parent": "^5.1.0",
"glob-parent": "^5.1.2",
"merge2": "^1.3.0",
"micromatch": "^4.0.2",
"picomatch": "^2.2.1"
"micromatch": "^4.0.4"
}
},
"fast-json-stable-stringify": {
+2 -1
View File
@@ -10,6 +10,7 @@
},
"dependencies": {
"@splidejs/splide": "^2.4.21",
"@tailwindcss/aspect-ratio": "^0.1.4",
"alpinejs": "^3.2.2",
"axios": "^0.21.1",
"axios-auth-refresh": "^1.0.7",
@@ -51,7 +52,7 @@
"sass-loader": "^9.0.3",
"sass-mq": "^3.3.2",
"smoothscroll-polyfill": "^0.4.4",
"tailwindcss": "^1.8.10",
"tailwindcss": "^1.9.6",
"tinycolor2": "^1.4.1",
"vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14"
@@ -152,6 +152,16 @@ class AbstractDestination extends \TYPO3\CMS\Extbase\DomainObject\AbstractEntity
$this->season = $season;
}
public function isWinter(): bool
{
return self::SEASON_WINTER === $this->season;
}
public function isSummer(): bool
{
return self::SEASON_SUMMER === $this->season;
}
/**
* @return float $latitude
*/
@@ -0,0 +1,59 @@
.calendar {
@apply relative;
&--single {
@apply mb-16;
}
}
.calendar__month {
&--single {
@apply text-lg;
}
}
.calendar__select {
@apply mb-8 outline-none focus:outline-none;
}
.calendar__loading {
@apply absolute top-0 left-0 inset-0 w-full h-full z-10 bg-overlay-white;
img {
@apply absolute top-1/2 left-1/2 -translate-xy-1/2;
}
}
.calendar__days {
table {
@apply mb-0;
}
}
.label-success-danger {
background: linear-gradient(to bottom right, theme('colors.green-500') 50%, theme('colors.red-500') 50%);
}
.label-success-warning {
background: linear-gradient(to bottom right, theme('colors.green-500') 50%, theme('colors.red-500') 50%);
}
.label-danger-success {
background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.green-500') 50%);
}
.label-warning-success {
background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.green-500') 50%);
}
.label-danger-warning {
background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.red-500') 50%);
}
.label-warning-danger {
background: linear-gradient(to bottom right, theme('colors.red-500') 50%, theme('colors.red-500') 50%);
}
@@ -30,17 +30,17 @@
@import "remix/slider";
@import "remix/header";
//@import "remix/herounit";
@import "remix/calendar";
//@import "remix/calendar";
@import "remix/partnerlogos";
@import "remix/osm-map";
@import "remix/video";
@import "remix/newsletterform";
//@import "remix/osm-map";
//@import "remix/video";
//@import "remix/newsletterform";
@import "remix/layout";
@import "remix/teaserbox";
@import "remix/searchresult";
@import "remix/tables";
//@import "remix/tables";
@import "remix/product";
@import "remix/socialmedia";
//@import "remix/socialmedia";
@import "remix/datepicker";
@import "remix/sidebar";
@import "remix/blog";
@@ -56,7 +56,7 @@
@import "base";
@import "btn";
@import "input";
@import "breadcrumb";
//@import "breadcrumb";
@import "modal";
//components
@@ -77,9 +77,14 @@
}
@import "~microtip/microtip";
.leaflet-top, .leaflet-bottom {
z-index: 490 !important;
}
}
@layer components {
@import "components/calendar";
@import "components/searchbar";
@import "components/herounit";
}
@@ -97,7 +102,8 @@
&:after {
content: "";
@apply absolute top-100 left-0 mt-2 mb-2 border-b-4 border-ep-primary-dark w-48;
@apply absolute top-100 left-0 mt-2 mb-2 border-b-4 w-48;
@apply ep:border-ep-primary-dark sbw:border-sbw-primary-dark;
}
}
.-translate-xy-1\/2 {
@@ -3,6 +3,10 @@
<symbol id="icon-menu" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></symbol>
<symbol id="icon-chevron-down" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></symbol>
<symbol id="icon-chevron-up" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path></symbol>
<symbol id="icon-arrow-circle-right" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
<symbol id="icon-minus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
<symbol id="icon-plus-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
<symbol id="icon-info-circle" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></symbol>
<symbol id="icon-home" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></symbol>
<symbol id="icon-user" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></symbol>
<symbol id="icon-user-group" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></symbol>
@@ -12,6 +16,9 @@
<symbol id="icon-close" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></symbol>
<symbol id="icon-heart" 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></symbol>
<symbol id="icon-calendar" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></symbol>
<symbol id="icon-tag" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path></symbol>
<symbol id="icon-bed" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M176 256c44.11 0 80-35.89 80-80s-35.89-80-80-80-80 35.89-80 80 35.89 80 80 80zm352-128H304c-8.84 0-16 7.16-16 16v144H64V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v352c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16v-48h512v48c0 8.84 7.16 16 16 16h32c8.84 0 16-7.16 16-16V240c0-61.86-50.14-112-112-112z"/></symbol>
<symbol id="icon-bus" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M488 128h-8V80c0-44.8-99.2-80-224-80S32 35.2 32 80v48h-8c-13.25 0-24 10.74-24 24v80c0 13.25 10.75 24 24 24h8v160c0 17.67 14.33 32 32 32v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h192v32c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32v-32h6.4c16 0 25.6-12.8 25.6-25.6V256h8c13.25 0 24-10.75 24-24v-80c0-13.26-10.75-24-24-24zM112 400c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32zm16-112c-17.67 0-32-14.33-32-32V128c0-17.67 14.33-32 32-32h256c17.67 0 32 14.33 32 32v128c0 17.67-14.33 32-32 32H128zm272 112c-17.67 0-32-14.33-32-32s14.33-32 32-32 32 14.33 32 32-14.33 32-32 32z"/></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>

Before

Width:  |  Height:  |  Size: 4.9 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

@@ -55,7 +55,9 @@
<f:render section="SecondLevel" arguments="{topitem: topitem}"/>
</f:then>
<f:else>
<a href="{topitem.link}"{f:if(condition: '{topitem.doktype} == 3', then: ' target="_blank"')} title="{topitem.title}">
<a href="{topitem.link}"{f:if(condition: '{topitem.doktype} == 3', then: ' target="_blank"')}
class="block text-gray-800 uppercase lg:text-lg"
title="{topitem.title}">
{topitem.title}
</a>
</f:else>
@@ -9,69 +9,79 @@
<f:render partial="NotBookable" arguments="{_all}"/>
</f:then>
<f:else>
<div class="table-responsive">
<table class="table table-striped pricetable">
<div class="w-full max-w-full overflow-x-scroll">
<table class="min-w-full border border-gray-200 border-collapse mb-8">
<thead>
<tr>
<th>Zimmertyp</th>
<th>Preis/Pers.</th>
<th>inkl.</th>
<th>
Zimmertyp
</th>
<th>
Preis/Pers.
</th>
<th>
inkl.
</th>
<th></th>
<th class="hidden-xs hidden-md"></th>
<th class="hidden lg:table-cell"></th>
</tr>
<f:for each="{pricetable}" as="row" iteration="iteration">
<tr>
<td style="white-space: normal">
{row.roomName}
<div class="hidden-lg">
</thead>
<tbody>
<f:for each="{pricetable}" as="row" iteration="iteration">
<tr class="even:bg-gray-200">
<td class="px-2 py-1 border border-gray-200 whitespace-no-wrap">
{row.roomName}
<div class="lg:hidden">
<f:if condition="{row.roomAvailable}">
<f:then>
<a href="{row.bookingUrl}">Jetzt buchen <i class="fa fa-angle-right"></i></a>
</f:then>
<f:else>
<span>ausgebucht</span>
</f:else>
</f:if>
</div>
</td>
<td class="px-2 py-1 border border-gray-200">
<f:if condition="{row.roomAvailable}">
<f:then>
<a href="{row.bookingUrl}">Jetzt buchen <i class="fa fa-angle-right"></i></a>
{row.roomPrice} €
</f:then>
<f:else>
<span>ausgebucht</span>
<s>{row.roomPrice} €</s>
</f:else>
</f:if>
</div>
</td>
<td>
<f:if condition="{row.roomAvailable}">
<f:then>
{row.roomPrice} €
</f:then>
<f:else>
<s>{row.roomPrice} €</s>
</f:else>
</f:if>
</td>
<td>
<f:if condition="{row.dateBusIncluded}">
<span data-microtip-position="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">
<i class="fa fa-tag"></i>
</span>
</f:if>
</td>
<td>
<f:if condition="{row.roomOptionalServices}">
<f:render section="Modal" arguments="{index: iteration.cycle, services: row.roomOptionalServices}"/>
</f:if>
</td>
<td class="hidden-xs hidden-md">
<f:if condition="{row.roomAvailable}">
<f:then>
<a class="button button--small button--booking" href="{row.bookingUrl}" target="_blank">Buchen</a>
</f:then>
<f:else>
<span class="label label-default">ausgebucht</span>
</f:else>
</f:if>
</td>
</tr>
</f:for>
</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">
<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">
<i class="fa fa-tag"></i>
</span>
</f:if>
</td>
<td class="px-2 py-1 border border-gray-200">
<f:if condition="{row.roomOptionalServices}">
<f:render section="Modal" arguments="{index: iteration.cycle, services: row.roomOptionalServices}"/>
</f:if>
</td>
<td class="hidden lg:table-cell px-2 py-1 border border-gray-200">
<f:if condition="{row.roomAvailable}">
<f:then>
<a class="button button--small button--booking" href="{row.bookingUrl}" target="_blank">Buchen</a>
</f:then>
<f:else>
<span class="label label-default">ausgebucht</span>
</f:else>
</f:if>
</td>
</tr>
</f:for>
</tbody>
</table>
</div>
</f:else>
@@ -77,5 +77,4 @@
<a href="{referringUrl}" class="button button--small">{backlinkLabel}</a>
</div>
</f:if>
{v:render.template(file: 'EXT:ep_theme/Resources/Private/Partials/rumb.html')}
</div>
@@ -6,8 +6,8 @@
<f:layout name="Default"/>
<f:section name="Main">
<div class="row" x-ref="container">
<div class="col-md-3 relative" x-data="collapse(false, 991)">
<div class="grid grid-cols-3 gap-8" x-ref="container">
<div class="col-span-3 lg:col-span-1 relative" x-data="collapse(false, 991)">
<p class="lg:hidden">
<button class="button button--full button--small" role="button" x-bind="trigger">
<i class="fa fa-toggle-on"></i> Filter ein-/ausblenden
@@ -28,7 +28,7 @@
<f:render section="FilterPanel" arguments="{_all}"/>
</div>
</div>
<div class="col-md-9 relative">
<div class="col-span-3 lg:col-span-2 relative">
<f:render section="SearchResult" arguments="{_all}"/>
</div>
</div>
@@ -17,29 +17,55 @@
</f:section>
<f:section name="Table">
<div class="table-responsive">
<table class="table table-bordered table-hover pricetable">
<div class="w-full max-w-full overflow-x-scroll">
<table class="min-w-full border border-gray-200 border-collapse mb-8">
<f:for each="{categories}" as="category" key="categoryKey">
<f:if condition="{v:variable.get(name: 'pricetable.{categoryKey}', useRawKeys: 1) -> f:count()} > 0">
<tr class="pricetable__section">
<td><strong>Apartments {category}</strong></td>
<tr class="sbw:bg-sbw-primary snz:bg-snz-primary uch:bg-uch-primary text-white">
<td class="px-2 py-1 font-bold border border-gray-200">
Apartments {category}
</td>
<f:for each="{roomTypesLabels}" as="type">
<td>{type}</td>
<td class="px-2 py-1 border border-gray-200">
{type}
</td>
</f:for>
</tr>
<f:for each="{v:variable.get(name: 'pricetable.{categoryKey}', useRawKeys: 1)}" as="row">
<f:for each="{pricetable.{categoryKey}}" as="row">
<tr>
<td>{row.hotelShortName -> v:or(alternative: row.hotelTitle) -> v:or(alternative: row.hotelName)}</td>
<td class="px-2 py-1 border border-gray-200">
<f:if condition="{row.hotelShortName}">
<f:then>
{row.hotelShortName}
</f:then>
<f:else>
<f:if condition="{row.hotelTitle}">
<f:then>
{row.hotelTitle}
</f:then>
<f:else>
{row.hotelName}
</f:else>
</f:if>
</f:else>
</f:if>
</td>
<f:for each="{roomTypesPax}" as="type">
<td>
<f:if condition="{v:variable.get(name: 'row.rooms.{type}.available', useRawKeys: 1)}">
<td class="px-2 py-1 border border-gray-200">
<f:if condition="{row.rooms.{type}.available}">
<f:then>
<a class="booking-link" href="{row.bookingUrl}"
title="Jetzt buchen" target="_blank">{v:variable.get(name: 'row.rooms.{type}.price', useRawKeys: 1)}</a>
<a class="sbw:text-sbw-primary snz:text-snz-primary uch:text-uch-primary"
href="{row.bookingUrl}"
title="Jetzt buchen"
target="_blank">
{row.rooms.{type}.price}
</a>
</f:then>
<f:else>
<f:if condition="{v:variable.get(name: 'row.rooms.{type}.available', useRawKeys: 1)} == false">
<s>{v:variable.get(name: 'row.rooms.{type}.price', useRawKeys: 1)}</s>
<f:if condition="{row.rooms.{type}.available}">
<f:else>
<span class="line-through text-gray-500">{row.rooms.{type}.price}</span>
</f:else>
</f:if>
</f:else>
</f:if>
@@ -1,12 +1,11 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:layout name="Default"/>
<f:section name="Main">
<f:render partial="Pricetable" section="Main" arguments="{pricetable: pricetable}"/>
<f:render partial="Pricetable" section="Main" arguments="{_all}"/>
</f:section>
</html>
@@ -10,27 +10,31 @@
<f:render partial="SubpageHeader" arguments="{images: city.headerImages, topline: city.headerSubtitle, headline: city.headerTitle, settings: settings}"/>
<div class="container">
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<div class="row hidden-lg">
<div class="col-md-12 column">
<a href="#teasers" @click.prevent="scrollTo('#teasers')" class="button button--full">Direkt zu den Angeboten</a>
</div>
<div class="mb-8 lg:hidden">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten
</a>
</div>
</f:if>
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: city.name, header: city.headline}"/>
</div>
</div>
<div class="row">
<div class="col-md-8">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: city.name, header: city.headline}"/>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
<f:render partial="City/Details" arguments="{city: city}"/>
</div>
<div class="col-md-4">
<div class="col-span-3 lg:col-span-1">
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<p class="hidden-xs hidden-md"><a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p>
<p class="hidden lg:block">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten
</a>
</p>
</f:if>
<f:render partial="Facts" arguments="{facts: city.facts}"/>
<f:if condition="{city.region.season} == 'w'">
<f:if condition="{city.region.winter}">
<f:render partial="Snowreport" arguments="{snowreport: city.region.snowreport}"/>
<f:render partial="Regioninfo" arguments="{region: city.region}"/>
</f:if>
@@ -10,12 +10,12 @@
<f:render partial="SubpageHeader" arguments="{images: concept.headerImages, topline: concept.headerSubtitle, headline: concept.headerTitle, settings: settings}"/>
<div class="container">
<f:if condition="{teasers}">
<div class="row hidden-lg">
<div class="col-md-12 column">
<a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
Direkt zu den Angeboten
</a>
</div>
<div class="mb-8 lg:hidden">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten
</a>
</div>
</f:if>
<div class="row">
@@ -23,18 +23,19 @@
<f:render partial="Header/Header" arguments="{layout: 8, subheader: concept.name, header: concept.headline}"/>
</div>
</div>
<div class="row">
<div class="col-md-8" data-rte-content>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2" data-rte-content>
{concept.description -> f:format.html()}
<f:if condition="{teasers}">
<a id="teasers" class="anchor"></a>
<div class="slider slider--teasers in-column">
<div class="row slider__items">
<f:for each="{teasers}" as="teaser">
<div class="col-md-4">
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser}"/>
</div>
</f:for>
<div class="splide mb-4" data-slider="teasersEmbedded">
<div class="splide__track">
<ul class="splide__list">
<f:for each="{teasers}" as="teaser">
<li class="splide__slide">
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser}"/>
</li>
</f:for>
</ul>
</div>
</div>
<f:if condition="{settings.showMoreLink}">
@@ -50,20 +51,22 @@
</f:if>
<f:if condition="{concept.descriptionExtended}">{concept.descriptionExtended -> f:format.html()}</f:if>
</div>
<div class="col-md-4">
<div class="col-span-3 lg:col-span-1">
<f:if condition="{teasers}">
<p class="hidden-xs hidden-md">
<a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
<p class="hidden lg:block">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten
</a>
</p>
</f:if>
<v:menu pageUid="{settings.conceptsPageUid}" levels="1">
<ul class="list-unstyled">
<ul class="list-none p-0 m-0 space-y-2">
<f:for each="{menu}" as="page">
<li>
<f:link.typolink parameter="{page.uid}"
class="btn btn-warning ep-sidebar{f:if(condition: '{page.active}', then: ' active')}">
class="btn btn-warning w-full{f:if(condition: '{page.active}', then: ' active')}">
{page.title}
</f:link.typolink>
</li>
@@ -10,28 +10,21 @@
<f:render partial="SubpageHeader" arguments="{images: country.headerImages, topline: country.headerSubtitle, headline: country.headerTitle, settings: settings}"/>
<div class="container">
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<div class="row hidden-lg">
<div class="col-md-12 column">
<a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
Direkt zu den Angeboten
</a>
</div>
<div class="mb-8 lg:hidden">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten
</a>
</div>
</f:if>
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: country.name, header: country.headline}"/>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: country.name, header: country.headline}"/>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2" id="teasers">
{country.description -> f:format.html()}
<f:if condition="{teasers}">
<a id="teasers" class="anchor"></a>
<div data-slider="teasersEmbedded"
data-splide='{"arrows": true}'
class="splide slider slider--teasers in-column">
<div class="splide__track slider__items">
<div class="splide mb-4" data-slider="teasersEmbedded">
<div class="splide__track">
<ul class="splide__list">
<f:for each="{teasers}" as="teaser">
<li class="splide__slide">
@@ -40,10 +33,6 @@
</f:for>
</ul>
</div>
<div class="splide__arrows slider__pagination">
<button class="splide__arrow splide__arrow--prev slider-pagination__arrow slider-pagination__arrow--prev"><i class="fa fa-2x fa-chevron-left"></i></button>
<button class="splide__arrow splide__arrow--next slider-pagination__arrow slider-pagination__arrow--next"><i class="fa fa-2x fa-chevron-right"></i></button>
</div>
</div>
<f:if condition="{settings.showMoreLink}">
<p class="text-right">
@@ -61,9 +50,15 @@
<f:render partial="ContentSlider" arguments="{images: country.images, id: 'country-{country.uid}'}"/>
</f:if>
</div>
<div class="col-sm-4">
<div class="col-span-3 lg:col-span-1">
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<p class="hidden-xs hidden-md"><a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p>
<p class="hidden lg:block">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten
</a>
</p>
</f:if>
<f:render partial="Facts" arguments="{facts: country.facts}"/>
</div>
@@ -7,18 +7,14 @@
<f:section name="Main">
<div class="container">
<div class="row calendar calandar--single"
<div class="calendar calandar--single"
x-data='calendar("<f:format.raw>{ep:uri.ajax(action: 'range', controller: 'AjaxCalendar', extensionName: 'epproducts', pageUid: settings.defaultAjaxUid, arguments: '{hotel: data.tx_eptheme_context_hotel}', format: 'html')}</f:format.raw>")'>
<div class="col-xs-12">
<h2>Belegungskalender {hotel.0.data.name}</h2>
</div>
<div class="col-xs-12">
<select class="form-control calendar__select" x-model="selectedIndex" x-on:change="load">
<template x-for="(month, index) in selectableMonths">
<option x-bind:value="index" x-text="month.toLocaleDateString('de-DE', {year: 'numeric', month: 'long'})"></option>
</template>
</select>
</div>
<h2>Belegungskalender {hotel.0.data.name}</h2>
<select class="form-control calendar__select" x-model="selectedIndex" x-on:change="load">
<template x-for="(month, index) in selectableMonths">
<option x-bind:value="index" x-text="month.toLocaleDateString('de-DE', {year: 'numeric', month: 'long'})"></option>
</template>
</select>
<div class="calendar__inner" x-cloak x-ref="calendarWrapper"></div>
<div class="absolute top-0 left-0 inset-0 w-full h-full bg-overlay-white" x-show="loading">
<f:image class="absolute top-1/2 left-1/2 -translate-xy-1/2" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
@@ -7,19 +7,18 @@
<f:layout name="Default"/>
<f:section name="Main">
<div class="ep-sidebar ep-quote">
<div class="row">
<div class="col-xs-4">
<div class="bg-gray-200 p-4 mb-8">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-1">
<f:if condition="{contact.0.image.0}">
<f:then>
<f:image src="{contact.0.image.0.uid}" treatIdAsReference="1" crop="{contact.0.image.0.crop}" width="120" class="img-responsive" alt="{contact.0.data.name}" />
</f:then>
<f:else>
<img src="https://placehold.it/120x160" class="img-responsive" alt="{contact.0.data.name}">
</f:else>
<f:image
image="{contact.0.image.0}"
width="120"
class="block w-full h-auto"
alt="{contact.0.data.name}" />
</f:if>
</div>
<div class="col-xs-8">
<div class="col-span-2">
<strong>{contact.0.data.name}</strong>
<f:if condition="{contact.0.data.tasks}"><br>{contact.0.data.tasks -> f:format.nl2br()}</f:if>
<f:if condition="{contact.0.data.phone}"><br><i class="fa fa-phone"></i> {contact.0.data.phone}</f:if>
@@ -17,7 +17,7 @@
3: { id: "PA0211", label: "RWTH Aachen" },
4: { id: "PA0216", label: "Hochschulsport Uni Tübingen" },
5: { id: "PA0210", label: "Hamburg" },
6: { id: "PA0214", "label": "Unisport Köln" },
6: { id: "PA0214", label: "Unisport Köln" },
7: { id: "PA0213", label: "Uni Konstanz" },
8: { id: "PA0218", label: "Hochschulsport Darmstadt" },
9: { id: "PA0020", label: "Sonstige" }
@@ -13,13 +13,11 @@
<f:variable name="latitude" value="{region.0.data.latitude}"/>
<f:variable name="longitude" value="{region.0.data.longitude}"/>
</f:if>
<div class="row">
<div class="osm-map"
x-data="osmMap"
data-lat="{latitude}"
data-lng="{longitude}"
data-zoom="17"></div>
</div>
<div class="osm-map"
x-data="osmMap"
data-lat="{latitude}"
data-lng="{longitude}"
data-zoom="17"></div>
</f:section>
</html>
@@ -7,48 +7,67 @@
<f:layout name="Default" />
<f:section name="Main">
<div>
<div class="max-w-screen-xl mx-auto">
<f:for each="{items}" as="item" iteration="iteration">
<div class="row ep-lineup{f:if(condition: iteration.isEven, then: ' right')}">
<div class="col-md-6">
<img class="scale lazyload" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/>
</div>
<div class="col-md-6 ">
<div>
<span class="headline headline--secondary headline--underlined">{item.data.name -> f:format.raw()}</span>
{item.data.description -> f:format.html()}
<div class="social">
<f:if condition="{item.data.facebook_url}">
<a href="{item.data.facebook_url}" target="_blank" title="{item.data.name} bei Facebook">
<i aria-hidden="true" class="fa fa-facebook"></i>
</a>
</f:if>
<f:if condition="{item.data.twitter_url}">
<a href="{item.data.twitter_url}" target="_blank" title="{item.data.name} bei Twitter">
<i aria-hidden="true" class="fa fa-twitter"></i>
</a>
</f:if>
<f:if condition="{item.data.instagram_url}">
<a href="{item.data.instagram_url}" target="_blank" title="{item.data.name} bei Instagram">
<i aria-hidden="true" class="fa fa-instagram"></i>
</a>
</f:if>
<f:if condition="{item.data.youtube_url}">
<a href="{item.data.youtube_url}" target="_blank" title="{item.data.name} bei YouTube">
<i aria-hidden="true" class="fa fa-youtube-play"></i>
</a>
</f:if>
<f:if condition="{item.data.soundcloud_url}">
<a href="{item.data.soundcloud_url}" target="_blank" title="{item.data.name} bei Soundcloud">
<i aria-hidden="true" class="fa fa-soundcloud"></i>
</a>
</f:if>
</div>
</div>
</div>
<div class="lg:flex odd:flex-row-reverse justify-between items-end mb-16">
<div class="mb-4 lg:mb-0 lg:w-1/2">
<img class="block w-full h-auto lazyload" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/>
</div>
<div class="lg:w-1/2">
<div class="px-4 {f:if(condition: iteration.isEven, then: 'lg:pl-12', else: 'lg:pr-12')}">
<span class="headline headline--secondary headline--underlined">
{item.data.name -> f:format.raw()}
</span>
{item.data.description -> f:format.html()}
<div class="flex items-center space-x-6">
<f:if condition="{item.data.facebook_url}">
<a href="{item.data.facebook_url}" target="_blank" title="{item.data.name} bei Facebook">
<svg class="sbw:text-sbw-primary w-8 h-8">
<use href="#icon-facebook"></use>
</svg>
</a>
</f:if>
<f:if condition="{item.data.twitter_url}">
<a href="{item.data.twitter_url}" target="_blank" title="{item.data.name} bei Twitter">
<svg class="sbw:text-sbw-primary w-8 h-8">
<use href="#icon-twitter"></use>
</svg>
</a>
</f:if>
<f:if condition="{item.data.instagram_url}">
<a href="{item.data.instagram_url}" target="_blank" title="{item.data.name} bei Instagram">
<svg class="sbw:text-sbw-primary w-8 h-8">
<use href="#icon-instagram"></use>
</svg>
</a>
</f:if>
<f:if condition="{item.data.youtube_url}">
<a href="{item.data.youtube_url}" target="_blank" title="{item.data.name} bei YouTube">
<svg class="sbw:text-sbw-primary w-8 h-8">
<use href="#icon-youtube"></use>
</svg>
</a>
</f:if>
<f:if condition="{item.data.soundcloud_url}">
<a href="{item.data.soundcloud_url}" target="_blank" title="{item.data.name} bei Soundcloud">
<svg class="sbw:text-sbw-primary w-8 h-8">
<use href="#icon-soundcloud"></use>
</svg>
</a>
</f:if>
</div>
</div>
</div>
</div>
</f:for>
</div>
<svg class="hidden">
<symbol id="icon-facebook" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></symbol>
<symbol id="icon-instagram" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></symbol>
<symbol id="icon-twitter" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></symbol>
<symbol id="icon-youtube" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></symbol>
<symbol id="icon-soundcloud" fill="currentColor" stroke="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!-- Font Awesome Pro 5.15.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M111.4 256.3l5.8 65-5.8 68.3c-.3 2.5-2.2 4.4-4.4 4.4s-4.2-1.9-4.2-4.4l-5.6-68.3 5.6-65c0-2.2 1.9-4.2 4.2-4.2 2.2 0 4.1 2 4.4 4.2zm21.4-45.6c-2.8 0-4.7 2.2-5 5l-5 105.6 5 68.3c.3 2.8 2.2 5 5 5 2.5 0 4.7-2.2 4.7-5l5.8-68.3-5.8-105.6c0-2.8-2.2-5-4.7-5zm25.5-24.1c-3.1 0-5.3 2.2-5.6 5.3l-4.4 130 4.4 67.8c.3 3.1 2.5 5.3 5.6 5.3 2.8 0 5.3-2.2 5.3-5.3l5.3-67.8-5.3-130c0-3.1-2.5-5.3-5.3-5.3zM7.2 283.2c-1.4 0-2.2 1.1-2.5 2.5L0 321.3l4.7 35c.3 1.4 1.1 2.5 2.5 2.5s2.2-1.1 2.5-2.5l5.6-35-5.6-35.6c-.3-1.4-1.1-2.5-2.5-2.5zm23.6-21.9c-1.4 0-2.5 1.1-2.5 2.5l-6.4 57.5 6.4 56.1c0 1.7 1.1 2.8 2.5 2.8s2.5-1.1 2.8-2.5l7.2-56.4-7.2-57.5c-.3-1.4-1.4-2.5-2.8-2.5zm25.3-11.4c-1.7 0-3.1 1.4-3.3 3.3L47 321.3l5.8 65.8c.3 1.7 1.7 3.1 3.3 3.1 1.7 0 3.1-1.4 3.1-3.1l6.9-65.8-6.9-68.1c0-1.9-1.4-3.3-3.1-3.3zm25.3-2.2c-1.9 0-3.6 1.4-3.6 3.6l-5.8 70 5.8 67.8c0 2.2 1.7 3.6 3.6 3.6s3.6-1.4 3.9-3.6l6.4-67.8-6.4-70c-.3-2.2-2-3.6-3.9-3.6zm241.4-110.9c-1.1-.8-2.8-1.4-4.2-1.4-2.2 0-4.2.8-5.6 1.9-1.9 1.7-3.1 4.2-3.3 6.7v.8l-3.3 176.7 1.7 32.5 1.7 31.7c.3 4.7 4.2 8.6 8.9 8.6s8.6-3.9 8.6-8.6l3.9-64.2-3.9-177.5c-.4-3-2-5.8-4.5-7.2zm-26.7 15.3c-1.4-.8-2.8-1.4-4.4-1.4s-3.1.6-4.4 1.4c-2.2 1.4-3.6 3.9-3.6 6.7l-.3 1.7-2.8 160.8s0 .3 3.1 65.6v.3c0 1.7.6 3.3 1.7 4.7 1.7 1.9 3.9 3.1 6.4 3.1 2.2 0 4.2-1.1 5.6-2.5 1.7-1.4 2.5-3.3 2.5-5.6l.3-6.7 3.1-58.6-3.3-162.8c-.3-2.8-1.7-5.3-3.9-6.7zm-111.4 22.5c-3.1 0-5.8 2.8-5.8 6.1l-4.4 140.6 4.4 67.2c.3 3.3 2.8 5.8 5.8 5.8 3.3 0 5.8-2.5 6.1-5.8l5-67.2-5-140.6c-.2-3.3-2.7-6.1-6.1-6.1zm376.7 62.8c-10.8 0-21.1 2.2-30.6 6.1-6.4-70.8-65.8-126.4-138.3-126.4-17.8 0-35 3.3-50.3 9.4-6.1 2.2-7.8 4.4-7.8 9.2v249.7c0 5 3.9 8.6 8.6 9.2h218.3c43.3 0 78.6-35 78.6-78.3.1-43.6-35.2-78.9-78.5-78.9zm-296.7-60.3c-4.2 0-7.5 3.3-7.8 7.8l-3.3 136.7 3.3 65.6c.3 4.2 3.6 7.5 7.8 7.5 4.2 0 7.5-3.3 7.5-7.5l3.9-65.6-3.9-136.7c-.3-4.5-3.3-7.8-7.5-7.8zm-53.6-7.8c-3.3 0-6.4 3.1-6.4 6.7l-3.9 145.3 3.9 66.9c.3 3.6 3.1 6.4 6.4 6.4 3.6 0 6.4-2.8 6.7-6.4l4.4-66.9-4.4-145.3c-.3-3.6-3.1-6.7-6.7-6.7zm26.7 3.4c-3.9 0-6.9 3.1-6.9 6.9L227 321.3l3.9 66.4c.3 3.9 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9l4.2-66.4-4.2-141.7c0-3.9-3-6.9-6.9-6.9z"/></symbol>
</svg>
</f:section>
</html>
@@ -5,7 +5,7 @@
<f:section name="Main">
<f:spaceless>
<f:if condition="{menu}">
<ul class="list-unstyled">
<ul class="list-none m-0 p-0 space-y-2">
<f:for each="{menu}" as="page">
<f:if condition="{page.content}">
<f:for each="{page.content}" as="element">
@@ -13,7 +13,9 @@
<li>
<a href="{page.link}#c{element.data.uid}"
class="btn btn-warning ep-sidebar"
@click.prevent="scrollTo('#c{element.data.uid}')">{element.data.header}</a>
x-data="scrollTo('c{element.data.uid}')">
{element.data.header}
</a>
</li>
</f:if>
</f:for>
@@ -5,18 +5,18 @@
<f:section name="Main">
<f:if condition="{menu}">
<ul>
<ul class="list-none m-0 p-0 space-y-2">
<f:for each="{menu}" as="page">
<li>
<a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}">
<span>{page.title}</span>
{page.title}
</a>
<f:if condition="{page.content}">
<ul>
<f:for each="{page.content}" as="element">
<li>
<a href="{page.link}#c{element.data.uid}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{element.data.header}">
<span>{element.data.header}</span>
{element.data.header}
</a>
</li>
</f:for>
@@ -5,11 +5,11 @@
<f:section name="Main">
<f:if condition="{menu}">
<ul class="list-unstyled">
<ul class="list-none m-0 p-0 space-y-2 mb-8">
<f:for each="{menu}" as="page">
<li>
<f:link.typolink parameter="{page.data.uid}"
class="btn btn-warning ep-sidebar{f:if(condition: '{page.active}', then: ' active')}">
class="btn btn-warning w-full{f:if(condition: '{page.active}', then: ' active')}">
{page.data.title}
</f:link.typolink>
</li>
@@ -1,13 +1,11 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Default"/>
<f:section name="Main">
<iframe class="newsletterform" scrolling="no" frameborder="none"
<iframe class="border-0 h-96"
src="https://bpn.ep-reisen.de/buspronet/anmeldung_news.php"
width="100%" height="100"></iframe>
</f:section>
@@ -1,14 +1,13 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:layout name="Default"/>
<f:section name="Main">
<div class="video">
<iframe class="video__frame" width="560" height="315" frameborder="0" allowfullscreen
<div class="relative w-full aspect-w-16 aspect-h-9">
<iframe class="absolute top-0 left-0 w-full h-full" width="560" height="315" allowfullscreen
src="{ep:uri.video(value: data.header_link, layout: data.layout)}"></iframe>
</div>
</f:section>
@@ -21,24 +21,20 @@
</f:section>
<f:section name="Header">
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</div>
</div>
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</f:section>
<f:section name="Grid">
<div class="row">
<div class="col-md-6">
<div class="grid grid-cols-2 gap-8">
<div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_51 -> f:format.raw()}
</div>
<div class="col-md-6 slider">
<div class="row slider__items">
<div class="col-md-6">
<div class="col-span-2 md:col-span-1">
<div class="grid grid-cols-2 gap-8">
<div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_52 -> f:format.raw()}
</div>
<div class="col-md-6">
<div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_53 -> f:format.raw()}
</div>
</div>
@@ -22,22 +22,18 @@
</f:section>
<f:section name="Header">
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</div>
</div>
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</f:section>
<f:section name="Grid">
<div class="row">
<div class="grid grid-cols-2 gap-8">
<f:if condition="{data.tx_gridelements_view_column_21 -> v:format.trim()}">
<div class="col-md-6 col-sm-12">
<div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_21 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_22 -> v:format.trim()}">
<div class="col-md-6 col-sm-12">
<div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_22 -> f:format.raw()}
</div>
</f:if>
@@ -22,32 +22,28 @@
</f:section>
<f:section name="Header">
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</div>
</div>
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</f:section>
<f:section name="Grid">
<div class="row slider__items">
<div class="grid grid-cols-4 gap-8">
<f:if condition="{data.tx_gridelements_view_column_41 -> v:format.trim()}">
<div class="col-md-3">
<div class="col-span-4 md:col-span-2 lg:col-span-1">
{data.tx_gridelements_view_column_41 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_42 -> v:format.trim()}">
<div class="col-md-3">
<div class="col-span-4 md:col-span-2 lg:col-span-1">
{data.tx_gridelements_view_column_42 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_43 -> v:format.trim()}">
<div class="col-md-3">
<div class="col-span-4 md:col-span-2 lg:col-span-1">
{data.tx_gridelements_view_column_43 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_44 -> v:format.trim()}">
<div class="col-md-3">
<div class="col-span-4 md:col-span-2 lg:col-span-1">
{data.tx_gridelements_view_column_44 -> f:format.raw()}
</div>
</f:if>
@@ -1,7 +1,6 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Default"/>
@@ -22,27 +21,23 @@
</f:section>
<f:section name="Header">
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</div>
</div>
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</f:section>
<f:section name="Grid">
<div class="row slider__items">
<div class="grid grid-cols-3 gap-8">
<f:if condition="{data.tx_gridelements_view_column_31 -> v:format.trim()}">
<div class="col-md-4">
<div class="col-span-3 md:col-span-1">
{data.tx_gridelements_view_column_31 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_32 -> v:format.trim()}">
<div class="col-md-4">
<div class="col-span-3 md:col-span-1">
{data.tx_gridelements_view_column_32 -> f:format.raw()}
</div>
</f:if>
<f:if condition="{data.tx_gridelements_view_column_33 -> v:format.trim()}">
<div class="col-md-4">
<div class="col-span-3 md:col-span-1">
{data.tx_gridelements_view_column_33 -> f:format.raw()}
</div>
</f:if>
@@ -21,26 +21,24 @@
</f:section>
<f:section name="Header">
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</div>
</div>
<f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
</f:section>
<f:section name="Grid">
<div class="col-md-6 slider">
<div class="row slider__items">
<div class="col-md-6">
{data.tx_gridelements_view_column_61 -> f:format.raw()}
</div>
<div class="col-md-6">
{data.tx_gridelements_view_column_62 -> f:format.raw()}
<div class="grid grid-cols-2 gap-8">
<div class="col-span-2 md:col-span-1">
<div class="grid grid-cols-2 gap-8">
<div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_52 -> f:format.raw()}
</div>
<div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_53 -> f:format.raw()}
</div>
</div>
</div>
</div>
<div class="col-md-6">
{data.tx_gridelements_view_column_63 -> f:format.raw()}
<div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_51 -> f:format.raw()}
</div>
</div>
</f:section>
@@ -4,32 +4,24 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="page-header">
<div class="media">
<div class="media-left media-middle">
<f:image class="media-object" width="128" src="EXT:ep_theme/Resources/Public/images/logo_wide.svg" alt=""/>
</div>
<div class="media-body">
<h1 class="media-heading">Preisberechnung <small>{hotel.name}</small></h1>
</div>
</div>
<div class="page-header">
<div class="media">
<div class="media-left media-middle">
<f:image class="media-object" width="128" src="EXT:ep_theme/Resources/Public/images/logo_wide.svg" alt=""/>
</div>
<div class="media-body">
<h1 class="media-heading">Preisberechnung <small>{hotel.name}</small></h1>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<groups-price-calculator
:configs='{configs -> f:format.raw()}'
:boards='{boards -> f:format.raw()}'
:options='{options -> f:format.raw()}'
endpoint="{ep:uri.ajax(action: 'processForm', controller: 'AjaxGroupsPrice', pageUid: settings.defaultAjaxUid, arguments: '{hotel: hotel}')}"
loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
>
</groups-price-calculator>
</div>
</div>
<groups-price-calculator
:configs='{configs -> f:format.raw()}'
:boards='{boards -> f:format.raw()}'
:options='{options -> f:format.raw()}'
endpoint="{ep:uri.ajax(action: 'processForm', controller: 'AjaxGroupsPrice', pageUid: settings.defaultAjaxUid, arguments: '{hotel: hotel}')}"
loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
>
</groups-price-calculator>
</div>
</html>
</html>
@@ -9,41 +9,45 @@
<f:render partial="SubpageHeader" arguments="{images: hotel.headerImages, topline: hotel.headerSubtitle, headline: hotel.headerTitle, settings: settings}"/>
<div class="container">
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<div class="row hidden-lg">
<div class="col-md-12 column">
<a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
Direkt zu den Angeboten
</a>
</div>
<div class="mb-8 lg:hidden">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten
</a>
</div>
</f:if>
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/>
</div>
</div>
<div class="row">
<div class="col-md-8">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-3 md:col-span-2">
<f:render partial="Hotel/Details" arguments="{hotel: hotel, teasers: teasers, filterSettings: filterSettings, showNonBookableHint: 1}"/>
</div>
<div class="col-md-4">
<div class="col-span-3 md:col-span-1">
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<p class="hidden-xs hidden-md"><a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">Direkt zu den Angeboten</a></p>
<p class="hidden lg:block">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten
</a>
</p>
</f:if>
<f:render partial="Facts" arguments="{facts: hotel.facts}"/>
<f:if condition="{hotel.region.season} == 'w'">
<f:if condition="{hotel.region.winter}">
<f:render partial="Snowreport" arguments="{snowreport: hotel.region.snowreport}"/>
<f:render partial="Regioninfo" arguments="{region: hotel.region}"/>
</f:if>
<div class="ep-sidebar ep-snow">
<div class="bg-gray-200 p-4">
<p><strong>Lage</strong></p>
<div>
<f:format.raw>
<div class="osm-map"
x-data="osmMap"
data-lat="{hotel.latitude}"
data-lng="{hotel.longitude}"
data-zoom="12"
data-link="{f:uri.typolink(parameter: hotel.externalLink)}"></div>
</f:format.raw>
</div>
</div>
</div>
@@ -1,53 +1,36 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:layout name="Default"/>
<f:section name="Main">
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/>
<div class="grid grid-cols-2 gap-8">
<div class="col-span-2 md:col-span-1">
<f:render partial="ContentSlider" arguments="{id: hotel.uid, images: hotel.images, thumbnails: 0}"/>
</div>
<div class="col-md-6 col-xs-12">
<div class="col-span-2 md:col-span-1">
{hotel.description -> f:format.html()}
</div>
</div>
<f:if condition="{product.bookable}">
<div class="row">
<div class="col-xs-12">
<h2>Buchungsoptionen</h2>
<div class="ajax-content-wrapper"
x-data="ajaxContent('{ep:uri.ajax(action: 'pricetableHtml', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: product, hotel: hotel}', format: 'html')}')">
<div class="ajax-content" x-ref="container"></div>
<div x-ref="trigger">
<img src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}" alt="Loading" title="Loading">
</div>
</div>
<h2>Buchungsoptionen</h2>
<div class="ajax-content-wrapper"
x-data="ajaxContent('{ep:uri.ajax(action: 'pricetableHtml', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: product, hotel: hotel}', format: 'html')}')">
<div class="ajax-content" x-ref="container"></div>
<div x-ref="trigger">
<img src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}" alt="Loading" title="Loading">
</div>
</div>
</f:if>
<div class="row">
<div class="col-xs-12">
<h2>Ausstattung</h2>
{hotel.features -> f:format.html()}
<h2>Zimmerarten / Apartments</h2>
{hotel.roomTypes -> f:format.html()}
</div>
</div>
<h2>Ausstattung</h2>
{hotel.features -> f:format.html()}
<h2>Zimmerarten / Apartments</h2>
{hotel.roomTypes -> f:format.html()}
<f:if condition="{hotel.additionalInformation}">
<div class="row">
<div class="col-xs-12">
<h2>Zusatzinformationen</h2>
{hotel.additionalInformation -> f:format.html()}
</div>
</div>
<h2>Zusatzinformationen</h2>
{hotel.additionalInformation -> f:format.html()}
</f:if>
</f:section>
@@ -6,7 +6,7 @@
<f:section name="Main">
<ep:container data="{data}">
<div class="osm-map"
<div class="w-full aspect-w-16 aspect-h-9 mb-8"
x-data="osmMap"
data-markers='{markerData -> f:format.raw()}'></div>
</ep:container>
@@ -10,67 +10,45 @@
<article>
<f:render partial="Product/HeaderDetail" arguments="{_all}"/>
<div class="container" id="detail" x-data='productDetail({
dates: "<f:format.raw>{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>",
pricetable: "<f:format.raw>{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}</f:format.raw>",
travelAlert: "<f:format.raw>{f:uri.typolink(parameter: settings.travelAlertPageUid)}</f:format.raw>"
<f:format.raw>
dates: "{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', format: 'json', pageUid: settings.defaultAjaxUid)}",
pricetable: "{ep:uri.ajax(action: 'pricetable', controller: 'AjaxTable', arguments: '{product: product, hotel: hotel}', format: 'html', pageUid: settings.defaultAjaxUid)}",
travelAlert: "{f:uri.typolink(parameter: settings.travelAlertPageUid)}"
</f:format.raw>
})'>
<div class="product-detail-wrapper">
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-push-8">
<div class="row">
<div class="col-xs-12">
<f:if condition="{settings.hotelOnTop}">
<f:then>
<button class="button button--light button--sidebar"
x-bind:class="{ 'button--active': show === 'hotel'}"
x-on:click.prevent="show = 'hotel'">Unterkunft</button>
</f:then>
<f:else>
<button class="button button--light button--sidebar"
x-bind:class="{ 'button--active': show === 'dates'}"
x-on:click.prevent="show = 'dates'">Termine/Preise</button>
</f:else>
</f:if>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-12">
<f:if condition="{settings.hotelOnTop}">
<f:then>
<button class="button button--light button--sidebar"
x-bind:class="{ 'button--active': show === 'dates'}"
x-on:click.prevent="show = 'dates'">Termine/Preise</button>
</f:then>
<f:else>
<button class="button button--light button--sidebar"
x-bind:class="{ 'button--active': show === 'hotel'}"
x-on:click.prevent="show = 'hotel'">Unterkunft</button>
</f:else>
</f:if>
<button class="button button--light button--sidebar"
x-bind:class="{ 'button--active': show === 'region'}"
x-on:click.prevent="show = 'region'">Gebiet</button>
</div>
<div class="col-xs-6 col-md-12">
<button class="button button--light button--sidebar"
x-bind:class="{ 'button--active': show === 'city'}"
x-on:click.prevent="show = 'city'">Ort</button>
<f:if condition="{product.journey}">
<button class="button button--light button--sidebar"
x-bind:class="{ 'button--active': show === 'journey'}"
x-on:click.prevent="show = 'journey'">Anreise</button>
</f:if>
<f:if condition="{product.faqs}">
<button class="button button--light button--sidebar"
x-data="scrollTo('faq')">FAQ</button>
</f:if>
</div>
<div class="col-xs-12">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
<div class="flex flex-col lg:flex-row-reverse lg:items-start">
<div class="w-full lg:w-1/3">
<div class="lg:pl-4">
<div class="grid grid-cols-2 gap-2">
<f:if condition="{settings.hotelOnTop}">
<f:then>
<button class="button button--light col-span-1 md:col-span-2"
x-bind:class="{ 'button--active': show === 'hotel'}"
x-on:click.prevent="show = 'hotel'">Unterkunft</button>
</f:then>
<f:else>
<button class="button button--light col-span-1 md:col-span-2"
x-bind:class="{ 'button--active': show === 'dates'}"
x-on:click.prevent="show = 'dates'">Termine/Preise</button>
</f:else>
</f:if>
<button class="button button--light col-span-1 md:col-span-2"
x-bind:class="{ 'button--active': show === 'region'}"
x-on:click.prevent="show = 'region'">Gebiet</button>
<button class="button button--light col-span-1 md:col-span-2"
x-bind:class="{ 'button--active': show === 'city'}"
x-on:click.prevent="show = 'city'">Ort</button>
<f:if condition="{product.journey}">
<button class="button button--light col-span-1 md:col-span-2"
x-bind:class="{ 'button--active': show === 'journey'}"
x-on:click.prevent="show = 'journey'">Anreise</button>
</f:if>
<f:if condition="{product.faqs}">
<button class="button button--light col-span-1 md:col-span-2"
x-data="scrollTo('faq')">FAQ</button>
</f:if>
<div class="col-span-2">
<p>
<a href="#" x-data="watchlistToggle('{hotel.uid}:{product.uid}')" x-bind="trigger">
<span data-microtip-position="top" x-bind:aria-label="label" role="tooltip">
@@ -88,48 +66,13 @@
</p>
</div>
</div>
<div class="hidden-xs">
<f:render section="Calendar" arguments="{_all}"/>
<f:render partial="Facts" arguments="{facts: product.facts}"/>
<f:if condition="{product.video}">
<div class="video">
<iframe class="video__frame" width="560" height="315" allowfullscreen
src="{ep:uri.video(value: product.video)}"></iframe>
</div>
</f:if>
<div class="ep-sidebar ep-snow">
<p><strong>Lage</strong></p>
<div>
<div class="osm-map"
x-data="osmMap"
data-lat="{hotel.latitude}"
data-lng="{hotel.longitude}"
data-link="{f:uri.typolink(parameter: hotel.externalLink)}"></div>
</div>
</div>
<f:render partial="Region/Webcam" arguments="{region: product.region}"/>
<f:render partial="RegionMaps" arguments="{region: product.region}"/>
<f:render partial="RegionAward" arguments="{region: product.region}"/>
<f:if condition="{product.banner}">
<div class="ep-sidebar ep-snow">
<f:link.typolink parameter="{product.banner.originalResource.link}"
title="{product.banner.title}">
<f:image src="{product.banner.uid}" treatIdAsReference="1"
class="scale" alt="{product.banner.alternative}"/>
</f:link.typolink>
</div>
</f:if>
<f:render partial="Rating" arguments="{product: product, targetPageUid: settings.ratingPageUid, label: settings.ratingWidgetLabel}"/>
<f:render partial="Snowreport" arguments="{snowreport: product.region.snowreport}"/>
<f:render partial="Officetip" arguments="{officetip: product.officetip}"/>
<f:if condition="{settings.hideTeamer}">
<f:else>
<f:render partial="Teamer" arguments="{teamer: hotel.teamer}"/>
</f:else>
</f:if>
<div class="hidden lg:block">
<f:render section="Sidebar" arguments="{_all}"/>
</div>
</div>
<div id="main" class="col-md-8 col-md-pull-4">
</div>
<div id="main" class="w-full lg:w-2/3">
<div class="lg:pr-4">
<!-- Loader -->
<div x-show="loading" class="flex items-center space-x-2 mb-8">
<f:image class="block w-4 h-4" src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading"/>
@@ -192,41 +135,8 @@
<f:render partial="Journey/Details" arguments="{journey: product.journey, bars: 1}"/>
</div>
<!-- /Journey -->
<div class="hidden-md hidden-lg">
<f:render section="Calendar" arguments="{_all}"/>
<f:render partial="Facts" arguments="{facts: product.facts}"/>
<f:if condition="{product.video}">
<div class="video">
<iframe class="video__frame" width="560" height="315" allowfullscreen
src="{ep:uri.video(value: product.video)}"></iframe>
</div>
</f:if>
<div class="ep-sidebar ep-snow">
<p><strong>Lage</strong></p>
<div>
<div class="osm-map"
x-data="osmMap"
data-lat="{hotel.latitude}"
data-lng="{hotel.longitude}"
data-link="{f:uri.typolink(parameter: hotel.externalLink)}"></div>
</div>
</div>
<f:render partial="Region/Webcam" arguments="{region: product.region}"/>
<f:render partial="RegionMaps" arguments="{region: product.region}"/>
<f:render partial="RegionAward" arguments="{region: product.region}"/>
<f:if condition="{product.banner}">
<div class="ep-sidebar ep-snow">
<f:link.typolink parameter="{product.banner.originalResource.link}"
title="{product.banner.title}">
<f:image src="{product.banner.uid}" treatIdAsReference="1"
class="scale" alt="{product.banner.alternative}"/>
</f:link.typolink>
</div>
</f:if>
<f:render partial="Rating" arguments="{product: product, targetPageUid: settings.ratingPageUid, label: settings.ratingWidgetLabel}"/>
<f:render partial="Snowreport" arguments="{snowreport: product.region.snowreport}"/>
<f:render partial="Officetip" arguments="{officetip: product.officetip}"/>
<f:render partial="Teamer" arguments="{teamer: hotel.teamer}"/>
<div class="md:hidden">
<f:render section="Sidebar" arguments="{_all}"/>
</div>
</div>
</div>
@@ -237,29 +147,80 @@
<f:render partial="Faq" arguments="{faqs: product.faqs, settings: settings}"/>
</f:section>
<f:section name="Sidebar">
<f:render section="Calendar" arguments="{_all}"/>
<f:render partial="Facts" arguments="{facts: product.facts}"/>
<f:if condition="{product.video}">
<div class="relative aspect-w-16 aspect-h-9 mb-8">
<iframe class="absolute top-0 left-0 w-full h-full" width="560" height="315" allowfullscreen
src="{ep:uri.video(value: product.video)}"></iframe>
</div>
</f:if>
<div class="bg-gray-200 p-4 mb-8">
<p><strong>Lage</strong></p>
<div>
<div class="osm-map"
x-data="osmMap"
data-lat="{hotel.latitude}"
data-lng="{hotel.longitude}"
data-link="{f:uri.typolink(parameter: hotel.externalLink)}"></div>
</div>
</div>
<f:render partial="Region/Webcam" arguments="{region: product.region}"/>
<f:render partial="RegionMaps" arguments="{region: product.region}"/>
<f:render partial="RegionAward" arguments="{region: product.region}"/>
<f:if condition="{product.banner}">
<div class="bg-gray-200 p-4 mb-8">
<f:link.typolink parameter="{product.banner.originalResource.link}"
title="{product.banner.title}">
<f:image src="{product.banner.uid}" treatIdAsReference="1"
class="scale" alt="{product.banner.alternative}"/>
</f:link.typolink>
</div>
</f:if>
<f:render partial="Rating" arguments="{product: product, targetPageUid: settings.ratingPageUid, label: settings.ratingWidgetLabel}"/>
<f:render partial="Snowreport" arguments="{snowreport: product.region.snowreport}"/>
<f:render partial="Officetip" arguments="{officetip: product.officetip}"/>
<f:if condition="{settings.hideTeamer}">
<f:else>
<f:render partial="Teamer" arguments="{teamer: hotel.teamer}"/>
</f:else>
</f:if>
</f:section>
<f:section name="DatesTable">
<div class="dates-table-wrapper" x-show="bookable">
<div class="ep-headbar">Buchungsoptionen {hotel.name}</div>
<div x-show="bookable">
<div class="ep-headbar">
Buchungsoptionen {hotel.name}
</div>
<f:render section="PriceToggle"/>
<div class="table-responsive">
<table class="table table-striped dates-table">
<div class="w-full max-w-full overflow-x-scroll mb-4">
<table class="min-w-full border-collapse">
<thead>
<tr>
<th>Termin</th>
<th>
<span data-microtip-position="bottom" aria-label="Nächte" role="tooltip">
<i class="fa fa-bed"></i>
</span>
</th>
<th>Preis ab</th>
<th>inkl.</th>
<th class="hidden-xs"></th>
</tr>
<tr>
<th>
Termin
</th>
<th>
<span data-microtip-position="bottom" aria-label="Nächte" role="tooltip">
<svg class="w-4 h-4">
<use href="#icon-bed"></use>
</svg>
</span>
</th>
<th>
Preis ab
</th>
<th>
inkl.
</th>
<th class="hidden lg:table-cell"></th>
</tr>
</thead>
<tbody>
<template x-for="(row, index) in datesRows" x-bind:key="row.dateUid">
<tr x-bind:class="{ 'hidden': index > 4 && !showAll }">
<td class="dates-table__cell dates-table__cell--date">
<tr class="even:bg-gray-200" x-bind:class="{ 'hidden': index > 4 && !showAll }">
<td class="px-2 py-1">
<template x-if="bookable && row.available && !row.isHideBookingButton">
<a class="dates-table__date" href="#"
x-on:click.prevent="loadPrices(row.dateUid)"
@@ -277,27 +238,32 @@
<span x-text="row.dateStart + ' - ' + row.dateEnd"></span>
</template>
</td>
<td class="dates-table__cell dates-table__cell--nights" x-text="row.dateNights"></td>
<td class="dates-table__cell dates-table__cell--price">
<span class="dates-table__pseudo-price" x-show="row.datePseudoPrice" x-text="row.datePseudoPrice + ' €'"></span>
<td class="px-2 py-1"
x-text="row.dateNights"></td>
<td class="px-2 py-1">
<span class="text-sm line-through" x-show="row.datePseudoPrice" x-text="row.datePseudoPrice + ' €'"></span>
<strong x-text="calculatePrice(row.dateMinPrice, row.dateBusPrice, row.dateDiscount) + ' €'"></strong>
</td>
<td class="dates-table__cell dates-table__cell--icons">
<span class="icon-wrapper hidden-xs hidden-sm">
<span x-show="showBusIcon(row.dateBusPrice, row.dateBusIncluded)" data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip">
<i class="fa fa-bus"></i>
</span>
<span x-show="row.dateSkipassIncluded" data-microtip-position="top" x-bind:aria-label="row.season === 's' ? 'Bergbahnticket inklusive' : 'Skipass inklusive'" role="tooltip">
<i class="fa fa-tag"></i>
</span>
</span>
<button class="button button--light button--small hidden-xs"
x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid"
data-microtip-position="top" aria-label="Alle Inklusivleistungen anzeigen" role="tooltip">Leistungen</button>
<a href="#" x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid"
class="hidden-sm hidden-md hidden-lg"><i class="fa fa-info-circle"></i></a>
<td class="px-2 py-1">
<div class="hidden md:flex items-center space-x-2">
<div x-show="showBusIcon(row.dateBusPrice, row.dateBusIncluded)" data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip">
<svg class="w-4 h-4">
<use href="#icon-bus"></use>
</svg>
</div>
<div x-show="row.dateSkipassIncluded" data-microtip-position="top" x-bind:aria-label="row.season === 's' ? 'Bergbahnticket inklusive' : 'Skipass inklusive'" role="tooltip">
<svg class="w-4 h-4">
<use href="#icon-tag"></use>
</svg>
</div>
<button class="button button--light button--small hidden md:block"
x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid"
data-microtip-position="top" aria-label="Alle Inklusivleistungen anzeigen" role="tooltip">Leistungen</button>
<a href="#" x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid"
class="md:hidden"><i class="fa fa-info-circle"></i></a>
</div>
</td>
<td class="dates-table__cell dates-table__cell--buttons hidden-xs">
<td class="px-2 py-1 hidden sm:table-cell">
<button x-show="row.available || row.isHideBookingButton" class="button button--small" x-on:click="loadPrices(row.dateUid)">Details</button>
<a x-show="row.available && !row.isHideBookingButton" x-bind:href="row.bookingUrl" target="_blank" class="button button--small button--action">Buchen</a>
<a x-show="row.isHideBookingButton" x-bind:href="uris.travelAlertUrl" class="button button--small button--mute">Reisen-Alert</a>
@@ -309,19 +275,24 @@
</table>
</div>
<template x-if="datesRows.length > 5 || altProductLink">
<div class="row dates-table__links">
<div class="col-xs-12 col-md-6">
<a x-show="datesRows.length > 5" href="#" x-on:click.prevent="showAll = !showAll">
<i class="fa" x-bind:class="{ 'fa-minus-circle': showAll , 'fa-plus-circle': !showAll }"></i>
<span x-text="showAll ? 'Weniger Termine anzeigen' : 'Alle Termine anzeigen'"></span>
</a>
</div>
<div class="grid grid-cols-2 gap-8 pb-4">
<button x-show="datesRows.length > 5"
x-on:click.prevent="showAll = !showAll"
class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary">
<svg class="w-4 h-4">
<use x-bind:href="showAll ? '#icon-minus-circle' : '#icon-plus-circle'"></use>
</svg>
<span x-text="showAll ? 'Weniger Termine anzeigen' : 'Alle Termine anzeigen'"></span>
</button>
<template x-if="altProductLink">
<div class="col-xs-12 col-md-6">
<a x-bind:href="altProductLink" x-bind:title="altLabel" class="dates-table__altlink">
<i class="fa fa-arrow-circle-right"></i> <span x-text="altLabel"></span>
</a>
</div>
<a x-bind:href="altProductLink"
x-bind:title="altLabel"
class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary">
<svg class="w-4 h-4">
<use href="#icon-arrow-circle-right"></use>
</svg>
<span x-text="altLabel"></span>
</a>
</template>
</div>
</template>
@@ -356,57 +327,81 @@
</f:section>
<f:section name="PriceTable">
<div class="price-table-wrapper">
<div>
<div class="row ep-headbar">
<div class="col-xs-6">Buchungsoptionen</div>
<div class="col-xs-6 text-right" x-text="dateRange"></div>
</div>
<f:render section="PriceToggle"/>
<div class="table-responsive">
<table class="table table-striped pricetable">
<div class="w-full max-w-full overflow-x-scroll mb-4">
<table class="min-w-full border-collapse">
<thead>
<tr>
<th>Zimmertyp</th>
<th>Preis</th>
<th>inkl.</th>
<th></th>
<th class="hidden-xs hidden-md"></th>
</tr>
<tr>
<th>
Zimmertyp
</th>
<th>
Preis
</th>
<th>
inkl.
</th>
<th></th>
<th class="hidden lg:table-cell"></th>
</tr>
</thead>
<tbody>
<template x-for="(row, index) in pricesRows" x-bind:key="row.roomBusProId">
<tr>
<td style="white-space: normal">
<tr class="even:bg-gray-200">
<td class="px-2 py-1">
<span x-show="row.isHideBookingButton || !row.roomAvailable" x-text="row.roomName"></span>
<a x-show="!row.isHideBookingButton && row.roomAvailable" class="pricetable__room-label"
x-bind:href="row.bookingUrl" target="_blank" x-text="row.roomName"></a>
<div class="hidden-lg" x-show="!row.isHideBookingButton && row.roomAvailable">
<a class="button button--small button--action"
x-bind:href="row.bookingUrl" target="_blank">Jetzt buchen</a>
</div>
<div class="hidden-lg" x-show="!row.roomAvailable">
<span class="label label-default">ausgebucht</span>
<a x-show="!row.isHideBookingButton && row.roomAvailable"
x-bind:href="row.bookingUrl" target="_blank"
x-text="row.roomName"></a>
<a class="button button--small button--action lg:hidden"
x-show="!row.isHideBookingButton && row.roomAvailable"
x-bind:href="row.bookingUrl" target="_blank">
Jetzt buchen
</a>
<div class="lg:hidden"
x-show="!row.roomAvailable">
<span class="label label-default">
ausgebucht
</span>
</div>
</td>
<td style="white-space: nowrap" x-bind:style="{textDecoration: !row.roomAvailable && !row.isHideBookingButton ? 'line-through' : ''}"
<td class="px-2 py-1 whitespace-no-wrap" x-bind:class="!row.roomAvailable && !row.isHideBookingButton && 'line-through'"
x-text="calculatePrice(row.roomPrice, row.roomBusPrice, row.roomDiscount) + ' €'"></td>
<td>
<span x-show="showBusIcon(row.roomBusPrice, row.dateBusIncluded)" data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip">
<i class="fa fa-bus"></i>
</span>
<span x-show="row.dateSkipassIncluded" data-microtip-position="top" x-bind:aria-label="row.season === 's' ? 'Bergbahnticket inklusive' : 'Skipass inklusive'" role="tooltip">
<i class="fa fa-tag"></i>
</span>
<td class="px-2 py-1">
<div class="flex items-center space-x-1">
<span x-show="showBusIcon(row.roomBusPrice, row.dateBusIncluded)" data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip">
<svg class="w-4 h-4">
<use href="#icon-bus"></use>
</svg>
</span>
<span x-show="row.dateSkipassIncluded" data-microtip-position="top" x-bind:aria-label="row.season === 's' ? 'Bergbahnticket inklusive' : 'Skipass inklusive'" role="tooltip">
<svg class="w-4 h-4">
<use href="#icon-tag"></use>
</svg>
</span>
</div>
</td>
<td>
<td class="px-2 py-1">
<button x-show="row.roomHasOptionalServices && row.roomAvailable"
class="button button--light button--small hidden-xs"
class="hidden sm:block button button--light button--small"
x-on:click.prevent="$store.show.modal = 'optional-services-' + row.roomUid"
data-microtip-position="top" aria-label="Alle Zusatzleistungen anzeigen" role="tooltip">Optionen</button>
<a href="#" x-show="row.roomHasOptionalServices && row.roomAvailable" class="hidden-sm hidden-md hidden-lg"
x-on:click.prevent="$store.show.modal = 'optional-services-' + row.roomUid"><i class="fa fa-info-circle"></i></a>
data-microtip-position="top" aria-label="Alle Zusatzleistungen anzeigen" role="tooltip">
Optionen
</button>
<button x-show="row.roomHasOptionalServices && row.roomAvailable"
class="sm:hidden ep:text-ep-primary"
x-on:click.prevent="$store.show.modal = 'optional-services-' + row.roomUid">
<svg class="w-4 h-4">
<use href="#icon-info-circle"></use>
</svg>
</button>
</td>
<td class="hidden-xs hidden-md">
<td class="hidden lg:table-cell px-2 py-1">
<a class="button button--small button--action" x-show="row.roomAvailable && !row.isHideBookingButton"
x-bind:href="row.bookingUrl" target="_blank">Buchen</a>
<a class="button button--small button--mute" x-show="row.isHideBookingButton"
@@ -469,37 +464,47 @@
</f:section>
<f:section name="PriceToggle">
<div class="dates-table__pricetoggle" x-show="hasSurcharge || hasDiscount">
<div class="w-full flex justify-end mb-2" x-show="hasSurcharge || hasDiscount">
<template x-if="hasSurcharge">
<a href="#" x-on:click.prevent="addBus = !addBus">
<span x-show="addBus">
<i class="fa fa-arrow-circle-right"></i> Preise für Eigenanreise anzeigen
</span>
<span x-show="! addBus">
<i class="fa fa-arrow-circle-right"></i> Preise für Busanreise anzeigen
</span>
</a>
<button x-on:click.prevent="addBus = !addBus"
class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary">
<svg class="w-4 h-4">
<use href="#icon-arrow-circle-right"></use>
</svg>
<span x-show="addBus">
Preise für Eigenanreise anzeigen
</span>
<span x-show="! addBus">
Preise für Busanreise anzeigen
</span>
</button>
</template>
<template x-if="hasDiscount">
<a href="#" x-on:click.prevent="discountBus = !discountBus">
<span x-show="discountBus">
<i class="fa fa-arrow-circle-right"></i> Preise für Busanreise anzeigen
</span>
<button x-on:click.prevent="discountBus = !discountBus"
class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary">
<svg class="w-4 h-4">
<use href="#icon-arrow-circle-right"></use>
</svg>
<span x-show="discountBus">
Preise für Busanreise anzeigen
</span>
<span x-show="!discountBus">
<i class="fa fa-arrow-circle-right"></i> Preise für Eigenanreise anzeigen
</span>
</a>
Preise für Eigenanreise anzeigen
</span>
</button>
</template>
</div>
</f:section>
<f:section name="DaytripDateSelect">
<div class="date-select-wrapper" x-data='daytripDateSelect({
hotelName: "<f:format.raw>{hotel.name}</f:format.raw>",
hotelUid: <f:format.raw>{hotel.uid}</f:format.raw>,
productUid: <f:format.raw>{product.uid}</f:format.raw>,
contingentEndpointUri: "<f:format.raw>{ep:uri.ajax(action: 'list', controller: 'AjaxContingent', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>",
roomsEndpointUri: "<f:format.raw>{ep:uri.ajax(action: 'rooms', controller: 'AjaxContingent', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>"
<div x-data='daytripDateSelect({
<f:format.raw>
hotelName: "{hotel.name}",
hotelUid: {hotel.uid},
productUid: {product.uid},
contingentEndpointUri: "{ep:uri.ajax(action: 'list', controller: 'AjaxContingent', format: 'json', pageUid: settings.defaultAjaxUid)}",
roomsEndpointUri: "{ep:uri.ajax(action: 'rooms', controller: 'AjaxContingent', format: 'json', pageUid: settings.defaultAjaxUid)}"
</f:format.raw>
})'>
<div class="ep-headbar" x-text="headerLabel"></div>
<div class="row">
@@ -10,32 +10,30 @@
<f:render partial="SubpageHeader" arguments="{images: region.headerImages, topline: region.headerSubtitle, headline: region.headerTitle, settings: settings, badge: badge}"/>
<div class="container">
<f:if condition="{teasers}">
<div class="row hidden-lg">
<div class="col-md-12 column">
<a href="#teasers" @click.prevent="scrollTo('#teasers')" class="button button--full">
Direkt zu den Angeboten
</a>
</div>
<div class="mb-8 lg:hidden">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten
</a>
</div>
</f:if>
<div class="row">
<div class="col-md-12">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: region.name, header: region.headline}"/>
</div>
</div>
<div class="row">
<div class="col-md-8">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: region.name, header: region.headline}"/>
<div class="grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
<f:render partial="Region/Details" arguments="{region: region, teasers: teasers, filterSettings: filterSettings}"/>
</div>
<div class="col-md-4">
<div class="col-span-3 lg:col-span-1">
<f:if condition="{teasers}">
<p class="hidden-xs hidden-md">
<a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full">
<p class="hidden lg:block">
<a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten
</a>
</p>
</f:if>
<f:if condition="{region.season} == 'w'">
<f:if condition="{region.winter}">
<f:render partial="Facts" arguments="{facts: region.facts}"/>
<f:render partial="Snowreport" arguments="{snowreport: region.snowreport}"/>
<f:render partial="Regioninfo" arguments="{region: region}"/>
@@ -46,7 +44,7 @@
</div>
</div>
</div>
<div x-data="fbpixel('{ "content_ids": [ {region.uid -> f:format.raw()} ], "content_name": "{region.nameInternal -> f:format.raw()}", "content_type": "product" }')"></div>
<div x-data='fbpixel({ "content_ids": [ {region.uid -> f:format.raw()} ], "content_name": "{region.nameInternal -> f:format.raw()}", "content_type": "product" })'></div>
</f:section>
</html>
@@ -13,7 +13,7 @@
datePresets: {settings.datePickerPresets -> f:format.json()}
</f:format.raw>
})'>
<div class="searchbar z-10{f:if(condition: fixed, then: ' searchbar--fixed')}"{f:if(condition: fixed, else: ' x-data="sticky(650)" x-bind:class="sticky && \'searchbar--fixed\'"')}">
<div class="searchbar z-10{f:if(condition: fixed, then: ' searchbar--fixed')}"{f:if(condition: fixed, else: ' x-data="sticky(650)" x-bind:class="sticky && \'searchbar--fixed\'"')}>
<f:form action="processSearch" controller="Search" method="post" name="searchParams"
object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
pageUid="{settings.defaultSearchPageUid}" additionalAttributes="{ref: 'form'}">
@@ -20,9 +20,9 @@
datePresets: {settings.datePickerPresets -> f:format.json()}
</f:format.raw>
})'>
<div class="row" x-ref="container"></div>
<div x-ref="container"></div>
<div x-show="loading" class="absolute z-20 inset-0 w-full h-fill bg-overlay-white">
<div class="absolute mt-16 top-0 left-1/2 -translate-x-1/2 flex items-center space-x-4 alert alert-info">
<div class="absolute mt-16 top-0 left-1/2 transform -translate-x-1/2 flex items-center space-x-4 alert alert-info">
<f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" />
<span>Suchergebnis wird geladen...</span>
</div>
+9 -2
View File
@@ -25,7 +25,7 @@ module.exports = {
theme: {
container: {
center: true,
padding: '2rem',
padding: '1rem',
},
fontFamily: {
'sans': [ 'Lato', 'sans-serif' ],
@@ -85,6 +85,9 @@ module.exports = {
'sbw': {
'primary': '#f0bc44',
'secondary': '#ee525a',
'primary-light': '#f0bc44',
'primary-medium': '#f0bc44',
'primary-dark': '#f0bc44',
'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
},
@@ -102,6 +105,7 @@ module.exports = {
},
},
height: {
'96': '20rem',
'128': '32rem',
},
inset: {
@@ -114,17 +118,20 @@ module.exports = {
},
},
variants: {
backgroundColor: ({ after }) => after([ 'ep', 'ep:hover', 'sbw', 'sbw:hover', 'snz', 'snz:hover', 'uch', 'uch:hover' ]),
backgroundColor: ({ after }) => after([ 'ep', 'ep:hover', 'sbw', 'sbw:hover', 'snz', 'snz:hover', 'uch', 'uch:hover', 'even', 'odd' ]),
textColor: ({ after }) => after([ 'ep', 'ep:hover', 'ep:focus', 'sbw', 'sbw:hover', 'snz', 'snz:hover', 'uch', 'uch:hover' ]),
borderColor: ({ after }) => after([ 'ep', 'sbw','snz', 'uch' ]),
display: ({ after }) => after(['group-hover']),
visibility: ({ after }) => after(['group-hover']),
opacity: ({ after }) => after(['group-hover']),
rotate: ({ after }) => after(['group-hover']),
flexDirection: ({ after }) => after(['even', 'odd']),
padding: ({ after }) => after(['even', 'odd']),
},
plugins: [
require('tailwindcss-multi-theme'),
require('@tailwindcss/custom-forms'),
require('@tailwindcss/aspect-ratio'),
plugin(function ({addVariant, e}) {
addVariant('first-type', ({modifySelectors, separator}) => {
modifySelectors(({className}) => {