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", "license": "proprietary",
"dependencies": { "dependencies": {
"@splidejs/splide": "^2.4.21", "@splidejs/splide": "^2.4.21",
"@tailwindcss/aspect-ratio": "^0.1.4",
"alpinejs": "^3.2.2", "alpinejs": "^3.2.2",
"axios": "^0.21.1", "axios": "^0.21.1",
"axios-auth-refresh": "^1.0.7", "axios-auth-refresh": "^1.0.7",
@@ -51,7 +52,7 @@
"sass-loader": "^9.0.3", "sass-loader": "^9.0.3",
"sass-mq": "^3.3.2", "sass-mq": "^3.3.2",
"smoothscroll-polyfill": "^0.4.4", "smoothscroll-polyfill": "^0.4.4",
"tailwindcss": "^1.8.10", "tailwindcss": "^1.9.6",
"tinycolor2": "^1.4.1", "tinycolor2": "^1.4.1",
"vue-loader": "^15.9.7", "vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
@@ -1942,6 +1943,11 @@
"node": ">=10" "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": { "node_modules/@tailwindcss/custom-forms": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz", "resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
@@ -3189,9 +3195,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001239", "version": "1.0.30001248",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001248.tgz",
"integrity": "sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ==", "integrity": "sha512-NwlQbJkxUFJ8nMErnGtT0QTM2TJ33xgz4KXJSMIrjXIbDVdaYueGyjOrLKRtJC+rTiWfi6j5cnZN1NBiSBJGNw==",
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/browserslist" "url": "https://opencollective.com/browserslist"
@@ -3392,12 +3398,12 @@
} }
}, },
"node_modules/color": { "node_modules/color": {
"version": "3.1.3", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz", "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
"integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==", "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
"dependencies": { "dependencies": {
"color-convert": "^1.9.1", "color-convert": "^1.9.3",
"color-string": "^1.5.4" "color-string": "^1.6.0"
} }
}, },
"node_modules/color-convert": { "node_modules/color-convert": {
@@ -3414,9 +3420,9 @@
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
}, },
"node_modules/color-string": { "node_modules/color-string": {
"version": "1.5.5", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz", "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
"integrity": "sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==", "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
"dependencies": { "dependencies": {
"color-name": "^1.0.0", "color-name": "^1.0.0",
"simple-swizzle": "^0.2.2" "simple-swizzle": "^0.2.2"
@@ -4634,17 +4640,16 @@
"dev": true "dev": true
}, },
"node_modules/fast-glob": { "node_modules/fast-glob": {
"version": "3.2.5", "version": "3.2.7",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
"integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==", "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.stat": "^2.0.2",
"@nodelib/fs.walk": "^1.2.3", "@nodelib/fs.walk": "^1.2.3",
"glob-parent": "^5.1.0", "glob-parent": "^5.1.2",
"merge2": "^1.3.0", "merge2": "^1.3.0",
"micromatch": "^4.0.2", "micromatch": "^4.0.4"
"picomatch": "^2.2.1"
}, },
"engines": { "engines": {
"node": ">=8" "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": { "@tailwindcss/custom-forms": {
"version": "0.2.1", "version": "0.2.1",
"resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz", "resolved": "https://registry.npmjs.org/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz",
@@ -13510,9 +13520,9 @@
} }
}, },
"caniuse-lite": { "caniuse-lite": {
"version": "1.0.30001239", "version": "1.0.30001248",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001248.tgz",
"integrity": "sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ==" "integrity": "sha512-NwlQbJkxUFJ8nMErnGtT0QTM2TJ33xgz4KXJSMIrjXIbDVdaYueGyjOrLKRtJC+rTiWfi6j5cnZN1NBiSBJGNw=="
}, },
"caseless": { "caseless": {
"version": "0.12.0", "version": "0.12.0",
@@ -13660,12 +13670,12 @@
"dev": true "dev": true
}, },
"color": { "color": {
"version": "3.1.3", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/color/-/color-3.1.3.tgz", "resolved": "https://registry.npmjs.org/color/-/color-3.2.1.tgz",
"integrity": "sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ==", "integrity": "sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==",
"requires": { "requires": {
"color-convert": "^1.9.1", "color-convert": "^1.9.3",
"color-string": "^1.5.4" "color-string": "^1.6.0"
} }
}, },
"color-convert": { "color-convert": {
@@ -13682,9 +13692,9 @@
"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
}, },
"color-string": { "color-string": {
"version": "1.5.5", "version": "1.6.0",
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.5.tgz", "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
"integrity": "sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg==", "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
"requires": { "requires": {
"color-name": "^1.0.0", "color-name": "^1.0.0",
"simple-swizzle": "^0.2.2" "simple-swizzle": "^0.2.2"
@@ -14648,17 +14658,16 @@
"dev": true "dev": true
}, },
"fast-glob": { "fast-glob": {
"version": "3.2.5", "version": "3.2.7",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.7.tgz",
"integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==", "integrity": "sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==",
"dev": true, "dev": true,
"requires": { "requires": {
"@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.stat": "^2.0.2",
"@nodelib/fs.walk": "^1.2.3", "@nodelib/fs.walk": "^1.2.3",
"glob-parent": "^5.1.0", "glob-parent": "^5.1.2",
"merge2": "^1.3.0", "merge2": "^1.3.0",
"micromatch": "^4.0.2", "micromatch": "^4.0.4"
"picomatch": "^2.2.1"
} }
}, },
"fast-json-stable-stringify": { "fast-json-stable-stringify": {
+2 -1
View File
@@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"@splidejs/splide": "^2.4.21", "@splidejs/splide": "^2.4.21",
"@tailwindcss/aspect-ratio": "^0.1.4",
"alpinejs": "^3.2.2", "alpinejs": "^3.2.2",
"axios": "^0.21.1", "axios": "^0.21.1",
"axios-auth-refresh": "^1.0.7", "axios-auth-refresh": "^1.0.7",
@@ -51,7 +52,7 @@
"sass-loader": "^9.0.3", "sass-loader": "^9.0.3",
"sass-mq": "^3.3.2", "sass-mq": "^3.3.2",
"smoothscroll-polyfill": "^0.4.4", "smoothscroll-polyfill": "^0.4.4",
"tailwindcss": "^1.8.10", "tailwindcss": "^1.9.6",
"tinycolor2": "^1.4.1", "tinycolor2": "^1.4.1",
"vue-loader": "^15.9.7", "vue-loader": "^15.9.7",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14"
@@ -152,6 +152,16 @@ class AbstractDestination extends \TYPO3\CMS\Extbase\DomainObject\AbstractEntity
$this->season = $season; $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 * @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/slider";
@import "remix/header"; @import "remix/header";
//@import "remix/herounit"; //@import "remix/herounit";
@import "remix/calendar"; //@import "remix/calendar";
@import "remix/partnerlogos"; @import "remix/partnerlogos";
@import "remix/osm-map"; //@import "remix/osm-map";
@import "remix/video"; //@import "remix/video";
@import "remix/newsletterform"; //@import "remix/newsletterform";
@import "remix/layout"; @import "remix/layout";
@import "remix/teaserbox"; @import "remix/teaserbox";
@import "remix/searchresult"; @import "remix/searchresult";
@import "remix/tables"; //@import "remix/tables";
@import "remix/product"; @import "remix/product";
@import "remix/socialmedia"; //@import "remix/socialmedia";
@import "remix/datepicker"; @import "remix/datepicker";
@import "remix/sidebar"; @import "remix/sidebar";
@import "remix/blog"; @import "remix/blog";
@@ -56,7 +56,7 @@
@import "base"; @import "base";
@import "btn"; @import "btn";
@import "input"; @import "input";
@import "breadcrumb"; //@import "breadcrumb";
@import "modal"; @import "modal";
//components //components
@@ -77,9 +77,14 @@
} }
@import "~microtip/microtip"; @import "~microtip/microtip";
.leaflet-top, .leaflet-bottom {
z-index: 490 !important;
}
} }
@layer components { @layer components {
@import "components/calendar";
@import "components/searchbar"; @import "components/searchbar";
@import "components/herounit"; @import "components/herounit";
} }
@@ -97,7 +102,8 @@
&:after { &:after {
content: ""; 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 { .-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-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-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-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-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" 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> <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-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-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-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 --> <!-- 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: 4.9 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

@@ -55,7 +55,9 @@
<f:render section="SecondLevel" arguments="{topitem: topitem}"/> <f:render section="SecondLevel" arguments="{topitem: topitem}"/>
</f:then> </f:then>
<f:else> <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} {topitem.title}
</a> </a>
</f:else> </f:else>
@@ -9,69 +9,79 @@
<f:render partial="NotBookable" arguments="{_all}"/> <f:render partial="NotBookable" arguments="{_all}"/>
</f:then> </f:then>
<f:else> <f:else>
<div class="table-responsive"> <div class="w-full max-w-full overflow-x-scroll">
<table class="table table-striped pricetable"> <table class="min-w-full border border-gray-200 border-collapse mb-8">
<thead>
<tr> <tr>
<th>Zimmertyp</th> <th>
<th>Preis/Pers.</th> Zimmertyp
<th>inkl.</th> </th>
<th>
Preis/Pers.
</th>
<th>
inkl.
</th>
<th></th> <th></th>
<th class="hidden-xs hidden-md"></th> <th class="hidden lg:table-cell"></th>
</tr> </tr>
<f:for each="{pricetable}" as="row" iteration="iteration"> </thead>
<tr> <tbody>
<td style="white-space: normal"> <f:for each="{pricetable}" as="row" iteration="iteration">
{row.roomName} <tr class="even:bg-gray-200">
<div class="hidden-lg"> <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:if condition="{row.roomAvailable}">
<f:then> <f:then>
<a href="{row.bookingUrl}">Jetzt buchen <i class="fa fa-angle-right"></i></a> {row.roomPrice} €
</f:then> </f:then>
<f:else> <f:else>
<span>ausgebucht</span> <s>{row.roomPrice} €</s>
</f:else> </f:else>
</f:if> </f:if>
</div> </td>
</td> <td class="px-2 py-1 border border-gray-200">
<td> <f:if condition="{row.dateBusIncluded}">
<f:if condition="{row.roomAvailable}"> <span data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip">
<f:then> <i class="fa fa-bus"></i>
{row.roomPrice} € </span>
</f:then> </f:if>
<f:else> <f:if condition="{row.dateSkipassIncluded}">
<s>{row.roomPrice} €</s> <span data-microtip-position="top" aria-label="Skipass inklusive" role="tooltip">
</f:else> <i class="fa fa-tag"></i>
</f:if> </span>
</td> </f:if>
<td> </td>
<f:if condition="{row.dateBusIncluded}"> <td class="px-2 py-1 border border-gray-200">
<span data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip"> <f:if condition="{row.roomOptionalServices}">
<i class="fa fa-bus"></i> <f:render section="Modal" arguments="{index: iteration.cycle, services: row.roomOptionalServices}"/>
</span> </f:if>
</f:if> </td>
<f:if condition="{row.dateSkipassIncluded}"> <td class="hidden lg:table-cell px-2 py-1 border border-gray-200">
<span data-microtip-position="top" aria-label="Skipass inklusive" role="tooltip"> <f:if condition="{row.roomAvailable}">
<i class="fa fa-tag"></i> <f:then>
</span> <a class="button button--small button--booking" href="{row.bookingUrl}" target="_blank">Buchen</a>
</f:if> </f:then>
</td> <f:else>
<td> <span class="label label-default">ausgebucht</span>
<f:if condition="{row.roomOptionalServices}"> </f:else>
<f:render section="Modal" arguments="{index: iteration.cycle, services: row.roomOptionalServices}"/> </f:if>
</f:if> </td>
</td> </tr>
<td class="hidden-xs hidden-md"> </f:for>
<f:if condition="{row.roomAvailable}"> </tbody>
<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>
</table> </table>
</div> </div>
</f:else> </f:else>
@@ -77,5 +77,4 @@
<a href="{referringUrl}" class="button button--small">{backlinkLabel}</a> <a href="{referringUrl}" class="button button--small">{backlinkLabel}</a>
</div> </div>
</f:if> </f:if>
{v:render.template(file: 'EXT:ep_theme/Resources/Private/Partials/rumb.html')}
</div> </div>
@@ -6,8 +6,8 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="row" x-ref="container"> <div class="grid grid-cols-3 gap-8" x-ref="container">
<div class="col-md-3 relative" x-data="collapse(false, 991)"> <div class="col-span-3 lg:col-span-1 relative" x-data="collapse(false, 991)">
<p class="lg:hidden"> <p class="lg:hidden">
<button class="button button--full button--small" role="button" x-bind="trigger"> <button class="button button--full button--small" role="button" x-bind="trigger">
<i class="fa fa-toggle-on"></i> Filter ein-/ausblenden <i class="fa fa-toggle-on"></i> Filter ein-/ausblenden
@@ -28,7 +28,7 @@
<f:render section="FilterPanel" arguments="{_all}"/> <f:render section="FilterPanel" arguments="{_all}"/>
</div> </div>
</div> </div>
<div class="col-md-9 relative"> <div class="col-span-3 lg:col-span-2 relative">
<f:render section="SearchResult" arguments="{_all}"/> <f:render section="SearchResult" arguments="{_all}"/>
</div> </div>
</div> </div>
@@ -17,29 +17,55 @@
</f:section> </f:section>
<f:section name="Table"> <f:section name="Table">
<div class="table-responsive"> <div class="w-full max-w-full overflow-x-scroll">
<table class="table table-bordered table-hover pricetable"> <table class="min-w-full border border-gray-200 border-collapse mb-8">
<f:for each="{categories}" as="category" key="categoryKey"> <f:for each="{categories}" as="category" key="categoryKey">
<f:if condition="{v:variable.get(name: 'pricetable.{categoryKey}', useRawKeys: 1) -> f:count()} > 0"> <f:if condition="{v:variable.get(name: 'pricetable.{categoryKey}', useRawKeys: 1) -> f:count()} > 0">
<tr class="pricetable__section"> <tr class="sbw:bg-sbw-primary snz:bg-snz-primary uch:bg-uch-primary text-white">
<td><strong>Apartments {category}</strong></td> <td class="px-2 py-1 font-bold border border-gray-200">
Apartments {category}
</td>
<f:for each="{roomTypesLabels}" as="type"> <f:for each="{roomTypesLabels}" as="type">
<td>{type}</td> <td class="px-2 py-1 border border-gray-200">
{type}
</td>
</f:for> </f:for>
</tr> </tr>
<f:for each="{v:variable.get(name: 'pricetable.{categoryKey}', useRawKeys: 1)}" as="row"> <f:for each="{pricetable.{categoryKey}}" as="row">
<tr> <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"> <f:for each="{roomTypesPax}" as="type">
<td> <td class="px-2 py-1 border border-gray-200">
<f:if condition="{v:variable.get(name: 'row.rooms.{type}.available', useRawKeys: 1)}"> <f:if condition="{row.rooms.{type}.available}">
<f:then> <f:then>
<a class="booking-link" href="{row.bookingUrl}" <a class="sbw:text-sbw-primary snz:text-snz-primary uch:text-uch-primary"
title="Jetzt buchen" target="_blank">{v:variable.get(name: 'row.rooms.{type}.price', useRawKeys: 1)}</a> href="{row.bookingUrl}"
title="Jetzt buchen"
target="_blank">
{row.rooms.{type}.price}
</a>
</f:then> </f:then>
<f:else> <f:else>
<f:if condition="{v:variable.get(name: 'row.rooms.{type}.available', useRawKeys: 1)} == false"> <f:if condition="{row.rooms.{type}.available}">
<s>{v:variable.get(name: 'row.rooms.{type}.price', useRawKeys: 1)}</s> <f:else>
<span class="line-through text-gray-500">{row.rooms.{type}.price}</span>
</f:else>
</f:if> </f:if>
</f:else> </f:else>
</f:if> </f:if>
@@ -1,12 +1,11 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" <html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers" xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<f:render partial="Pricetable" section="Main" arguments="{pricetable: pricetable}"/> <f:render partial="Pricetable" section="Main" arguments="{_all}"/>
</f:section> </f:section>
</html> </html>
@@ -10,27 +10,31 @@
<f:render partial="SubpageHeader" arguments="{images: city.headerImages, topline: city.headerSubtitle, headline: city.headerTitle, settings: settings}"/> <f:render partial="SubpageHeader" arguments="{images: city.headerImages, topline: city.headerSubtitle, headline: city.headerTitle, settings: settings}"/>
<div class="container"> <div class="container">
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0"> <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<div class="row hidden-lg"> <div class="mb-8 lg:hidden">
<div class="col-md-12 column"> <a href="#teasers"
<a href="#teasers" @click.prevent="scrollTo('#teasers')" class="button button--full">Direkt zu den Angeboten</a> x-data="scrollTo('teasers')"
</div> class="button button--full">
Direkt zu den Angeboten
</a>
</div> </div>
</f:if> </f:if>
<div class="row"> <f:render partial="Header/Header" arguments="{layout: 8, subheader: city.name, header: city.headline}"/>
<div class="col-md-12"> <div class="grid grid-cols-3 gap-8">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: city.name, header: city.headline}"/> <div class="col-span-3 lg:col-span-2">
</div>
</div>
<div class="row">
<div class="col-md-8">
<f:render partial="City/Details" arguments="{city: city}"/> <f:render partial="City/Details" arguments="{city: city}"/>
</div> </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"> <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:if>
<f:render partial="Facts" arguments="{facts: city.facts}"/> <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="Snowreport" arguments="{snowreport: city.region.snowreport}"/>
<f:render partial="Regioninfo" arguments="{region: city.region}"/> <f:render partial="Regioninfo" arguments="{region: city.region}"/>
</f:if> </f:if>
@@ -10,12 +10,12 @@
<f:render partial="SubpageHeader" arguments="{images: concept.headerImages, topline: concept.headerSubtitle, headline: concept.headerTitle, settings: settings}"/> <f:render partial="SubpageHeader" arguments="{images: concept.headerImages, topline: concept.headerSubtitle, headline: concept.headerTitle, settings: settings}"/>
<div class="container"> <div class="container">
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<div class="row hidden-lg"> <div class="mb-8 lg:hidden">
<div class="col-md-12 column"> <a href="#teasers"
<a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full"> x-data="scrollTo('teasers')"
Direkt zu den Angeboten class="button button--full">
</a> Direkt zu den Angeboten
</div> </a>
</div> </div>
</f:if> </f:if>
<div class="row"> <div class="row">
@@ -23,18 +23,19 @@
<f:render partial="Header/Header" arguments="{layout: 8, subheader: concept.name, header: concept.headline}"/> <f:render partial="Header/Header" arguments="{layout: 8, subheader: concept.name, header: concept.headline}"/>
</div> </div>
</div> </div>
<div class="row"> <div class="grid grid-cols-3 gap-8">
<div class="col-md-8" data-rte-content> <div class="col-span-3 lg:col-span-2" data-rte-content>
{concept.description -> f:format.html()} {concept.description -> f:format.html()}
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<a id="teasers" class="anchor"></a> <div class="splide mb-4" data-slider="teasersEmbedded">
<div class="slider slider--teasers in-column"> <div class="splide__track">
<div class="row slider__items"> <ul class="splide__list">
<f:for each="{teasers}" as="teaser"> <f:for each="{teasers}" as="teaser">
<div class="col-md-4"> <li class="splide__slide">
<f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser}"/> <f:render partial="Product/Teaser" section="Teaser" arguments="{teaser: teaser}"/>
</div> </li>
</f:for> </f:for>
</ul>
</div> </div>
</div> </div>
<f:if condition="{settings.showMoreLink}"> <f:if condition="{settings.showMoreLink}">
@@ -50,20 +51,22 @@
</f:if> </f:if>
<f:if condition="{concept.descriptionExtended}">{concept.descriptionExtended -> f:format.html()}</f:if> <f:if condition="{concept.descriptionExtended}">{concept.descriptionExtended -> f:format.html()}</f:if>
</div> </div>
<div class="col-md-4"> <div class="col-span-3 lg:col-span-1">
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<p class="hidden-xs hidden-md"> <p class="hidden lg:block">
<a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full"> <a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</p> </p>
</f:if> </f:if>
<v:menu pageUid="{settings.conceptsPageUid}" levels="1"> <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"> <f:for each="{menu}" as="page">
<li> <li>
<f:link.typolink parameter="{page.uid}" <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} {page.title}
</f:link.typolink> </f:link.typolink>
</li> </li>
@@ -10,28 +10,21 @@
<f:render partial="SubpageHeader" arguments="{images: country.headerImages, topline: country.headerSubtitle, headline: country.headerTitle, settings: settings}"/> <f:render partial="SubpageHeader" arguments="{images: country.headerImages, topline: country.headerSubtitle, headline: country.headerTitle, settings: settings}"/>
<div class="container"> <div class="container">
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0"> <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<div class="row hidden-lg"> <div class="mb-8 lg:hidden">
<div class="col-md-12 column"> <a href="#teasers"
<a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full"> x-data="scrollTo('teasers')"
Direkt zu den Angeboten class="button button--full">
</a> Direkt zu den Angeboten
</div> </a>
</div> </div>
</f:if> </f:if>
<div class="row"> <f:render partial="Header/Header" arguments="{layout: 8, subheader: country.name, header: country.headline}"/>
<div class="col-md-12"> <div class="grid grid-cols-3 gap-8">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: country.name, header: country.headline}"/> <div class="col-span-3 lg:col-span-2" id="teasers">
</div>
</div>
<div class="row">
<div class="col-sm-8">
{country.description -> f:format.html()} {country.description -> f:format.html()}
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<a id="teasers" class="anchor"></a> <div class="splide mb-4" data-slider="teasersEmbedded">
<div data-slider="teasersEmbedded" <div class="splide__track">
data-splide='{"arrows": true}'
class="splide slider slider--teasers in-column">
<div class="splide__track slider__items">
<ul class="splide__list"> <ul class="splide__list">
<f:for each="{teasers}" as="teaser"> <f:for each="{teasers}" as="teaser">
<li class="splide__slide"> <li class="splide__slide">
@@ -40,10 +33,6 @@
</f:for> </f:for>
</ul> </ul>
</div> </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> </div>
<f:if condition="{settings.showMoreLink}"> <f:if condition="{settings.showMoreLink}">
<p class="text-right"> <p class="text-right">
@@ -61,9 +50,15 @@
<f:render partial="ContentSlider" arguments="{images: country.images, id: 'country-{country.uid}'}"/> <f:render partial="ContentSlider" arguments="{images: country.images, id: 'country-{country.uid}'}"/>
</f:if> </f:if>
</div> </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"> <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:if>
<f:render partial="Facts" arguments="{facts: country.facts}"/> <f:render partial="Facts" arguments="{facts: country.facts}"/>
</div> </div>
@@ -7,18 +7,14 @@
<f:section name="Main"> <f:section name="Main">
<div class="container"> <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>")'> 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>
<h2>Belegungskalender {hotel.0.data.name}</h2> <select class="form-control calendar__select" x-model="selectedIndex" x-on:change="load">
</div> <template x-for="(month, index) in selectableMonths">
<div class="col-xs-12"> <option x-bind:value="index" x-text="month.toLocaleDateString('de-DE', {year: 'numeric', month: 'long'})"></option>
<select class="form-control calendar__select" x-model="selectedIndex" x-on:change="load"> </template>
<template x-for="(month, index) in selectableMonths"> </select>
<option x-bind:value="index" x-text="month.toLocaleDateString('de-DE', {year: 'numeric', month: 'long'})"></option>
</template>
</select>
</div>
<div class="calendar__inner" x-cloak x-ref="calendarWrapper"></div> <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"> <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"/> <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:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="ep-sidebar ep-quote"> <div class="bg-gray-200 p-4 mb-8">
<div class="row"> <div class="grid grid-cols-3 gap-4">
<div class="col-xs-4"> <div class="col-span-1">
<f:if condition="{contact.0.image.0}"> <f:if condition="{contact.0.image.0}">
<f:then> <f:image
<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}" /> image="{contact.0.image.0}"
</f:then> width="120"
<f:else> class="block w-full h-auto"
<img src="https://placehold.it/120x160" class="img-responsive" alt="{contact.0.data.name}"> alt="{contact.0.data.name}" />
</f:else>
</f:if> </f:if>
</div> </div>
<div class="col-xs-8"> <div class="col-span-2">
<strong>{contact.0.data.name}</strong> <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.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> <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" }, 3: { id: "PA0211", label: "RWTH Aachen" },
4: { id: "PA0216", label: "Hochschulsport Uni Tübingen" }, 4: { id: "PA0216", label: "Hochschulsport Uni Tübingen" },
5: { id: "PA0210", label: "Hamburg" }, 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" }, 7: { id: "PA0213", label: "Uni Konstanz" },
8: { id: "PA0218", label: "Hochschulsport Darmstadt" }, 8: { id: "PA0218", label: "Hochschulsport Darmstadt" },
9: { id: "PA0020", label: "Sonstige" } 9: { id: "PA0020", label: "Sonstige" }
@@ -13,13 +13,11 @@
<f:variable name="latitude" value="{region.0.data.latitude}"/> <f:variable name="latitude" value="{region.0.data.latitude}"/>
<f:variable name="longitude" value="{region.0.data.longitude}"/> <f:variable name="longitude" value="{region.0.data.longitude}"/>
</f:if> </f:if>
<div class="row"> <div class="osm-map"
<div class="osm-map" x-data="osmMap"
x-data="osmMap" data-lat="{latitude}"
data-lat="{latitude}" data-lng="{longitude}"
data-lng="{longitude}" data-zoom="17"></div>
data-zoom="17"></div>
</div>
</f:section> </f:section>
</html> </html>
@@ -7,48 +7,67 @@
<f:layout name="Default" /> <f:layout name="Default" />
<f:section name="Main"> <f:section name="Main">
<div> <div class="max-w-screen-xl mx-auto">
<f:for each="{items}" as="item" iteration="iteration"> <f:for each="{items}" as="item" iteration="iteration">
<div class="row ep-lineup{f:if(condition: iteration.isEven, then: ' right')}"> <div class="lg:flex odd:flex-row-reverse justify-between items-end mb-16">
<div class="col-md-6"> <div class="mb-4 lg:mb-0 lg:w-1/2">
<img class="scale lazyload" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/> <img class="block w-full h-auto lazyload" data-src="{f:uri.image(image: item.image.0)}" alt="{item.data.name}"/>
</div> </div>
<div class="col-md-6 "> <div class="lg:w-1/2">
<div> <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> <span class="headline headline--secondary headline--underlined">
{item.data.description -> f:format.html()} {item.data.name -> f:format.raw()}
<div class="social"> </span>
<f:if condition="{item.data.facebook_url}"> {item.data.description -> f:format.html()}
<a href="{item.data.facebook_url}" target="_blank" title="{item.data.name} bei Facebook"> <div class="flex items-center space-x-6">
<i aria-hidden="true" class="fa fa-facebook"></i> <f:if condition="{item.data.facebook_url}">
</a> <a href="{item.data.facebook_url}" target="_blank" title="{item.data.name} bei Facebook">
</f:if> <svg class="sbw:text-sbw-primary w-8 h-8">
<f:if condition="{item.data.twitter_url}"> <use href="#icon-facebook"></use>
<a href="{item.data.twitter_url}" target="_blank" title="{item.data.name} bei Twitter"> </svg>
<i aria-hidden="true" class="fa fa-twitter"></i> </a>
</a> </f:if>
</f:if> <f:if condition="{item.data.twitter_url}">
<f:if condition="{item.data.instagram_url}"> <a href="{item.data.twitter_url}" target="_blank" title="{item.data.name} bei Twitter">
<a href="{item.data.instagram_url}" target="_blank" title="{item.data.name} bei Instagram"> <svg class="sbw:text-sbw-primary w-8 h-8">
<i aria-hidden="true" class="fa fa-instagram"></i> <use href="#icon-twitter"></use>
</a> </svg>
</f:if> </a>
<f:if condition="{item.data.youtube_url}"> </f:if>
<a href="{item.data.youtube_url}" target="_blank" title="{item.data.name} bei YouTube"> <f:if condition="{item.data.instagram_url}">
<i aria-hidden="true" class="fa fa-youtube-play"></i> <a href="{item.data.instagram_url}" target="_blank" title="{item.data.name} bei Instagram">
</a> <svg class="sbw:text-sbw-primary w-8 h-8">
</f:if> <use href="#icon-instagram"></use>
<f:if condition="{item.data.soundcloud_url}"> </svg>
<a href="{item.data.soundcloud_url}" target="_blank" title="{item.data.name} bei Soundcloud"> </a>
<i aria-hidden="true" class="fa fa-soundcloud"></i> </f:if>
</a> <f:if condition="{item.data.youtube_url}">
</f:if> <a href="{item.data.youtube_url}" target="_blank" title="{item.data.name} bei YouTube">
</div> <svg class="sbw:text-sbw-primary w-8 h-8">
</div> <use href="#icon-youtube"></use>
</div> </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> </div>
</f:for> </f:for>
</div> </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> </f:section>
</html> </html>
@@ -5,7 +5,7 @@
<f:section name="Main"> <f:section name="Main">
<f:spaceless> <f:spaceless>
<f:if condition="{menu}"> <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:for each="{menu}" as="page">
<f:if condition="{page.content}"> <f:if condition="{page.content}">
<f:for each="{page.content}" as="element"> <f:for each="{page.content}" as="element">
@@ -13,7 +13,9 @@
<li> <li>
<a href="{page.link}#c{element.data.uid}" <a href="{page.link}#c{element.data.uid}"
class="btn btn-warning ep-sidebar" 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> </li>
</f:if> </f:if>
</f:for> </f:for>
@@ -5,18 +5,18 @@
<f:section name="Main"> <f:section name="Main">
<f:if condition="{menu}"> <f:if condition="{menu}">
<ul> <ul class="list-none m-0 p-0 space-y-2">
<f:for each="{menu}" as="page"> <f:for each="{menu}" as="page">
<li> <li>
<a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}"> <a href="{page.link}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{page.title}">
<span>{page.title}</span> {page.title}
</a> </a>
<f:if condition="{page.content}"> <f:if condition="{page.content}">
<ul> <ul>
<f:for each="{page.content}" as="element"> <f:for each="{page.content}" as="element">
<li> <li>
<a href="{page.link}#c{element.data.uid}"{f:if(condition: page.target, then: ' target="{page.target}"')} title="{element.data.header}"> <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> </a>
</li> </li>
</f:for> </f:for>
@@ -5,11 +5,11 @@
<f:section name="Main"> <f:section name="Main">
<f:if condition="{menu}"> <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"> <f:for each="{menu}" as="page">
<li> <li>
<f:link.typolink parameter="{page.data.uid}" <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} {page.data.title}
</f:link.typolink> </f:link.typolink>
</li> </li>
@@ -1,13 +1,11 @@
<html data-namespace-typo3-fluid="true" lang="en" <html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers" 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">
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <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" src="https://bpn.ep-reisen.de/buspronet/anmeldung_news.php"
width="100%" height="100"></iframe> width="100%" height="100"></iframe>
</f:section> </f:section>
@@ -1,14 +1,13 @@
<html data-namespace-typo3-fluid="true" lang="en" <html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers" xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="video"> <div class="relative w-full aspect-w-16 aspect-h-9">
<iframe class="video__frame" width="560" height="315" frameborder="0" allowfullscreen <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> src="{ep:uri.video(value: data.header_link, layout: data.layout)}"></iframe>
</div> </div>
</f:section> </f:section>
@@ -21,24 +21,20 @@
</f:section> </f:section>
<f:section name="Header"> <f:section name="Header">
<div class="row"> <f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
<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:section> </f:section>
<f:section name="Grid"> <f:section name="Grid">
<div class="row"> <div class="grid grid-cols-2 gap-8">
<div class="col-md-6"> <div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_51 -> f:format.raw()} {data.tx_gridelements_view_column_51 -> f:format.raw()}
</div> </div>
<div class="col-md-6 slider"> <div class="col-span-2 md:col-span-1">
<div class="row slider__items"> <div class="grid grid-cols-2 gap-8">
<div class="col-md-6"> <div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_52 -> f:format.raw()} {data.tx_gridelements_view_column_52 -> f:format.raw()}
</div> </div>
<div class="col-md-6"> <div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_53 -> f:format.raw()} {data.tx_gridelements_view_column_53 -> f:format.raw()}
</div> </div>
</div> </div>
@@ -22,22 +22,18 @@
</f:section> </f:section>
<f:section name="Header"> <f:section name="Header">
<div class="row"> <f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
<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:section> </f:section>
<f:section name="Grid"> <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()}"> <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()} {data.tx_gridelements_view_column_21 -> f:format.raw()}
</div> </div>
</f:if> </f:if>
<f:if condition="{data.tx_gridelements_view_column_22 -> v:format.trim()}"> <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()} {data.tx_gridelements_view_column_22 -> f:format.raw()}
</div> </div>
</f:if> </f:if>
@@ -22,32 +22,28 @@
</f:section> </f:section>
<f:section name="Header"> <f:section name="Header">
<div class="row"> <f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
<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:section> </f:section>
<f:section name="Grid"> <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()}"> <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()} {data.tx_gridelements_view_column_41 -> f:format.raw()}
</div> </div>
</f:if> </f:if>
<f:if condition="{data.tx_gridelements_view_column_42 -> v:format.trim()}"> <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()} {data.tx_gridelements_view_column_42 -> f:format.raw()}
</div> </div>
</f:if> </f:if>
<f:if condition="{data.tx_gridelements_view_column_43 -> v:format.trim()}"> <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()} {data.tx_gridelements_view_column_43 -> f:format.raw()}
</div> </div>
</f:if> </f:if>
<f:if condition="{data.tx_gridelements_view_column_44 -> v:format.trim()}"> <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()} {data.tx_gridelements_view_column_44 -> f:format.raw()}
</div> </div>
</f:if> </f:if>
@@ -1,7 +1,6 @@
<html data-namespace-typo3-fluid="true" lang="en" <html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/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"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Default"/> <f:layout name="Default"/>
@@ -22,27 +21,23 @@
</f:section> </f:section>
<f:section name="Header"> <f:section name="Header">
<div class="row"> <f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
<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:section> </f:section>
<f:section name="Grid"> <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()}"> <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()} {data.tx_gridelements_view_column_31 -> f:format.raw()}
</div> </div>
</f:if> </f:if>
<f:if condition="{data.tx_gridelements_view_column_32 -> v:format.trim()}"> <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()} {data.tx_gridelements_view_column_32 -> f:format.raw()}
</div> </div>
</f:if> </f:if>
<f:if condition="{data.tx_gridelements_view_column_33 -> v:format.trim()}"> <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()} {data.tx_gridelements_view_column_33 -> f:format.raw()}
</div> </div>
</f:if> </f:if>
@@ -21,26 +21,24 @@
</f:section> </f:section>
<f:section name="Header"> <f:section name="Header">
<div class="row"> <f:render partial="Header/Header" arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
<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:section> </f:section>
<f:section name="Grid"> <f:section name="Grid">
<div class="col-md-6 slider"> <div class="grid grid-cols-2 gap-8">
<div class="row slider__items"> <div class="col-span-2 md:col-span-1">
<div class="col-md-6"> <div class="grid grid-cols-2 gap-8">
{data.tx_gridelements_view_column_61 -> f:format.raw()} <div class="col-span-2 md:col-span-1">
</div> {data.tx_gridelements_view_column_52 -> f:format.raw()}
<div class="col-md-6"> </div>
{data.tx_gridelements_view_column_62 -> f:format.raw()} <div class="col-span-2 md:col-span-1">
{data.tx_gridelements_view_column_53 -> f:format.raw()}
</div>
</div> </div>
</div> </div>
</div> <div class="col-span-2 md:col-span-1">
<div class="col-md-6"> {data.tx_gridelements_view_column_51 -> f:format.raw()}
{data.tx_gridelements_view_column_63 -> f:format.raw()} </div>
</div> </div>
</f:section> </f:section>
@@ -4,32 +4,24 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="container"> <div class="container">
<div class="row"> <div class="page-header">
<div class="col-xs-12"> <div class="media">
<div class="page-header"> <div class="media-left media-middle">
<div class="media"> <f:image class="media-object" width="128" src="EXT:ep_theme/Resources/Public/images/logo_wide.svg" alt=""/>
<div class="media-left media-middle"> </div>
<f:image class="media-object" width="128" src="EXT:ep_theme/Resources/Public/images/logo_wide.svg" alt=""/> <div class="media-body">
</div> <h1 class="media-heading">Preisberechnung <small>{hotel.name}</small></h1>
<div class="media-body">
<h1 class="media-heading">Preisberechnung <small>{hotel.name}</small></h1>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <groups-price-calculator
<div class="col-xs-12"> :configs='{configs -> f:format.raw()}'
<groups-price-calculator :boards='{boards -> f:format.raw()}'
:configs='{configs -> f:format.raw()}' :options='{options -> f:format.raw()}'
:boards='{boards -> f:format.raw()}' endpoint="{ep:uri.ajax(action: 'processForm', controller: 'AjaxGroupsPrice', pageUid: settings.defaultAjaxUid, arguments: '{hotel: hotel}')}"
:options='{options -> f:format.raw()}' loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
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>
>
</groups-price-calculator>
</div>
</div>
</div> </div>
</html> </html>
@@ -9,41 +9,45 @@
<f:render partial="SubpageHeader" arguments="{images: hotel.headerImages, topline: hotel.headerSubtitle, headline: hotel.headerTitle, settings: settings}"/> <f:render partial="SubpageHeader" arguments="{images: hotel.headerImages, topline: hotel.headerSubtitle, headline: hotel.headerTitle, settings: settings}"/>
<div class="container"> <div class="container">
<f:if condition="{v:content.get(column: 1) -> f:count()} > 0"> <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
<div class="row hidden-lg"> <div class="mb-8 lg:hidden">
<div class="col-md-12 column"> <a href="#teasers"
<a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full"> x-data="scrollTo('teasers')"
Direkt zu den Angeboten class="button button--full">
</a> Direkt zu den Angeboten
</div> </a>
</div> </div>
</f:if> </f:if>
<div class="row"> <f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/>
<div class="col-md-12"> <div class="grid grid-cols-3 gap-8">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/> <div class="col-span-3 md:col-span-2">
</div>
</div>
<div class="row">
<div class="col-md-8">
<f:render partial="Hotel/Details" arguments="{hotel: hotel, teasers: teasers, filterSettings: filterSettings, showNonBookableHint: 1}"/> <f:render partial="Hotel/Details" arguments="{hotel: hotel, teasers: teasers, filterSettings: filterSettings, showNonBookableHint: 1}"/>
</div> </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"> <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:if>
<f:render partial="Facts" arguments="{facts: hotel.facts}"/> <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="Snowreport" arguments="{snowreport: hotel.region.snowreport}"/>
<f:render partial="Regioninfo" arguments="{region: hotel.region}"/> <f:render partial="Regioninfo" arguments="{region: hotel.region}"/>
</f:if> </f:if>
<div class="ep-sidebar ep-snow"> <div class="bg-gray-200 p-4">
<p><strong>Lage</strong></p> <p><strong>Lage</strong></p>
<div> <div>
<f:format.raw>
<div class="osm-map" <div class="osm-map"
x-data="osmMap" x-data="osmMap"
data-lat="{hotel.latitude}" data-lat="{hotel.latitude}"
data-lng="{hotel.longitude}" data-lng="{hotel.longitude}"
data-zoom="12" data-zoom="12"
data-link="{f:uri.typolink(parameter: hotel.externalLink)}"></div> data-link="{f:uri.typolink(parameter: hotel.externalLink)}"></div>
</f:format.raw>
</div> </div>
</div> </div>
</div> </div>
@@ -1,53 +1,36 @@
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" <html xmlns="http://www.w3.org/1999/xhtml" lang="en"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers" xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="row"> <f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/>
<div class="col-md-12"> <div class="grid grid-cols-2 gap-8">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: hotel.name, header: hotel.headline}"/> <div class="col-span-2 md:col-span-1">
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-12">
<f:render partial="ContentSlider" arguments="{id: hotel.uid, images: hotel.images, thumbnails: 0}"/> <f:render partial="ContentSlider" arguments="{id: hotel.uid, images: hotel.images, thumbnails: 0}"/>
</div> </div>
<div class="col-md-6 col-xs-12"> <div class="col-span-2 md:col-span-1">
{hotel.description -> f:format.html()} {hotel.description -> f:format.html()}
</div> </div>
</div> </div>
<f:if condition="{product.bookable}"> <f:if condition="{product.bookable}">
<div class="row"> <h2>Buchungsoptionen</h2>
<div class="col-xs-12"> <div class="ajax-content-wrapper"
<h2>Buchungsoptionen</h2> x-data="ajaxContent('{ep:uri.ajax(action: 'pricetableHtml', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: product, hotel: hotel}', format: 'html')}')">
<div class="ajax-content-wrapper" <div class="ajax-content" x-ref="container"></div>
x-data="ajaxContent('{ep:uri.ajax(action: 'pricetableHtml', controller: 'AjaxTable', pageUid: settings.defaultAjaxUid, arguments: '{product: product, hotel: hotel}', format: 'html')}')"> <div x-ref="trigger">
<div class="ajax-content" x-ref="container"></div> <img src="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}" alt="Loading" title="Loading">
<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>
</div> </div>
</div> </div>
</f:if> </f:if>
<div class="row"> <h2>Ausstattung</h2>
<div class="col-xs-12"> {hotel.features -> f:format.html()}
<h2>Ausstattung</h2> <h2>Zimmerarten / Apartments</h2>
{hotel.features -> f:format.html()} {hotel.roomTypes -> f:format.html()}
<h2>Zimmerarten / Apartments</h2>
{hotel.roomTypes -> f:format.html()}
</div>
</div>
<f:if condition="{hotel.additionalInformation}"> <f:if condition="{hotel.additionalInformation}">
<div class="row"> <h2>Zusatzinformationen</h2>
<div class="col-xs-12"> {hotel.additionalInformation -> f:format.html()}
<h2>Zusatzinformationen</h2>
{hotel.additionalInformation -> f:format.html()}
</div>
</div>
</f:if> </f:if>
</f:section> </f:section>
@@ -6,7 +6,7 @@
<f:section name="Main"> <f:section name="Main">
<ep:container data="{data}"> <ep:container data="{data}">
<div class="osm-map" <div class="w-full aspect-w-16 aspect-h-9 mb-8"
x-data="osmMap" x-data="osmMap"
data-markers='{markerData -> f:format.raw()}'></div> data-markers='{markerData -> f:format.raw()}'></div>
</ep:container> </ep:container>
@@ -10,67 +10,45 @@
<article> <article>
<f:render partial="Product/HeaderDetail" arguments="{_all}"/> <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
<div class="container" id="detail" x-data='productDetail({ <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>", <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>", dates: "{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', format: 'json', pageUid: settings.defaultAjaxUid)}",
travelAlert: "<f:format.raw>{f:uri.typolink(parameter: settings.travelAlertPageUid)}</f:format.raw>" 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"> <f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
<div class="row"> <div class="flex flex-col lg:flex-row-reverse lg:items-start">
<div class="col-md-12"> <div class="w-full lg:w-1/3">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/> <div class="lg:pl-4">
</div> <div class="grid grid-cols-2 gap-2">
</div> <f:if condition="{settings.hotelOnTop}">
<div class="row"> <f:then>
<div class="col-md-4 col-md-push-8"> <button class="button button--light col-span-1 md:col-span-2"
<div class="row"> x-bind:class="{ 'button--active': show === 'hotel'}"
<div class="col-xs-12"> x-on:click.prevent="show = 'hotel'">Unterkunft</button>
<f:if condition="{settings.hotelOnTop}"> </f:then>
<f:then> <f:else>
<button class="button button--light button--sidebar" <button class="button button--light col-span-1 md:col-span-2"
x-bind:class="{ 'button--active': show === 'hotel'}" x-bind:class="{ 'button--active': show === 'dates'}"
x-on:click.prevent="show = 'hotel'">Unterkunft</button> x-on:click.prevent="show = 'dates'">Termine/Preise</button>
</f:then> </f:else>
<f:else> </f:if>
<button class="button button--light button--sidebar" <button class="button button--light col-span-1 md:col-span-2"
x-bind:class="{ 'button--active': show === 'dates'}" x-bind:class="{ 'button--active': show === 'region'}"
x-on:click.prevent="show = 'dates'">Termine/Preise</button> x-on:click.prevent="show = 'region'">Gebiet</button>
</f:else> <button class="button button--light col-span-1 md:col-span-2"
</f:if> x-bind:class="{ 'button--active': show === 'city'}"
</div> x-on:click.prevent="show = 'city'">Ort</button>
</div> <f:if condition="{product.journey}">
<div class="row"> <button class="button button--light col-span-1 md:col-span-2"
<div class="col-xs-6 col-md-12"> x-bind:class="{ 'button--active': show === 'journey'}"
<f:if condition="{settings.hotelOnTop}"> x-on:click.prevent="show = 'journey'">Anreise</button>
<f:then> </f:if>
<button class="button button--light button--sidebar" <f:if condition="{product.faqs}">
x-bind:class="{ 'button--active': show === 'dates'}" <button class="button button--light col-span-1 md:col-span-2"
x-on:click.prevent="show = 'dates'">Termine/Preise</button> x-data="scrollTo('faq')">FAQ</button>
</f:then> </f:if>
<f:else> <div class="col-span-2">
<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">
<p> <p>
<a href="#" x-data="watchlistToggle('{hotel.uid}:{product.uid}')" x-bind="trigger"> <a href="#" x-data="watchlistToggle('{hotel.uid}:{product.uid}')" x-bind="trigger">
<span data-microtip-position="top" x-bind:aria-label="label" role="tooltip"> <span data-microtip-position="top" x-bind:aria-label="label" role="tooltip">
@@ -88,48 +66,13 @@
</p> </p>
</div> </div>
</div> </div>
<div class="hidden-xs"> <div class="hidden lg:block">
<f:render section="Calendar" arguments="{_all}"/> <f:render section="Sidebar" 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> </div>
</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 --> <!-- Loader -->
<div x-show="loading" class="flex items-center space-x-2 mb-8"> <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"/> <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}"/> <f:render partial="Journey/Details" arguments="{journey: product.journey, bars: 1}"/>
</div> </div>
<!-- /Journey --> <!-- /Journey -->
<div class="hidden-md hidden-lg"> <div class="md:hidden">
<f:render section="Calendar" arguments="{_all}"/> <f:render section="Sidebar" 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> </div>
</div> </div>
</div> </div>
@@ -237,29 +147,80 @@
<f:render partial="Faq" arguments="{faqs: product.faqs, settings: settings}"/> <f:render partial="Faq" arguments="{faqs: product.faqs, settings: settings}"/>
</f:section> </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"> <f:section name="DatesTable">
<div class="dates-table-wrapper" x-show="bookable"> <div x-show="bookable">
<div class="ep-headbar">Buchungsoptionen {hotel.name}</div> <div class="ep-headbar">
Buchungsoptionen {hotel.name}
</div>
<f:render section="PriceToggle"/> <f:render section="PriceToggle"/>
<div class="table-responsive"> <div class="w-full max-w-full overflow-x-scroll mb-4">
<table class="table table-striped dates-table"> <table class="min-w-full border-collapse">
<thead> <thead>
<tr> <tr>
<th>Termin</th> <th>
<th> Termin
<span data-microtip-position="bottom" aria-label="Nächte" role="tooltip"> </th>
<i class="fa fa-bed"></i> <th>
</span> <span data-microtip-position="bottom" aria-label="Nächte" role="tooltip">
</th> <svg class="w-4 h-4">
<th>Preis ab</th> <use href="#icon-bed"></use>
<th>inkl.</th> </svg>
<th class="hidden-xs"></th> </span>
</tr> </th>
<th>
Preis ab
</th>
<th>
inkl.
</th>
<th class="hidden lg:table-cell"></th>
</tr>
</thead> </thead>
<tbody> <tbody>
<template x-for="(row, index) in datesRows" x-bind:key="row.dateUid"> <template x-for="(row, index) in datesRows" x-bind:key="row.dateUid">
<tr x-bind:class="{ 'hidden': index > 4 && !showAll }"> <tr class="even:bg-gray-200" x-bind:class="{ 'hidden': index > 4 && !showAll }">
<td class="dates-table__cell dates-table__cell--date"> <td class="px-2 py-1">
<template x-if="bookable && row.available && !row.isHideBookingButton"> <template x-if="bookable && row.available && !row.isHideBookingButton">
<a class="dates-table__date" href="#" <a class="dates-table__date" href="#"
x-on:click.prevent="loadPrices(row.dateUid)" x-on:click.prevent="loadPrices(row.dateUid)"
@@ -277,27 +238,32 @@
<span x-text="row.dateStart + ' - ' + row.dateEnd"></span> <span x-text="row.dateStart + ' - ' + row.dateEnd"></span>
</template> </template>
</td> </td>
<td class="dates-table__cell dates-table__cell--nights" x-text="row.dateNights"></td> <td class="px-2 py-1"
<td class="dates-table__cell dates-table__cell--price"> x-text="row.dateNights"></td>
<span class="dates-table__pseudo-price" x-show="row.datePseudoPrice" x-text="row.datePseudoPrice + ' €'"></span> <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> <strong x-text="calculatePrice(row.dateMinPrice, row.dateBusPrice, row.dateDiscount) + ' €'"></strong>
</td> </td>
<td class="dates-table__cell dates-table__cell--icons"> <td class="px-2 py-1">
<span class="icon-wrapper hidden-xs hidden-sm"> <div class="hidden md:flex items-center space-x-2">
<span x-show="showBusIcon(row.dateBusPrice, row.dateBusIncluded)" data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip"> <div x-show="showBusIcon(row.dateBusPrice, row.dateBusIncluded)" data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip">
<i class="fa fa-bus"></i> <svg class="w-4 h-4">
</span> <use href="#icon-bus"></use>
<span x-show="row.dateSkipassIncluded" data-microtip-position="top" x-bind:aria-label="row.season === 's' ? 'Bergbahnticket inklusive' : 'Skipass inklusive'" role="tooltip"> </svg>
<i class="fa fa-tag"></i> </div>
</span> <div x-show="row.dateSkipassIncluded" data-microtip-position="top" x-bind:aria-label="row.season === 's' ? 'Bergbahnticket inklusive' : 'Skipass inklusive'" role="tooltip">
</span> <svg class="w-4 h-4">
<button class="button button--light button--small hidden-xs" <use href="#icon-tag"></use>
x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid" </svg>
data-microtip-position="top" aria-label="Alle Inklusivleistungen anzeigen" role="tooltip">Leistungen</button> </div>
<a href="#" x-on:click.prevent="$store.show.modal = 'services-' + row.dateUid" <button class="button button--light button--small hidden md:block"
class="hidden-sm hidden-md hidden-lg"><i class="fa fa-info-circle"></i></a> 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>
<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> <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.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> <a x-show="row.isHideBookingButton" x-bind:href="uris.travelAlertUrl" class="button button--small button--mute">Reisen-Alert</a>
@@ -309,19 +275,24 @@
</table> </table>
</div> </div>
<template x-if="datesRows.length > 5 || altProductLink"> <template x-if="datesRows.length > 5 || altProductLink">
<div class="row dates-table__links"> <div class="grid grid-cols-2 gap-8 pb-4">
<div class="col-xs-12 col-md-6"> <button x-show="datesRows.length > 5"
<a x-show="datesRows.length > 5" href="#" x-on:click.prevent="showAll = !showAll"> x-on:click.prevent="showAll = !showAll"
<i class="fa" x-bind:class="{ 'fa-minus-circle': showAll , 'fa-plus-circle': !showAll }"></i> class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary">
<span x-text="showAll ? 'Weniger Termine anzeigen' : 'Alle Termine anzeigen'"></span> <svg class="w-4 h-4">
</a> <use x-bind:href="showAll ? '#icon-minus-circle' : '#icon-plus-circle'"></use>
</div> </svg>
<span x-text="showAll ? 'Weniger Termine anzeigen' : 'Alle Termine anzeigen'"></span>
</button>
<template x-if="altProductLink"> <template x-if="altProductLink">
<div class="col-xs-12 col-md-6"> <a x-bind:href="altProductLink"
<a x-bind:href="altProductLink" x-bind:title="altLabel" class="dates-table__altlink"> x-bind:title="altLabel"
<i class="fa fa-arrow-circle-right"></i> <span x-text="altLabel"></span> class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary">
</a> <svg class="w-4 h-4">
</div> <use href="#icon-arrow-circle-right"></use>
</svg>
<span x-text="altLabel"></span>
</a>
</template> </template>
</div> </div>
</template> </template>
@@ -356,57 +327,81 @@
</f:section> </f:section>
<f:section name="PriceTable"> <f:section name="PriceTable">
<div class="price-table-wrapper"> <div>
<div class="row ep-headbar"> <div class="row ep-headbar">
<div class="col-xs-6">Buchungsoptionen</div> <div class="col-xs-6">Buchungsoptionen</div>
<div class="col-xs-6 text-right" x-text="dateRange"></div> <div class="col-xs-6 text-right" x-text="dateRange"></div>
</div> </div>
<f:render section="PriceToggle"/> <f:render section="PriceToggle"/>
<div class="table-responsive"> <div class="w-full max-w-full overflow-x-scroll mb-4">
<table class="table table-striped pricetable"> <table class="min-w-full border-collapse">
<thead> <thead>
<tr> <tr>
<th>Zimmertyp</th> <th>
<th>Preis</th> Zimmertyp
<th>inkl.</th> </th>
<th></th> <th>
<th class="hidden-xs hidden-md"></th> Preis
</tr> </th>
<th>
inkl.
</th>
<th></th>
<th class="hidden lg:table-cell"></th>
</tr>
</thead> </thead>
<tbody> <tbody>
<template x-for="(row, index) in pricesRows" x-bind:key="row.roomBusProId"> <template x-for="(row, index) in pricesRows" x-bind:key="row.roomBusProId">
<tr> <tr class="even:bg-gray-200">
<td style="white-space: normal"> <td class="px-2 py-1">
<span x-show="row.isHideBookingButton || !row.roomAvailable" x-text="row.roomName"></span> <span x-show="row.isHideBookingButton || !row.roomAvailable" x-text="row.roomName"></span>
<a x-show="!row.isHideBookingButton && row.roomAvailable" class="pricetable__room-label" <a x-show="!row.isHideBookingButton && row.roomAvailable"
x-bind:href="row.bookingUrl" target="_blank" x-text="row.roomName"></a> x-bind:href="row.bookingUrl" target="_blank"
<div class="hidden-lg" x-show="!row.isHideBookingButton && row.roomAvailable"> x-text="row.roomName"></a>
<a class="button button--small button--action" <a class="button button--small button--action lg:hidden"
x-bind:href="row.bookingUrl" target="_blank">Jetzt buchen</a> x-show="!row.isHideBookingButton && row.roomAvailable"
</div> x-bind:href="row.bookingUrl" target="_blank">
<div class="hidden-lg" x-show="!row.roomAvailable"> Jetzt buchen
<span class="label label-default">ausgebucht</span> </a>
<div class="lg:hidden"
x-show="!row.roomAvailable">
<span class="label label-default">
ausgebucht
</span>
</div> </div>
</td> </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> x-text="calculatePrice(row.roomPrice, row.roomBusPrice, row.roomDiscount) + ' €'"></td>
<td> <td class="px-2 py-1">
<span x-show="showBusIcon(row.roomBusPrice, row.dateBusIncluded)" data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip"> <div class="flex items-center space-x-1">
<i class="fa fa-bus"></i> <span x-show="showBusIcon(row.roomBusPrice, row.dateBusIncluded)" data-microtip-position="top" aria-label="Busfahrt inklusive" role="tooltip">
</span> <svg class="w-4 h-4">
<span x-show="row.dateSkipassIncluded" data-microtip-position="top" x-bind:aria-label="row.season === 's' ? 'Bergbahnticket inklusive' : 'Skipass inklusive'" role="tooltip"> <use href="#icon-bus"></use>
<i class="fa fa-tag"></i> </svg>
</span> </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> <td class="px-2 py-1">
<button x-show="row.roomHasOptionalServices && row.roomAvailable" <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" x-on:click.prevent="$store.show.modal = 'optional-services-' + row.roomUid"
data-microtip-position="top" aria-label="Alle Zusatzleistungen anzeigen" role="tooltip">Optionen</button> data-microtip-position="top" aria-label="Alle Zusatzleistungen anzeigen" role="tooltip">
<a href="#" x-show="row.roomHasOptionalServices && row.roomAvailable" class="hidden-sm hidden-md hidden-lg" Optionen
x-on:click.prevent="$store.show.modal = 'optional-services-' + row.roomUid"><i class="fa fa-info-circle"></i></a> </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>
<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" <a class="button button--small button--action" x-show="row.roomAvailable && !row.isHideBookingButton"
x-bind:href="row.bookingUrl" target="_blank">Buchen</a> x-bind:href="row.bookingUrl" target="_blank">Buchen</a>
<a class="button button--small button--mute" x-show="row.isHideBookingButton" <a class="button button--small button--mute" x-show="row.isHideBookingButton"
@@ -469,37 +464,47 @@
</f:section> </f:section>
<f:section name="PriceToggle"> <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"> <template x-if="hasSurcharge">
<a href="#" x-on:click.prevent="addBus = !addBus"> <button x-on:click.prevent="addBus = !addBus"
<span x-show="addBus"> class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary">
<i class="fa fa-arrow-circle-right"></i> Preise für Eigenanreise anzeigen <svg class="w-4 h-4">
</span> <use href="#icon-arrow-circle-right"></use>
<span x-show="! addBus"> </svg>
<i class="fa fa-arrow-circle-right"></i> Preise für Busanreise anzeigen <span x-show="addBus">
</span> Preise für Eigenanreise anzeigen
</a> </span>
<span x-show="! addBus">
Preise für Busanreise anzeigen
</span>
</button>
</template> </template>
<template x-if="hasDiscount"> <template x-if="hasDiscount">
<a href="#" x-on:click.prevent="discountBus = !discountBus"> <button x-on:click.prevent="discountBus = !discountBus"
<span x-show="discountBus"> class="flex items-center space-x-1 focus:outline-none ep:text-ep-primary">
<i class="fa fa-arrow-circle-right"></i> Preise für Busanreise anzeigen <svg class="w-4 h-4">
</span> <use href="#icon-arrow-circle-right"></use>
</svg>
<span x-show="discountBus">
Preise für Busanreise anzeigen
</span>
<span x-show="!discountBus"> <span x-show="!discountBus">
<i class="fa fa-arrow-circle-right"></i> Preise für Eigenanreise anzeigen Preise für Eigenanreise anzeigen
</span> </span>
</a> </button>
</template> </template>
</div> </div>
</f:section> </f:section>
<f:section name="DaytripDateSelect"> <f:section name="DaytripDateSelect">
<div class="date-select-wrapper" x-data='daytripDateSelect({ <div x-data='daytripDateSelect({
hotelName: "<f:format.raw>{hotel.name}</f:format.raw>", <f:format.raw>
hotelUid: <f:format.raw>{hotel.uid}</f:format.raw>, hotelName: "{hotel.name}",
productUid: <f:format.raw>{product.uid}</f:format.raw>, hotelUid: {hotel.uid},
contingentEndpointUri: "<f:format.raw>{ep:uri.ajax(action: 'list', controller: 'AjaxContingent', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>", productUid: {product.uid},
roomsEndpointUri: "<f:format.raw>{ep:uri.ajax(action: 'rooms', controller: 'AjaxContingent', format: 'json', pageUid: settings.defaultAjaxUid)}</f:format.raw>" 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="ep-headbar" x-text="headerLabel"></div>
<div class="row"> <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}"/> <f:render partial="SubpageHeader" arguments="{images: region.headerImages, topline: region.headerSubtitle, headline: region.headerTitle, settings: settings, badge: badge}"/>
<div class="container"> <div class="container">
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<div class="row hidden-lg"> <div class="mb-8 lg:hidden">
<div class="col-md-12 column"> <a href="#teasers"
<a href="#teasers" @click.prevent="scrollTo('#teasers')" class="button button--full"> x-data="scrollTo('teasers')"
Direkt zu den Angeboten class="button button--full">
</a> Direkt zu den Angeboten
</div> </a>
</div> </div>
</f:if> </f:if>
<div class="row"> <f:render partial="Header/Header" arguments="{layout: 8, subheader: region.name, header: region.headline}"/>
<div class="col-md-12"> <div class="grid grid-cols-3 gap-8">
<f:render partial="Header/Header" arguments="{layout: 8, subheader: region.name, header: region.headline}"/> <div class="col-span-3 lg:col-span-2">
</div>
</div>
<div class="row">
<div class="col-md-8">
<f:render partial="Region/Details" arguments="{region: region, teasers: teasers, filterSettings: filterSettings}"/> <f:render partial="Region/Details" arguments="{region: region, teasers: teasers, filterSettings: filterSettings}"/>
</div> </div>
<div class="col-md-4"> <div class="col-span-3 lg:col-span-1">
<f:if condition="{teasers}"> <f:if condition="{teasers}">
<p class="hidden-xs hidden-md"> <p class="hidden lg:block">
<a @click.prevent="scrollTo('#teasers')" href="#teasers" class="button button--full"> <a href="#teasers"
x-data="scrollTo('teasers')"
class="button button--full">
Direkt zu den Angeboten Direkt zu den Angeboten
</a> </a>
</p> </p>
</f:if> </f:if>
<f:if condition="{region.season} == 'w'"> <f:if condition="{region.winter}">
<f:render partial="Facts" arguments="{facts: region.facts}"/> <f:render partial="Facts" arguments="{facts: region.facts}"/>
<f:render partial="Snowreport" arguments="{snowreport: region.snowreport}"/> <f:render partial="Snowreport" arguments="{snowreport: region.snowreport}"/>
<f:render partial="Regioninfo" arguments="{region: region}"/> <f:render partial="Regioninfo" arguments="{region: region}"/>
@@ -46,7 +44,7 @@
</div> </div>
</div> </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> </f:section>
</html> </html>
@@ -13,7 +13,7 @@
datePresets: {settings.datePickerPresets -> f:format.json()} datePresets: {settings.datePickerPresets -> f:format.json()}
</f:format.raw> </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" <f:form action="processSearch" controller="Search" method="post" name="searchParams"
object="{searchParams}" pluginName="searchresult" extensionName="epproducts" object="{searchParams}" pluginName="searchresult" extensionName="epproducts"
pageUid="{settings.defaultSearchPageUid}" additionalAttributes="{ref: 'form'}"> pageUid="{settings.defaultSearchPageUid}" additionalAttributes="{ref: 'form'}">
@@ -20,9 +20,9 @@
datePresets: {settings.datePickerPresets -> f:format.json()} datePresets: {settings.datePickerPresets -> f:format.json()}
</f:format.raw> </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 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" /> <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" />
<span>Suchergebnis wird geladen...</span> <span>Suchergebnis wird geladen...</span>
</div> </div>
+9 -2
View File
@@ -25,7 +25,7 @@ module.exports = {
theme: { theme: {
container: { container: {
center: true, center: true,
padding: '2rem', padding: '1rem',
}, },
fontFamily: { fontFamily: {
'sans': [ 'Lato', 'sans-serif' ], 'sans': [ 'Lato', 'sans-serif' ],
@@ -85,6 +85,9 @@ module.exports = {
'sbw': { 'sbw': {
'primary': '#f0bc44', 'primary': '#f0bc44',
'secondary': '#ee525a', 'secondary': '#ee525a',
'primary-light': '#f0bc44',
'primary-medium': '#f0bc44',
'primary-dark': '#f0bc44',
'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(), 'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(), 'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
}, },
@@ -102,6 +105,7 @@ module.exports = {
}, },
}, },
height: { height: {
'96': '20rem',
'128': '32rem', '128': '32rem',
}, },
inset: { inset: {
@@ -114,17 +118,20 @@ module.exports = {
}, },
}, },
variants: { 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' ]), textColor: ({ after }) => after([ 'ep', 'ep:hover', 'ep:focus', 'sbw', 'sbw:hover', 'snz', 'snz:hover', 'uch', 'uch:hover' ]),
borderColor: ({ after }) => after([ 'ep', 'sbw','snz', 'uch' ]), borderColor: ({ after }) => after([ 'ep', 'sbw','snz', 'uch' ]),
display: ({ after }) => after(['group-hover']), display: ({ after }) => after(['group-hover']),
visibility: ({ after }) => after(['group-hover']), visibility: ({ after }) => after(['group-hover']),
opacity: ({ after }) => after(['group-hover']), opacity: ({ after }) => after(['group-hover']),
rotate: ({ after }) => after(['group-hover']), rotate: ({ after }) => after(['group-hover']),
flexDirection: ({ after }) => after(['even', 'odd']),
padding: ({ after }) => after(['even', 'odd']),
}, },
plugins: [ plugins: [
require('tailwindcss-multi-theme'), require('tailwindcss-multi-theme'),
require('@tailwindcss/custom-forms'), require('@tailwindcss/custom-forms'),
require('@tailwindcss/aspect-ratio'),
plugin(function ({addVariant, e}) { plugin(function ({addVariant, e}) {
addVariant('first-type', ({modifySelectors, separator}) => { addVariant('first-type', ({modifySelectors, separator}) => {
modifySelectors(({className}) => { modifySelectors(({className}) => {