[FEATURE]: Layout img-only added to layout selection

Starraider · Jan 15, 2024 · 15a9b49 · 15a9b49
1 parent f71085b
commit 15a9b49
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 45 deletions.
diff --git a/moz-header/EditorInterface.yaml b/moz-header/EditorInterface.yaml
@@ -75,6 +75,7 @@ fields:
           'halfwidth': '50/50 Aufteilung'
           'halfwidth-rounded': '50/50 Aufteilung (abgerundet)'
           'fullwidth': 'volle Breite'
+          'img-only': 'Nur Bild (Textfelder ausblenden)'
         prependLabel: 'Layout wählen'
         required: true
         properties:

diff --git a/moz-header/dist/Frontend.css b/moz-header/dist/Frontend.css
diff --git a/moz-header/dist/Frontend.css.map b/moz-header/dist/Frontend.css.map
diff --git a/moz-header/dist/Frontend.scss b/moz-header/dist/Frontend.scss
@@ -116,6 +116,7 @@
         }
 
         // full width image background variation
+        &.moz-header--img-only,
         &.moz-header--fullwidth {
             background: none !important;
             height: var(--moz-header-height--mobile);
@@ -181,8 +182,24 @@
                     align-items: start;
                 }
 
-                &.has-skyline {
 
+            }
+        }
+
+        &.moz-header--img-only {
+            height: auto !important;
+
+            .moz-header__img-wrapper {
+                position: relative;
+            }
+            .moz-header__content {
+                display: none;
+            }
+        }
+
+        &.moz-header--fullwidth {
+            .moz-header__content {
+                &.has-skyline {
                     .moz-header__share {
                         @media( min-width: $md ) {
                             // align-items start + 30px margin because of the skyline
@@ -191,6 +208,7 @@
                     }
                 }
             }
+
         }
     }
 

diff --git a/moz-header/src/Frontend.html b/moz-header/src/Frontend.html
@@ -3,42 +3,22 @@
     <f:layout name="Default" />
     <f:section name="Main">
         <f:variable name="skylineClass" value="{f:if(condition: '{skyline}', then: 'has-skyline')}"></f:variable>
+
         <f:asset.css identifier="content-block-moz-header-be" href="CB:moz-header/dist/EditorPreview.css"/>
         <f:asset.css identifier="content-block-moz-header" href="CB:moz-header/dist/Frontend.css"/>
         <f:asset.script identifier="content-block-moz-header" src="CB:moz-header/dist/Frontend.js"/>
-        <div id="c{data.uid}" class="moz-header moz-header--{layout} moz-header--{f:if(condition: '{image}', then: 'has-image', else: 'without-image')} moz-frame frame frame-space-before-{data.space_before_class} frame-space-after-{data.space_after_class}">
-
-            <f:if condition="{image}">
-                <div class="moz-header__img-wrapper">
-                    <f:for each="{image}" as="img">
-                        <f:image class="moz-header__img" image="{img}" />
-                    </f:for>
-                </div>
-            </f:if>
-            <div class="moz-header__content {skylineClass}">
-                <div class="moz-header__inner">
-                    <span class="moz-header__skyline">{skyline}</span>
-                    <f:if condition="isMainTitle">
 
-                        <f:then>
-                            <h1 class="moz-header__title"><f:format.stripTags allowedTags="<br><a>">{title}</f:format.stripTags></h1>
-                        </f:then>
-                        <f:else>
-                            <h2 class="moz-header__title"><f:format.stripTags allowedTags="<br><a>">{title}</f:format.stripTags></h2>
-                        </f:else>
-                    </f:if>
-                    <f:if condition="teaser">
-                        <f:format.html>{teaser}</f:format.html>
-                    </f:if>
-                    <f:if condition="{buttonLink} && {buttonText}">
-                        <f:link.typolink parameter="{buttonLink}" class="moz-header__btn btn btn-primary">{buttonText}</f:link.typolink>
-                    </f:if>
-                </div>
+        <!-- wrap the content element with a link to the page if the buttonLink is set -->
+        <f:if condition="{buttonLink} && {layout} == 'img-only'">
+            <f:then>
+                <f:link.typolink parameter="{buttonLink}">
+                    <f:render partial="MainContent" arguments="{_all}" />
+                </f:link.typolink>
+            </f:then>
+            <f:else>
+                <f:render partial="MainContent" arguments="{_all}" />
+            </f:else>
+        </f:if>
 
-                <f:if condition="{hasSocialshare} == 1">
-                    <f:render partial="Share"></f:render>
-                </f:if>
-            </div>
-        </div>
     </f:section>
 </html>
diff --git a/moz-header/src/Language/Default.xlf b/moz-header/src/Language/Default.xlf
@@ -34,7 +34,7 @@
             </trans-unit>
 
             <trans-unit id="typo3-contentblocks.moz-header.buttonLink.description" xml:space="preserve">
-                <source>Button-Link</source>
+                <source>Button-Link (in der nur-Bildvariante ist das Bild stattdessen verlinkt)</source>
             </trans-unit>
 
             <trans-unit id="typo3-contentblocks.moz-header.buttonText.label" xml:space="preserve">

diff --git a/moz-header/src/Partials/MainContent.html b/moz-header/src/Partials/MainContent.html
@@ -0,0 +1,47 @@
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+
+<f:variable name="skylineClass" value="{f:if(condition: '{skyline}', then: 'has-skyline')}"></f:variable>
+<div id="c{data.uid}"
+     class="moz-header moz-header--{layout} moz-header--{f:if(condition: '{image}', then: 'has-image', else: 'without-image')} moz-frame frame frame-space-before-{data.space_before_class} frame-space-after-{data.space_after_class}">
+
+    <f:if condition="{image}">
+        <div class="moz-header__img-wrapper">
+            <f:for each="{image}" as="img">
+                <f:image class="moz-header__img" image="{img}"/>
+            </f:for>
+        </div>
+    </f:if>
+    <div class="moz-header__content {skylineClass}">
+        <!-- if condition not layout == img-only -->
+        <f:if condition="{layout} != 'img-only'">
+            <div class="moz-header__inner">
+                <span class="moz-header__skyline">{skyline}</span>
+                <f:if condition="isMainTitle">
+
+                    <f:then>
+                        <h1 class="moz-header__title">
+                            <f:format.stripTags allowedTags="<br><a>">{title}</f:format.stripTags>
+                        </h1>
+                    </f:then>
+                    <f:else>
+                        <h2 class="moz-header__title">
+                            <f:format.stripTags allowedTags="<br><a>">{title}</f:format.stripTags>
+                        </h2>
+                    </f:else>
+                </f:if>
+                <f:if condition="teaser">
+                    <f:format.html>{teaser}</f:format.html>
+                </f:if>
+                <f:if condition="{buttonLink} && {buttonText}">
+                    <f:link.typolink parameter="{buttonLink}" class="moz-header__btn btn btn-primary">{buttonText}
+                    </f:link.typolink>
+                </f:if>
+            </div>
+        </f:if>
+
+        <f:if condition="{hasSocialshare} == 1">
+            <f:render partial="Share"></f:render>
+        </f:if>
+    </div>
+</div>
+</html>