chat client: backwards compatible css (remove flex)
This commit is contained in:
Felix Niklas
parent
404c82f427
commit
f79820963c
5 changed files with 78 additions and 62 deletions
|
|
@ -8,15 +8,10 @@
|
|||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px 5px 0 0;
|
||||
will-change: bottom;
|
||||
display: none;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column; }
|
||||
display: none; }
|
||||
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex; }
|
||||
display: block; }
|
||||
|
||||
.zammad-chat-icon {
|
||||
height: 2em;
|
||||
|
|
@ -90,7 +85,7 @@
|
|||
padding: 0 0.7em;
|
||||
border-radius: 1em;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset; }
|
||||
|
||||
.zammad-chat-agent-status:before {
|
||||
content: "";
|
||||
|
|
@ -102,7 +97,7 @@
|
|||
position: relative;
|
||||
margin-right: 0.3em;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset; }
|
||||
|
||||
.zammad-chat-agent-status[data-status="online"]:before {
|
||||
background: #52c782; }
|
||||
|
|
@ -136,24 +131,22 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 3.5em;
|
||||
bottom: 0;
|
||||
margin-top: 1px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
z-index: 1;
|
||||
padding: 20px;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center; }
|
||||
padding: 20px; }
|
||||
|
||||
.zammad-chat-modal-center {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
|
||||
.zammad-chat-modal-text {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.45; }
|
||||
.zammad-chat-modal-text .zammad-chat-loading-animation {
|
||||
|
|
@ -262,12 +255,6 @@
|
|||
|
||||
.zammad-chat-controls {
|
||||
overflow: hidden;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: flex-start;
|
||||
-ms-flex-align: start;
|
||||
align-items: flex-start;
|
||||
border-top: 1px solid #ededed;
|
||||
padding: 0;
|
||||
line-height: 1.4em;
|
||||
|
|
@ -277,6 +264,7 @@
|
|||
|
||||
.zammad-chat-input {
|
||||
float: left;
|
||||
width: 62%;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
font-size: inherit;
|
||||
|
|
@ -286,13 +274,11 @@
|
|||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 1em 2em;
|
||||
padding: 1em 0;
|
||||
outline: none;
|
||||
resize: none;
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
max-height: 6em; }
|
||||
max-height: 6em;
|
||||
margin: 0 5%; }
|
||||
|
||||
.zammad-chat-input::-webkit-input-placeholder {
|
||||
color: #d9d9d9; }
|
||||
|
|
@ -315,7 +301,11 @@
|
|||
display: inline-block; }
|
||||
|
||||
.zammad-chat-send {
|
||||
float: right; }
|
||||
float: right;
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%; }
|
||||
|
||||
.zammad-chat-is-hidden {
|
||||
display: none; }
|
||||
|
|
@ -353,7 +343,14 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
height: 100vh; }
|
||||
height: 100vh;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column; }
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex; }
|
||||
.zammad-chat-body {
|
||||
height: auto;
|
||||
-webkit-flex: 1;
|
||||
|
|
|
|||
|
|
@ -9,10 +9,9 @@
|
|||
border-radius: 5px 5px 0 0;
|
||||
will-change: bottom;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
display: flex;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.zammad-chat-icon {
|
||||
|
|
@ -104,7 +103,7 @@
|
|||
padding: 0 .7em;
|
||||
border-radius: 1em;
|
||||
background: rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04);
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
|
||||
}
|
||||
|
||||
.zammad-chat-agent-status:before {
|
||||
|
|
@ -117,7 +116,7 @@
|
|||
position: relative;
|
||||
margin-right: 0.3em;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04);
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
|
||||
}
|
||||
|
||||
.zammad-chat-agent-status[data-status="online"]:before {
|
||||
|
|
@ -138,19 +137,24 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 3.5em;
|
||||
bottom: 0;
|
||||
margin-top: 1px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
z-index: 1;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zammad-chat-modal-center {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.zammad-chat-modal-text {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.45;
|
||||
|
||||
|
|
@ -262,8 +266,6 @@
|
|||
|
||||
.zammad-chat-controls {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
border-top: 1px solid hsl(0,0%,93%);
|
||||
padding: 0;
|
||||
line-height: 1.4em;
|
||||
|
|
@ -276,6 +278,7 @@
|
|||
|
||||
.zammad-chat-input {
|
||||
float: left;
|
||||
width: 62%;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
font-size: inherit;
|
||||
|
|
@ -283,11 +286,11 @@
|
|||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 1em 2em;
|
||||
padding: 1em 0;
|
||||
outline: none;
|
||||
resize: none;
|
||||
flex: 1;
|
||||
max-height: 6em;
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.zammad-chat-input::-webkit-input-placeholder {
|
||||
|
|
@ -315,6 +318,10 @@
|
|||
|
||||
.zammad-chat-send {
|
||||
float: right;
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.zammad-chat-is-hidden {
|
||||
|
|
@ -359,6 +366,10 @@
|
|||
right: 0;
|
||||
width: auto;
|
||||
height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
display: flex;
|
||||
}
|
||||
.zammad-chat-body {
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
<div class="zammad-chat-modal">
|
||||
<span class="zammad-chat-loading-animation">
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
</span>
|
||||
<span class="zammad-chat-modal-text"><%= @T('Connecting') %></span>
|
||||
<div class="zammad-chat-modal-center">
|
||||
<div class="zammad-chat-modal-text">
|
||||
<span class="zammad-chat-loading-animation">
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
</span>
|
||||
<%= @T('Connecting') %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
<div class="zammad-chat-modal">
|
||||
<div class="zammad-chat-modal-text">
|
||||
<%- @T('Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.', "#{ @delay } #{ @unit }", @agent) %><br>
|
||||
<div class="zammad-chat-button"<%= " style='background: #{ @background }'" if @background %>><%= @T('Start new conversation') %></div>
|
||||
<div class="zammad-chat-modal-center">
|
||||
<div class="zammad-chat-modal-text">
|
||||
<%- @T('Since you didn\'t respond in the last %s your conversation with <strong>%s</strong> got closed.', "#{ @delay } #{ @unit }", @agent) %><br>
|
||||
<div class="zammad-chat-button"<%= " style='background: #{ @background }'" if @background %>><%= @T('Start new conversation') %></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,11 +1,13 @@
|
|||
<div class="zammad-chat-modal">
|
||||
<div class="zammad-chat-modal-text">
|
||||
<span class="zammad-chat-loading-animation">
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
</span>
|
||||
<%- @T('All colleges are busy.') %><br>
|
||||
<%- @T('You are on waiting list position <strong>%s</strong>.', @position) %>
|
||||
<div class="zammad-chat-modal-center">
|
||||
<div class="zammad-chat-modal-text">
|
||||
<span class="zammad-chat-loading-animation">
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
<span class="zammad-chat-loading-circle"></span>
|
||||
</span>
|
||||
<%- @T('All colleges are busy.') %><br>
|
||||
<%- @T('You are on waiting list position <strong>%s</strong>.', @position) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue