From dbeb2b518b10ef652625049cf5b78bbc39710946 Mon Sep 17 00:00:00 2001
From: Michael <michael.danielczok@gmail.com>
Date: Mon, 19 Oct 2015 15:15:54 +0200
Subject: [PATCH] =?UTF-8?q?Content=20Switcher:=20-=20Vertikaler=20Abstand?=
 =?UTF-8?q?=20zwischen=20einzelnen=20Eintr=C3=A4gen=20angepasst=20-=20Dars?=
 =?UTF-8?q?tellung=20auf=20Handys=20verbessert.=20Inhalt=20und=20Bild=20we?=
 =?UTF-8?q?rden=20nicht=20bei=20jedem=20zweiten=20Eintrag=20getauscht,=20s?=
 =?UTF-8?q?ondern=20es=20kommt=20immer=20ein=20Bild=20und=20danach=20der?=
 =?UTF-8?q?=20zugeh=C3=B6rige=20Text.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Google Maps:
- der API script ist in HTML Datei eingebunden (nur als Zwischenlösung)
---
 lib/QUI/Bricks/Controls/ContentSwitcher.css  |  8 ++++++--
 lib/QUI/Bricks/Controls/ContentSwitcher.html | 20 +++++++++++++++++++-
 lib/QUI/Bricks/Controls/GoogleMaps.html      |  1 +
 3 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/lib/QUI/Bricks/Controls/ContentSwitcher.css b/lib/QUI/Bricks/Controls/ContentSwitcher.css
index 245b2e2..f25b2cf 100644
--- a/lib/QUI/Bricks/Controls/ContentSwitcher.css
+++ b/lib/QUI/Bricks/Controls/ContentSwitcher.css
@@ -1,6 +1,6 @@
 .content-switcher {
     display: flex;
-    min-height: 460px;
+    min-height: 360px;
     align-items: center;
     flex-direction: row;
 }
@@ -22,7 +22,11 @@
 @media screen and (max-width: 767px){
     .content-switcher {
         flex-direction: column;
-        border-bottom: 2px solid #e4e4e4;
+        border-bottom: 2px solid #f5f5f5;
+    }
+    
+    .content-switcher:last-child {
+        border-bottom: none;
     }
 
     .content-switcher-image {
diff --git a/lib/QUI/Bricks/Controls/ContentSwitcher.html b/lib/QUI/Bricks/Controls/ContentSwitcher.html
index 233c574..d7a08a3 100644
--- a/lib/QUI/Bricks/Controls/ContentSwitcher.html
+++ b/lib/QUI/Bricks/Controls/ContentSwitcher.html
@@ -2,7 +2,9 @@
 {foreach from=$entries item=entry key=key}
 {assign var=img value=$entry.img}
 
-<div class="content-switcher">
+
+<!-- display on desktops, replace text and image position by adding a new entry  -->
+<div class="content-switcher hide-on-mobile">
     {assign var=modKey value=$key+1}
     {if $modKey && $modKey % 2 !== 0 }
         <div class="content-switcher-image">
@@ -31,4 +33,20 @@
         </div>
     {/if}
 </div>
+
+<!-- for small screens: image always comes above the text -->
+<div class="content-switcher hide-on-desktop">
+    <div class="content-switcher-image">
+        {if $img != ""}
+        <img width=300 height=auto src="{$entry.img}"/>
+        {else}
+        <img style="display: none;">
+        {/if}
+    </div>
+    <div class="content-switcher-content">
+        <h1>{$entry.title}</h1>
+        <p>{$entry.content}</p>
+    </div>
+</div>
+
 {/foreach}
\ No newline at end of file
diff --git a/lib/QUI/Bricks/Controls/GoogleMaps.html b/lib/QUI/Bricks/Controls/GoogleMaps.html
index 26a5826..a13fdab 100644
--- a/lib/QUI/Bricks/Controls/GoogleMaps.html
+++ b/lib/QUI/Bricks/Controls/GoogleMaps.html
@@ -1,3 +1,4 @@
+<script src="http://maps.googleapis.com/maps/api/js"></script>
 <script>
 
     var myCenter = new google.maps.LatLng(51.149168, 7.106579);
-- 
GitLab