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

Add optional background color to all container elements

Browse Source
This commit is contained in:
Björn Fromme
2022-03-15 15:14:18 +01:00
parent 6d383aeecf
commit 2ec084fbd7
5 changed files with 128 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Configuration/TSconfig/Page/TCEFORM.tsconfig
+10
View File
@@ -98,6 +98,16 @@ TCEFORM {
1 = ohne Hintergrund 1 = ohne Hintergrund
} }
} }
ep_container_halves {
disabled = 0
removeItems := addToList(2,3)
altLabels {
0 = ohne Hintergrund
1 = mit Hintergrund
}
}
ep_container_thirds < .ep_container_halves
ep_container_quarters < .ep_container_halves
} }
} }
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Container/Halves.html
+24 -9
View File
@@ -5,15 +5,30 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<ep:container data="{data}" cssClasses="py-8"> <f:if condition="{data.layout} == 0">
<f:render partial="Header/Header" <f:then>
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" /> <ep:container data="{data}" cssClasses="py-8">
<div class="grid grid-cols-2 gap-8"> <f:render section="Content" arguments="{_all}"/>
<f:for each="{children_300}" as="record"> </ep:container>
{record.renderedContent -> f:format.raw()} </f:then>
</f:for> <f:else>
</div> <div class="py-8 bg-ep-primary-bg">
</ep:container> <div class="container">
<f:render section="Content" arguments="{_all}"/>
</div>
</div>
</f:else>
</f:if>
</f:section>
<f:section name="Content">
<f:render partial="Header/Header"
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
<div class="grid grid-cols-2 gap-8">
<f:for each="{children_300}" as="record">
{record.renderedContent -> f:format.raw()}
</f:for>
</div>
</f:section> </f:section>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Container/Quarters.html
+24 -9
View File
@@ -5,15 +5,30 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<ep:container data="{data}" cssClasses="py-8"> <f:if condition="{data.layout} == 0">
<f:render partial="Header/Header" <f:then>
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" /> <ep:container data="{data}" cssClasses="py-8">
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8"> <f:render section="Content" arguments="{_all}"/>
<f:for each="{children_300}" as="record"> </ep:container>
{record.renderedContent -> f:format.raw()} </f:then>
</f:for> <f:else>
</div> <div class="py-8 bg-ep-primary-bg">
</ep:container> <div class="container">
<f:render section="Content" arguments="{_all}"/>
</div>
</div>
</f:else>
</f:if>
</f:section>
<f:section name="Content">
<f:render partial="Header/Header"
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-8">
<f:for each="{children_300}" as="record">
{record.renderedContent -> f:format.raw()}
</f:for>
</div>
</f:section> </f:section>
</html> </html>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Container/Teasergroup.html
+46 -33
View File
@@ -1,42 +1,55 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers"
data-namespace-typo3-fluid="true"> data-namespace-typo3-fluid="true">
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<div class="pt-8 pb-16{f:if(condition: '{data.layout} == 0', then: ' bg-ep-primary-bg')}"> <f:if condition="{data.layout} == 0">
<div class="container" <f:then>
data-controller="teasergrid" <div class="pt-8 pb-16 bg-ep-primary-bg">
data-teasergrid-grid-class="grid-cols-2" <f:render section="Content" arguments="{_all}"/>
data-teasergrid-disabled-value="false"> </div>
<f:render partial="Header/Header" </f:then>
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" /> <f:else>
<f:if condition="{children_300}"> <ep:container data="{data}">
<div class="flex items-center space-x-1 mb-2 sm:hidden"> <f:render section="Content" arguments="{_all}"/>
<button type="button" </ep:container>
class="opacity-50" </f:else>
data-action="teasergrid#grid" </f:if>
data-teasergrid-target="button"> </f:section>
<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> <f:section name="Content">
</svg> <div data-controller="teasergrid"
</button> data-teasergrid-grid-class="grid-cols-2"
<button type="button" data-teasergrid-disabled-value="false">
data-action="teasergrid#block" <f:render partial="Header/Header"
data-teasergrid-target="button"> arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
<svg class="w-5 h-5 text-ep-primary"> <f:if condition="{children_300}">
<use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use> <div class="flex items-center space-x-1 mb-2 sm:hidden">
</svg> <button type="button"
</button> class="opacity-50"
</div> data-action="teasergrid#grid"
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8" data-teasergrid-target="button">
data-teasergrid-target="container"> <svg class="w-5 h-5 text-ep-primary">
<f:for each="{children_300}" as="record"> <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
{record.renderedContent -> f:format.raw()} </svg>
</f:for> </button>
</div> <button type="button"
</f:if> data-action="teasergrid#block"
</div> 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>
</button>
</div>
<div class="grid grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8"
data-teasergrid-target="container">
<f:for each="{children_300}" as="record">
{record.renderedContent -> f:format.raw()}
</f:for>
</div>
</f:if>
</div> </div>
</f:section> </f:section>
public/typo3conf/ext/ep_theme/Resources/Private/Templates/Container/Thirds.html
+24 -9
View File
@@ -5,15 +5,30 @@
<f:layout name="Default"/> <f:layout name="Default"/>
<f:section name="Main"> <f:section name="Main">
<ep:container data="{data}" cssClasses="py-8"> <f:if condition="{data.layout} == 0">
<f:render partial="Header/Header" <f:then>
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" /> <ep:container data="{data}" cssClasses="py-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <f:render section="Content" arguments="{_all}"/>
<f:for each="{children_300}" as="record"> </ep:container>
{record.renderedContent -> f:format.raw()} </f:then>
</f:for> <f:else>
</div> <div class="py-8 bg-ep-primary-bg">
</ep:container> <div class="container">
<f:render section="Content" arguments="{_all}"/>
</div>
</div>
</f:else>
</f:if>
</f:section>
<f:section name="Content">
<f:render partial="Header/Header"
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link}" />
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<f:for each="{children_300}" as="record">
{record.renderedContent -> f:format.raw()}
</f:for>
</div>
</f:section> </f:section>
</html> </html>