Files
VITEC-website/packages/vitec/ContentBlocks/ContentElements/cta-banner/templates/backend-preview.html
o-rasche bb7c03235d Checkpoint: headless JSON architecture documented + cleanup (Stufe 1+2)
Restore point before Stufe 3 (central resolver-service refactoring).

Includes this session's work:
- Success Story (usecase) rebuild: new fields/tabs, UsecaseSerializer,
  thin List/Show renderers, MM relations, inline content elements.
- vitec_columns content block (two-column layout with per-item content)
  incl. unified header section; special-cased JSON resolution.
- Container per-column flex (items[].config align/justify) + gap on parent.
- Unified header section across CEs/plugins/containers; header fields in JSON.
- ISO-style architecture spec: Documentation/Headless-JSON-Architecture.md.
- Cleanup: removed local scratch + verified .bak backups.
- Fixes: B-6 (undefined thumbnail variable in Downloadcardcollection image
  resolver), B-7 (unsatisfiable legacy CType OR branch in Downloadcard/Datasheets).

Rollback: git reset --hard snapshot-2026-07-09-pre-stufe3

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-09 10:01:56 +02:00

97 lines
3.8 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 or colour 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 missing</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 with 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>Warning when primary CTA link is missing</f:comment>
<f:if condition="{data.primary_cta.url} == ''">
<span class="vitec-badge vitec-badge--warning">⚠ Primary link missing</span>
</f:if>
</div>
</div>
</f:section>
</html>