WIP Migrate to stimulus.js and tailwind
This commit is contained in:
Björn Fromme
@@ -8,13 +8,7 @@ require('picturefill')
|
||||
import smoothscroll from 'smoothscroll-polyfill'
|
||||
smoothscroll.polyfill()
|
||||
|
||||
// Alpine stuff
|
||||
import Alpine from 'alpinejs'
|
||||
import contactForm from './components/contact-form'
|
||||
|
||||
Alpine.data('contactForm', contactForm)
|
||||
Alpine.start()
|
||||
|
||||
// Add pacode to external links
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const configElement = document.getElementById('appconfig')
|
||||
if (null === configElement) {
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
import axios from 'axios'
|
||||
|
||||
export default () => ({
|
||||
formErrors: {},
|
||||
processing: false,
|
||||
success: false,
|
||||
error: false,
|
||||
submit() {
|
||||
this.processing = true
|
||||
const form = this.$refs.form
|
||||
const data = new FormData(form)
|
||||
axios.post(form.action, data)
|
||||
.then(response => {
|
||||
if (response.data.status === 'validation') {
|
||||
this.formErrors = response.data.errors
|
||||
} else {
|
||||
this.success = true
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
this.error = true
|
||||
})
|
||||
.finally(() => {
|
||||
this.processing = false
|
||||
this.$el.scrollIntoView({behavior: 'smooth'})
|
||||
})
|
||||
},
|
||||
reset() {
|
||||
this.formErrors = {}
|
||||
this.processing = false
|
||||
this.success = false
|
||||
this.error = false
|
||||
this.$refs.form.reset()
|
||||
}
|
||||
})
|
||||
+1
@@ -53,6 +53,7 @@ export default class extends Controller {
|
||||
|
||||
collapsedValueChanged() {
|
||||
this.containerTarget.classList.toggle('hidden', this.collapsedValue === true)
|
||||
this.containerTarget.scrollTop = 0
|
||||
if (this.hasIconTarget) {
|
||||
this.iconTarget.classList.toggle('rotate-180', this.collapsedValue === false)
|
||||
}
|
||||
|
||||
+4
-48
@@ -1,5 +1,9 @@
|
||||
@import "~flatpickr/dist/flatpickr.css";
|
||||
|
||||
.flatpickr-input {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
.flatpickr-calendar {
|
||||
box-shadow: none;
|
||||
|
||||
@@ -8,54 +12,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.daterange {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
|
||||
.daterange__panel {
|
||||
padding: 8px 0;
|
||||
|
||||
.flatpickr-calendar {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.daterange__headline,
|
||||
.daterange__presets {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.daterange__presets {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.daterange__preset {
|
||||
display: block;
|
||||
color: theme('colors.gray.800');
|
||||
|
||||
.fa {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.daterange__buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.daterange__button {
|
||||
color: theme('colors.gray.800');
|
||||
border: none;
|
||||
background: none;
|
||||
outline: none;
|
||||
width: percentage(1/2);
|
||||
}
|
||||
|
||||
.flatpickr-input:not(.datepicker--visible) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flatpickr-calendar {
|
||||
|
||||
&.inline {
|
||||
|
||||
@@ -24,6 +24,8 @@
|
||||
<f:form.hidden property="priceRange" data="{'searchbar-target': 'priceRange'}"/>
|
||||
<div class="sticky:max-w-screen-xl sticky:mx-auto flex flex-col sticky:flex-row sticky:items-center">
|
||||
<div class="flex items-start justify-between sticky:flex-1 pt-8 px-8 sticky:py-4 sticky:px-0">
|
||||
|
||||
<!-- Date range -->
|
||||
<div class="flex-1"
|
||||
data-controller="collapse datepicker"
|
||||
<f:if condition="{searchParams.dateFrom} && {searchParams.dateTo}">
|
||||
@@ -42,41 +44,49 @@
|
||||
value="{ep:dateRange(dateFrom: searchParams.dateFrom, dateTo: searchParams.dateTo, includeLabel: 0)}"
|
||||
</f:if>
|
||||
data-searchbar-target="dateRangeLabel"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1"
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<use href="#icon-calendar"></use>
|
||||
</svg>
|
||||
<div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md"
|
||||
<div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
|
||||
data-collapse-target="container">
|
||||
<f:if condition="{settings.datePickerPresets}">
|
||||
<div class="flex items-center justify-between pb-2">
|
||||
<f:for each="{settings.datePickerPresets}" as="preset">
|
||||
<button class="daterange__preset"
|
||||
data-preset='{preset -> f:format.json()}'
|
||||
data-action="datepicker#selectPreset">
|
||||
<div class="flex justify-between divide-x divide-gray-200">
|
||||
<div class="pr-2">
|
||||
<input type="hidden"
|
||||
data-datepicker-target="field">
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col justify-between pl-2">
|
||||
<f:if condition="{settings.datePickerPresets}">
|
||||
<div class="flex flex-col space-y-4">
|
||||
<f:for each="{settings.datePickerPresets}" as="preset">
|
||||
<button class="button button--small button--light w-full"
|
||||
data-preset='{preset -> f:format.json()}'
|
||||
data-action="datepicker#selectPreset">
|
||||
<span>
|
||||
{preset.label}
|
||||
</span>
|
||||
</button>
|
||||
</f:for>
|
||||
</div>
|
||||
</f:if>
|
||||
<div class="flex flex-col space-y-4">
|
||||
<button class="button button--small button--light w-full"
|
||||
data-action="collapse#close">
|
||||
schließen
|
||||
</button>
|
||||
</f:for>
|
||||
<button class="button button--small button--light w-full"
|
||||
data-action="datepicker#reset">
|
||||
zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</f:if>
|
||||
<input type="hidden"
|
||||
data-datepicker-target="field">
|
||||
<div class="flex items-center justify-between pt-2">
|
||||
<button class="daterange__button focus:outline-none"
|
||||
data-action="collapse#close">
|
||||
schließen
|
||||
</button>
|
||||
<button class="daterange__button focus:outline-none"
|
||||
data-action="datepicker#reset">
|
||||
zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Date range -->
|
||||
|
||||
<!-- Pax -->
|
||||
<div class="w-24"
|
||||
data-controller="collapse"
|
||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||
@@ -87,10 +97,11 @@
|
||||
data-searchbar-target="paxLabel"
|
||||
value="{searchParams.pax}"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1">
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<use href="#icon-user-group"></use>
|
||||
</svg>
|
||||
<div class="hidden absolute top-100 mt-2 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
|
||||
<div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded w-full h-48 overflow-y-scroll"
|
||||
data-collapse-target="container">
|
||||
<ul class="m-0 p-0">
|
||||
<f:for each="{filterOptions.pax}" as="option">
|
||||
@@ -110,7 +121,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Pax -->
|
||||
|
||||
<!-- Destination -->
|
||||
<div class="flex-1"
|
||||
data-controller="collapse"
|
||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||
@@ -120,69 +133,68 @@
|
||||
data-action="click->collapse#toggle"
|
||||
data-searchbar-target="destinationLabel"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
|
||||
placeholder="Reiseziel"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45">
|
||||
placeholder="Reiseziel/Konzept"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 transform rotate-45 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<use href="#icon-airplane"></use>
|
||||
</svg>
|
||||
<div class="hidden absolute top-100 left-0 bg-white p-4 shadow-md min-w-full h-48 overflow-y-scroll"
|
||||
<div class="hidden absolute z-20 top-100 mt-2 left-0 bg-white p-4 shadow-md rounded min-w-full h-64 overflow-y-scroll"
|
||||
data-collapse-target="container">
|
||||
<f:for each="{filterOptions.destinations}" as="destination">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="w-1/2">
|
||||
<button data-action="searchbar#setDestination"
|
||||
<div class="grid grid-cols-5 gap-4">
|
||||
<f:for each="{filterOptions.destinations}" as="destination">
|
||||
<div class="col-span-3">
|
||||
<button class="flex items-center space-x-2"
|
||||
data-action="searchbar#setDestination"
|
||||
data-option-uid="{destination.country.uid}"
|
||||
data-option-type="country"
|
||||
data-option-label="{destination.country.label}">
|
||||
<svg class="block w-8 h-6">
|
||||
<use href="#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"/>
|
||||
</svg>
|
||||
<strong>
|
||||
<span>
|
||||
{destination.country.label}
|
||||
</strong>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<ul class="plain-list mb-0">
|
||||
<f:for each="{destination.regions}" as="region">
|
||||
<li>
|
||||
<button data-action="searchbar#setDestination"
|
||||
data-option-uid="{region.uid}"
|
||||
data-option-type="region"
|
||||
data-option-label="{region.label}">
|
||||
{region.label}
|
||||
</button>
|
||||
</li>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</f:for>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="w-1/2">
|
||||
<strong>Konzept</strong>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<ul class="plain-list mb-0">
|
||||
<f:for each="{filterOptions.concepts}" as="concept">
|
||||
<li>
|
||||
<button data-action="searchbar#setDestination"
|
||||
data-option-uid="{concept.uid}"
|
||||
data-option-type="concept"
|
||||
data-option-label="{concept.name}">
|
||||
{concept.name}
|
||||
</button>
|
||||
</li>
|
||||
<div class="col-span-2">
|
||||
<f:for each="{destination.regions}" as="region">
|
||||
<button data-action="searchbar#setDestination"
|
||||
data-option-uid="{region.uid}"
|
||||
data-option-type="region"
|
||||
data-option-label="{region.label}">
|
||||
{region.label}
|
||||
</button>
|
||||
</f:for>
|
||||
</ul>
|
||||
</div>
|
||||
</f:for>
|
||||
</div>
|
||||
<div class="grid grid-cols-5 gap-4 border-t py-2 my-2">
|
||||
<div class="col-span-3">
|
||||
<strong>
|
||||
Konzept
|
||||
</strong>
|
||||
</div>
|
||||
<div class="col-span-2">
|
||||
<f:for each="{filterOptions.concepts}" as="concept">
|
||||
<button data-action="searchbar#setDestination"
|
||||
data-option-uid="{concept.uid}"
|
||||
data-option-type="concept"
|
||||
data-option-label="{concept.name}">
|
||||
{concept.name}
|
||||
</button>
|
||||
</f:for>
|
||||
</div>
|
||||
</div>
|
||||
<button data-action="searchbar#resetDestination">
|
||||
<button class="button button--small"
|
||||
data-action="searchbar#resetDestination">
|
||||
zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Destination -->
|
||||
|
||||
<!-- Price range -->
|
||||
<div class="w-32"
|
||||
data-controller="collapse"
|
||||
data-action="collapse:click:outside->collapse#close searchbar:input@window->collapse#close"
|
||||
@@ -193,10 +205,11 @@
|
||||
data-searchbar-target="priceRangeLabel"
|
||||
class="w-full bg-transparent border-0 ring-0 focus:ring-0 text-white uppercase px-2 py-1 cursor-pointer placeholder-white"
|
||||
placeholder="Preis"/>
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1">
|
||||
<svg class="w-6 h-6 text-white absolute right-0 top-0 mr-2 mt-1 cursor-pointer"
|
||||
data-action="click->collapse#toggle">
|
||||
<use href="#icon-euro"></use>
|
||||
</svg>
|
||||
<div class="hidden absolute top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
|
||||
<div class="hidden absolute z-20 top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll"
|
||||
data-collapse-target="container">
|
||||
<ul class="m-0 p-0">
|
||||
<li>
|
||||
@@ -219,6 +232,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /Price range -->
|
||||
|
||||
</div>
|
||||
<button type="submit" class="hidden sticky:block sticky:ml-4">
|
||||
<svg class="w-8 h-8 text-white">
|
||||
|
||||
Reference in New Issue
Block a user