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

Revert "chat client: backwards compatible css (remove flex)"

Browse source 
This reverts commit f79820963c.
This commit is contained in:
Martin Edenhofer 2015-11-16 11:53:04 +01:00
parent d970c08306
commit 18e01c5fd4
5 changed files with 62 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -8,10 +8,15 @@
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: block; } display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.zammad-chat-icon { .zammad-chat-icon {
height: 2em; height: 2em;
@ -85,7 +90,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) inset; } box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
.zammad-chat-agent-status:before { .zammad-chat-agent-status:before {
content: ""; content: "";
@ -97,7 +102,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) inset; } box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); }
.zammad-chat-agent-status[data-status="online"]:before { .zammad-chat-agent-status[data-status="online"]:before {
background: #52c782; } background: #52c782; }
@ -131,22 +136,24 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 3.5em;
bottom: 0; bottom: 0;
top: 3.5em;
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;
.zammad-chat-modal-center { display: -ms-flexbox;
display: table; display: flex;
width: 100%; -webkit-align-items: center;
height: 100%; } -ms-flex-align: center;
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 {
@ -255,6 +262,12 @@
.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;
@ -264,7 +277,6 @@
.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;
@ -274,11 +286,13 @@
border: none; border: none;
background: none; background: none;
box-shadow: none; box-shadow: none;
padding: 1em 0; padding: 1em 2em;
outline: none; outline: none;
resize: none; resize: none;
max-height: 6em; -webkit-flex: 1;
margin: 0 5%; } -ms-flex: 1;
flex: 1;
max-height: 6em; }
.zammad-chat-input::-webkit-input-placeholder { .zammad-chat-input::-webkit-input-placeholder {
color: #d9d9d9; } color: #d9d9d9; }
@ -301,11 +315,7 @@
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; }
@ -343,14 +353,7 @@
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,9 +9,10 @@
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: block; display: flex;
} }
.zammad-chat-icon { .zammad-chat-icon {
@ -103,7 +104,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) inset; box-shadow: 0 0 0 1px rgba(0,0,0,.04);
} }
.zammad-chat-agent-status:before { .zammad-chat-agent-status:before {
@ -116,7 +117,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) inset; box-shadow: 0 0 0 1px rgba(0,0,0,.04);
} }
.zammad-chat-agent-status[data-status="online"]:before { .zammad-chat-agent-status[data-status="online"]:before {
@ -137,24 +138,19 @@
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
top: 3.5em;
bottom: 0; bottom: 0;
top: 3.5em;
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;
.zammad-chat-modal-center { justify-content: 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;
@ -266,6 +262,8 @@
.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;
@ -278,7 +276,6 @@
.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,11 +283,11 @@
border: none; border: none;
background: none; background: none;
box-shadow: none; box-shadow: none;
padding: 1em 0; padding: 1em 2em;
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 {
@ -318,10 +315,6 @@
.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 {
@ -366,10 +359,6 @@
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,12 +1,8 @@
<div class="zammad-chat-modal"> <div class="zammad-chat-modal">
<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> <span class="zammad-chat-modal-text"><%= @T('Connecting') %></span>
</span>
<%= @T('Connecting') %>
</div>
</div>
</div> </div>

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

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