EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement and apply icon viewhelper

Browse Source
This commit is contained in:
Björn Fromme
2022-06-01 14:57:46 +02:00
parent a2410877e6
commit 0ea29e5808
24 changed files with 219 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Classes/ViewHelpers/IconViewHelper.php
+11 -27
View File
@@ -4,49 +4,33 @@ namespace EP\EpTheme\ViewHelpers;
use TYPO3\CMS\Core\Utility\GeneralUtility;
use TYPO3\CMS\Extbase\Service\ImageService;
use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
use TYPO3Fluid\Fluid\Core\ViewHelper\Traits\CompileWithRenderStatic;
use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractTagBasedViewHelper;
class IconViewHelper extends AbstractViewHelper
class IconViewHelper extends AbstractTagBasedViewHelper
{
use CompileWithRenderStatic;
/**
* @var bool
* @var string
*/
protected $escapeOutput = false;
protected $tagName = 'svg';
public function initializeArguments()
{
parent::initializeArguments();
$this->registerArgument('icon', 'string', 'Icon name');
$this->registerArgument('class', 'string', 'CSS classes');
$this->registerUniversalTagAttributes();
$this->registerArgument('icon', 'string', 'Icon name', true);
}
/**
* @param array $arguments
* @param \Closure $renderChildrenClosure
* @param RenderingContextInterface $renderingContext
* @return mixed
*/
public static function renderStatic(
array $arguments,
\Closure $renderChildrenClosure,
RenderingContextInterface $renderingContext
)
public function render(): string
{
$imageService = self::getImageService();
$sprite = $imageService->getImage('EXT:ep_theme/Resources/Public/images/icons_sprite.svg', null, false);
$imageUrl = $sprite->getPublicUrl();
return sprintf(
'<svg class="%s"><use href="%s#icon-%s"></use></svg>',
$arguments['class'],
$imageUrl,
$arguments['icon']
);
$content = sprintf('<use href="%s#icon-%s"></use>', $imageUrl, $this->arguments['icon']);
$this->tag->setContent($content);
return $this->tag->render();
}
protected static function getImageService()
public/typo3conf/ext/ep_theme/Resources/Private/Partials/City/Teaser.html
+1 -3
View File
@@ -6,9 +6,7 @@
<f:section name="Teaser">
<a href="{f:uri.typolink(parameter: city.detailPage)}" class="flex flex-col" title="{city.name}">
<div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{city.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
{ep:icon(icon: 'flag-{city.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
<f:alias map="{teaserImage: city.teaserImage, defaultImage: city.images.0}">
<f:if condition="{teaserImage}">
<f:then>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
+9 -24
View File
@@ -1,5 +1,6 @@
<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="contact-bar">
@@ -18,9 +19,7 @@
class="contact-bar__item"
title="Telefonische Beratung"
rel="nofollow">
<svg class="contact-bar__icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-phone"></use>
</svg>
{ep:icon(icon: 'phone', class: 'contact-bar__icon')}
<div class="hidden md:block">
{settings.phoneNumber}
</div>
@@ -28,9 +27,7 @@
<f:link.email email="{settings.contactFormToEmail}"
class="contact-bar__item"
title="E-Mail">
<svg class="contact-bar__icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-email"></use>
</svg>
{ep:icon(icon: 'email', class: 'contact-bar__icon')}
<div class="contact-bar__label">
{settings.contactFormToEmail}
</div>
@@ -40,9 +37,7 @@
title="Whatsapp"
target="_blank"
rel="nofollow">
<svg class="contact-bar__icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-whatsapp"></use>
</svg>
{ep:icon(icon: 'whatsapp', class: 'contact-bar__icon')}
<div class="contact-bar__label">
{settings.whatsApp}
</div>
@@ -51,9 +46,7 @@
class="contact-bar__item"
target="_blank"
rel="nofollow">
<svg class="contact-bar__icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-facebook"></use>
</svg>
{ep:icon(icon: 'facebook', class: 'contact-bar__icon')}
<div class="contact-bar__label">
Facebook
</div>
@@ -62,9 +55,7 @@
class="contact-bar__item"
target="_blank"
rel="nofollow">
<svg class="contact-bar__icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-instagram"></use>
</svg>
{ep:icon(icon: 'instagram', class: 'contact-bar__icon')}
<div class="contact-bar__label">
Instagram
</div>
@@ -73,18 +64,14 @@
class="contact-bar__item"
target="_blank"
rel="nofollow">
<svg class="contact-bar__icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-youtube"></use>
</svg>
{ep:icon(icon: 'youtube', class: 'contact-bar__icon')}
<div class="contact-bar__label">
Youtube
</div>
</a>
<f:if condition="{settings.englishPageUid}">
<f:link.typolink parameter="{settings.englishPageUid}" title="English" class="contact-bar__item">
<svg class="contact-bar__icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-gb"></use>
</svg>
{ep:icon(icon: 'flag-gb', class: 'contact-bar__icon')}
<div class="contact-bar__label">
English
</div>
@@ -92,9 +79,7 @@
</f:if>
<f:if condition="{settings.germanPageUid}">
<f:link.typolink parameter="{settings.germanPageUid}" title="English" class="contact-bar__item">
<svg class="contact-bar__icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-de"></use>
</svg>
{ep:icon(icon: 'flag-de', class: 'contact-bar__icon')}
<div class="contact-bar__label">
Deutsch
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+1 -3
View File
@@ -24,9 +24,7 @@
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 flex items-center space-x-2 {ep:themeClasses(classes: '{ep: \'bg-ep-secondary\', sbw: \'bg-sbw-secondary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
<svg class="w-10 h-10 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-phone"></use>
</svg>
{ep:icon(icon: 'phone', class: 'w-10 h-10 text-white')}
<div class="text-center text-white">
<span class="block whitespace-nowrap">
Ihr habt Fragen?
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+1 -3
View File
@@ -25,9 +25,7 @@
<a href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}"
rel="nofollow"
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 flex items-center space-x-2 {ep:themeClasses(classes: '{ep: \'bg-ep-secondary\', sbw: \'bg-sbw-secondary\', snz: \'bg-snz-secondary\', uch: \'bg-uch-secondary\'}', key: settings.themekey)}">
<svg class="w-10 h-10 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-phone"></use>
</svg>
{ep:icon(icon: 'phone', class: 'w-10 h-10 text-white')}
<div class="text-center text-white">
<span class="block whitespace-nowrap">
Ihr habt Fragen?
public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html
+1 -3
View File
@@ -14,9 +14,7 @@
<ul class="list-none inline-flex lg:flex flex-col space-y-1 lg:space-y-2">
<f:for each="{listItems -> v:iterator.explode(glue: ';')}" as="listItem">
<li class="flex items-center space-x-2 text-white">
<svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-check"></use>
</svg>
{ep:icon(icon: 'check', class: 'w-6 h-6')}
<span>{listItem -> f:format.raw()}</span>
</li>
</f:for>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Facts.html
+29 -24
View File
@@ -1,24 +1,29 @@
<f:if condition="{facts -> f:count()} > 0">
<div class="bg-gray-50 p-4 mb-4">
<h2 class="text-base font-bold mb-1">
<f:if condition="{title}">
<f:then>
Skiurlaub {title} Facts
</f:then>
<f:else>
Facts
</f:else>
</f:if>
</h2>
<ul class="list-none m-0 p-0">
<f:for each="{facts}" as="fact">
<li class="flex items-center space-x-2">
<svg class="w-6 h-6 text-ep-primary-light">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-check"></use>
</svg>
<span>{fact.name}</span>
</li>
</f:for>
</ul>
</div>
</f:if>
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:if condition="{facts -> f:count()} > 0">
<div class="bg-gray-50 p-4 mb-4">
<h2 class="text-base font-bold mb-1">
<f:if condition="{title}">
<f:then>
Skiurlaub {title} Facts
</f:then>
<f:else>
Facts
</f:else>
</f:if>
</h2>
<ul class="list-none m-0 p-0">
<f:for each="{facts}" as="fact">
<li class="flex items-center space-x-2">
{ep:icon(icon: 'check', class: 'w-6 h-6 text-ep-primary-light')}
<span>{fact.name}</span>
</li>
</f:for>
</ul>
</div>
</f:if>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Faq.html
+55 -55
View File
@@ -1,58 +1,58 @@
<f:if condition="{faqs}">
<div class="bg-winter my-2">
<div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 uch:bg-uch-primary-80">
<f:render partial="Disrupter/Outlines" section="Top2" arguments="{classes: 'hidden md:block text-white'}"/>
<div class="container"
data-controller="faq">
<span class="headline--3 text-white uppercase mb-4">
Häufig gestellte Fragen
</span>
<f:if condition="{filter}">
<div class="mb-4 pr-2 w-80 border-b border-r border-white flex items-center justify-between">
<input type="text"
data-action="faq#filter"
class="bg-transparent border-0 uppercase ring-0 focus:ring-0 placeholder-white text-white"
placeholder="Suchbegriff">
<svg class="w-6 h-6 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-search"></use>
</svg>
</div>
</f:if>
<f:for each="{faqs}" as="faq" iteration="iteration">
<div class="p-4 rounded mb-2"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: iteration.isFirst, then: 'false', else: 'true')}"
data-faq-target="entry">
<button type="button"
class="uppercase text-lg text-white flex items-center space-x-4"
data-action="collapse#toggle">
<svg class="w-4 h-4 text-white transform transition duration-200 ease-in-out"
data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-right"></use>
</svg>
<span>
{faq.question}
</span>
</button>
<div class="text-white pt-2 transition-transform ease-out overflow-hidden origin-top transform hidden"
data-collapse-target="container"
data-rte-content>
{faq.answer -> f:format.html()}
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:if condition="{faqs}">
<div class="bg-winter my-2">
<div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 uch:bg-uch-primary-80">
<f:render partial="Disrupter/Outlines" section="Top2" arguments="{classes: 'hidden md:block text-white'}"/>
<div class="container"
data-controller="faq">
<span class="headline--3 text-white uppercase mb-4">
Häufig gestellte Fragen
</span>
<f:if condition="{filter}">
<div class="mb-4 pr-2 w-80 border-b border-r border-white flex items-center justify-between">
<input type="text"
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>
</div>
</f:for>
<f:if condition="{settings.infoPageUid}">
<div class="flex items-center justify-end space-x-2 text-sm text-white">
<svg class="w-4 h-4">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-info-circle"></use>
</svg>
<a href="{f:uri.typolink(parameter: settings.infoPageUid)}">
Weitere Reiseinfos findet ihr <span class="underline">hier</span>
</a>
</div>
</f:if>
</f:if>
<f:for each="{faqs}" as="faq" iteration="iteration">
<div class="p-4 rounded mb-2"
data-controller="collapse"
data-collapse-collapsed-value="{f:if(condition: iteration.isFirst, then: 'false', else: 'true')}"
data-faq-target="entry">
<button type="button"
class="uppercase text-lg text-white flex items-center space-x-4"
data-action="collapse#toggle">
{ep:icon(icon: 'chevron-right', class: 'w-4 h-4 text-white transform transition-transform duration-200 ease-in-out', data: '{collapse-target: \'icon\'}')}
<span>
{faq.question}
</span>
</button>
<div class="text-white pt-2 transition-transform ease-out overflow-hidden origin-top transform hidden"
data-collapse-target="container"
data-rte-content>
{faq.answer -> f:format.html()}
</div>
</div>
</f:for>
<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)}">
Weitere Reiseinfos findet ihr <span class="underline">hier</span>
</a>
</div>
</f:if>
</div>
<f:render partial="Disrupter/Outlines" section="Bottom2" arguments="{classes: 'hidden md:block transform translate-y-2 text-white'}"/>
</div>
<f:render partial="Disrupter/Outlines" section="Bottom2" arguments="{classes: 'hidden md:block transform translate-y-2 text-white'}"/>
</div>
</div>
</f:if>
</f:if>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+7 -19
View File
@@ -36,9 +36,7 @@
<div class="grid grid-cols-2 gap-16">
<div class="flex">
<div class="flex items-start space-x-2 pr-4">
<svg class="w-12 h-12 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-phone"></use>
</svg>
{ep:icon(icon: 'phone', class: 'w-12 h-12 text-white')}
<div class="text-white">
<span class="block uppercase text-xl">
Service-Telefon
@@ -62,9 +60,7 @@
</div>
<div class="flex">
<div class="flex items-start space-x-2 pr-4">
<svg class="w-12 h-12 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-whatsapp"></use>
</svg>
{ep:icon(icon: 'whatsapp', class: 'w-12 h-12 text-white')}
<div class="text-white">
<span class="block uppercase text-xl">
WhatsApp
@@ -131,25 +127,19 @@
title="E&amp;P bei Facebook"
rel="nofollow"
target="_blank">
<svg class="w-6 h-6 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-facebook"></use>
</svg>
{ep:icon(icon: 'facebook', class: 'w-6 h-6 text-white')}
</a>
<a href="{settings.instagramUrl}"
title="E&amp;P bei Instagram"
rel="nofollow"
target="_blank">
<svg class="w-6 h-6 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-instagram"></use>
</svg>
{ep:icon(icon: 'instagram', class: 'w-6 h-6 text-white')}
</a>
<a href="{settings.youtubeUrl}"
title="E&amp;P bei YouTube"
rel="nofollow"
target="_blank">
<svg class="w-6 h-6 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-youtube"></use>
</svg>
{ep:icon(icon: 'youtube', class: 'w-6 h-6 text-white')}
</a>
</div>
</div>
@@ -174,10 +164,8 @@
<button type="button"
data-controller="scroll-top"
data-action="scroll-top#scroll"
class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80 ser:bg-ser-secondary">
<svg class="w-8 h-8 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-up"></use>
</svg>
class="hidden fixed bottom-0 right-0 mb-16 md:mb-8 mr-4 md:mr-8 z-10 h-10 w-10 flex items-center justify-center rounded bg-ep-secondary-80">
{ep:icon(icon: 'chevron-up', class: 'w-8 h-8 text-white')}
</button>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Details.html
+2 -6
View File
@@ -36,16 +36,12 @@
class="opacity-50"
data-action="teasergrid#grid"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
</svg>
{ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
</button>
<button type="button"
data-action="teasergrid#block"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
</svg>
{ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
</button>
</div>
<div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/Teaser.html
+1 -3
View File
@@ -6,9 +6,7 @@
<f:section name="Teaser">
<a href="{f:uri.typolink(parameter: hotel.detailPage)}" title="{hotel.name}" class="flex flex-col">
<div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{hotel.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
{ep:icon(icon: 'flag-{hotel.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
<f:if condition="{hotel.images.original.0}">
<f:then>
<ep:lazyLoadImage image="{hotel.images.original.0}"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/ImageGallery.html
+1 -3
View File
@@ -6,9 +6,7 @@
<div class="relative mb-4"
data-controller="lightbox">
<div class="absolute top-0 right-0 mt-4 mr-4 flex space-x-2 text-white">
<svg class="w-8 h-8 md:w-10 h-10">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-search"></use>
</svg>
{ep:icon(icon: 'search', class: 'w-8 h-8 md:w-10 md:h-10')}
<span class="text-4xl">
{images -> f:count()}
</span>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mainnav.html
+7 -21
View File
@@ -24,9 +24,7 @@
data-controller="overlay-toggle"
data-overlay-toggle-id-value="mobile-search"
data-action="overlay-toggle#invokeToggle">
<svg class="w-8 h-8 text-gray-800">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-search"></use>
</svg>
{ep:icon(icon: 'search', class: 'w-8 h-8 text-gray-800')}
</button>
</f:else>
</f:if>
@@ -35,9 +33,7 @@
data-controller="overlay-toggle"
data-overlay-toggle-id-value="mobilenav"
data-action="overlay-toggle#invokeToggle">
<svg class="w-8 h-8 text-gray-800">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-menu"></use>
</svg>
{ep:icon(icon: 'menu', class: 'w-8 h-8 text-gray-800')}
</button>
</div>
</div>
@@ -55,9 +51,7 @@
class="block text-gray-800 uppercase lg:text-lg font-bold flex items-center"
title="{topitem.title}">
<span>{topitem.title}</span>
<svg class="ml-1 w-4 h-4 transform group-hover:rotate-180">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-down"></use>
</svg>
{ep:icon(icon: 'chevron-down', class: 'ml-1 w-4 h-4 transform group-hover:rotate-180')}
</a>
<f:render section="SecondLevel" arguments="{topitem: topitem}"/>
</f:then>
@@ -79,16 +73,12 @@
<button type="button"
data-controller="searchbar-toggle"
data-action="searchbar-toggle#toggle">
<svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-search"></use>
</svg>
{ep:icon(icon: 'search', class: 'w-6 h-6')}
</button>
</f:then>
<f:else>
<f:link.typolink parameter="{settings.defaultSearchPageUid}">
<svg class="w-6 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-search"></use>
</svg>
{ep:icon(icon: 'search', class: 'w-6 h-6')}
</f:link.typolink>
</f:else>
</f:if>
@@ -109,9 +99,7 @@
<f:then>
<a href="{subitem.link}" target="_blank" title="{subitem.title}">
<f:if condition="{subitem.data.tx_eptheme_context_country_code}">
<svg class="block w-8 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: 'lower')}"></use>
</svg>
{ep:icon(icon: 'flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6')}
</f:if>
<span class="text-gray-800 uppercase lg:text-lg">
{subitem.title}
@@ -123,9 +111,7 @@
class="flex items-center space-x-2 underlined"
title="{subitem.title}">
<f:if condition="{subitem.data.tx_eptheme_context_country_code}">
<svg class="block w-8 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: 'lower')}"></use>
</svg>
{ep:icon(icon: 'flag-{subitem.data.tx_eptheme_context_country_code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6')}
</f:if>
<span class="text-gray-800 uppercase lg:text-lg">
{subitem.title}
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Mobilenav.html
+8 -21
View File
@@ -1,6 +1,7 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<f:section name="Main">
@@ -23,18 +24,14 @@
data-controller="overlay-toggle"
data-overlay-toggle-id-value="search"
data-action="overlay-toggle#invokeToggle">
<svg class="w-8 h-8 text-gray-800">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-search"></use>
</svg>
{ep:icon(icon: 'search', class: 'w-8 h-8 text-gray-800')}
</button>
</f:else>
</f:if>
<button type="button"
class="focus:outline-none"
data-action="overlay-toggle#invokeToggle">
<svg class="w-8 h-8">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-close"></use>
</svg>
{ep:icon(icon: 'close', class: 'w-8 h-8')}
</button>
</div>
</div>
@@ -56,9 +53,7 @@
class="button button--primary flex items-center space-x-2"
title="Anrufen"
rel="nofollow">
<svg class="w-6 h-6 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-phone"></use>
</svg>
{ep:icon(icon: 'phone', class: 'w-6 h-6 text-white')}
<span class="hidden sm:block">
Anrufen
</span>
@@ -68,9 +63,7 @@
title="WhatsApp"
rel="nofollow"
target="_blank">
<svg class="w-6 h-6 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-whatsapp"></use>
</svg>
{ep:icon(icon: 'whatsapp', class: 'w-6 h-6 text-white')}
<span class="hidden sm:block">
Whatsapp
</span>
@@ -79,9 +72,7 @@
<a href="{f:uri.typolink(parameter: settings.faqPageUid)}"
class="button button--primary flex items-center space-x-2"
title="FAQ">
<svg class="w-6 h-6 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-faq"></use>
</svg>
{ep:icon(icon: 'faq', class: 'w-6 h-6 text-white')}
<span class="hidden sm:block">
FAQ
</span>
@@ -109,9 +100,7 @@
<button type="button"
class="focus:outline-none bg-ep-primary-dark p-1"
data-action="collapse#toggle">
<svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-right"></use>
</svg>
{ep:icon(icon: 'chevron-right', class: 'w-6 h-6 transform text-white', data: '{collapse-target: \'icon\'}')}
</button>
</div>
<div data-collapse-target="container" class="bg-ep-primary-dark pr-4">
@@ -150,9 +139,7 @@
<button type="button"
class="focus:outline-none bg-ep-primary p-1"
data-action="collapse#toggle">
<svg class="h-6 w-6 transform text-white" data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-right"></use>
</svg>
{ep:icon(icon: 'chevron-right', class: 'w-6 h-6 transform text-white', data: '{collapse-target: \'icon\'}')}
</button>
</div>
<div data-collapse-target="container">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
+6 -13
View File
@@ -1,6 +1,7 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:if condition="{pricetable -> f:count()} == 0">
<f:then>
@@ -62,18 +63,14 @@
data-pricetable-target="busIcon"
data-bus-included="{row.busIncluded}"
data-bus-price="{row.busPrice}">
<svg class="w-4 h-4 md:w-5 md:h-5">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-bus"></use>
</svg>
{ep:icon(icon: 'bus', class: 'w-4 h-4 md:w-5 md:h-5')}
</span>
</f:if>
<f:if condition="{row.skipassIncluded}">
<span data-cooltipz-dir="top"
aria-label="Skipass"
role="tooltip">
<svg class="w-4 h-4 md:w-5 md:h-5">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-tag"></use>
</svg>
{ep:icon(icon: 'tag', class: 'w-4 h-4 md:w-5 md:h-5')}
</span>
</f:if>
</td>
@@ -86,9 +83,7 @@
data-cooltipz-dir="top"
aria-label="Alle Zusatzleistungen anzeigen"
role="tooltip">
<svg class="w-4 h-4 md:w-5 md:h-5">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-plus-circle"></use>
</svg>
{ep:icon(icon: 'plus-circle', class: 'w-4 h-4 md:w-5 md:h-5')}
</button>
</f:if>
</td>
@@ -129,9 +124,7 @@
<button type="button"
class="inline-block"
data-action="modal#close">
<svg class="w-8 h-8">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-close"></use>
</svg>
{ep:icon(icon: 'close', class: 'w-8 h-8')}
</button>
</div>
<div class="h-128 p-4 overflow-y-scroll bg-white rounded-b">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/HeaderDetail.html
+6 -13
View File
@@ -1,6 +1,7 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<f:alias map="{headerImage: product.headerImages.0, defaultImage: product.images.0}">
<f:if condition="{headerImage}">
@@ -30,22 +31,16 @@
{product.region.name}
</span>
<div class="flex items-center space-x-4 mt-4">
<svg class="w-8 h-6 md:w-10 md:h-8">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{product.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
{ep:icon(icon: 'flag-{product.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 md:w-10 md:h-8')}
<f:if condition="{hotel}">
<f:then>
<a href="{ep:gmapsUrl(hotel: hotel)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
<svg class="w-4 h-4 md:w-6 md:h-6 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-location-marker"></use>
</svg>
{ep:icon(icon: 'location-marker', class: 'w-4 h-4 md:w-6 md:h-6 text-white')}
</a>
</f:then>
<f:else>
<a href="{ep:gmapsUrl(region: product.region)}" target="_blank" class="block bg-ep-primary-light px-2 py-1">
<svg class="w-4 h-4 md:w-6 md:h-6 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-location-marker"></use>
</svg>
{ep:icon(icon: 'location-marker', class: 'w-4 h-4 md:w-6 md:h-6 text-white')}
</a>
</f:else>
</f:if>
@@ -57,9 +52,7 @@
</div>
<f:if condition="{referringUrl}">
<a href="{referringUrl}" class="button button--small mt-8">
<svg class="w-4 h-4 text-white">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-chevron-left"></use>
</svg>
{ep:icon(icon: 'chevron-left', class: 'w-4 h-4 text-white')}
<span>{backlinkLabel}</span>
</a>
</f:if>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Details.html
+5 -15
View File
@@ -24,18 +24,14 @@
<div class="grid grid-cols-3 gap-4 mb-4">
<div class="flex items-center space-x-2"
data-cooltipz-dir="top-left" aria-label="Pisten" role="tooltip">
<svg class="w-4 h-4 md:w-6 md:h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-ski"></use>
</svg>
{ep:icon(icon: 'ski', class: 'w-4 h-4 md:w-6 md:h-6')}
<span class="text-sm md:text-base whitespace-nowrap">
{region.length}
</span>
</div>
<div class="flex items-center space-x-2"
data-cooltipz-dir="top-left" aria-label="Höhe" role="tooltip">
<svg class="w-4 h-4 md:w-6 md:h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-mountain"></use>
</svg>
{ep:icon(icon: 'mountain', class: 'w-4 h-4 md:w-6 md:h-6')}
<span class="text-sm md:text-base whitespace-nowrap">
{region.height}
</span>
@@ -43,9 +39,7 @@
<f:if condition="{region.lifts}">
<div class="flex items-center space-x-2"
data-cooltipz-dir="top-left" aria-label="Lifte" role="tooltip">
<svg class="w-4 h-4 md:w-6 md:h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-lift"></use>
</svg>
{ep:icon(icon: 'lift', class: 'w-4 h-4 md:w-6 md:h-6')}
<span class="text-sm md:text-base whitespace-nowrap">
{region.lifts}
</span>
@@ -69,16 +63,12 @@
class="opacity-50"
data-action="teasergrid#grid"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
</svg>
{ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
</button>
<button type="button"
data-action="teasergrid#block"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
</svg>
{ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
</button>
</div>
<div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Region/Teaser.html
+1 -3
View File
@@ -6,9 +6,7 @@
<f:section name="Teaser">
<a href="{f:uri.typolink(parameter: region.detailPage)}" title="{region.name}" class="flex flex-col">
<div class="relative">
<svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{region.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
{ep:icon(icon: 'flag-{region.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
<ep:lazyLoadImage image="{region.teaserImages.0}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
class="block w-full h-full object-cover"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Regioninfo.html
+38 -37
View File
@@ -1,37 +1,38 @@
<div class="bg-gray-50 p-4 mb-4">
<p class="font-bold mb-1">
Gebietsinfo
</p>
<ul>
<f:if condition="{region.length}">
<li class="flex items-center space-x-2">
<svg class="w-4 h-4">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-ski"></use>
</svg>
<span>
Pisten: {region.length}
</span>
</li>
</f:if>
<f:if condition="{region.height}">
<li class="flex items-center space-x-2">
<svg class="w-4 h-4">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-mountain"></use>
</svg>
<span>
Höhe: {region.height}
</span>
</li>
</f:if>
<f:if condition="{region.lifts}">
<li class="flex items-center space-x-2">
<svg class="w-4 h-4">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-lift"></use>
</svg>
<span>
Lifte: {region.lifts}
</span>
</li>
</f:if>
</ul>
</div>
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<div class="bg-gray-50 p-4 mb-4">
<p class="font-bold mb-1">
Gebietsinfo
</p>
<ul>
<f:if condition="{region.length}">
<li class="flex items-center space-x-2">
{ep:icon(icon: 'ski', class: 'w-4 h-4')}
<span>
Pisten: {region.length}
</span>
</li>
</f:if>
<f:if condition="{region.height}">
<li class="flex items-center space-x-2">
{ep:icon(icon: 'mountain', class: 'w-4 h-4')}
<span>
Höhe: {region.height}
</span>
</li>
</f:if>
<f:if condition="{region.lifts}">
<li class="flex items-center space-x-2">
{ep:icon(icon: 'lift', class: 'w-4 h-4')}
<span>
Lifte: {region.lifts}
</span>
</li>
</f:if>
</ul>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/FilterPanel.html
+17 -54
View File
@@ -9,16 +9,11 @@
<button type="button"
data-action="click->collapse#toggle"
class="flex items-center justify-between w-full bg-brand-gradient p-4">
<svg class="w-6 h-6 text-white mr-2">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-calendar"></use>
</svg>
{ep:icon(icon: 'calendar', class: 'w-6 h-6 text-white mr-2')}
<span class="flex-1 uppercase font-bold text-white text-left">
Reisezeitraum
</span>
<svg class="w-6 h-6 text-white transform"
data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
</svg>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<f:form.hidden property="dateFrom"
@@ -37,9 +32,7 @@
<input type="text"
class="border-px border-white text-white text-xl p-2 w-full bg-transparent focus:border-white focus:ring-0"
data-datepicker-target="field">
<svg class="w-6 h-6 text-white absolute top-0 right-0 transform translate-y-1/2 mr-2">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-calendar"></use>
</svg>
{ep:icon(icon: 'calendar', class: 'w-6 h-6 text-white absolute top-0 right-0 transform translate-y-1/2 mr-2')}
</div>
<f:if condition="{settings.datePickerPresets}">
<div class="flex flex-col divide-y divide-overlay-white mt-2">
@@ -49,9 +42,7 @@
data-preset='{preset -> f:format.json() -> f:format.raw()}'
data-action="datepicker#selectPreset">
<span class="uppercase font-bold">{preset.label}</span>
<svg class="w-6 h-6 transform">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
</svg>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6')}
</button>
</f:for>
</div>
@@ -73,16 +64,11 @@
<button type="button"
data-action="click->collapse#toggle"
class="flex items-center justify-between w-full bg-brand-gradient p-4">
<svg class="w-6 h-6 text-white mr-2">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-concept"></use>
</svg>
{ep:icon(icon: 'concept', class: 'w-6 h-6 text-white mr-2')}
<span class="flex-1 uppercase font-bold text-white text-left">
Reisekonzepte
</span>
<svg class="w-6 h-6 text-white transform"
data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
</svg>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container"
class="p-4 border-t border-overlay-white bg-brand-gradient">
@@ -124,10 +110,7 @@
<span class="uppercase font-bold">
Reiseziel
</span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
</svg>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4">
@@ -141,9 +124,7 @@
<span class="pl-2 leading-none">
<strong>{destination.country.label}</strong>
</span>
<svg class="absolute top-0 right-0 w-8 h-6">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{destination.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
{ep:icon(icon: 'flag-{destination.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 right-0')}
</label>
<f:if condition="{destination.regions}">
<ul class="py-2 space-y-2">
@@ -177,10 +158,7 @@
<span class="uppercase font-bold">
Preis
</span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
</svg>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4 space-y-2">
@@ -210,10 +188,7 @@
<span class="uppercase font-bold">
Personen
</span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
</svg>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<f:form.select class="w-full border-0 focus:ring-0 bg-right bg-transparent text-white lg:bg-white lg:text-gray-800 mt-2 p-0"
@@ -239,10 +214,7 @@
<span class="uppercase font-bold">
Unterkunft
</span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
</svg>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4 space-y-2">
@@ -272,10 +244,7 @@
<span class="uppercase font-bold">
Verpflegung
</span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
</svg>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4 space-y-2">
@@ -315,10 +284,7 @@
<span class="uppercase font-bold">
Zimmerarten/Apart.
</span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
</svg>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 text-white transform', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 p-0 pt-4 space-y-2">
@@ -346,13 +312,10 @@
<button type="button"
data-action="click->collapse#toggle"
class="flex items-center justify-between w-full">
<span class="uppercase font-bold">
Anreise
</span>
<svg class="w-6 h-6 transform"
data-collapse-target="icon">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-arrow-right"></use>
</svg>
<span class="uppercase font-bold">
Anreise
</span>
{ep:icon(icon: 'arrow-right', class: 'w-6 h-6 transform', data: '{collapse-target: \'icon\'}')}
</button>
<div data-collapse-target="container">
<ul class="mb-0 p-0 pt-4 space-y-2">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/MobileSearch.html
+2 -6
View File
@@ -15,9 +15,7 @@
</a>
<button type="button"
class="focus:outline-none" data-action="mobile-search#close">
<svg class="w-8 h-8">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-close"></use>
</svg>
{ep:icon(icon: 'close', class: 'w-8 h-8')}
</button>
</div>
<div data-mobile-search-target="container"
@@ -26,9 +24,7 @@
<div class="fixed top-0 left-0 z-20 w-full h-full hidden"
data-mobile-search-target="loadingIndicator">
<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="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-spinner"></use>
</svg>
{ep:icon(icon: 'spinner', class: 'w-6 h-6')}
<span>Suche wird geladen...</span>
</div>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html
+6 -11
View File
@@ -1,18 +1,17 @@
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">
<div class="flex items-center space-x-4 text-white text-lg p-4 mb-4 {f:if(condition: '{meta.organic} && {meta.total} > 0', then: 'bg-green-600', else: 'bg-red-600')}">
<svg class="w-6 h-6">
<f:if condition="{meta.organic} && {meta.total} > 0">
<f:then>
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-emoji-happy"></use>
{ep:icon(icon: 'emoji-happy', class: 'w-6 h-6')}
</f:then>
<f:else>
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-emoji-sad"></use>
{ep:icon(icon: 'emoji-sad', class: 'w-6 h-6')}
</f:else>
</f:if>
</svg>
<span class="flex-1">
Deine Suche
<f:if condition="{meta.organic}">
@@ -55,16 +54,12 @@
class="opacity-50"
data-action="teasergrid#grid"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
</svg>
{ep:icon(icon: 'teaser-grid', class: 'w-5 h-5 text-ep-primary')}
</button>
<button type="button"
data-action="teasergrid#block"
data-teasergrid-target="button">
<svg class="w-5 h-5 text-ep-primary">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
</svg>
{ep:icon(icon: 'teaser-single', class: 'w-5 h-5 text-ep-primary')}
</button>
</div>
<div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Teaser/OneColumn.html
+1 -3
View File
@@ -7,9 +7,7 @@
<a href="{f:uri.typolink(parameter: data.header_link)}" class="flex flex-col group">
<div class="relative">
<f:if condition="{context.country}">
<svg class="w-8 h-6 absolute top-0 left-0">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-flag-{context.country.code -> f:format.case(mode: 'lower')}"></use>
</svg>
{ep:icon(icon: 'flag-{context.country.code -> f:format.case(mode: \'lower\')}', class: 'w-8 h-6 absolute top-0 left-0')}
</f:if>
<ep:lazyLoadImage image="{teaserImage}"
loaderimg="EXT:ep_theme/Resources/Public/images/lazy.png"
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Topnav.html
+3 -6
View File
@@ -1,5 +1,6 @@
<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">
<f:if condition="{settings.hideAreaNavigation}">
@@ -8,9 +9,7 @@
<div class="container">
<nav role="navigation" class="topnav__nav">
<f:link.typolink parameter="9" class="topnav__item" title="E&amp;P">
<svg class="w-5 h-5">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-home"></use>
</svg>
{ep:icon(icon: 'home', class: 'w-5 h-5')}
</f:link.typolink>
<f:if condition="{settings.topNavPid}">
<div class="flex-1 flex items-center divide-x divide-overlay-white-50">
@@ -25,9 +24,7 @@
</f:if>
<f:if condition="{settings.myEpPageUid}">
<f:link.typolink parameter="{settings.myEpPageUid}" class="topnav__item" title="My E&P">
<svg class="w-5 h-5">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-user"></use>
</svg>
{ep:icon(icon: 'user', class: 'w-5 h-5')}
</f:link.typolink>
</f:if>
</nav>