From 0436a36169607abd0fbd689ed1cc8f3546d984b5 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sat, 27 Jan 2018 10:07:54 +0100 Subject: [PATCH] Various smaller css fixes --- css/converse.css | 32 ++++++---- css/inverse.css | 92 +++++++++++++++-------------- mockup/chatbox.html | 20 +++++-- mockup/chatroom.html | 16 +++-- mockup/converse.html | 37 ++++++++---- sass/_chatbox.scss | 14 ++++- sass/_chatrooms.scss | 7 +++ sass/_controlbox.scss | 1 - sass/_core.scss | 12 +--- sass/_roster.scss | 2 + sass/converse/_minimized_chats.scss | 2 + sass/converse/_variables.scss | 2 + sass/inverse/_chatbox.scss | 5 +- sass/inverse/_controlbox.scss | 4 ++ sass/inverse/_variables.scss | 5 +- 15 files changed, 154 insertions(+), 97 deletions(-) diff --git a/css/converse.css b/css/converse.css index a1573e42f..104d925b1 100644 --- a/css/converse.css +++ b/css/converse.css @@ -4795,9 +4795,8 @@ background-color: #DCF9F6; } #converse-embedded-chat canvas, #conversejs canvas { - background: #000; - border-radius: 4px; - margin: 2px 0; } + background: #777; + border-radius: 4px; } #converse-embedded-chat .circle, #conversejs .circle { border-radius: 50%; } @@ -5162,9 +5161,6 @@ @media screen and (max-height: 450px) { #conversejs { left: 0; } } -@media screen and (max-width: 480px) { - #conversejs { - width: auto; } } #conversejs > .row { flex-direction: row-reverse; } @@ -5198,14 +5194,18 @@ margin: 0; padding: 0.5em; position: relative; } + #converse-embedded-chat .chat-head.chat-head-chatbox, + #conversejs .chat-head.chat-head-chatbox { + background-color: #3AA569; } #converse-embedded-chat .chat-head .avatar, #conversejs .chat-head .avatar { margin-right: 0.5em; border-radius: 25%; float: left; } - #converse-embedded-chat .chat-head.chat-head-chatbox, - #conversejs .chat-head.chat-head-chatbox { - background-color: #3AA569; } + #converse-embedded-chat .chat-head .chatbox-buttons, + #conversejs .chat-head .chatbox-buttons { + flex-direction: row-reverse; + float: right; } #converse-embedded-chat .chat-head .user-custom-message, #conversejs .chat-head .user-custom-message { color: white; @@ -5275,7 +5275,7 @@ #conversejs .chatbox .chat-title { color: white; display: block; - line-height: 15px; + line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @@ -6044,7 +6044,6 @@ top: 0; display: none; } #conversejs #controlbox #users.controlbox-pane { - height: 100vh; width: 100%; } #conversejs.sidebar-open .chatbox:not(#controlbox) { display: none; } @@ -6174,6 +6173,8 @@ color: #206485; } #conversejs #converse-roster .roster-contacts .roster-group li .open-chat { margin: auto; + margin-top: 0.5em; + margin-bottom: 0; padding: 0; width: 85%; } #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs { @@ -6245,6 +6246,11 @@ #converse-embedded-chat .chat-head-chatroom, #conversejs .chat-head-chatroom { background-color: #E77051; } + #converse-embedded-chat .chat-head-chatroom .chatroom-topic, + #conversejs .chat-head-chatroom .chatroom-topic { + white-space: nowrap; + overflow-y: hidden; + text-overflow: ellipsis; } #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on, #conversejs .chat-head-chatroom .chatbox-btn.button-on { background-color: white; @@ -6505,6 +6511,7 @@ border-top-right-radius: 4px; background-color: #578EA9; border: 1px solid white; + border-bottom: none; padding: 0.5em 0; text-align: center; color: white; @@ -6532,7 +6539,8 @@ border-radius: 4px; height: 35px; margin-bottom: 0.2em; - box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); } + box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); + width: 100%; } #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout.minimized { height: auto; } #conversejs:not(.fullscreen) #minimized-chats .unread-message-count, diff --git a/css/inverse.css b/css/inverse.css index 34c0f8223..741892be0 100644 --- a/css/inverse.css +++ b/css/inverse.css @@ -4795,9 +4795,8 @@ background-color: #DCF9F6; } #converse-embedded-chat canvas, #conversejs canvas { - background: #000; - border-radius: 4px; - margin: 2px 0; } + background: #777; + border-radius: 4px; } #converse-embedded-chat .circle, #conversejs .circle { border-radius: 50%; } @@ -5138,9 +5137,9 @@ font-size: 3.75em; } #conversejs .chatbox .chat-body { - border-radius: 0; } + border-radius: 4px; } #conversejs .flyout { - border-radius: 0; } } + border-radius: 4px; } } @media screen and (min-width: 576px) { #conversejs .offset-sm-2 { margin-left: 16.666667%; } } @@ -5162,9 +5161,6 @@ @media screen and (max-height: 450px) { #conversejs { left: 0; } } -@media screen and (max-width: 480px) { - #conversejs { - width: auto; } } body { font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #ffffff; @@ -5226,7 +5222,7 @@ body { #converse-embedded-chat .flyout, #conversejs .flyout { - border-radius: 0; + border-radius: 4px; bottom: 6px; position: absolute; } @media screen and (max-height: 450px) { @@ -5254,14 +5250,18 @@ body { margin: 0; padding: 0.5em; position: relative; } + #converse-embedded-chat .chat-head.chat-head-chatbox, + #conversejs .chat-head.chat-head-chatbox { + background-color: #3AA569; } #converse-embedded-chat .chat-head .avatar, #conversejs .chat-head .avatar { margin-right: 0.5em; border-radius: 25%; float: left; } - #converse-embedded-chat .chat-head.chat-head-chatbox, - #conversejs .chat-head.chat-head-chatbox { - background-color: #3AA569; } + #converse-embedded-chat .chat-head .chatbox-buttons, + #conversejs .chat-head .chatbox-buttons { + flex-direction: row-reverse; + float: right; } #converse-embedded-chat .chat-head .user-custom-message, #conversejs .chat-head .user-custom-message { color: white; @@ -5331,7 +5331,7 @@ body { #conversejs .chatbox .chat-title { color: white; display: block; - line-height: 15px; + line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @@ -5342,8 +5342,8 @@ body { #converse-embedded-chat .chatbox .chat-body, #conversejs .chatbox .chat-body { background-color: white; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; border-top: 0; height: 289px; height: -webkit-calc(100% - 62px); @@ -5463,8 +5463,8 @@ body { #conversejs .chatbox .sendXMPPMessage { -moz-background-clip: padding; -webkit-background-clip: padding-box; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; background-clip: padding-box; border-top: 1px solid #BBB; border: 0; @@ -5484,8 +5484,8 @@ body { #conversejs .chatbox .sendXMPPMessage .chat-textarea { border-top-left-radius: 0; border-top-right-radius: 0; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; height: 70px; padding: 0.5em; width: 100%; @@ -5703,8 +5703,8 @@ body { box-shadow: none; } #conversejs.fullscreen .chatbox .chat-body { background-color: #3AA569; - border-top-left-radius: 0; - border-top-right-radius: 0; } + border-top-left-radius: 4px; + border-top-right-radius: 4px; } #conversejs.fullscreen .chatbox .chat-body .chat-message { line-height: 22px; font-size: 14px; @@ -5718,11 +5718,11 @@ body { margin-bottom: -5.5px; } #conversejs.fullscreen .chatbox .chat-content { padding: 0 1em 1em 1em; - border-top-left-radius: 0; - border-top-right-radius: 0; } + border-top-left-radius: 4px; + border-top-right-radius: 4px; } #conversejs.fullscreen .chatbox .chat-title { font-size: 26px; - line-height: 26px; } + line-height: 30px; } #conversejs.fullscreen .chatbox .sendXMPPMessage ul { width: 100%; } #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley { @@ -5735,9 +5735,7 @@ body { @media screen and (max-width: 767px) { #conversejs.fullscreen .chatbox { - width: calc(100% - 50px); } - #conversejs.fullscreen .chatbox .row { - width: calc(100% - 50px); } } + width: calc(100% - 50px); } } #conversejs #controlbox { margin-right: 1.5em; } #conversejs #controlbox .pure-form.converse-form { @@ -6048,7 +6046,7 @@ body { text-align: left; overflow-y: scroll; overflow-x: hidden; - border-radius: 0; } + border-radius: 4px; } #conversejs #controlbox .controlbox-pane .switch-form { padding-bottom: 2em; } #conversejs #controlbox .controlbox-pane .switch-form p { @@ -6118,7 +6116,6 @@ body { top: 0; display: none; } #conversejs #controlbox #users.controlbox-pane { - height: 100vh; width: 100%; } #conversejs.sidebar-open .chatbox:not(#controlbox) { display: none; } @@ -6126,8 +6123,10 @@ body { display: block; } } #conversejs.fullscreen #controlbox { margin: 0; } - #conversejs.fullscreen #controlbox #login-dialog { + #conversejs.fullscreen #controlbox .controlbox-pane { border-radius: 0; } + #conversejs.fullscreen #controlbox #login-dialog { + border-radius: 4px; } #conversejs.fullscreen #controlbox #login-dialog .converse-form { margin: 0; padding: 3em 2em 3em; } @@ -6298,6 +6297,8 @@ body { color: #206485; } #conversejs #converse-roster .roster-contacts .roster-group li .open-chat { margin: auto; + margin-top: 0.5em; + margin-bottom: 0; padding: 0; width: 85%; } #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs { @@ -6375,6 +6376,11 @@ body { #converse-embedded-chat .chat-head-chatroom, #conversejs .chat-head-chatroom { background-color: #E77051; } + #converse-embedded-chat .chat-head-chatroom .chatroom-topic, + #conversejs .chat-head-chatroom .chatroom-topic { + white-space: nowrap; + overflow-y: hidden; + text-overflow: ellipsis; } #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on, #conversejs .chat-head-chatroom .chatbox-btn.button-on { background-color: white; @@ -6425,8 +6431,8 @@ body { height: 100vh; } } #converse-embedded-chat .chatroom .box-flyout .chatroom-body, #conversejs .chatroom .box-flyout .chatroom-body { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; background-color: white; border-top: 0; width: 100%; @@ -6481,7 +6487,7 @@ body { vertical-align: top; background-color: white; border-left: 1px solid #777; - border-bottom-right-radius: 0; + border-bottom-right-radius: 4px; padding: 0.5em; } #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading, #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { @@ -6566,8 +6572,8 @@ body { #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { background-color: white; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; border: 0; color: #777; font-size: 16px; @@ -6622,23 +6628,23 @@ body { border-top: 0.8em solid #E77051; width: 100%; } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body { - border-top-left-radius: 0; - border-top-right-radius: 0; } + border-top-left-radius: 4px; + border-top-right-radius: 4px; } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container { - border-radius: 0; } + border-radius: 4px; } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area { - border-top-left-radius: 0; + border-top-left-radius: 4px; min-width: auto; height: calc(100vh - 95px); } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content { - border-top-left-radius: 0; + border-top-left-radius: 4px; padding: 0 1em 1em 1em; } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full { max-width: 100%; } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator { max-width: 100%; } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants { - border-top-right-radius: 0; + border-top-right-radius: 4px; padding: 1em; } #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { font-size: 18px; } @@ -6659,12 +6665,12 @@ body { background-color: #E7A151; } #conversejs .chatbox.headlines .chat-body { background-color: #E7A151; - border-radius: 0; } + border-radius: 4px; } #conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them { color: #D2842B; } #conversejs .chatbox.headlines .chat-content { height: 100%; - border-radius: 0; } + border-radius: 4px; } #conversejs.fullscreen .chatbox.headlines .box-flyout { background-color: #E7A151; } diff --git a/mockup/chatbox.html b/mockup/chatbox.html index f5d51cffc..f694b943b 100644 --- a/mockup/chatbox.html +++ b/mockup/chatbox.html @@ -22,13 +22,21 @@
-
-
-
JC Brand -

