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
|
# reset zoom
|
||||||
@chat.css('transform', "")
|
@chat.css('transform', "")
|
||||||
@demo.css('width', "")
|
@browser.css('width', "")
|
||||||
@chat.removeClass('is-fullscreen')
|
@chat.removeClass('is-fullscreen')
|
||||||
@iframe.css
|
@iframe.css
|
||||||
transform: ""
|
transform: ""
|
||||||
|
@ -80,7 +80,7 @@ class App.ChannelChat extends App.Controller
|
||||||
|
|
||||||
if width < @demo.width()
|
if width < @demo.width()
|
||||||
@chat.addClass('is-fullscreen')
|
@chat.addClass('is-fullscreen')
|
||||||
@demo.css('width', "#{ width }px")
|
@browser.css('width', "#{ width }px")
|
||||||
else
|
else
|
||||||
percentage = @demo.width()/width
|
percentage = @demo.width()/width
|
||||||
@chat.css('transform', "scale(#{ percentage })")
|
@chat.css('transform', "scale(#{ percentage })")
|
||||||
|
|
|
@ -8,17 +8,23 @@
|
||||||
|
|
||||||
<h2><%- @T('Designer') %></h2>
|
<h2><%- @T('Designer') %></h2>
|
||||||
|
|
||||||
<div class="browser chat-demo js-browser">
|
<div class="form-group">
|
||||||
<div class="browser-head">
|
<label class="formGroup-label">Preview Width</label>
|
||||||
<form class="browser-input js-testurl" novalidate>
|
<div class="control">
|
||||||
<input type="url" class="js-testurl-input" placeholder="zammad.org">
|
|
||||||
</form>
|
|
||||||
<div class="select-tabs js-selectBrowserWidth">
|
<div class="select-tabs js-selectBrowserWidth">
|
||||||
<div class="tab" data-value="375">iPhone 6</div>
|
<div class="tab" data-value="375">iPhone 6</div>
|
||||||
<div class="tab is-selected" data-value="fit">Fit Width</div>
|
<div class="tab is-selected" data-value="fit">Fit Width</div>
|
||||||
<div class="tab" data-value="1280">MacBook</div>
|
<div class="tab" data-value="1280">MacBook</div>
|
||||||
</div>
|
</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>
|
||||||
<div class="browser-body js-demo">
|
<div class="browser-body js-demo">
|
||||||
<iframe class="js-iframe"></iframe>
|
<iframe class="js-iframe"></iframe>
|
||||||
<style>@import "/assets/chat/chat.css";</style>
|
<style>@import "/assets/chat/chat.css";</style>
|
||||||
|
|
|
@ -7329,6 +7329,8 @@ output {
|
||||||
border: 1px solid hsl(0,0%,90%);
|
border: 1px solid hsl(0,0%,90%);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
transition: 500ms;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.browser-body {
|
.browser-body {
|
||||||
|
@ -7336,8 +7338,6 @@ output {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 450px;
|
height: 450px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transition: 500ms;
|
|
||||||
background: #eee;
|
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
Loading…
Reference in a new issue