Simplify page layout templates, add search loading indicator

This commit is contained in:
Björn Fromme
2021-09-03 17:12:18 +02:00
parent 4442b03dd9
commit 921092214c
12 changed files with 98 additions and 116 deletions
@@ -54,6 +54,7 @@ export default class extends Controller {
}
loadingValueChanged() {
this.resultsContainerTarget.classList.toggle('opacity-25', this.loadingValue === true)
this.loadingIndicatorTarget.classList.toggle('hidden', this.loadingValue === false)
}
}
@@ -4,15 +4,13 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-8">
<f:cObject typoscriptObjectPath="lib.searchBarCollapsed"/>
<f:alias map="{searchbarCollapsed: 1}">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
</f:alias>
<f:render section="Content"/>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
</div>
<f:cObject typoscriptObjectPath="lib.searchBarCollapsed"/>
<f:alias map="{searchbarCollapsed: 1}">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
</f:alias>
<f:render section="Content"/>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" arguments="{_all}"/>
@@ -4,17 +4,15 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-8">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSlider" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Content"/>
<f:render partial="Footer" arguments="{_all}"/>
</div>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSlider" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Content"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" arguments="{_all}"/>
@@ -4,13 +4,11 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode" arguments="{viewContent: settings.facebookViewContentValues}"/>
<div class="lg:mt-16">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="EventHero" arguments="{_all}"/>
<f:render partial="EventDisturber" arguments="{headline: settings.eventDisturberHeadline, listItems: settings.eventDisturberListitems, buttonLabel: settings.eventDisturberButtonLabel, buttonLink: settings.eventDisturberButtonLink}"/>
<f:render section="Content"/>
<f:render partial="Footer" arguments="{_all}"/>
</div>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="EventHero" arguments="{_all}"/>
<f:render partial="EventDisturber" arguments="{headline: settings.eventDisturberHeadline, listItems: settings.eventDisturberListitems, buttonLabel: settings.eventDisturberButtonLabel, buttonLink: settings.eventDisturberButtonLink}"/>
<f:render section="Content"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" arguments="{_all}"/>
@@ -4,11 +4,9 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-16">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render section="Content"/>
<f:render partial="Footer" arguments="{_all}"/>
</div>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render section="Content"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" arguments="{_all}"/>
@@ -4,18 +4,16 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-8">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Content"/>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
</div>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Content"/>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" arguments="{_all}"/>
@@ -4,26 +4,24 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-8">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-1">
<f:render section="Sidebar"/>
</div>
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-1">
<f:render section="Sidebar"/>
</div>
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" arguments="{_all}"/>
@@ -4,23 +4,21 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode" arguments="{viewContent: settings.facebookViewContentValues}"/>
<div class="lg:mt-16">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<div class="container sidebar">
<f:render section="Header"/>
<div class="row">
<div class="col-md-8 col-md-push-4 column--main">
<f:render section="Content"/>
</div>
<div class="col-md-4 col-md-pull-8 column--sidebar">
<f:render section="Sidebar"/>
</div>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<div class="container sidebar">
<f:render section="Header"/>
<div class="row">
<div class="col-md-8 col-md-push-4 column--main">
<f:render section="Content"/>
</div>
<div class="col-md-4 col-md-pull-8 column--sidebar">
<f:render section="Sidebar"/>
</div>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" arguments="{_all}"/>
@@ -4,26 +4,24 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode"/>
<div class="lg:mt-8">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
<div class="col-span-3 lg:col-span-1">
<f:render section="Sidebar"/>
</div>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<f:if condition="{data.tx_eptheme_hide_searchbar}">
<f:else>
<f:cObject typoscriptObjectPath="lib.searchBar"/>
</f:else>
</f:if>
<f:render section="Header" optional="true"/>
<div class="container grid grid-cols-3 gap-8">
<div class="col-span-3 lg:col-span-2">
<f:render section="Content"/>
</div>
<div class="col-span-3 lg:col-span-1">
<f:render section="Sidebar"/>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" arguments="{_all}"/>
@@ -4,23 +4,21 @@
<f:render partial="GoogleTagManager" arguments="{googleTagManagerId: settings.googleTagManagerId}"/>
<f:render partial="FacebookPixelCode" arguments="{viewContent: settings.facebookViewContentValues}"/>
<div class="lg:mt-16">
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<div class="container sidebar">
<f:render section="Header"/>
<div class="row">
<div class="col-md-4 col-md-push-8 column--sidebar">
<f:render section="Sidebar"/>
</div>
<div class="col-md-8 col-md-pull-4 column--main">
<f:render section="Content"/>
</div>
<f:render partial="Mainnav" section="Main" arguments="{_all}"/>
<f:render partial="HeaderSliderSmall" arguments="{_all}"/>
<div class="container sidebar">
<f:render section="Header"/>
<div class="row">
<div class="col-md-4 col-md-push-8 column--sidebar">
<f:render section="Sidebar"/>
</div>
<div class="col-md-8 col-md-pull-4 column--main">
<f:render section="Content"/>
</div>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
</div>
<f:render section="Teasers"/>
<f:render partial="Footer" arguments="{_all}"/>
<f:render partial="ContactBar" arguments="{_all}"/>
<f:render partial="Topnav" arguments="{_all}"/>
<f:render partial="Mobilenav" arguments="{_all}"/>
@@ -5,7 +5,7 @@
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:section name="Main">
<div class="relative z-40 lg:container bg-white">
<div class="relative z-40 lg:container bg-white lg:mt-8">
<div class="flex items-center lg:items-end justify-between px-4 py-2 lg:px-0 lg:pt-4 lg:pb-0">
<a href="{f:uri.typolink(parameter: settings.defaultHomeUid)}"
class="block lg:pb-4"
@@ -3,21 +3,20 @@
<f:layout name="Default"/>
<f:section name="Main">
<f:image src="{settings.searchPageHeaderImage}"
width="1366" height="160c+100"
class="block w-full h-auto -mt-16 mb-8"/>
<div class="py-8 bg-ep-primary-10">
<div class="container relative"
<div class="container"
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"
<div class="fixed top-0 left-0 z-20 w-screen h-screen 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" />
<div class="absolute top-1/2 left-1/2 transform -translate-xy-1/2 flex items-center space-x-4 bg-ep-secondary text-white text-lg p-4 rounded">
<svg class="w-6 h-6">
<use href="#icon-spinner"></use>
</svg>
<span>Suchergebnis wird geladen...</span>
</div>
</div>