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

chat client: backwards compatible css (remove flex)

Browse source
This commit is contained in:
Felix Niklas 2015-11-16 11:46:18 +01:00
parent 404c82f427
commit f79820963c
5 changed files with 78 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
public/assets/chat/chat.css
View file

@ -8,15 +8,10 @@
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;
display: none; display: none; }
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column; }
.zammad-chat.zammad-chat-is-open { .zammad-chat.zammad-chat-is-open {
display: -webkit-flex; display: block; }
display: -ms-flexbox;
display: flex; }
.zammad-chat-icon { .zammad-chat-icon {
height: 2em; height: 2em;
@ -90,7 +85,7 @@
padding: 0 0.7em; padding: 0 0.7em;
border-radius: 1em; border-radius: 1em;
background: rgba(0, 0, 0, 0.1); 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 { .zammad-chat-agent-status:before {
content: ""; content: "";
@ -102,7 +97,7 @@
position: relative; position: relative;
margin-right: 0.3em; margin-right: 0.3em;
vertical-align: middle; 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 { .zammad-chat-agent-status[data-status="online"]:before {
background: #52c782; } background: #52c782; }
@ -136,24 +131,22 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0;
top: 3.5em; top: 3.5em;
bottom: 0;
margin-top: 1px; margin-top: 1px;
text-align: center; text-align: center;
background: white; background: white;
z-index: 1; z-index: 1;
padding: 20px; padding: 20px; }
display: -webkit-flex;
display: -ms-flexbox; .zammad-chat-modal-center {
display: flex; display: table;
-webkit-align-items: center; width: 100%;
-ms-flex-align: center; height: 100%; }
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; }
.zammad-chat-modal-text { .zammad-chat-modal-text {
display: table-cell;
vertical-align: middle;
font-size: 1.3em; font-size: 1.3em;
line-height: 1.45; } line-height: 1.45; }
.zammad-chat-modal-text .zammad-chat-loading-animation { .zammad-chat-modal-text .zammad-chat-loading-animation {
@ -262,12 +255,6 @@
.zammad-chat-controls { .zammad-chat-controls {
overflow: hidden; 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; border-top: 1px solid #ededed;
padding: 0; padding: 0;
line-height: 1.4em; line-height: 1.4em;
@ -277,6 +264,7 @@
.zammad-chat-input { .zammad-chat-input {
float: left; float: left;
width: 62%;
font-family: inherit; font-family: inherit;
line-height: inherit; line-height: inherit;
font-size: inherit; font-size: inherit;
@ -286,13 +274,11 @@
border: none; border: none;
background: none; background: none;
box-shadow: none; box-shadow: none;
padding: 1em 2em; padding: 1em 0;
outline: none; outline: none;
resize: none; resize: none;
-webkit-flex: 1; max-height: 6em;
-ms-flex: 1; margin: 0 5%; }
flex: 1;
max-height: 6em; }
.zammad-chat-input::-webkit-input-placeholder { .zammad-chat-input::-webkit-input-placeholder {
color: #d9d9d9; } color: #d9d9d9; }
@ -315,7 +301,11 @@
display: inline-block; } display: inline-block; }
.zammad-chat-send { .zammad-chat-send {
float: right; } float: right;
width: 20%;
box-sizing: border-box;
margin-left: 2%;
margin-right: 2%; }
.zammad-chat-is-hidden { .zammad-chat-is-hidden {
display: none; } display: none; }
@ -353,7 +343,14 @@
left: 0; left: 0;
right: 0; right: 0;
width: auto; 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 { .zammad-chat-body {
height: auto; height: auto;
-webkit-flex: 1; -webkit-flex: 1;

35
public/assets/chat/chat.scss
View file

@ -9,10 +9,9 @@
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;
} }
.zammad-chat.zammad-chat-is-open { .zammad-chat.zammad-chat-is-open {
display: flex; display: block;
} }
.zammad-chat-icon { .zammad-chat-icon {
@ -104,7 +103,7 @@
padding: 0 .7em; padding: 0 .7em;
border-radius: 1em; border-radius: 1em;
background: rgba(0,0,0,.1); 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 { .zammad-chat-agent-status:before {
@ -117,7 +116,7 @@
position: relative; position: relative;
margin-right: 0.3em; margin-right: 0.3em;
vertical-align: middle; 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 { .zammad-chat-agent-status[data-status="online"]:before {
@ -138,19 +137,24 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0;
top: 3.5em; top: 3.5em;
bottom: 0;
margin-top: 1px; margin-top: 1px;
text-align: center; text-align: center;
background: white; background: white;
z-index: 1; z-index: 1;
padding: 20px; padding: 20px;
display: flex; }
align-items: center;
justify-content: center; .zammad-chat-modal-center {
display: table;
width: 100%;
height: 100%;
} }
.zammad-chat-modal-text { .zammad-chat-modal-text {
display: table-cell;
vertical-align: middle;
font-size: 1.3em; font-size: 1.3em;
line-height: 1.45; line-height: 1.45;
@ -262,8 +266,6 @@
.zammad-chat-controls { .zammad-chat-controls {
overflow: hidden; overflow: hidden;
display: flex;
align-items: flex-start;
border-top: 1px solid hsl(0,0%,93%); border-top: 1px solid hsl(0,0%,93%);
padding: 0; padding: 0;
line-height: 1.4em; line-height: 1.4em;
@ -276,6 +278,7 @@
.zammad-chat-input { .zammad-chat-input {
float: left; float: left;
width: 62%;
font-family: inherit; font-family: inherit;
line-height: inherit; line-height: inherit;
font-size: inherit; font-size: inherit;
@ -283,11 +286,11 @@
border: none; border: none;
background: none; background: none;
box-shadow: none; box-shadow: none;
padding: 1em 2em; padding: 1em 0;
outline: none; outline: none;
resize: none; resize: none;
flex: 1;
max-height: 6em; max-height: 6em;
margin: 0 5%;
} }
.zammad-chat-input::-webkit-input-placeholder { .zammad-chat-input::-webkit-input-placeholder {
@ -315,6 +318,10 @@
.zammad-chat-send { .zammad-chat-send {
float: right; float: right;
width: 20%;
box-sizing: border-box;
margin-left: 2%;
margin-right: 2%;
} }
.zammad-chat-is-hidden { .zammad-chat-is-hidden {
@ -359,6 +366,10 @@
right: 0; right: 0;
width: auto; width: auto;
height: 100vh; height: 100vh;
flex-direction: column;
}
.zammad-chat.zammad-chat-is-open {
display: flex;
} }
.zammad-chat-body { .zammad-chat-body {
height: auto; height: auto;

16
public/assets/chat/views/loader.eco
View file

@ -1,8 +1,12 @@
<div class="zammad-chat-modal"> <div class="zammad-chat-modal">
<span class="zammad-chat-loading-animation"> <div class="zammad-chat-modal-center">
<span class="zammad-chat-loading-circle"></span> <div class="zammad-chat-modal-text">
<span class="zammad-chat-loading-circle"></span> <span class="zammad-chat-loading-animation">
<span class="zammad-chat-loading-circle"></span> <span class="zammad-chat-loading-circle"></span>
</span> <span class="zammad-chat-loading-circle"></span>
<span class="zammad-chat-modal-text"><%= @T('Connecting') %></span> <span class="zammad-chat-loading-circle"></span>
</span>
<%= @T('Connecting') %>
</div>
</div>
</div> </div>

8
public/assets/chat/views/timeout.eco
View file

@ -1,6 +1,8 @@
<div class="zammad-chat-modal"> <div class="zammad-chat-modal">
<div class="zammad-chat-modal-text"> <div class="zammad-chat-modal-center">
<%- @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-modal-text">
<div class="zammad-chat-button"<%= " style='background: #{ @background }'" if @background %>><%= @T('Start new conversation') %></div> <%- @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>
</div> </div>

18
public/assets/chat/views/waiting.eco
View file

@ -1,11 +1,13 @@
<div class="zammad-chat-modal"> <div class="zammad-chat-modal">
<div class="zammad-chat-modal-text"> <div class="zammad-chat-modal-center">
<span class="zammad-chat-loading-animation"> <div class="zammad-chat-modal-text">
<span class="zammad-chat-loading-circle"></span> <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 class="zammad-chat-loading-circle"></span>
</span> <span class="zammad-chat-loading-circle"></span>
<%- @T('All colleges are busy.') %><br> </span>
<%- @T('You are on waiting list position <strong>%s</strong>.', @position) %> <%- @T('All colleges are busy.') %><br>
<%- @T('You are on waiting list position <strong>%s</strong>.', @position) %>
</div>
</div> </div>
</div> </div>