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

WIP Migrate to tailwind and alpine

Browse Source
This commit is contained in:
Björn Fromme
2021-08-12 17:39:42 +02:00
parent dd90f11a8a
commit 86ddef9d94
13 changed files with 144 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/images/background/winter.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 32 KiB

After

Width:  |  Height:  |  Size: 78 KiB

public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/base/_rte-content.scss
+4
View File
@@ -9,3 +9,7 @@ ol {
p {
@apply mb-4;
}
a:not(.button) {
@apply text-ep-primary sbw:text-sbw-primary-dark;
}
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_background.scss
+22 -1
View File
@@ -1,6 +1,27 @@
.bg-winter {
@apply bg-cover bg-no-repeat bg-center bg-ep-primary;
@apply relative bg-cover bg-no-repeat bg-center;
background-image: url(../../images/background/winter.jpg);
z-index: -5;
&:before {
@apply block absolute top-0 left-0 inset-0 opacity-80;
@apply bg-ep-primary sbw:bg-sbw-primary;
z-index: -10;
content: '';
}
}
.bg-pattern {
@apply relative bg-cover bg-no-repeat bg-center;
background-image: url(../../images/background/pattern.jpg);
z-index: -5;
&:before {
@apply block absolute top-0 left-0 inset-0 opacity-80;
@apply bg-ep-primary sbw:bg-sbw-primary;
z-index: -10;
content: '';
}
}
.bg-header-season-w {
public/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/components/_buttons.scss
+3
View File
@@ -3,14 +3,17 @@
@apply uppercase leading-none;
@apply transition-colors outline-none focus:outline-none;
@apply bg-ep-secondary border-2 border-ep-secondary text-white;
@apply sbw:bg-sbw-secondary sbw:border-sbw-secondary;
&--active,
&--secondary {
@apply bg-ep-primary border-ep-primary;
@apply sbw:bg-sbw-primary sbw:border-sbw-primary;
}
&:hover {
@apply bg-ep-primary-dark border-ep-primary-dark;
@apply sbw:bg-sbw-primary-dark sbw:border-sbw-primary-dark;
}
&--light {
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disrupter/Large.html
+50 -32
View File
@@ -4,46 +4,64 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="bg-winter my-2">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
<div class="container grid grid-cols-2 gap-8" data-rte-content>
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block sbw:md:hidden transform -translate-y-2 text-white'}"/>
</f:if>
<div class="relative container grid grid-cols-2 gap-8" data-rte-content>
<div class="col-span-2 md:col-span-1">
<f:if condition="{image}">
<f:then>
<img class="lazyload" data-src="{f:uri.image(image: image, width: '400', height: '400c')}"
alt="{image.alternative}" title="{image.title}">
</f:then>
<f:else>
<img src="https://placehold.it/800x600" alt="">
</f:else>
</f:if>
<div>
<div>Ihr habt Fragen?<br>Wir helfen euch gerne!</div>
<a class="headline headline--3 text-white" href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" rel="nofollow">{settings.phoneNumber}</a>
<div class="relative max-w-md mx-auto mb-8">
<f:if condition="{image}">
<f:then>
<img class="block rounded-full w-full h-auto lazyload"
data-src="{f:uri.image(image: image, width: '400', height: '400c')}"
alt="{image.alternative}" title="{image.title}">
</f:then>
<f:else>
<img src="https://placehold.it/800x600" alt="">
</f:else>
</f:if>
<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 bg-ep-secondary sbw:bg-sbw-secondary flex items-center space-x-2">
<svg class="w-10 h-10 text-white">
<use href="#icon-phone"></use>
</svg>
<div class="text-center text-white">
<span class="block whitespace-nowrap">
Ihr habt Fragen?
</span>
<span class="block whitespace-nowrap">
Wir helfen euch gerne!
</span>
</div>
</a>
</div>
<div><a class="call-btn" href="tel:{settings.phoneNumber -> v:format.pregReplace(pattern: '/[\-\s]/', replacement: '')}" rel="nofollow"><i class="fa fa-phone" aria-hidden="true"></i></a></div>
</div>
<div class="col-span-2 md:col-span-1">
<span class="headline--secondary font-light text-white">{data.subheadline}</span>
<div class="headline--secondary font-light text-white">{data.headline}</div>
{data.text -> f:format.html()}
<br>
<f:for each="{data.flexForm.buttons -> v:iterator.slice(start: 0, length: 4) -> v:iterator.chunk(count: 2)}" as="buttons">
<div class="row">
<f:for each="{buttons}" as="button" iteration="iteration">
<f:if condition="{iteration.cycle} <= 4">
<div class="col-md-6">
<f:link.typolink parameter="{button.container.link}"
class="btn btn-warning btn-shadow">
{button.container.label}
</f:link.typolink>
</div>
</f:if>
<span class="headline--secondary font-light text-white">
{data.subheadline}
</span>
<span class="headline--secondary uppercase font-light text-white mb-4">
{data.headline}
</span>
<div class="text-white" data-rte-content>
{data.bodytext -> f:format.html()}
</div>
<f:if condition="{data.flexForm.buttons}">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 lg:gap-8">
<f:for each="{data.flexForm.buttons}" as="button">
<f:link.typolink parameter="{button.container.link}"
class="button shadow-lg">
{button.container.label}
</f:link.typolink>
</f:for>
</div>
</f:for>
</f:if>
</div>
</div>
<f:render partial="Disrupter/Outlines" section="Bottom1" arguments="{classes: 'hidden md:block transform translate-y-2 text-white'}"/>
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines" section="Bottom1" arguments="{classes: 'hidden md:block sbw:md:hidden transform translate-y-2 text-white'}"/>
</f:if>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Disturber/Large.html
+16 -7
View File
@@ -5,13 +5,16 @@
<div class="bg-winter my-2">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
<div class="container grid grid-cols-2 gap-8 py-8" data-rte-content>
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'hidden md:block transform -translate-y-2 text-white'}"/>
</f:if>
<div class="relative container grid grid-cols-2 gap-8 py-8" data-rte-content>
<div class="col-span-2 md:col-span-1">
<div class="relative max-w-md mx-auto mb-8">
<f:if condition="{teaserImage}">
<f:then>
<img class="block rounded-full w-full h-auto lazyload" data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
<img class="block rounded-full w-full h-auto lazyload"
data-src="{f:uri.image(image: teaserImage, width: '400', height: '400c')}"
alt="{teaserImage.alternative}" title="{teaserImage.title}">
</f:then>
<f:else>
@@ -20,13 +23,17 @@
</f:if>
<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 bg-ep-secondary flex items-center space-x-2">
class="absolute bottom-0 left-1/2 transform -translate-x-1/2 -mb-8 rounded-full py-4 px-6 bg-ep-secondary sbw:bg-sbw-secondary flex items-center space-x-2">
<svg class="w-10 h-10 text-white">
<use href="#icon-phone"></use>
</svg>
<div class="text-center text-white">
<span class="block whitespace-nowrap">Ihr habt Fragen?</span>
<span class="block whitespace-nowrap">Wir helfen euch gerne!</span>
<span class="block whitespace-nowrap">
Ihr habt Fragen?
</span>
<span class="block whitespace-nowrap">
Wir helfen euch gerne!
</span>
</div>
</a>
</div>
@@ -53,7 +60,9 @@
</f:if>
</div>
</div>
<f:render partial="Disrupter/Outlines" section="Bottom1" arguments="{classes: 'hidden md:block transform translate-y-2 text-white'}"/>
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines" section="Bottom1" arguments="{classes: 'hidden md:block sbw:md:hidden transform translate-y-2 text-white'}"/>
</f:if>
</div>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/EventDisturber.html
+34 -16
View File
@@ -1,16 +1,34 @@
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="container-fluid ep-disturber-price">
<div class="row">
<div class="col-md-4">{headline -> f:format.raw()}</div>
<div class="col-md-4 ep-facts vcenter">
<ul>
<f:for each="{listItems -> v:iterator.explode(glue: ';')}" as="listItem">
<li><span class="glyphicon glyphicon-ok" aria-hidden="true"></span>{listItem -> f:format.raw()}</li>
</f:for>
</ul>
</div><!--
--><div class="col-md-4 vcenter">
<a class="button button--full" href="{f:uri.typolink(parameter: buttonLink)}" title="{buttonLabel -> f:format.raw()}">{buttonLabel -> f:format.raw()}</a>
</div>
</div>
</div>
<html data-namespace-typo3-fluid="true" lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="container lg:max-w-screen-2xl my-8">
<div class="bg-pattern pt-8 lg:py-8">
<div class="flex flex-col space-y-4 lg:space-y-0 lg:flex-row items-center">
<div class="w-full lg:w-1/3 font-black uppercase text-white text-4xl lg:text-3xl text-center">
{headline -> f:format.raw()}
</div>
<div class="w-full lg:w-1/3 lg:px-4 text-center">
<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="#icon-check"></use>
</svg>
<span>{listItem -> f:format.raw()}</span>
</li>
</f:for>
</ul>
</div>
<div class="w-full lg:w-1/3 lg:px-4">
<a class="button w-full"
href="{f:uri.typolink(parameter: buttonLink)}"
title="{buttonLabel -> f:format.raw()}">
{buttonLabel -> f:format.raw()}
</a>
</div>
</div>
</div>
</div>
</html>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Footer.html
+5 -3
View File
@@ -4,8 +4,10 @@
xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">
<div class="bg-winter mt-8">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'transform -translate-y-2 text-white'}"/>
<div class="py-4">
<f:if condition="{settings.themeKey} == 'ep'">
<f:render partial="Disrupter/Outlines" section="Top1" arguments="{classes: 'transform -translate-y-2 text-white'}"/>
</f:if>
<div class="py-4 relative">
<div class="container grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 pb-4">
<v:menu pageUid="{settings.footerNavPid}" levels="2" expandAll="true">
<f:for each="{menu}" as="menuheader" iteration="iteration">
@@ -95,7 +97,7 @@
</div>
</div>
</div>
<div class="bg-ep-primary-dark pt-4 pb-16 md:py-4 text-sm lg:text-base text-white">
<div class="bg-ep-primary-dark sbw:bg-sbw-primary-dark pt-4 pb-16 md:py-4 text-sm lg:text-base text-white">
<div class="container">
<div class="grid grid-cols-1 md:grid-cols-12 gap-4">
<div class="md:col-span-4 text-center md:text-left">
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSlider.html
+1 -1
View File
@@ -22,7 +22,7 @@
</f:alias>
<div class="absolute left-0 bottom-0 inset-x-0 px-4 py-8 w-full md:bottom-1/2 md:transform md:translate-y-1/2">
<div class="lg:container px-0">
<div class="p-4 bg-ep-primary-80 mb-4 md:p-8 md:max-w-2xl">
<div class="p-4 bg-ep-primary-80 sbw:bg-sbw-primary-80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-2xl md:text-4xl lg:text-5xl max-w-sm md:max-w-none font-black text-white uppercase mb-8">
{slide.headline}
</span>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/HeaderSliderSmall.html
+1 -1
View File
@@ -17,7 +17,7 @@
</f:alias>
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
<div class="lg:container">
<div class="p-4 bg-ep-primary-80 mb-4 md:p-8 md:max-w-2xl">
<div class="p-4 bg-ep-primary-80 sbw:bg-sbw-primary-80 mb-4 md:p-8 md:max-w-2xl">
<span class="block text-xl md:text-2xl font-light text-white uppercase">
{slide.headline}
</span>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/Pricetable.html
+6 -4
View File
@@ -13,13 +13,13 @@
<table class="min-w-full border border-gray-200 border-collapse mb-8">
<thead>
<tr>
<th>
<th class="text-left">
Zimmertyp
</th>
<th>
<th class="text-left">
Preis/Pers.
</th>
<th>
<th class="text-left">
inkl.
</th>
<th></th>
@@ -34,7 +34,9 @@
<div class="lg:hidden">
<f:if condition="{row.roomAvailable}">
<f:then>
<a href="{row.bookingUrl}">Jetzt buchen <i class="fa fa-angle-right"></i></a>
<a href="{row.bookingUrl}">
Jetzt buchen <i class="fa fa-angle-right"></i>
</a>
</f:then>
<f:else>
<span>ausgebucht</span>
public/typo3conf/ext/ep_theme/Resources/Private/Partials/SubpageHeader.html
+1 -1
View File
@@ -16,7 +16,7 @@
</f:alias>
<div class="absolute bottom-0 left-0 inset-x-0 px-8 md:bottom-1/2 md:transform md:translate-y-1/2">
<div class="lg:container px-0">
<div class="bg-ep-primary-80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16">
<div class="bg-ep-primary-80 sbw:bg-sbw-primary-80 py-4 lg:py-8 px-4 mb-8 md:max-w-1/2 p-16">
<span class="block text-xl md:text-2xl font-light text-white uppercase">
{topline}
</span>
tailwind.config.js
+1 -1
View File
@@ -67,7 +67,7 @@ module.exports = {
'sbw': {
'primary': '#f0bc44',
'secondary': '#ee525a',
'primary-dark': '#f0bc44',
'primary-dark': '#c7a20c',
'primary-10': tinycolor('#f0bc44').setAlpha(0.1).toRgbString(),
'primary-80': tinycolor('#f0bc44').setAlpha(0.8).toRgbString(),
'overlay-secondary': tinycolor('#c20000').setAlpha(0.55).toRgbString(),