chat designer: outsource preview width

This commit is contained in:
Felix Niklas 2015-11-17 10:48:36 +01:00
parent 5c085b128c
commit db89970123
3 changed files with 15 additions and 9 deletions

View file

@ -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 })")

View file

@ -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>

View file

@ -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;