feat: adjust faq styles
This commit is contained in:
Björn Fromme
Generated
+3445
-2499
File diff suppressed because it is too large
Load Diff
+9
-8
@@ -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' ],
|
||||
[ 'Eventreisen', 'Eventreisen' ],
|
||||
[ 'Gepäck', 'Gepäck' ],
|
||||
[ 'Kontakt & Erreichbarkeit', 'Kontakt & Erreichbarkeit' ],
|
||||
[ 'Unterkunft & Sportclubs', 'Unterkunft & Sportclubs' ],
|
||||
[ 'Programm & Aktivitäten', 'Programm & Aktivitäten' ],
|
||||
[ 'Skipass & Skigebiet', 'Skipass & Skigebiet' ],
|
||||
[ 'Stornierung & Reklamation', 'Stornierung & Reklamation' ],
|
||||
[ 'Versicherung & Sicherheit', 'Versicherung & Sicherheit' ],
|
||||
[ 'Eventreisen', 'Eventreisen' ],
|
||||
[ 'Teilnahmebedingungen', 'Teilnahmebedingungen' ],
|
||||
[ 'Zahlung & Rechnung', 'Zahlung & Rechnung' ],
|
||||
[ 'Kontakt & Erreichbarkeit', 'Kontakt & Erreichbarkeit' ],
|
||||
[ 'Stornierung, Reklamation & Versicherung', 'Stornierung, Reklamation & Versicherung' ],
|
||||
],
|
||||
'default' => '',
|
||||
],
|
||||
|
||||
+10
-1
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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')}
|
||||
|
||||
@@ -4,26 +4,30 @@
|
||||
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
|
||||
|
||||
<f:if condition="{faqs}">
|
||||
<div class="mt-6"
|
||||
data-faq-target="category">
|
||||
<div class="py-4" 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()}
|
||||
|
||||
+25
-26
@@ -7,33 +7,32 @@
|
||||
|
||||
<f:section name="Main">
|
||||
<f:if condition="{faqs}">
|
||||
<div class="bg-winter my-4">
|
||||
<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"
|
||||
data-controller="faq">
|
||||
<span class="headline--3 text-white uppercase mb-4">
|
||||
Häufig gestellte Fragen
|
||||
</span>
|
||||
<div class="mb-4 pr-2 w-80 border-b border-r border-white flex items-center justify-between">
|
||||
<input type="text"
|
||||
aria-label="Suchbegriff"
|
||||
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 class="py-8 bg-ep-primary-bg">
|
||||
<div class="container"
|
||||
data-controller="faq">
|
||||
<div class="relative mb-4 max-w-screen-md">
|
||||
<input type="text"
|
||||
aria-label="Suchbegriff"
|
||||
data-action="faq#filter"
|
||||
class="form-field"
|
||||
placeholder="Suchbegriff">
|
||||
{ep:icon(icon: 'search', class: 'w-6 h-6 absolute top-2 right-2')}
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user