EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP Migrate to stimulus.js and tailwind

Browse Source
This commit is contained in:
Björn Fromme
2021-08-21 17:30:06 +02:00
parent c03a14c519
commit 9cf746e016
7 changed files with 40 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_datepicker.scss
+4 -11
View File
@@ -5,7 +5,7 @@
} }
.flatpickr-calendar { .flatpickr-calendar {
box-shadow: none; @apply shadow-none;
&.inline { &.inline {
border: none !important; border: none !important;
@@ -15,22 +15,15 @@
.flatpickr-calendar { .flatpickr-calendar {
&.inline { &.inline {
border: 1px solid theme('colors.gray.400'); @apply border border-gray-400;
} }
&.centered {
margin: 0 auto 16px;
}
} }
.flatpickr-day { .flatpickr-day {
border-radius: 4px; @apply rounded my-2 mx-0;
margin: 3px 0;
&.available:not(.inRange) { &.available:not(.inRange) {
color: white; @apply text-white bg-green-500;
background-color: theme('colors.green.500');
} }
} }
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+15 -21
View File
@@ -9,19 +9,14 @@
data="{'search-target': 'form'}"> data="{'search-target': 'form'}">
<div class="border rounded p-4"> <div class="border rounded p-4">
<div class="mb-2 pb-2 border-b" <div class="relative mb-2 pb-2 border-b"
data-controller="collapse" data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.dateFrom} || {filterSettings.dateTo}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="true">
<label class="cursor-pointer" <button data-action="click->collapse#toggle">
data-action="click->collapse#toggle"> Zeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
Zeitraum </button>
</label> <div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
<div data-collapse-target="container"> data-collapse-target="container">
<input type="text"
data-search-target="dateRangeLabel"
class="cursor-pointer focus:outline-none"
value="{ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}"
placeholder="von... bis">
<f:form.hidden property="dateFrom" <f:form.hidden property="dateFrom"
data="{'search-target': 'dateFrom'}"/> data="{'search-target': 'dateFrom'}"/>
<f:form.hidden property="dateTo" <f:form.hidden property="dateTo"
@@ -63,10 +58,9 @@
<div class="mb-2 pb-2 border-b" <div class="mb-2 pb-2 border-b"
data-controller="collapse" data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}">
<label class="cursor-pointer" <button data-action="click->collapse#toggle">
data-action="click->collapse#toggle">
Reiseziel Reiseziel
</label> </button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<ul class="mb-0 p-0"> <ul class="mb-0 p-0">
<f:for each="{filterOptions.destinations}" as="destination"> <f:for each="{filterOptions.destinations}" as="destination">
@@ -98,9 +92,9 @@
<div class="mb-2 pb-2 border-b" <div class="mb-2 pb-2 border-b"
data-controller="collapse" data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.conceptUids}', then: 'false', else: 'true')}">
<label data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle">
Reisekonzepte Reisekonzepte
</label> </button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<ul class="mb-0 p-0"> <ul class="mb-0 p-0">
<f:for each="{filterOptions.concepts}" as="concept"> <f:for each="{filterOptions.concepts}" as="concept">
@@ -119,9 +113,9 @@
<div class="mb-2 pb-2 border-b" <div class="mb-2 pb-2 border-b"
data-controller="collapse" data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.priceRanges}', then: 'false', else: 'true')}">
<label data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle">
Preis Preis
</label> </button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<ul class="mb-0 p-0"> <ul class="mb-0 p-0">
<f:for each="{filterOptions.priceRanges}" as="range"> <f:for each="{filterOptions.priceRanges}" as="range">
@@ -142,9 +136,9 @@
<div class="mb-2 pb-2 border-b" <div class="mb-2 pb-2 border-b"
data-controller="collapse" data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}"> data-collapse-collapsed-value="{f:if(condition: '{filterSettings.pax} > 1', then: 'false', else: 'true')}">
<label data-action="click->collapse#toggle"> <button data-action="click->collapse#toggle">
Personen Personen
</label> </button>
<div data-collapse-target="container"> <div data-collapse-target="container">
<div class="border rounded"> <div class="border rounded">
<select name="pax" <select name="pax"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Main.html
+1 -1
View File
@@ -15,7 +15,7 @@
<div class="lg:block" <div class="lg:block"
data-collapse-target="container"> data-collapse-target="container">
<h3>Filter</h3> <h3>Filter</h3>
<button class="button button--small w-full" <button class="button button--small w-full my-4"
data-action="search#reset"> data-action="search#reset">
Filter zurücksetzen Filter zurücksetzen
</button> </button>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
+1 -2
View File
@@ -1,9 +1,8 @@
<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:f="http://typo3.org/ns/fluid/ViewHelpers"> xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="searchresult__info alert alert-info"> <div class="bg-ep-primary text-white p-4 mb-4">
Deine Suche Deine Suche
<f:if condition="{meta.organic}"> <f:if condition="{meta.organic}">
<f:then> <f:then>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html
+16 -23
View File
@@ -1,30 +1,23 @@
<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">
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div id="search"> <f:image src="{settings.searchPageHeaderImage}"
<div class="searchresult-wrapper"> width="1366" height="160c+100"
<div class="pagehead pagehead--searchresult"> class="block w-full h-auto -mt-16 mb-8"/>
<div class="pagehead__image" <div class="container relative"
style="background-image: url({f:uri.image(src: settings.searchPageHeaderImage, width: '1366', height: '160c+100')})"></div> data-controller="search"
</div> data-search-uri-value="{ep:uri.ajax(controller: 'AjaxSearch', action: 'searchresult', pageUid: settings.defaultAjaxUid, format: 'html')}"
<div class="container relative" data-action="datepicker:range-select->search#selectDateRange">
data-controller="search" <div data-search-target="resultsContainer">
data-search-uri-value="{ep:uri.ajax(controller: 'AjaxSearch', action: 'searchresult', pageUid: settings.defaultAjaxUid, format: 'html')}" <f:render partial="Search/Main" arguments="{_all}"/>
data-action="datepicker:range-select->search#selectDateRange"> </div>
<div data-search-target="resultsContainer"> <div class="absolute z-20 inset-0 w-full h-fill bg-overlay-white hidden"
<f:render partial="Search/Main" arguments="{_all}"/> data-search-target="loadingIndicator">
</div> <div class="absolute mt-16 top-0 left-1/2 transform -translate-x-1/2 flex items-center space-x-4 alert alert-info">
<div class="absolute z-20 inset-0 w-full h-fill bg-overlay-white hidden" <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" />
data-search-target="loadingIndicator"> <span>Suchergebnis wird geladen...</span>
<div class="absolute mt-16 top-0 left-1/2 transform -translate-x-1/2 flex items-center space-x-4 alert alert-info">
<f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" />
<span>Suchergebnis wird geladen...</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Searchbar/Index.html
+1 -3
View File
@@ -1,6 +1,4 @@
<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">
<f:layout name="Default"/> <f:layout name="Default"/>
public/typo3conf/ext/ep_theme/ext_localconf.php
+2
View File
@@ -22,6 +22,8 @@ $GLOBALS['TYPO3_CONF_VARS']['FE']['addRootLineFields'] = 'tx_eptheme_slides';
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:ep_theme/Configuration/RTE/Default.yaml'; $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['default'] = 'EXT:ep_theme/Configuration/RTE/Default.yaml';
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['ep-reisen'] = 'EXT:ep_theme/Configuration/RTE/Default.yaml'; $GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['ep-reisen'] = 'EXT:ep_theme/Configuration/RTE/Default.yaml';
$GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']['ep'] = ['EP\\EpTheme\\ViewHelpers'];
$metaTagManagerRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\MetaTag\MetaTagManagerRegistry::class); $metaTagManagerRegistry = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\TYPO3\CMS\Core\MetaTag\MetaTagManagerRegistry::class);
$metaTagManagerRegistry->registerManager( $metaTagManagerRegistry->registerManager(
'ep_opengraph', 'ep_opengraph',