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 {
box-shadow: none;
@apply shadow-none;
&.inline {
border: none !important;
@@ -15,22 +15,15 @@
.flatpickr-calendar {
&.inline {
border: 1px solid theme('colors.gray.400');
@apply border border-gray-400;
}
&.centered {
margin: 0 auto 16px;
}
}
.flatpickr-day {
border-radius: 4px;
margin: 3px 0;
@apply rounded my-2 mx-0;
&.available:not(.inRange) {
color: white;
background-color: theme('colors.green.500');
@apply text-white bg-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'}">
<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-collapse-collapsed-value="{f:if(condition: '{filterSettings.dateFrom} || {filterSettings.dateTo}', then: 'false', else: 'true')}">
<label class="cursor-pointer"
data-action="click->collapse#toggle">
Zeitraum
</label>
<div 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">
data-collapse-collapsed-value="true">
<button data-action="click->collapse#toggle">
Zeitraum {ep:dateRange(dateFrom: filterSettings.dateFrom, dateTo: filterSettings.dateTo, includeLabel: 0)}
</button>
<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:form.hidden property="dateFrom"
data="{'search-target': 'dateFrom'}"/>
<f:form.hidden property="dateTo"
@@ -63,10 +58,9 @@
<div class="mb-2 pb-2 border-b"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: '{filterSettings.countryUids} || {filterSettings.regionUids}', then: 'false', else: 'true')}">
<label class="cursor-pointer"
data-action="click->collapse#toggle">
<button data-action="click->collapse#toggle">
Reiseziel
</label>
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0">
<f:for each="{filterOptions.destinations}" as="destination">
@@ -98,9 +92,9 @@
<div class="mb-2 pb-2 border-b"
data-controller="collapse"
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
</label>
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0">
<f:for each="{filterOptions.concepts}" as="concept">
@@ -119,9 +113,9 @@
<div class="mb-2 pb-2 border-b"
data-controller="collapse"
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
</label>
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0">
<f:for each="{filterOptions.priceRanges}" as="range">
@@ -142,9 +136,9 @@
<div class="mb-2 pb-2 border-b"
data-controller="collapse"
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
</label>
</button>
<div data-collapse-target="container">
<div class="border rounded">
<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"
data-collapse-target="container">
<h3>Filter</h3>
<button class="button button--small w-full"
<button class="button button--small w-full my-4"
data-action="search#reset">
Filter zurücksetzen
</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"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/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
<f:if condition="{meta.organic}">
<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"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:layout name="Default"/>
<f:section name="Main">
<div id="search">
<div class="searchresult-wrapper">
<div class="pagehead pagehead--searchresult">
<div class="pagehead__image"
style="background-image: url({f:uri.image(src: settings.searchPageHeaderImage, width: '1366', height: '160c+100')})"></div>
</div>
<div class="container relative"
data-controller="search"
data-search-uri-value="{ep:uri.ajax(controller: 'AjaxSearch', action: 'searchresult', pageUid: settings.defaultAjaxUid, format: 'html')}"
data-action="datepicker:range-select->search#selectDateRange">
<div data-search-target="resultsContainer">
<f:render partial="Search/Main" arguments="{_all}"/>
</div>
<div class="absolute z-20 inset-0 w-full h-fill bg-overlay-white hidden"
data-search-target="loadingIndicator">
<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>
<f:image src="{settings.searchPageHeaderImage}"
width="1366" height="160c+100"
class="block w-full h-auto -mt-16 mb-8"/>
<div class="container relative"
data-controller="search"
data-search-uri-value="{ep:uri.ajax(controller: 'AjaxSearch', action: 'searchresult', pageUid: settings.defaultAjaxUid, format: 'html')}"
data-action="datepicker:range-select->search#selectDateRange">
<div data-search-target="resultsContainer">
<f:render partial="Search/Main" arguments="{_all}"/>
</div>
<div class="absolute z-20 inset-0 w-full h-fill bg-overlay-white hidden"
data-search-target="loadingIndicator">
<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>
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"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<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']['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->registerManager(
'ep_opengraph',