From db899701234c98375ffad92e0e0a8079fa46a267 Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Tue, 17 Nov 2015 10:48:36 +0100
Subject: [PATCH] chat designer: outsource preview width

---
 .../app/controllers/_channel/chat.coffee         |  4 ++--
 .../javascripts/app/views/channel/chat.jst.eco   | 16 +++++++++++-----
 app/assets/stylesheets/zammad.scss               |  4 ++--
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/app/controllers/_channel/chat.coffee b/app/assets/javascripts/app/controllers/_channel/chat.coffee
index 03cc96272..0fa62b067 100644
--- a/app/assets/javascripts/app/controllers/_channel/chat.coffee
+++ b/app/assets/javascripts/app/controllers/_channel/chat.coffee
@@ -69,7 +69,7 @@ class App.ChannelChat extends App.Controller
 
     # reset zoom
     @chat.css('transform', "")
-    @demo.css('width', "")
+    @browser.css('width', "")
     @chat.removeClass('is-fullscreen')
     @iframe.css
       transform: ""
@@ -80,7 +80,7 @@ class App.ChannelChat extends App.Controller
 
     if width < @demo.width()
       @chat.addClass('is-fullscreen')
-      @demo.css('width', "#{ width }px")
+      @browser.css('width', "#{ width }px")
     else
       percentage = @demo.width()/width
       @chat.css('transform', "scale(#{ percentage })")
diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco
index 6ba7f138d..8f5a3932a 100644
--- a/app/assets/javascripts/app/views/channel/chat.jst.eco
+++ b/app/assets/javascripts/app/views/channel/chat.jst.eco
@@ -7,17 +7,23 @@
   <p><%- @T('You can embedd this widget into your web page to allow visitors to directly chat with you.') %></p>
   
   <h2><%- @T('Designer') %></h2>
+
+  <div class="form-group">
+    <label class="formGroup-label">Preview Width</label>
+    <div class="control">
+      <div class="select-tabs js-selectBrowserWidth">
+        <div class="tab" data-value="375">iPhone 6</div>
+        <div class="tab is-selected" data-value="fit">Fit Width</div>
+        <div class="tab" data-value="1280">MacBook</div>
+      </div>
+    </div>
+  </div>
   
   <div class="browser chat-demo js-browser">
     <div class="browser-head">
       <form class="browser-input js-testurl" novalidate>
         <input type="url" class="js-testurl-input" placeholder="zammad.org">
       </form>
-      <div class="select-tabs js-selectBrowserWidth">
-        <div class="tab" data-value="375">iPhone 6</div>
-        <div class="tab is-selected" data-value="fit">Fit Width</div>
-        <div class="tab" data-value="1280">MacBook</div>
-      </div>
     </div>
     <div class="browser-body js-demo">
       <iframe class="js-iframe"></iframe>
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 0626ffdd8..747aa16b1 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -7329,6 +7329,8 @@ output {
   border: 1px solid hsl(0,0%,90%);
   border-radius: 5px;
   position: relative;
+  transition: 500ms;
+  width: 100%;
 }
   
 .browser-body {
@@ -7336,8 +7338,6 @@ output {
   overflow: hidden;
   height: 450px;
   width: 100%;
-  transition: 500ms;
-  background: #eee;
   
   iframe {
     position: absolute;