feat: adjust faq styles

public/typo3conf/ext/ep_products/Configuration/TCA/tx_epproducts_domain_model_faq.php

@@ -118,16 +118,17 @@ return [
                 'renderType' => 'selectSingle',
                 'items' => [
                     [ '', '' ],
-                    [ 'Allgemein', 'Allgemein' ],
+                    [ 'Buchung & Reiseablauf', 'Buchung & Reiseablauf' ],
+                    [ 'Skipass, Skigebiet & Kurse', 'Skipass, Skigebiet & Kurse' ],
+                    [ 'Änderungen & Zusatzleistungen', 'Änderungen & Zusatzleistungen' ],
                     [ 'Anreise & Transport', 'Anreise & Transport' ],
-                    [ 'Buchung & Bezahlung', 'Buchung & Bezahlung' ],
+                    [ 'Unterkunft & Sportclubs', 'Unterkunft & Sportclubs' ],
-                    [ 'Eventreisen', 'Eventreisen' ],
-                    [ 'Gepäck', 'Gepäck' ],
-                    [ 'Kontakt & Erreichbarkeit', 'Kontakt & Erreichbarkeit' ],
                     [ 'Programm & Aktivitäten', 'Programm & Aktivitäten' ],
-                    [ 'Skipass & Skigebiet', 'Skipass & Skigebiet' ],
+                    [ 'Eventreisen', 'Eventreisen' ],
-                    [ 'Stornierung & Reklamation', 'Stornierung & Reklamation' ],
+                    [ 'Teilnahmebedingungen', 'Teilnahmebedingungen' ],
-                    [ 'Versicherung & Sicherheit', 'Versicherung & Sicherheit' ],
+                    [ 'Zahlung & Rechnung', 'Zahlung & Rechnung' ],
+                    [ 'Kontakt & Erreichbarkeit', 'Kontakt & Erreichbarkeit' ],
+                    [ 'Stornierung, Reklamation & Versicherung', 'Stornierung, Reklamation & Versicherung' ],
                 ],
                 'default' => '',
             ],

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

@@ -5,7 +5,7 @@ export default class extends Controller {
 
     static debounces = [ 'filter' ]
 
-    static targets = [ 'entry', 'category' ]
+    static targets = [ 'entry', 'category', 'empty' ]
 
     initialize() {
         useDebounce(this)
@@ -16,6 +16,7 @@ export default class extends Controller {
         if (value.length < 3) {
             this.entryTargets.forEach(entry => entry.classList.remove('hidden'))
             this.categoryTargets.forEach(category => category.classList.remove('hidden'))
+            this.toggleEmpty(false)
             return
         }
         const pattern = new RegExp(value, 'i')
@@ -29,5 +30,13 @@ export default class extends Controller {
                 .some(entry => !entry.classList.contains('hidden'))
             category.classList.toggle('hidden', !hasVisible)
         })
+        const hasVisible = this.entryTargets.some(entry => !entry.classList.contains('hidden'))
+        this.toggleEmpty(!hasVisible)
+    }
+
+    toggleEmpty(show) {
+        if (this.hasEmptyTarget) {
+            this.emptyTarget.classList.toggle('hidden', !show)
+        }
     }
 }

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

@@ -42,6 +42,10 @@
                             </div>
                         </div>
                     </f:for>
+                    <div class="hidden text-white py-4"
+                         data-faq-target="empty">
+                        Keine Treffer gefunden. Bitte ändere deinen Suchbegriff.
+                    </div>
                     <f:if condition="{settings.infoPageUid}">
                         <div class="flex items-center justify-end space-x-2 text-sm text-white">
                             {ep:icon(icon: 'info-circle', class: 'w-4 h-4')}

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

@@ -4,26 +4,30 @@
       xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
 
     <f:if condition="{faqs}">
-        <div class="mt-6"
+        <div class="py-4" data-faq-target="category">
-             data-faq-target="category">
             <f:if condition="{category}">
-                <span class="headline--4 text-white uppercase mb-3 block">{category}</span>
+                <div class="flex items-center space-x-2 pb-3">
+                    <div class="bg-badge-gradient text-white rounded-full w-8 h-8 flex items-center justify-center">
+                        <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5.45455 15L1 18.5V3C1 2.44772 1.44772 2 2 2H17C17.5523 2 18 2.44772 18 3V15H5.45455ZM4.76282 13H16V4H3V14.3851L4.76282 13ZM8 17H18.2372L20 18.3851V8H21C21.5523 8 22 8.44772 22 9V22.5L17.5455 19H9C8.44772 19 8 18.5523 8 18V17Z"></path></svg>
+                    </div>
+                    <span class="headline--4 uppercase block">{category}</span>
+                </div>
             </f:if>
             <f:for each="{faqs}" as="faq">
