WIP Migrate product detail page
This commit is contained in:
Björn Fromme
Generated
+1
-1
@@ -62,7 +62,7 @@
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
|
||||
+7
-10
@@ -3,9 +3,9 @@ import { useDispatch } from 'stimulus-use'
|
||||
|
||||
export default class extends Controller {
|
||||
|
||||
static classes = [ 'buttonActive' ]
|
||||
static classes = [ 'button', 'buttonActive' ]
|
||||
|
||||
static targets = [ 'tab', 'pulldown', 'label' ]
|
||||
static targets = [ 'button', 'tab' ]
|
||||
|
||||
static values = { activeTab: String }
|
||||
|
||||
@@ -17,14 +17,9 @@ export default class extends Controller {
|
||||
this.activeTabValue = this.tabTargets[0].dataset.tab
|
||||
}
|
||||
|
||||
togglePulldown() {
|
||||
this.pulldownTarget.classList.toggle('hidden')
|
||||
}
|
||||
|
||||
select(e) {
|
||||
let selectedTab = e.currentTarget.dataset.tab
|
||||
this.activeTabValue = selectedTab
|
||||
this.pulldownTarget.classList.toggle('hidden', true)
|
||||
this.dispatch('selected', selectedTab)
|
||||
}
|
||||
|
||||
@@ -33,9 +28,11 @@ export default class extends Controller {
|
||||
this.tabTargets.forEach(element => {
|
||||
let currentTab = element.dataset.tab
|
||||
element.classList.toggle('hidden', activeTab !== currentTab)
|
||||
if (activeTab === currentTab) {
|
||||
this.labelTarget.innerText = element.dataset.label
|
||||
}
|
||||
})
|
||||
this.buttonTargets.forEach(element => {
|
||||
let currentButton = element.dataset.tab
|
||||
element.classList.toggle(this.buttonClass, activeTab !== currentButton)
|
||||
element.classList.toggle(this.buttonActiveClass, activeTab === currentButton)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="space-y-2">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<f:if condition="{bars}">
|
||||
<f:then>
|
||||
<div class="headline--3 headline--underlined">
|
||||
@@ -18,7 +18,7 @@
|
||||
<f:render partial="ImageGallery" arguments="{images: city.images, id: 'city-{city.uid}', thumbnails: 1}"/>
|
||||
</f:if>
|
||||
<f:if condition="{city.party}">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<f:if condition="{bars}">
|
||||
<f:then>
|
||||
<div class="headline--3 headline--underlined">
|
||||
@@ -35,7 +35,7 @@
|
||||
</div>
|
||||
</f:if>
|
||||
<f:if condition="{city.leisure}">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<f:if condition="{bars}">
|
||||
<f:then>
|
||||
<div class="headline--3 headline--underlined">
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{namespace ep=EP\EpTheme\ViewHelpers}
|
||||
<f:variable name="hotelTitle">{hotel.name -> f:format.raw()}{f:if(condition: hotel.categoryLabel, then: ' ({hotel.categoryLabel -> f:format.raw()})')}</f:variable>
|
||||
<div class="space-y-2">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<f:if condition="{bars}">
|
||||
<f:then>
|
||||
<div class="headline--3 headline--underlined">
|
||||
@@ -54,7 +54,7 @@
|
||||
<f:if condition="{hotel.images -> f:count()} > 0">
|
||||
<f:render partial="ImageGallery" arguments="{images: hotel.images, id: 'hotel-{hotel.uid}', thumbnails: 1}"/>
|
||||
</f:if>
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<f:if condition="{bars}">
|
||||
<f:then>
|
||||
<div class="headline--3 headline--underlined">
|
||||
@@ -70,7 +70,7 @@
|
||||
{hotel.features -> f:format.html()}
|
||||
</div>
|
||||
<f:if condition="{hotel.isApartment} || hotel.isHolidayFlat || hotel.isOther">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<f:if condition="{hotel.isApartment}">
|
||||
<f:if condition="{bars}">
|
||||
<f:then>
|
||||
@@ -115,7 +115,7 @@
|
||||
</div>
|
||||
</f:if>
|
||||
<f:if condition="{hotel.additionalInformation}">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<f:if condition="{bars}">
|
||||
<f:then>
|
||||
<div class="headline--3 headline--underlined">
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
<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="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"></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-help-circle" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path></symbol>
|
||||
<symbol id="icon-home" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></symbol>
|
||||
<symbol id="icon-user" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></symbol>
|
||||
<symbol id="icon-user-group" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></symbol>
|
||||
|
||||
|
Before Width: | Height: | Size: 28 KiB After Width: | Height: | Size: 28 KiB |
@@ -1,4 +1,4 @@
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<h3>
|
||||
Eigenanreise
|
||||
</h3>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<div class="space-y-2">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<div class="headline--3 headline--underlined">
|
||||
Konzept
|
||||
</div>
|
||||
@@ -13,14 +13,14 @@
|
||||
Preisberechnung
|
||||
</button>
|
||||
</f:if>
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<div class="headline--3 headline--underlined" data-rte-content>
|
||||
Verpflegung
|
||||
</div>
|
||||
{product.boardDescription -> f:format.html()}
|
||||
</div>
|
||||
<f:if condition="{product.additionalServices}">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<div class="headline--3 headline--underlined">
|
||||
Zusatzleistungen
|
||||
</div>
|
||||
@@ -28,7 +28,7 @@
|
||||
</div>
|
||||
</f:if>
|
||||
<f:if condition="{product.programmeDescription}">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<div class="headline--3 headline--underlined">
|
||||
Programm
|
||||
</div>
|
||||
@@ -36,7 +36,7 @@
|
||||
</div>
|
||||
</f:if>
|
||||
<f:if condition="{product.skiPassDescription}">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<div class="headline--3 headline--underlined">
|
||||
Skipass, Kurse, Leihmaterial
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{namespace ep=EP\EpTheme\ViewHelpers}
|
||||
<div class="space-y-2">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<f:if condition="{bars}">
|
||||
<f:then>
|
||||
<div class="headline--3 headline--underlined">
|
||||
@@ -92,7 +92,7 @@
|
||||
<f:render partial="ImageGallery" arguments="{images: region.images, id: 'region-{region.uid}', thumbnails: 1}"/>
|
||||
</f:if>
|
||||
</f:if>
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<f:if condition="{bars}">
|
||||
<f:then>
|
||||
<div class="headline--3 headline--underlined">
|
||||
@@ -113,7 +113,7 @@
|
||||
</f:if>
|
||||
</div>
|
||||
<f:if condition="{region.news}">
|
||||
<div class="odd:bg-ep-primary-bg p-4" data-rte-content>
|
||||
<div class="odd:bg-gray-50 p-4" data-rte-content>
|
||||
<f:if condition="{bars}">
|
||||
<f:then>
|
||||
<div class="headline--3 headline--underlined">
|
||||
|
||||
@@ -18,112 +18,78 @@
|
||||
<f:render partial="Header/Header" arguments="{layout: 8, subheader: '{product.region.name} / {product.name}', header: product.headline}"/>
|
||||
<div class="flex flex-col lg:flex-row-reverse lg:items-start"
|
||||
data-controller="tabs"
|
||||
data-tabs-button-active-class="tab-button--active"
|
||||
data-tabs-button-class="bg-ep-primary-dark"
|
||||
data-tabs-button-active-class="bg-ep-secondary"
|
||||
data-tabs-scroll-value="true">
|
||||
<div class="w-full lg:w-1/3">
|
||||
<div class="lg:pl-4">
|
||||
<div class="hidden lg:block">
|
||||
<div class="flex flex-col space-y-2 mb-4">
|
||||
<a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}"
|
||||
class="block w-full px-4 py-2 bg-red-500 text-white flex items-center space-x-2"
|
||||
title="Corona Updates">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-virus"></use>
|
||||
</svg>
|
||||
<span>
|
||||
Corona Updates
|
||||
</span>
|
||||
</a>
|
||||
<f:if condition="{product.faqs}">
|
||||
<button type="button"
|
||||
class="button button--light col-span-1 md:col-span-2"
|
||||
data-controller="scroll-to"
|
||||
data-scroll-to-target-value="faq"
|
||||
data-action="scroll-to#scroll">
|
||||
FAQ
|
||||
</button>
|
||||
</f:if>
|
||||
<button type="button"
|
||||
class="button button--light w-full"
|
||||
data-controller="watchlist-toggle"
|
||||
data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}"
|
||||
data-action="watchlist-toggle#toggle">
|
||||
<span data-watchlist-toggle-target="label">
|
||||
Auf die Merkliste setzen
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<f:render section="SidebarButtons" arguments="{_all}"/>
|
||||
<f:render section="Sidebar" arguments="{_all}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main" class="w-full lg:w-2/3">
|
||||
<div class="lg:pr-4 flex flex-col space-y-4">
|
||||
<div class="relative">
|
||||
<button type="button"
|
||||
data-action="tabs#togglePulldown"
|
||||
class="w-full flex items-center space-x-2 bg-ep-primary-light text-white uppercase p-2">
|
||||
<svg class="w-6 h-6">
|
||||
<use href="#icon-chevron-down"></use>
|
||||
</svg>
|
||||
<span data-tabs-target="label">
|
||||
Termine/Preise
|
||||
</span>
|
||||
</button>
|
||||
<div class="absolute z-20 top-100 left-0 w-full flex flex-col items-start divide-y divide-overlay-white bg-ep-primary-light text-white shadow hidden"
|
||||
data-tabs-target="pulldown">
|
||||
<div class="grid grid-cols-3 md:grid-cols-6 gap-px uppercase text-white">
|
||||
<f:if condition="{settings.hotelOnTop}">
|
||||
<f:then>
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="hotel"
|
||||
class="w-full text-left uppercase p-2 pl-10">
|
||||
class="col-span-2 py-2 uppercase bg-ep-primary-dark">
|
||||
Unterkunft
|
||||
</button>
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="dates"
|
||||
class="w-full text-left uppercase p-2 pl-10">
|
||||
class="py-2 uppercase bg-ep-primary-dark">
|
||||
Termine/Preise
|
||||
</button>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="dates"
|
||||
class="w-full text-left uppercase p-2 pl-10">
|
||||
class="col-span-2 py-2 uppercase bg-ep-primary-dark">
|
||||
Termine/Preise
|
||||
</button>
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="hotel"
|
||||
class="w-full text-left uppercase p-2 pl-10">
|
||||
class="py-2 uppercase bg-ep-primary-dark">
|
||||
Unterkunft
|
||||
</button>
|
||||
</f:else>
|
||||
</f:if>
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="region"
|
||||
class="w-full text-left uppercase p-2 pl-10">
|
||||
class="py-2 uppercase bg-ep-primary-dark">
|
||||
Gebiet
|
||||
</button>
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="city"
|
||||
class="w-full text-left uppercase p-2 pl-10">
|
||||
class="py-2 uppercase bg-ep-primary-dark">
|
||||
Ort
|
||||
</button>
|
||||
<f:if condition="{product.journey}">
|
||||
<button type="button"
|
||||
data-action="tabs#select"
|
||||
data-tabs-target="button"
|
||||
data-tab="journey"
|
||||
class="w-full text-left uppercase p-2 pl-10">
|
||||
class="py-2 uppercase bg-ep-primary-dark">
|
||||
Anreise
|
||||
</button>
|
||||
</f:if>
|
||||
</div>
|
||||
</div>
|
||||
<f:if condition="{settings.hotelOnTop}">
|
||||
<f:then>
|
||||
<f:render section="Hotel" arguments="{_all}"/>
|
||||
@@ -138,14 +104,7 @@
|
||||
<f:render section="Region" arguments="{_all}"/>
|
||||
<f:render section="Journey" arguments="{_all}"/>
|
||||
<div class="md:hidden">
|
||||
<a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}"
|
||||
class="block w-full px-4 py-2 bg-red-500 text-white flex items-center space-x-2"
|
||||
title="Corona Updates">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-virus"></use>
|
||||
</svg>
|
||||
<span>Corona Updates</span>
|
||||
</a>
|
||||
<f:render section="SidebarButtons" arguments="{_all}"/>
|
||||
<f:render section="Sidebar" arguments="{_all}"/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -163,8 +122,7 @@
|
||||
<f:section name="Dates">
|
||||
<div class="mb-4{f:if(condition: settings.hotelOnTop, then: ' hidden')}"
|
||||
data-tabs-target="tab"
|
||||
data-tab="dates"
|
||||
data-label="Termine/Preise">
|
||||
data-tab="dates">
|
||||
<f:if condition="{isProductWithExcludedConcept}">
|
||||
<f:if condition="{product.region.season} == 'w'">
|
||||
<div class="alert alert-info">
|
||||
@@ -205,8 +163,7 @@
|
||||
<f:section name="Hotel">
|
||||
<div class="mb-4{f:if(condition: settings.hotelOnTop, else: ' hidden')}"
|
||||
data-tabs-target="tab"
|
||||
data-tab="hotel"
|
||||
data-label="Unterkunft">
|
||||
data-tab="hotel">
|
||||
<f:render partial="Hotel/Details" arguments="{hotel: hotel, bars: 1, showNonBookableHint: 0}"/>
|
||||
</div>
|
||||
</f:section>
|
||||
@@ -214,8 +171,7 @@
|
||||
<f:section name="City">
|
||||
<div class="mb-4 hidden"
|
||||
data-tabs-target="tab"
|
||||
data-tab="city"
|
||||
data-label="Ort">
|
||||
data-tab="city">
|
||||
<f:render partial="City/Details" arguments="{city: product.city, bars: 1}"/>
|
||||
</div>
|
||||
</f:section>
|
||||
@@ -223,8 +179,7 @@
|
||||
<f:section name="Region">
|
||||
<div class="mb-4 hidden"
|
||||
data-tabs-target="tab"
|
||||
data-tab="region"
|
||||
data-label="Gebiet">
|
||||
data-tab="region">
|
||||
<f:render partial="Region/Details" arguments="{region: product.region, bars: 1}"/>
|
||||
</div>
|
||||
</f:section>
|
||||
@@ -233,8 +188,7 @@
|
||||
<f:if condition="{product.journey}">
|
||||
<div class="mb-4 hidden"
|
||||
data-tabs-target="tab"
|
||||
data-tab="journey"
|
||||
data-label="Anreise">
|
||||
data-tab="journey">
|
||||
<f:render partial="Journey/Details" arguments="{journey: product.journey, bars: 1}"/>
|
||||
</div>
|
||||
</f:if>
|
||||
@@ -359,4 +313,42 @@
|
||||
</f:if>
|
||||
</f:section>
|
||||
|
||||
<f:section name="SidebarButtons">
|
||||
<div class="grid grid-cols-2 md:grid-cols-5 gap-px mb-4">
|
||||
<a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}"
|
||||
class="block px-4 py-2 bg-red-500 text-white flex items-center space-x-2 col-span-2 md:col-span-3"
|
||||
title="Corona Updates">
|
||||
<svg class="w-4 h-4">
|
||||
<use href="#icon-virus"></use>
|
||||
</svg>
|
||||
<span>Corona Updates</span>
|
||||
</a>
|
||||
<f:if condition="{product.faqs}">
|
||||
<button type="button"
|
||||
class="bg-ep-primary-dark text-white py-2 col-span-1"
|
||||
data-controller="scroll-to"
|
||||
data-scroll-to-target-value="faq"
|
||||
data-action="scroll-to#scroll"
|
||||
data-cooltipz-dir="top-right"
|
||||
aria-label="FAQ">
|
||||
<svg class="w-6 h-6 mx-auto">
|
||||
<use href="#icon-help-circle"></use>
|
||||
</svg>
|
||||
</button>
|
||||
</f:if>
|
||||
<button type="button"
|
||||
class="bg-ep-primary-dark text-white py-2 col-span-1"
|
||||
data-controller="watchlist-toggle"
|
||||
data-watchlist-toggle-key-value="{hotel.uid}:{product.uid}"
|
||||
data-watchlist-toggle-target="ariaLabel"
|
||||
data-action="watchlist-toggle#toggle"
|
||||
data-cooltipz-dir="top-right"
|
||||
aria-label="auf die Merkliste setzen">
|
||||
<svg class="w-6 h-6 mx-auto"
|
||||
data-watchlist-toggle-target="icon" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</f:section>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user