chat designer: outsource preview width
This commit is contained in:
parent
5c085b128c
commit
db89970123
3 changed files with 15 additions and 9 deletions
|
@ -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 })")
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue