Simplify page layout templates, add search loading indicator

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/search_controller.js

@@ -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)
     }
 }

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Detail.html

@@ -4,7 +4,6 @@
 
     <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}"/>
@@ -12,7 +11,6 @@
     <f:render section="Content"/>
     <f:render section="Teasers"/>
     <f:render partial="Footer" arguments="{_all}"/>
-    </div>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Frontpage.html

@@ -4,7 +4,6 @@
 
     <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}">
@@ -14,7 +13,6 @@
     </f:if>
     <f:render section="Content"/>
     <f:render partial="Footer" arguments="{_all}"/>
-    </div>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/FrontpageEvent.html

@@ -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="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Search.html

@@ -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="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/Subpage.html

@@ -4,7 +4,6 @@
 
     <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}">
@@ -15,7 +14,6 @@
     <f:render section="Content"/>
     <f:render section="Teasers"/>
     <f:render partial="Footer" arguments="{_all}"/>
-    </div>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeft.html

@@ -4,7 +4,6 @@
 
     <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}">
@@ -23,7 +22,6 @@
     </div>
     <f:render section="Teasers"/>
     <f:render partial="Footer" arguments="{_all}"/>
-    </div>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarLeftEvent.html

@@ -4,7 +4,6 @@
 
     <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">
@@ -20,7 +19,6 @@
     </div>
     <f:render section="Teasers"/>
     <f:render partial="Footer" arguments="{_all}"/>
-    </div>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRight.html

@@ -4,7 +4,6 @@
 
     <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}">
@@ -23,7 +22,6 @@
     </div>
     <f:render section="Teasers"/>
     <f:render partial="Footer" arguments="{_all}"/>
-    </div>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Layouts/Page/SubpageSidebarRightEvent.html

@@ -4,7 +4,6 @@
 
     <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">
@@ -20,7 +19,6 @@
     </div>
     <f:render section="Teasers"/>
     <f:render partial="Footer" arguments="{_all}"/>
-    </div>
     <f:render partial="ContactBar" arguments="{_all}"/>
     <f:render partial="Topnav" arguments="{_all}"/>
     <f:render partial="Mobilenav" arguments="{_all}"/>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html

@@ -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"

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html

@@ -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">
+                    <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">
-                        <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" />
+                        <svg class="w-6 h-6">
+                            <use href="#icon-spinner"></use>
+                        </svg>
                         <span>Suchergebnis wird geladen...</span>
                     </div>
                 </div>