Add optional background color to all container elements
This commit is contained in:
Björn Fromme
@@ -98,6 +98,16 @@ TCEFORM {
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -5,15 +5,30 @@
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<ep:container data="{data}" cssClasses="py-8">
|
||||
<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>
|
||||
</ep:container>
|
||||
<f:if condition="{data.layout} == 0">
|
||||
<f:then>
|
||||
<ep:container data="{data}" cssClasses="py-8">
|
||||
<f:render section="Content" arguments="{_all}"/>
|
||||
</ep:container>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="py-8 bg-ep-primary-bg">
|
||||
<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>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -5,15 +5,30 @@
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<ep:container data="{data}" cssClasses="py-8">
|
||||
<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>
|
||||
</ep:container>
|
||||
<f:if condition="{data.layout} == 0">
|
||||
<f:then>
|
||||
<ep:container data="{data}" cssClasses="py-8">
|
||||
<f:render section="Content" arguments="{_all}"/>
|
||||
</ep:container>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="py-8 bg-ep-primary-bg">
|
||||
<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>
|
||||
|
||||
</html>
|
||||
|
||||
+46
-33
@@ -1,42 +1,55 @@
|
||||
<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">
|
||||
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<div class="pt-8 pb-16{f:if(condition: '{data.layout} == 0', then: ' bg-ep-primary-bg')}">
|
||||
<div class="container"
|
||||
data-controller="teasergrid"
|
||||
data-teasergrid-grid-class="grid-cols-2"
|
||||
data-teasergrid-disabled-value="false">
|
||||
<f:render partial="Header/Header"
|
||||
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
|
||||
<f:if condition="{children_300}">
|
||||
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||
<button type="button"
|
||||
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>
|
||||
</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>
|
||||
</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>
|
||||
<f:if condition="{data.layout} == 0">
|
||||
<f:then>
|
||||
<div class="pt-8 pb-16 bg-ep-primary-bg">
|
||||
<f:render section="Content" arguments="{_all}"/>
|
||||
</div>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<ep:container data="{data}">
|
||||
<f:render section="Content" arguments="{_all}"/>
|
||||
</ep:container>
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:section>
|
||||
|
||||
<f:section name="Content">
|
||||
<div data-controller="teasergrid"
|
||||
data-teasergrid-grid-class="grid-cols-2"
|
||||
data-teasergrid-disabled-value="false">
|
||||
<f:render partial="Header/Header"
|
||||
arguments="{header: data.header, subheader: data.subheader, layout: data.header_layout, link: data.header_link, default: settings.defaultHeaderType}" />
|
||||
<f:if condition="{children_300}">
|
||||
<div class="flex items-center space-x-1 mb-2 sm:hidden">
|
||||
<button type="button"
|
||||
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>
|
||||
</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>
|
||||
</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>
|
||||
</f:section>
|
||||
|
||||
|
||||
@@ -5,15 +5,30 @@
|
||||
<f:layout name="Default"/>
|
||||
|
||||
<f:section name="Main">
|
||||
<ep:container data="{data}" cssClasses="py-8">
|
||||
<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>
|
||||
</ep:container>
|
||||
<f:if condition="{data.layout} == 0">
|
||||
<f:then>
|
||||
<ep:container data="{data}" cssClasses="py-8">
|
||||
<f:render section="Content" arguments="{_all}"/>
|
||||
</ep:container>
|
||||
</f:then>
|
||||
<f:else>
|
||||
<div class="py-8 bg-ep-primary-bg">
|
||||
<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>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user