Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

chat designer: outsource preview width

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/app/controllers/_channel/chat.coffee
View file

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

16
app/assets/javascripts/app/views/channel/chat.jst.eco
View file

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

4
app/assets/stylesheets/zammad.scss
View file

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