Revert "chat client: backwards compatible css (remove flex)"
This reverts commit f79820963c.
This commit is contained in:
Martin Edenhofer
parent
d970c08306
commit
18e01c5fd4
5 changed files with 62 additions and 78 deletions
|
|
@ -8,10 +8,15 @@
|
|||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 5px 5px 0 0;
|
||||
will-change: bottom;
|
||||
display: none; }
|
||||
display: none;
|
||||
-webkit-flex-direction: column;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column; }
|
||||
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
display: block; }
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex; }
|
||||
|
||||
.zammad-chat-icon {
|
||||
height: 2em;
|
||||
|
|
@ -85,7 +90,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) inset; }
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
|
||||
|
||||
.zammad-chat-agent-status:before {
|
||||
content: "";
|
||||
|
|
@ -97,7 +102,7 @@
|
|||
position: relative;
|
||||
margin-right: 0.3em;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset; }
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
|
||||
|
||||
.zammad-chat-agent-status[data-status="online"]:before {
|
||||
background: #52c782; }
|
||||
|
|
@ -131,22 +136,24 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 3.5em;
|
||||
bottom: 0;
|
||||
top: 3.5em;
|
||||
margin-top: 1px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
z-index: 1;
|
||||
padding: 20px; }
|
||||
|
||||
.zammad-chat-modal-center {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
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; }
|
||||
|
||||
.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 {
|
||||
|
|
@ -255,6 +262,12 @@
|
|||
|
||||
.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;
|
||||
|
|
@ -264,7 +277,6 @@
|
|||
|
||||
.zammad-chat-input {
|
||||
float: left;
|
||||
width: 62%;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
font-size: inherit;
|
||||
|
|
@ -274,11 +286,13 @@
|
|||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 1em 0;
|
||||
padding: 1em 2em;
|
||||
outline: none;
|
||||
resize: none;
|
||||
max-height: 6em;
|
||||
margin: 0 5%; }
|
||||
-webkit-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
max-height: 6em; }
|
||||
|
||||
.zammad-chat-input::-webkit-input-placeholder {
|
||||
color: #d9d9d9; }
|
||||
|
|
@ -301,11 +315,7 @@
|
|||
display: inline-block; }
|
||||
|
||||
.zammad-chat-send {
|
||||
float: right;
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%; }
|
||||
float: right; }
|
||||
|
||||
.zammad-chat-is-hidden {
|
||||
display: none; }
|
||||
|
|
@ -343,14 +353,7 @@
|
|||
left: 0;
|
||||
right: 0;
|
||||
width: auto;
|
||||
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; }
|
||||
height: 100vh; }
|
||||
.zammad-chat-body {
|
||||
height: auto;
|
||||
-webkit-flex: 1;
|
||||
|
|
|
|||
|
|
@ -9,9 +9,10 @@
|
|||
border-radius: 5px 5px 0 0;
|
||||
will-change: bottom;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
}
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.zammad-chat-icon {
|
||||
|
|
@ -103,7 +104,7 @@
|
|||
padding: 0 .7em;
|
||||
border-radius: 1em;
|
||||
background: rgba(0,0,0,.1);
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04);
|
||||
}
|
||||
|
||||
.zammad-chat-agent-status:before {
|
||||
|
|
@ -116,7 +117,7 @@
|
|||
position: relative;
|
||||
margin-right: 0.3em;
|
||||
vertical-align: middle;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset;
|
||||
box-shadow: 0 0 0 1px rgba(0,0,0,.04);
|
||||
}
|
||||
|
||||
.zammad-chat-agent-status[data-status="online"]:before {
|
||||
|
|
@ -137,24 +138,19 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 3.5em;
|
||||
bottom: 0;
|
||||
top: 3.5em;
|
||||
margin-top: 1px;
|
||||
text-align: center;
|
||||
background: white;
|
||||
z-index: 1;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.zammad-chat-modal-center {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.zammad-chat-modal-text {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.45;
|
||||
|
||||
|
|
@ -266,6 +262,8 @@
|
|||
|
||||
.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;
|
||||
|
|
@ -278,7 +276,6 @@
|
|||
|
||||
.zammad-chat-input {
|
||||
float: left;
|
||||
width: 62%;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
font-size: inherit;
|
||||
|
|
@ -286,11 +283,11 @@
|
|||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 1em 0;
|
||||
padding: 1em 2em;
|
||||
outline: none;
|
||||
resize: none;
|
||||
flex: 1;
|
||||
max-height: 6em;
|
||||
margin: 0 5%;
|
||||
}
|
||||
|
||||
.zammad-chat-input::-webkit-input-placeholder {
|
||||
|
|
@ -318,10 +315,6 @@
|
|||
|
||||
.zammad-chat-send {
|
||||
float: right;
|
||||
width: 20%;
|
||||
box-sizing: border-box;
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
}
|
||||
|
||||
.zammad-chat-is-hidden {
|
||||
|
|
@ -366,10 +359,6 @@
|
|||
right: 0;
|
||||
width: auto;
|
||||
height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
.zammad-chat.zammad-chat-is-open {
|
||||
display: flex;
|
||||
}
|
||||
.zammad-chat-body {
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
<div class="zammad-chat-modal">
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
<div class="zammad-chat-modal">
|
||||
<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 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>
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
<div class="zammad-chat-modal">
|
||||
<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 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>
|
||||
Loading…
Reference in a new issue