feat: many changes

2025-04-22 20:31:39 +02:00
parent 6e39bc4d9b
commit 41e44d1ed2
17 changed files with 199 additions and 162 deletions
--- a/packages/base/ContentBlocks/ContentElements/card_container/templates/backend-preview.html
+++ b/packages/base/ContentBlocks/ContentElements/card_container/templates/backend-preview.html
@@ -0,0 +1,12 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+
+<f:layout name="Default" />
+
+<f:section name="Main">
+    <strong>Card Container</strong>
+    <f:if condition="{data.header}">
+        <p><strong>Header:</strong> {data.header}</p>
+    </f:if>
+</f:section>
+
+</html>
--- a/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
+++ b/packages/base/ContentBlocks/ContentElements/card_container/templates/frontend.html
@@ -0,0 +1,55 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+
+<f:layout name="Default" />
+
+<f:section name="Header" />
+
+<f:section name="Main">
+    <div class="card-container">
+        <f:if condition="{data.header}">
+            <h2><f:format.html parseFuncTSPath="lib.parseFunc_RTE">{data.header}</f:format.html></h2>
+        </f:if>
+        <f:if condition="{data.bodytext}">
+            <f:then>
+                <div class="max-w-3xl prose lg:prose-lg">
+                    <p>{data.bodytext}</p>
+                </div>
+            </f:then>
+        </f:if>
+
+        <f:if condition="{data.cards}">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <f:for each="{data.cards}" as="card">
+                    <div class="card-flip group perspective" tabindex="0">
+                        <div class="card-flip-inner relative w-full h-64 preserve-3d group-hover:rotate-y-180 group-focus:rotate-y-180 duration-500">
+                            <div class="card-front absolute w-full h-full backface-hidden overflow-hidden shadow-lg">
+                                <f:if condition="{card.images}">
+                                    <f:then>
+                                        <f:image image="{card.images.0}" alt="{card.images.0.alternative}" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-500" />
+                                    </f:then>
+                                    <f:else>
+                                        <div class="w-full h-full bg-gray-300 flex items-center justify-center">
+                                            <span class="text-gray-500">No Image</span>
+                                        </div>
+                                    </f:else>
+                                </f:if>
+                                <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
+                                    <h3 class="text-white text-xl font-bold text-center p-4">{card.header}</h3>
+                                </div>
+                            </div>
+
+                            <div class="card-back absolute w-full h-full backface-hidden rotate-y-180 bg-gray-100 shadow-lg p-6 overflow-y-auto">
+                                <h4 class="text-lg font-semibold mb-2">{card.header}</h4>
+                                <div class="text-sm">
+                                    <f:format.html>{card.bodytext}</f:format.html>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </f:for>
+            </div>
+        </f:if>
+    </div>
+</f:section>
+
+</html>