Content Switcher - Benutzer haben jetzt die Möglichkeit, den Inhalt und das...

Content Switcher - Benutzer haben jetzt die Möglichkeit, den Inhalt und das Bild zu tauschen, d.h. links oder rechts platzieren. Im Moment funktioniert das nur für alle ungerade Einträge. Es muss verbessert werden.

bricks.xml

@@ -200,6 +200,10 @@
                     <locale group="quiqqer/bricks" var="ContentSwitcher.title"/>
                 </setting>
 
+                <setting name="startImgOnLeft" type="checkbox">
+                    <locale group="quiqqer/bricks" var="ContentSwitcher.startImgOnLeft"/>
+                </setting>
+
                 <setting name="entries" data-qui="package/quiqqer/bricks/bin/Controls/ContentSwitcher">
                     <locale group="quiqqer/bricks" var="ContentSwitcher.entries"/>
                 </setting>

locale.xml

@@ -503,18 +503,27 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
         <locale name="bricks.ContentSwitcher.title">
             <de><![CDATA[Baustein: Content Switcher]]></de>
             <en><![CDATA[Content with image]]></en>
+            <pl><![CDATA[Content Switcher: treść i zdjęcie]]></pl>
         </locale>
         <locale name="bricks.ContentSwitcher.description">
             <de><![CDATA[Inhalt und Bild werden links und rechts abwechslend angezeigt]]></de>
             <en><![CDATA[]]></en>
+            <pl><![CDATA[Treść oraz zdjęcia będą wyświetlane naprzemiennie]]></pl>
         </locale>
         <locale name="ContentSwitcher.title">
             <de><![CDATA[Baustein-Überschrift]]></de>
-            <en><![CDATA[]]></en>
+            <en><![CDATA[Brick Title]]></en>
+            <pl><![CDATA[Tytuł]]></pl>
+        </locale>
+        <locale name="ContentSwitcher.startImgOnLeft">
+            <de><![CDATA[Fange mit Bild links an]]></de>
+            <en><![CDATA[Start with picture on the left]]></en>
+            <pl><![CDATA[Zacznij z obrazkiem z lewej strony]]></pl>
         </locale>
         <locale name="ContentSwitcher.entries">
             <de><![CDATA[Einträge]]></de>
             <en><![CDATA[]]></en>
+            <pl><![CDATA[Wpisy]]></pl>
         </locale>
 
         <!-- Simple Google Maps -->

src/QUI/Bricks/Controls/ContentSwitcher.css

 .content-switcher {
     align-items: center;
     display: flex;
-    margin: 2em 0;
     min-height: 360px;
     flex-direction: row;
 }
 
     .content-switcher-image {
         width: 50%;
-        padding:50px;
         text-align: center;
-        /*display: flex;
-        align-items: center;
-        justify-content: center;*/
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: auto auto;
+        text-align: center;
     }
 
     img.content-switcher-image-img {
         max-height: 100%;
         max-width: 100%;
+        opacity: 0;
+        visibility: hidden;
     }
 
     .content-switcher-content {
@@ -48,3 +49,25 @@
 }
 
 
+/* set in template or custom css */
+
+.content-switcher-content {
+    min-height: 360px;
+    width: 580px;
+    padding-left: 50px;
+}
+
+.content-switcher-image {
+    background-position: left;
+}
+
+.push-custom {
+    background-position: right;
+}
+
+.pull-custom {
+    left: -580px;
+    padding-right: 50px;
+    padding-left: 0;
+}
+

src/QUI/Bricks/Controls/ContentSwitcher.html

@@ -6,18 +6,42 @@
 {/if}
 
 {foreach from=$entries item=entry key=key}
-{assign var=img value=$entry.img}
+{image src=$entry.img width=1000 onlysrc=true assign=img}
 
 <div class="content-switcher">
 {assign var=modKey value=$key+1}
-    <div class="content-switcher-image {if $modKey && $modKey % 2 !== 0 }push-50 mobile-pull-100{/if}">
+
+    {if !$this->getAttribute( 'startImgOnLeft' )}
+    <div class="content-switcher-image {if $modKey && $modKey % 2 !== 0 }push-50 mobile-pull-100
+                push-custom push-custom-mobile{/if}"
+                style="background-image: url('{$img}');"
+    >
         {if $img != ""}
             {image src=$entry.img width=600 class="content-switcher-image-img"}
         {/if}
     </div>
-    <div class="content-switcher-content {if $modKey && $modKey % 2 !== 0 }pull-50 mobile-pull-100{/if}">
+    <div class="page-content content-switcher-content {if $modKey && $modKey % 2 !== 0 }pull-50 mobile-pull-100
+                pull-custom pull-custom-mobile{/if}">
+        <h2>{$entry.title}</h2>
+        <p>{$entry.content}</p>
+    </div>
+
+    {else}
+
+    <div class="page-content content-switcher-content {if $modKey && $modKey % 2 !== 0 }push-50 mobile-push-100
+                push-custom push-custom-mobile{/if}">
         <h2>{$entry.title}</h2>
         <p>{$entry.content}</p>
     </div>
+    <div class="content-switcher-image {if $modKey && $modKey % 2 !== 0 }pull-50 mobile-pull-100
+                pull-custom pull-custom-mobile{/if}"
+         style="background-image: url('{$img}');"
+    >
+        {if $img != ""}
+        {image src=$entry.img width=600 class="content-switcher-image-img"}
+        {/if}
+    </div>
+    {/if}
+
 </div>
 {/foreach}
\ No newline at end of file