Merge branch 'dev' of dev.quiqqer.com:quiqqer/package-bricks into dev

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/Brick.php

@@ -69,15 +69,15 @@ public function __construct($params = array())
     {
         // default
         $default = array(
-            'type' => 'content',
-            'content' => '',
-            'title' => '',
+            'type'        => 'content',
+            'content'     => '',
+            'title'       => '',
             'description' => '',
-            'project' => '',
-            'areas' => '',
-            'height' => '',
-            'width' => '',
-            'classes' => ''
+            'project'     => '',
+            'areas'       => '',
+            'height'      => '',
+            'width'       => '',
+            'classes'     => ''
         );
 
         $this->setAttributes($default);
@@ -339,6 +339,10 @@ public function getSettings()
     public function setSettings($settings)
     {
         foreach ($settings as $key => $value) {
+            if ($key === 'classes') {
+                $this->addCSSClass($value);
+                continue;
+            }
             $this->setSetting($key, $value);
         }
     }

src/QUI/Bricks/Controls/ContentSwitcher.css

 .content-switcher {
+    align-items: center;
     display: flex;
     min-height: 360px;
-    align-items: center;
     flex-direction: row;
 }
 
     .content-switcher-image {
-        height: 400px;
         width: 50%;
-        padding:50px;
-        display: flex;
-        align-items: center;
-        justify-content: center
+        text-align: center;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: auto auto;
+        text-align: center;
     }
 
     img.content-switcher-image-img {
-        height: auto;
+        max-height: 100%;
         max-width: 100%;
+        opacity: 0;
+        visibility: hidden;
     }
 
     .content-switcher-content {
@@ -47,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=300 class="content-switcher-image-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

src/QUI/Bricks/Controls/Image.html

 {assign var=img value=$brickImage}
 {assign var=link value=$brickLink}
-<dev class="content-body brick-image">
+<div class="content-body brick-image">
 
     {if !$this->getAttribute('content') == ""}
     <div class="grid-100 grid-parent brick-image-text">
@@ -18,4 +18,4 @@
         {/if}
     </div>
 
-</dev>
+</div>
\ No newline at end of file