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

This reverts commit f79820963c.

public/assets/chat/chat.css

@@ -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; }
+  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 {
-  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;
+  -webkit-flex: 1;
-  margin: 0 5%; }
+  -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;
+  float: right; }
-  width: 20%;
-  box-sizing: border-box;
-  margin-left: 2%;
-  margin-right: 2%; }
 
 .zammad-chat-is-hidden {
   display: none; }
@@ -343,14 +353,7 @@
     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;

public/assets/chat/chat.scss

@@ -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;
-}
+  display: flex;
-
+  align-items: center;
-.zammad-chat-modal-center {
+  justify-content: 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;
   
@@ -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;

public/assets/chat/views/loader.eco

@@ -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') %>
+  <span class="zammad-chat-modal-text"><%= @T('Connecting') %></span>
-    </div>
-  </div>
 </div>

public/assets/chat/views/timeout.eco

@@ -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>
 </div>

public/assets/chat/views/waiting.eco

@@ -1,5 +1,4 @@
 <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>
@@ -9,5 +8,4 @@
     <%- @T('All colleges are busy.') %><br>
     <%- @T('You are on waiting list position <strong>%s</strong>.', @position) %>
   </div>
-  </div>
 </div>