chat designer: responsive preview
This commit is contained in:
parent
95d9b3c5f6
commit
96d24ff4d7
9 changed files with 148 additions and 82 deletions
|
@ -6,13 +6,13 @@ class App.ChannelChat extends App.Controller
|
||||||
'click .js-widget': 'widget'
|
'click .js-widget': 'widget'
|
||||||
'change .js-params': 'updateParams'
|
'change .js-params': 'updateParams'
|
||||||
'keyup .js-params': 'updateParams'
|
'keyup .js-params': 'updateParams'
|
||||||
'submit .js-testurl': 'changeTestWebsite'
|
'submit .js-testurl': 'changeDemoWebsite'
|
||||||
'blur .js-testurl-input': 'changeTestWebsite'
|
'blur .js-testurl-input': 'changeDemoWebsite'
|
||||||
'click .js-zoom-in': 'zoomIn'
|
'click .js-selectBrowserWidth': 'selectBrowserWidth'
|
||||||
'click .js-zoom-out': 'zoomOut'
|
|
||||||
|
|
||||||
elements:
|
elements:
|
||||||
'.js-demo': 'demo'
|
'.js-demo': 'demo'
|
||||||
|
'.js-browser': 'browser'
|
||||||
'.js-iframe': 'iframe'
|
'.js-iframe': 'iframe'
|
||||||
'.js-chat': 'chat'
|
'.js-chat': 'chat'
|
||||||
'.js-testurl-input': 'urlInput'
|
'.js-testurl-input': 'urlInput'
|
||||||
|
@ -58,27 +58,43 @@ class App.ChannelChat extends App.Controller
|
||||||
area: 'Chat::Base'
|
area: 'Chat::Base'
|
||||||
)
|
)
|
||||||
|
|
||||||
zoomOut: =>
|
selectBrowserWidth: (event) =>
|
||||||
if @demo.width() < 1024
|
tab = $(event.target).closest('[data-value]')
|
||||||
percentage = @demo.width()/1024
|
|
||||||
|
# select tab
|
||||||
|
tab.addClass('is-selected').siblings().removeClass('is-selected')
|
||||||
|
|
||||||
|
value = tab.attr('data-value')
|
||||||
|
width = parseInt value, 10
|
||||||
|
|
||||||
|
# reset zoom
|
||||||
|
@chat.css('transform', "")
|
||||||
|
@demo.css('width', "")
|
||||||
|
@chat.removeClass('is-fullscreen')
|
||||||
|
@iframe.css
|
||||||
|
transform: ""
|
||||||
|
width: ""
|
||||||
|
height: ""
|
||||||
|
|
||||||
|
return if value is 'fit'
|
||||||
|
|
||||||
|
if width < @demo.width()
|
||||||
|
@chat.addClass('is-fullscreen')
|
||||||
|
@demo.css('width', "#{ width }px")
|
||||||
|
else
|
||||||
|
percentage = @demo.width()/width
|
||||||
@chat.css('transform', "scale(#{ percentage })")
|
@chat.css('transform', "scale(#{ percentage })")
|
||||||
@iframe.css
|
@iframe.css
|
||||||
transform: "scale(#{ percentage })"
|
transform: "scale(#{ percentage })"
|
||||||
width: @demo.width() / percentage
|
width: @demo.width() / percentage
|
||||||
height: @demo.height() / percentage
|
height: @demo.height() / percentage
|
||||||
|
|
||||||
zoomIn: =>
|
changeDemoWebsite: (event) =>
|
||||||
@chat.css('transform', "")
|
|
||||||
@iframe.css
|
|
||||||
transform: ""
|
|
||||||
width: ""
|
|
||||||
height: ""
|
|
||||||
|
|
||||||
|
|
||||||
changeTestWebsite: (event) =>
|
|
||||||
event.preventDefault() if event
|
event.preventDefault() if event
|
||||||
|
|
||||||
return if @urlInput.val() is @url
|
# fire both on enter and blur
|
||||||
|
# but cache url
|
||||||
|
return if @urlInput.val() is "" or @urlInput.val() is @url
|
||||||
@url = @urlInput.val()
|
@url = @urlInput.val()
|
||||||
|
|
||||||
src = @url
|
src = @url
|
||||||
|
|
|
@ -8,13 +8,16 @@
|
||||||
|
|
||||||
<h2><%- @T('Designer') %></h2>
|
<h2><%- @T('Designer') %></h2>
|
||||||
|
|
||||||
<div class="browser chat-demo">
|
<div class="browser chat-demo js-browser">
|
||||||
<div class="browser-head">
|
<div class="browser-head">
|
||||||
<form class="browser-input js-testurl" novalidate>
|
<form class="browser-input js-testurl" novalidate>
|
||||||
<input type="url" class="js-testurl-input" placeholder="zammad.org">
|
<input type="url" class="js-testurl-input" placeholder="zammad.org">
|
||||||
</form>
|
</form>
|
||||||
<div class="browser-control zoom-out js-zoom-out"><%- @Icon('zoom-out') %></div>
|
<div class="select-tabs js-selectBrowserWidth">
|
||||||
<div class="browser-control zoom-in js-zoom-in"><%- @Icon('zoom-in') %></div>
|
<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-body js-demo">
|
<div class="browser-body js-demo">
|
||||||
<iframe class="js-iframe"></iframe>
|
<iframe class="js-iframe"></iframe>
|
||||||
|
|
|
@ -6529,6 +6529,7 @@ output {
|
||||||
color: hsl(60,1%,34%);
|
color: hsl(60,1%,34%);
|
||||||
background: white;
|
background: white;
|
||||||
table-layout: auto;
|
table-layout: auto;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
&.is-invalid {
|
&.is-invalid {
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
|
@ -7327,16 +7328,16 @@ output {
|
||||||
margin: 0 0 20px;
|
margin: 0 0 20px;
|
||||||
border: 1px solid hsl(0,0%,90%);
|
border: 1px solid hsl(0,0%,90%);
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
height: 500px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.browser-body {
|
.browser-body {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
flex: 1;
|
height: 450px;
|
||||||
|
width: 100%;
|
||||||
|
transition: 500ms;
|
||||||
|
background: #eee;
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -7351,17 +7352,21 @@ output {
|
||||||
|
|
||||||
.browser-head {
|
.browser-head {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 5px;
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
border-bottom: 1px solid hsl(0,0%,90%);
|
border-bottom: 1px solid hsl(0,0%,90%);
|
||||||
|
|
||||||
.browser-input {
|
.browser-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin: 5px;
|
margin-right: 10px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.browser-control {
|
.browser-control {
|
||||||
width: 39px;
|
width: 39px;
|
||||||
margin: 5px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -7370,11 +7375,22 @@ output {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.chat-demo {
|
.chat-demo {
|
||||||
.zammad-chat {
|
.zammad-chat {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
transform-origin: right bottom;
|
transform-origin: right bottom;
|
||||||
|
transition: 500ms;
|
||||||
|
|
||||||
|
.zammad-chat-body {
|
||||||
|
transition: 500ms;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-fullscreen {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zammad-chat-header {
|
||||||
pointer-events: auto;
|
pointer-events: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7393,6 +7409,22 @@ output {
|
||||||
from { transform: translateY(100%); }
|
from { transform: translateY(100%); }
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select-tabs {
|
||||||
|
display: flex;
|
||||||
|
border: 1px solid hsla(206,100%,3%,0.08);
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
height: 39px;
|
||||||
|
padding-top: 11px;
|
||||||
|
color: hsl(199,18%,72%);
|
||||||
|
|
||||||
|
&.is-selected {
|
||||||
|
background: linear-gradient(hsla(199,30%,40%,.08), hsla(199,30%,40%,.03));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
----------------
|
----------------
|
||||||
|
|
|
@ -16,6 +16,7 @@ do($ = window.jQuery, window) ->
|
||||||
fontSize: undefined
|
fontSize: undefined
|
||||||
buttonSelector: '.open-zammad-chat'
|
buttonSelector: '.open-zammad-chat'
|
||||||
hiddenButtonClass: 'is-inactive'
|
hiddenButtonClass: 'is-inactive'
|
||||||
|
title: '<strong>Chat</strong> with us!'
|
||||||
|
|
||||||
_messageCount: 0
|
_messageCount: 0
|
||||||
isOpen: true
|
isOpen: true
|
||||||
|
@ -30,7 +31,6 @@ do($ = window.jQuery, window) ->
|
||||||
initialQueueDelay: 10000
|
initialQueueDelay: 10000
|
||||||
wsReconnectEnable: true
|
wsReconnectEnable: true
|
||||||
strings:
|
strings:
|
||||||
'<strong>Chat</strong> with us!': '<strong>Chatten</strong> sie mit uns!'
|
|
||||||
'Online': 'Online'
|
'Online': 'Online'
|
||||||
'Offline': 'Offline'
|
'Offline': 'Offline'
|
||||||
'Connecting': 'Verbinden'
|
'Connecting': 'Verbinden'
|
||||||
|
@ -80,7 +80,9 @@ do($ = window.jQuery, window) ->
|
||||||
return
|
return
|
||||||
|
|
||||||
@options = $.extend {}, @defaults, options
|
@options = $.extend {}, @defaults, options
|
||||||
@el = $(@view('chat')())
|
@el = $(@view('chat')(
|
||||||
|
title: @options.title
|
||||||
|
))
|
||||||
@options.target.append @el
|
@options.target.append @el
|
||||||
|
|
||||||
@input = @el.find('.zammad-chat-input')
|
@input = @el.find('.zammad-chat-input')
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
width: 33em;
|
width: 33em;
|
||||||
|
height: 30em;
|
||||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 5px 5px 0 0;
|
border-radius: 5px 5px 0 0;
|
||||||
will-change: bottom;
|
will-change: bottom;
|
||||||
|
@ -12,6 +13,17 @@
|
||||||
-webkit-flex-direction: column;
|
-webkit-flex-direction: column;
|
||||||
-ms-flex-direction: column;
|
-ms-flex-direction: column;
|
||||||
flex-direction: column; }
|
flex-direction: column; }
|
||||||
|
.zammad-chat.is-fullscreen {
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
border-radius: 0 !important; }
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.zammad-chat {
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
border-radius: 0 !important; } }
|
||||||
|
|
||||||
.zammad-chat.zammad-chat-is-open {
|
.zammad-chat.zammad-chat-is-open {
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
|
@ -35,6 +47,12 @@
|
||||||
border-radius: 5px 5px 0 0;
|
border-radius: 5px 5px 0 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.zammad-chat-header {
|
||||||
|
border-radius: 0 !important; } }
|
||||||
|
|
||||||
|
.zammad-chat.is-fullscreen .zammad-chat-header {
|
||||||
|
border-radius: 0 !important; }
|
||||||
|
|
||||||
.zammad-chat.zammad-chat-is-open .zammad-chat-header {
|
.zammad-chat.zammad-chat-is-open .zammad-chat-header {
|
||||||
cursor: default; }
|
cursor: default; }
|
||||||
|
@ -168,9 +186,17 @@
|
||||||
|
|
||||||
.zammad-chat-body {
|
.zammad-chat-body {
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
height: 25em;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: white; }
|
background: white;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1; }
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
.zammad-chat-body {
|
||||||
|
height: auto;
|
||||||
|
-webkit-flex: 1;
|
||||||
|
-ms-flex: 1;
|
||||||
|
flex: 1; } }
|
||||||
|
|
||||||
.zammad-chat-timestamp {
|
.zammad-chat-timestamp {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -343,23 +369,3 @@
|
||||||
.zammad-chat--flat .zammad-chat-button,
|
.zammad-chat--flat .zammad-chat-button,
|
||||||
.zammad-chat--flat .zammad-chat-status {
|
.zammad-chat--flat .zammad-chat-status {
|
||||||
box-shadow: none; }
|
box-shadow: none; }
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
Mobile Design
|
|
||||||
|
|
||||||
*/
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.zammad-chat {
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: auto;
|
|
||||||
height: 100vh; }
|
|
||||||
.zammad-chat-body {
|
|
||||||
height: auto;
|
|
||||||
-webkit-flex: 1;
|
|
||||||
-ms-flex: 1;
|
|
||||||
flex: 1; }
|
|
||||||
.zammad-chat,
|
|
||||||
.zammad-chat-header {
|
|
||||||
border-radius: 0 !important; } }
|
|
||||||
|
|
|
@ -76,7 +76,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
||||||
debug: false,
|
debug: false,
|
||||||
fontSize: void 0,
|
fontSize: void 0,
|
||||||
buttonSelector: '.open-zammad-chat',
|
buttonSelector: '.open-zammad-chat',
|
||||||
hiddenButtonClass: 'is-inactive'
|
hiddenButtonClass: 'is-inactive',
|
||||||
|
title: '<strong>Chat</strong> with us!'
|
||||||
};
|
};
|
||||||
|
|
||||||
ZammadChat.prototype._messageCount = 0;
|
ZammadChat.prototype._messageCount = 0;
|
||||||
|
@ -104,7 +105,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
||||||
ZammadChat.prototype.wsReconnectEnable = true;
|
ZammadChat.prototype.wsReconnectEnable = true;
|
||||||
|
|
||||||
ZammadChat.prototype.strings = {
|
ZammadChat.prototype.strings = {
|
||||||
'<strong>Chat</strong> with us!': '<strong>Chatten</strong> sie mit uns!',
|
|
||||||
'Online': 'Online',
|
'Online': 'Online',
|
||||||
'Offline': 'Offline',
|
'Offline': 'Offline',
|
||||||
'Connecting': 'Verbinden',
|
'Connecting': 'Verbinden',
|
||||||
|
@ -201,7 +201,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.options = $.extend({}, this.defaults, options);
|
this.options = $.extend({}, this.defaults, options);
|
||||||
this.el = $(this.view('chat')());
|
this.el = $(this.view('chat')({
|
||||||
|
title: this.options.title
|
||||||
|
}));
|
||||||
this.options.target.append(this.el);
|
this.options.target.append(this.el);
|
||||||
this.input = this.el.find('.zammad-chat-input');
|
this.input = this.el.find('.zammad-chat-input');
|
||||||
this.el.find('.js-chat-open').click(this.open);
|
this.el.find('.js-chat-open').click(this.open);
|
||||||
|
@ -861,7 +863,7 @@ window.zammadChatTemplates["chat"] = function (__obj) {
|
||||||
|
|
||||||
__out.push('>\n <div class="zammad-chat-header-controls">\n <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n <span class="zammad-chat-header-icon">\n <svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>\n <svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>\n </span>\n </div>\n <div class="zammad-chat-agent zammad-chat-is-hidden">\n </div>\n <div class="zammad-chat-welcome">\n <svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"/></svg>\n <span class="zammad-chat-welcome-text">');
|
__out.push('>\n <div class="zammad-chat-header-controls">\n <span class="zammad-chat-agent-status zammad-chat-is-hidden" data-status="online"></span>\n <span class="zammad-chat-header-icon">\n <svg class="zammad-chat-header-icon-open" viewBox="0 0 13 7"><path d="M10.807 7l1.4-1.428-5-4.9L6.5-.02l-.7.7-4.9 4.9 1.414 1.413L6.5 2.886 10.807 7z" fill-rule="evenodd"/></svg>\n <svg class="zammad-chat-header-icon-close js-chat-close" viewBox="0 0 13 13"><path d="m2.241.12l-2.121 2.121 4.243 4.243-4.243 4.243 2.121 2.121 4.243-4.243 4.243 4.243 2.121-2.121-4.243-4.243 4.243-4.243-2.121-2.121-4.243 4.243-4.243-4.243" fill-rule="evenodd"/></svg>\n </span>\n </div>\n <div class="zammad-chat-agent zammad-chat-is-hidden">\n </div>\n <div class="zammad-chat-welcome">\n <svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"/></svg>\n <span class="zammad-chat-welcome-text">');
|
||||||
|
|
||||||
__out.push(this.T('<strong>Chat</strong> with us!'));
|
__out.push(this.title);
|
||||||
|
|
||||||
__out.push('</span>\n </div>\n </div>\n <div class="zammad-chat-body"></div>\n <form class="zammad-chat-controls">\n <textarea class="zammad-chat-input" rows="1" placeholder="');
|
__out.push('</span>\n </div>\n </div>\n <div class="zammad-chat-body"></div>\n <form class="zammad-chat-controls">\n <textarea class="zammad-chat-input" rows="1" placeholder="');
|
||||||
|
|
||||||
|
|
2
public/assets/chat/chat.min.js
vendored
2
public/assets/chat/chat.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -5,11 +5,26 @@
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
width: 33em;
|
width: 33em;
|
||||||
|
height: 30em;
|
||||||
box-shadow: 0 3px 10px rgba(0,0,0,.3);
|
box-shadow: 0 3px 10px rgba(0,0,0,.3);
|
||||||
border-radius: 5px 5px 0 0;
|
border-radius: 5px 5px 0 0;
|
||||||
will-change: bottom;
|
will-change: bottom;
|
||||||
display: none;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
|
&.is-fullscreen {
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.zammad-chat.zammad-chat-is-open {
|
.zammad-chat.zammad-chat-is-open {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -37,6 +52,14 @@
|
||||||
border-radius: 5px 5px 0 0;
|
border-radius: 5px 5px 0 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
border-radius: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.zammad-chat.is-fullscreen .zammad-chat-header {
|
||||||
|
border-radius: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.zammad-chat.zammad-chat-is-open .zammad-chat-header {
|
.zammad-chat.zammad-chat-is-open .zammad-chat-header {
|
||||||
|
@ -171,9 +194,14 @@
|
||||||
|
|
||||||
.zammad-chat-body {
|
.zammad-chat-body {
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
height: 25em;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
background: white;
|
background: white;
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
@media only screen and (max-width: 768px) {
|
||||||
|
height: auto;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.zammad-chat-timestamp {
|
.zammad-chat-timestamp {
|
||||||
|
@ -346,27 +374,4 @@
|
||||||
.zammad-chat--flat .zammad-chat-button,
|
.zammad-chat--flat .zammad-chat-button,
|
||||||
.zammad-chat--flat .zammad-chat-status {
|
.zammad-chat--flat .zammad-chat-status {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
|
|
||||||
Mobile Design
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
@media only screen and (max-width: 768px) {
|
|
||||||
.zammad-chat {
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: auto;
|
|
||||||
height: 100vh;
|
|
||||||
}
|
|
||||||
.zammad-chat-body {
|
|
||||||
height: auto;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
.zammad-chat,
|
|
||||||
.zammad-chat-header {
|
|
||||||
border-radius: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
}
|
|
@ -11,7 +11,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="zammad-chat-welcome">
|
<div class="zammad-chat-welcome">
|
||||||
<svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"/></svg>
|
<svg class="zammad-chat-icon" viewBox="0 0 24 24"><path d="M2 5C2 4 3 3 4 3h16c1 0 2 1 2 2v10C22 16 21 17 20 17H4C3 17 2 16 2 15V5zM12 17l6 4v-4h-6z" fill-rule="evenodd"/></svg>
|
||||||
<span class="zammad-chat-welcome-text"><%- @T('<strong>Chat</strong> with us!') %></span>
|
<span class="zammad-chat-welcome-text"><%- @title %></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="zammad-chat-body"></div>
|
<div class="zammad-chat-body"></div>
|
||||||
|
|
Loading…
Reference in a new issue