-                <div class="p-4 rounded mb-2"
+                <div class="py-4"
                      data-controller="collapse"
                      data-collapse-collapsed-value="true"
                      data-faq-target="entry">
                     <button type="button"
                             aria-label="Antwort anzeigen/ausblenden"
-                            class="text-lg md:text-xl text-white flex items-center space-x-4"
+                            class="text-lg md:text-xl flex items-center"
                             data-action="collapse#toggle">
-                        {ep:icon(icon: 'chevron-right', class: 'w-4 h-4 text-white transition-transform duration-200 ease-in-out', data: '{collapse-target: \'icon\'}')}
+                        {ep:icon(icon: 'chevron-right', class: 'w-6 h-6 transition-transform duration-200 ease-in-out', data: '{collapse-target: \'icon\'}')}
                         <span class="text-left">
                             {faq.data.question}
                         </span>
                     </button>
-                    <div class="text-white pt-2 transition-transform ease-out overflow-hidden origin-top transform hidden"
+                    <div class="pt-2 pl-6 transition-transform ease-out overflow-hidden origin-top transform hidden max-w-screen-md"
                          data-collapse-target="container"
                          data-rte-content>
                         {faq.data.answer -> f:format.html()}

public/typo3conf/ext/ep_theme/Resources/Private/Templates/FluidStyledContent/FaqOverview.html

@@ -7,33 +7,32 @@
 
     <f:section name="Main">
         <f:if condition="{faqs}">
-            <div class="bg-winter my-4">
+            <div class="py-8 bg-ep-primary-bg">
-                <div class="bg-ep-primary/90 sbw:bg-sbw-primary/90 uch:bg-uch-primary/90 ser:bg-ser-primary/90 py-8">
+                <div class="container"
-                    <div class="container"
+                     data-controller="faq">
-                         data-controller="faq">
+                    <div class="relative mb-4 max-w-screen-md">
-                        <span class="headline--3 text-white uppercase mb-4">
+                        <input type="text"
-                            Häufig gestellte Fragen
+                               aria-label="Suchbegriff"
-                        </span>
+                               data-action="faq#filter"
-                        <div class="mb-4 pr-2 w-80 border-b border-r border-white flex items-center justify-between">
+                               class="form-field"
-                            <input type="text"
+                               placeholder="Suchbegriff">
-                                   aria-label="Suchbegriff"
+                        {ep:icon(icon: 'search', class: 'w-6 h-6 absolute top-2 right-2')}
-                                   data-action="faq#filter"
-                                   class="bg-transparent border-0 uppercase ring-0 focus:ring-0 placeholder-white text-white"
-                                   placeholder="Suchbegriff">
-                            {ep:icon(icon: 'search', class: 'w-6 h-6 text-white')}
-                        </div>
-                        <f:groupedFor each="{faqs}" as="groupFaqs" groupBy="data.category" groupKey="categoryName">
-                            <f:render partial="FaqGroup" arguments="{faqs: groupFaqs, category: categoryName}"/>
-                        </f:groupedFor>
-                        <f:if condition="{settings.infoPageUid}">
-                            <div class="flex items-center justify-end space-x-2 text-sm text-white">
-                                {ep:icon(icon: 'info-circle', class: 'w-4 h-4')}
-                                <a href="{f:uri.typolink(parameter: settings.infoPageUid)}" class="underline">
-                                    Weitere Reiseinfos findet ihr hier
-                                </a>
-                            </div>
-                        </f:if>
                     </div>
+                    <f:groupedFor each="{faqs}" as="groupFaqs" groupBy="data.category" groupKey="categoryName">
+                        <f:render partial="FaqGroup" arguments="{faqs: groupFaqs, category: categoryName}"/>
+                    </f:groupedFor>
+                    <div class="hidden py-4"
+                         data-faq-target="empty">
+                        Keine Treffer gefunden. Bitte ändere deinen Suchbegriff.
+                    </div>
+                    <f:if condition="{settings.infoPageUid}">
+                        <div class="flex items-center space-x-2 text-sm">
+                            {ep:icon(icon: 'info-circle', class: 'w-4 h-4')}
+                            <a href="{f:uri.typolink(parameter: settings.infoPageUid)}" class="underline">
+                                Weitere Reiseinfos findet ihr hier
+                            </a>
+                        </div>
+                    </f:if>
                 </div>
             </div>
         </f:if>