10000ft in the air

+
+
+
+
+
JC Brand +

10000ft in the air

+
+
+
+
+
+ + +
- -
diff --git a/mockup/chatroom.html b/mockup/chatroom.html index bcdc787d6..698493cab 100644 --- a/mockup/chatroom.html +++ b/mockup/chatroom.html @@ -22,14 +22,18 @@
-
-
-
Chatroom
+
+
+
Chatroom with a very long name

May the force be with you

- - - +
+
+ + + +
+
diff --git a/mockup/converse.html b/mockup/converse.html index b38f964eb..1634e9505 100644 --- a/mockup/converse.html +++ b/mockup/converse.html @@ -26,13 +26,22 @@
-
-
-
JC Brand -

10000ft in the air

+ +
+
+
+
+
JC Brand +

10000ft in the air

+
+
+
+
+
+ + +
- -
@@ -111,14 +120,18 @@
-
-
-
Chatroom
+
+
+
Chatroom with a very long name

May the force be with you

- - - +
+
+ + + +
+
diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index cb4cf30be..2f4c39941 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -26,14 +26,22 @@ margin: 0; padding: 0.5em; position: relative; + + &.chat-head-chatbox { + background-color: $chat-head-color; + } + .avatar { margin-right: 0.5em; border-radius: 25%; float: left; } - &.chat-head-chatbox { - background-color: $chat-head-color; + + .chatbox-buttons { + flex-direction: row-reverse; + float: right; } + .user-custom-message { color: white; font-size: 75%; @@ -100,7 +108,7 @@ .chat-title { color: $chat-head-text-color; display: block; - line-height: 15px; + line-height: $line-height-large; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss index 4fcd57d30..2b3796afd 100644 --- a/sass/_chatrooms.scss +++ b/sass/_chatrooms.scss @@ -13,6 +13,13 @@ .chat-head-chatroom { background-color: $chatroom-head-color; + + .chatroom-topic { + white-space: nowrap; + overflow-y: hidden; + text-overflow: ellipsis; + } + .chatbox-btn { &.button-on { background-color: $chat-head-text-color; diff --git a/sass/_controlbox.scss b/sass/_controlbox.scss index 188c9e7a4..35f26ebb3 100644 --- a/sass/_controlbox.scss +++ b/sass/_controlbox.scss @@ -524,7 +524,6 @@ top: 0; display: none; &.controlbox-pane { - height: 100vh; width: 100%; } } diff --git a/sass/_core.scss b/sass/_core.scss index fa07a2d24..1b3f6de95 100644 --- a/sass/_core.scss +++ b/sass/_core.scss @@ -8,7 +8,7 @@ #converse-embedded-chat, #conversejs { - margin-left: -$chat-gutter; // It's a mystery why this is necessary + margin-left: -$chat-gutter; // Mystery why this is necessary bottom: 0; height: auto; width: 100vw; @@ -44,9 +44,8 @@ } canvas { - background:#000; - border-radius:4px; - margin: 2px 0; + background: $text-color; + border-radius: $chatbox-border-radius; } .circle { @@ -390,8 +389,3 @@ left: 0; } } -@media screen and (max-width: 480px) { - #conversejs { - width: auto; - } -} diff --git a/sass/_roster.scss b/sass/_roster.scss index 01cb685b7..34937ece0 100644 --- a/sass/_roster.scss +++ b/sass/_roster.scss @@ -150,6 +150,8 @@ .open-chat { margin: auto; + margin-top: 0.5em; + margin-bottom: 0; padding: 0; width: 85%; &.unread-msgs { diff --git a/sass/converse/_minimized_chats.scss b/sass/converse/_minimized_chats.scss index f4d8496f7..97e187a3d 100644 --- a/sass/converse/_minimized_chats.scss +++ b/sass/converse/_minimized_chats.scss @@ -17,6 +17,7 @@ border-top-right-radius: $chatbox-border-radius; background-color: $link-color; border: 1px solid white; + border-bottom: none; padding: 0.5em 0; text-align: center; color: white; @@ -53,6 +54,7 @@ height: 35px; margin-bottom: 0.2em; box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); + width: 100%; } &.minimized { height: auto; diff --git a/sass/converse/_variables.scss b/sass/converse/_variables.scss index 63c0fafdc..73bbba921 100644 --- a/sass/converse/_variables.scss +++ b/sass/converse/_variables.scss @@ -84,6 +84,8 @@ $online-color: $green !default; $error-color: $darkest-red !default; $info-color: $dark-green !default; +$rounded-border-radius: 4px !default; + $button-border-radius: 5px !default; $chatbox-border-radius: 4px !default; $bottom-gutter-height: 35px !default; diff --git a/sass/inverse/_chatbox.scss b/sass/inverse/_chatbox.scss index 9692dcc8f..ad1a85114 100644 --- a/sass/inverse/_chatbox.scss +++ b/sass/inverse/_chatbox.scss @@ -61,7 +61,7 @@ } .chat-title { font-size: $font-size-huge; - line-height: $font-size-huge; + line-height: $line-height-huge; } .sendXMPPMessage { @@ -90,9 +90,6 @@ #conversejs.fullscreen { .chatbox { width: calc(100% - 50px); - .row { - width: calc(100% - 50px); - } } } } diff --git a/sass/inverse/_controlbox.scss b/sass/inverse/_controlbox.scss index 65c183151..bfade3704 100644 --- a/sass/inverse/_controlbox.scss +++ b/sass/inverse/_controlbox.scss @@ -2,6 +2,10 @@ #controlbox { margin: 0; + .controlbox-pane { + border-radius: 0; + } + #login-dialog { border-radius: $chatbox-border-radius; .converse-form { diff --git a/sass/inverse/_variables.scss b/sass/inverse/_variables.scss index f067917b7..0c5a16b6b 100644 --- a/sass/inverse/_variables.scss +++ b/sass/inverse/_variables.scss @@ -87,8 +87,10 @@ $online-color: $green !default; $error-color: $darkest-red !default; $info-color: $dark-green !default; +$rounded-border-radius: 4px !default; + $button-border-radius: 5px !default; -$chatbox-border-radius: 0 !default; +$chatbox-border-radius: 4px !default; $bottom-gutter-height: 35px !default; $chatbox-hover-height: 6px !default; @@ -107,6 +109,7 @@ $toolbar-color: $greenish-white !default; $line-height-small: 20px !default; $line-height: 22px !default; +$line-height-large: 24px !default; $line-height-huge: 30px !default; $controlbox-width: 250px !default;