From f79820963cbaf526cd88404957228acf9955e888 Mon Sep 17 00:00:00 2001 From: Felix Niklas Date: Mon, 16 Nov 2015 11:46:18 +0100 Subject: [PATCH] chat client: backwards compatible css (remove flex) --- public/assets/chat/chat.css | 63 +++++++++++++--------------- public/assets/chat/chat.scss | 35 ++++++++++------ public/assets/chat/views/loader.eco | 16 ++++--- public/assets/chat/views/timeout.eco | 8 ++-- public/assets/chat/views/waiting.eco | 18 ++++---- 5 files changed, 78 insertions(+), 62 deletions(-) diff --git a/public/assets/chat/chat.css b/public/assets/chat/chat.css index 56fff2478..640fb0e16 100644 --- a/public/assets/chat/chat.css +++ b/public/assets/chat/chat.css @@ -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; diff --git a/public/assets/chat/chat.scss b/public/assets/chat/chat.scss index 0d898fb20..f8d09eb69 100644 --- a/public/assets/chat/chat.scss +++ b/public/assets/chat/chat.scss @@ -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; diff --git a/public/assets/chat/views/loader.eco b/public/assets/chat/views/loader.eco index 5350be7b0..98b03c5af 100644 --- a/public/assets/chat/views/loader.eco +++ b/public/assets/chat/views/loader.eco @@ -1,8 +1,12 @@
- - - - - - <%= @T('Connecting') %> +
+
+ + + + + + <%= @T('Connecting') %> +
+
\ No newline at end of file diff --git a/public/assets/chat/views/timeout.eco b/public/assets/chat/views/timeout.eco index f67b9bdc1..f25e7eddb 100644 --- a/public/assets/chat/views/timeout.eco +++ b/public/assets/chat/views/timeout.eco @@ -1,6 +1,8 @@
-
- <%- @T('Since you didn\'t respond in the last %s your conversation with %s got closed.', "#{ @delay } #{ @unit }", @agent) %>
-
><%= @T('Start new conversation') %>
+
+
+ <%- @T('Since you didn\'t respond in the last %s your conversation with %s got closed.', "#{ @delay } #{ @unit }", @agent) %>
+
><%= @T('Start new conversation') %>
+
\ No newline at end of file diff --git a/public/assets/chat/views/waiting.eco b/public/assets/chat/views/waiting.eco index 63170af5a..ca9e5d837 100644 --- a/public/assets/chat/views/waiting.eco +++ b/public/assets/chat/views/waiting.eco @@ -1,11 +1,13 @@
-
- - - - - - <%- @T('All colleges are busy.') %>
- <%- @T('You are on waiting list position %s.', @position) %> +
+
+ + + + + + <%- @T('All colleges are busy.') %>
+ <%- @T('You are on waiting list position %s.', @position) %> +
\ No newline at end of file