97 lines
3.7 KiB
HTML
97 lines
3.7 KiB
HTML
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
|
|
<f:layout name="Preview"/>
|
|
<f:section name="Content">
|
|
|
|
<f:asset.css identifier="vitec-backend-preview" href="EXT:vitec/Resources/Public/Css/backend-preview.css"/>
|
|
|
|
<div class="vitec-preview vitec-preview--{data.background_variant}">
|
|
|
|
<f:comment>Thumbnail (Background Image oder Farb-Placeholder)</f:comment>
|
|
<f:if condition="{data.background_image.0}">
|
|
<f:then>
|
|
<f:image image="{data.background_image.0}"
|
|
class="vitec-preview__thumb"
|
|
width="120c"
|
|
height="80c"
|
|
alt="Background Preview"/>
|
|
</f:then>
|
|
<f:else>
|
|
<div class="vitec-preview__thumb-placeholder">
|
|
<f:switch expression="{data.background_variant}">
|
|
<f:case value="orange">🟠</f:case>
|
|
<f:case value="blue">🔵</f:case>
|
|
<f:case value="graphite">⬛</f:case>
|
|
<f:case value="midnight">⬛</f:case>
|
|
<f:case value="light">⬜</f:case>
|
|
<f:defaultCase>No BG</f:defaultCase>
|
|
</f:switch>
|
|
</div>
|
|
</f:else>
|
|
</f:if>
|
|
|
|
<f:comment>Body</f:comment>
|
|
<div class="vitec-preview__body">
|
|
<div class="vitec-preview__label">VITEC · CTA Banner</div>
|
|
|
|
<h3 class="vitec-preview__headline">
|
|
<f:if condition="{data.header}">
|
|
<f:then>{data.header}</f:then>
|
|
<f:else>
|
|
<em style="color:#c00;">⚠ Headline fehlt</em>
|
|
</f:else>
|
|
</f:if>
|
|
</h3>
|
|
|
|
<f:if condition="{data.bodytext}">
|
|
<div class="vitec-preview__body-text">
|
|
<f:format.stripTags>{data.bodytext}</f:format.stripTags>
|
|
</div>
|
|
</f:if>
|
|
|
|
<div class="vitec-preview__ctas">
|
|
<f:if condition="{data.primary_cta_label}">
|
|
<span class="vitec-preview__cta-btn">{data.primary_cta_label} →</span>
|
|
</f:if>
|
|
<f:if condition="{data.secondary_cta_label}">
|
|
<span class="vitec-preview__cta-btn vitec-preview__cta-btn--secondary">
|
|
{data.secondary_cta_label}
|
|
</span>
|
|
</f:if>
|
|
</div>
|
|
</div>
|
|
|
|
<f:comment>Settings Sidebar</f:comment>
|
|
<div class="vitec-preview__settings">
|
|
<f:comment>Background Badge</f:comment>
|
|
<span class="vitec-badge">
|
|
<span class="vitec-badge__dot vitec-badge__dot--{data.background_variant}"></span>
|
|
<f:switch expression="{data.background_variant}">
|
|
<f:case value="orange">VITEC Orange</f:case>
|
|
<f:case value="blue">VITEC Blue</f:case>
|
|
<f:case value="graphite">VITEC Graphite</f:case>
|
|
<f:case value="midnight">VITEC Midnight</f:case>
|
|
<f:case value="light">VITEC Light</f:case>
|
|
<f:defaultCase>{data.background_variant}</f:defaultCase>
|
|
</f:switch>
|
|
</span>
|
|
|
|
<f:comment>Layout Variant Badge mit Icon</f:comment>
|
|
<span class="vitec-badge">
|
|
<f:switch expression="{data.layout_variant}">
|
|
<f:case value="centered">◎ Centered</f:case>
|
|
<f:case value="split">⇄ Split</f:case>
|
|
<f:case value="stacked">≡ Stacked</f:case>
|
|
<f:defaultCase>{data.layout_variant}</f:defaultCase>
|
|
</f:switch>
|
|
</span>
|
|
|
|
<f:comment>Warnung wenn Primary-CTA-Link fehlt</f:comment>
|
|
<f:if condition="{data.primary_cta.url} == ''">
|
|
<span class="vitec-badge vitec-badge--warning">⚠ Kein Primary-Link</span>
|
|
</f:if>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</f:section>
|
|
</html> |