From 66d1a65432ac587ece0afb63136bc4c26ba4136e Mon Sep 17 00:00:00 2001 From: JC Brand Date: Tue, 14 Jan 2020 13:32:20 +0100 Subject: [PATCH] Update chat head markup and CSS - Use flexbox where possible - Simplify header by using `justify-content` instead of setting column widths - Show description below the row containing the title and buttons --- sass/_chatbox.scss | 76 ++++++++++++++++---------------- sass/_chatrooms.scss | 55 +++++------------------ src/converse-bookmark-views.js | 2 +- src/converse-minimize.js | 2 +- src/templates/chatbox_head.html | 34 +++++++------- src/templates/chatroom_head.html | 28 ++++++------ webpack.html | 2 +- 7 files changed, 78 insertions(+), 121 deletions(-) diff --git a/sass/_chatbox.scss b/sass/_chatbox.scss index 1a95388c0..f67e037c8 100644 --- a/sass/_chatbox.scss +++ b/sass/_chatbox.scss @@ -37,11 +37,13 @@ } .chat-head { - flex-wrap: nowrap; + display: flex; + flex-direction: column; color: #ffffff; font-size: 100%; margin: 0; - padding: 0.5em; + padding: 0; + padding-bottom: 0.5em; position: relative; &.chat-head-chatbox { @@ -49,20 +51,35 @@ } .avatar { - height: 36px; - width: 36px; margin-right: 0.5em; } - .chatbox-title { - .chatroom-description { - font-size: 80%; - } + .chat-head__desc { + font-size: 80%; } - .chatbox-buttons { + + .chatbox-title { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; + } + + .chatbox-title--row { + display: flex; + flex-direction: row; + overflow: hidden; + } + + .chatbox-title__text { + overflow: hidden; + text-overflow: ellipsis; + } + + .chatbox-title__buttons { + display: flex; flex-direction: row-reverse; - @include make-col-ready(); - @include make-col(3); + flex-wrap: nowrap; padding: 0; } @@ -128,7 +145,7 @@ background-color: var(--chat-head-color); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); z-index: 2; - overflow-y: hidden; + overflow: hidden; width: 100%; @media screen and (max-height: $mobile-landscape-height) { @@ -296,6 +313,7 @@ .chat-toolbar { box-sizing: border-box; margin: 0; + width: 100%; padding: 0.25em; display: block; border-top: 4px solid var(--chat-head-color); @@ -424,12 +442,6 @@ border-top-left-radius: 0; border-top-right-radius: 0; } - .chatbox-title { - @include make-col(8); - } - .chatbox-buttons { - @include make-col(4); - } } .chatbox { min-width: var(--overlayed-chat-width) !important; @@ -438,10 +450,10 @@ .box-flyout { min-width: var(--overlayed-chat-width) !important; width: var(--overlayed-chat-width); + } - .chat-body { - height: calc(100% - var(--overlayed-chat-head-height)); - } + .chat-head { + padding: 0.5em; } } } @@ -455,7 +467,7 @@ min-height: calc(var(--overlayed-chat-height) / 2); } .chat-head { - height: var(--overlayed-chat-head-height); + min-height: var(--overlayed-chat-head-height); } .chat-textarea { max-height: var(--overlayed-max-chat-textarea-height); @@ -496,18 +508,11 @@ .chat-head { height: var(--fullpage-chat-head-height); - padding: 0; .user-custom-message { font-size: 70%; height: auto; line-height: var(--line-height); } - .chatbox-title { - @include make-col(10); - } - .chatbox-buttons { - @include make-col(2); - } } .chatbox { @@ -533,7 +538,7 @@ border: none !important; } .chat-head { - height: var(--fullpage-chat-head-height); + min-height: var(--fullpage-chat-head-height); padding: 0.5em; } .chatbox { @@ -572,7 +577,7 @@ width: 100%; } - .chat-title { + .chat-title--text { padding: 0.3em; font-size: 120%; } @@ -606,7 +611,6 @@ overflow: hidden; } .chat-body { - height: calc(100% - var(--fullpage-chat-head-height)); background-color: var(--chat-head-color); border-top-left-radius: var(--chatbox-border-radius); border-top-right-radius: var(--chatbox-border-radius); @@ -657,19 +661,13 @@ .box-flyout { .chatbox-navback { display: flex; - @include make-col(2); + padding-right: 1em; .fa-arrow-left { &:before { color: white; } } } - .chatbox-title { - @include make-col(7); - } - .chatbox-buttons { - @include make-col(3); - } } } } diff --git a/sass/_chatrooms.scss b/sass/_chatrooms.scss index 3a7076a60..63c492d4d 100644 --- a/sass/_chatrooms.scss +++ b/sass/_chatrooms.scss @@ -40,7 +40,7 @@ background-color: var(--chatroom-head-color); border-bottom: var(--chatroom-head-border-bottom); - .chatroom-description { + .chat-head__desc { color: var(--chatroom-head-description-color); display: var(--chatroom-head-description-display); font-size: var(--font-size); @@ -73,7 +73,7 @@ color: var(--chatroom-head-button-color); } } - .chat-title { + .chatbox-title__text { display: var(--heading-display); font-weight: var(--chatroom-head-title-font-weight); padding-right: var(--chatroom-head-title-padding-right); @@ -398,15 +398,16 @@ min-width: var(--chatroom-width) !important; width: var(--chatroom-width); } - .chatbox-title { + .chatbox-title__text { @include make-col(7); - .chatroom-description { - font-size: 80%; - } } - .chatbox-buttons { + .chatbox-title__buttons { @include make-col(5); } + + .chat-head__desc { + font-size: 80%; + } .chatroom-body { .occupants { .occupants-heading { @@ -450,40 +451,6 @@ } } - -#conversejs.converse-fullscreen { - .chatroom { - .box-flyout { - .chatbox-title { - @include make-col(9); - } - .chatbox-buttons { - @include make-col(3); - } - } - } -} - -@include media-breakpoint-down(sm) { - - #conversejs:not(.converse-embedded) { - .chatroom { - width: 100vw !important; - .box-flyout { - .chatbox-navback { - @include make-col(2); - } - .chatbox-title { - @include make-col(7); - } - .chatbox-buttons { - @include make-col(3); - } - } - } - } -} - #conversejs.converse-embedded, #conversejs.converse-fullscreen, #conversejs.converse-mobile { @@ -495,10 +462,8 @@ border-top: 0.8em solid var(--chatroom-head-color); width: 100%; - .chatbox-title { - .chatroom-description { - font-size: 70%; - } + .chat-head__desc { + font-size: 70%; } .chatroom-body { diff --git a/src/converse-bookmark-views.js b/src/converse-bookmark-views.js index deca42f95..b1831f816 100644 --- a/src/converse-bookmark-views.js +++ b/src/converse-bookmark-views.js @@ -114,7 +114,7 @@ converse.plugins.add('converse-bookmark-views', { 'bookmarked': this.model.get('bookmarked') })); - const buttons_row = this.el.querySelector('.chatbox-buttons') + const buttons_row = this.el.querySelector('.chatbox-title__buttons') const close_button = buttons_row.querySelector('.close-chatbox-button'); if (close_button) { close_button.insertAdjacentHTML('afterend', bookmark_button); diff --git a/src/converse-minimize.js b/src/converse-minimize.js index 5ca5c6b0f..de7af1229 100644 --- a/src/converse-minimize.js +++ b/src/converse-minimize.js @@ -155,7 +155,7 @@ converse.plugins.add('converse-minimize', { const html = this.__super__.generateHeadingHTML.apply(this, arguments); const div = document.createElement('div'); div.innerHTML = html; - const buttons_row = div.querySelector('.chatbox-buttons') + const buttons_row = div.querySelector('.chatbox-title__buttons') const button = buttons_row.querySelector('.close-chatbox-button'); const minimize_el = tpl_chatbox_minimize({'info_minimize': __('Minimize this chat box')}) if (button) { diff --git a/src/templates/chatbox_head.html b/src/templates/chatbox_head.html index 5fd7ebb7f..56609d1bc 100644 --- a/src/templates/chatbox_head.html +++ b/src/templates/chatbox_head.html @@ -1,26 +1,22 @@
- {[ if (!o._converse.singleton) { ]} -
- {[ } ]}
-
- {[ if (o.type !== o._converse.HEADLINES_TYPE) { ]} - +
+ {[ if (!o._converse.singleton) { ]} +
{[ } ]} -
- {[ if (o.url) { ]} - - {[ } ]} - {{{ o.display_name }}} - {[ if (o.url) { ]} - - {[ } ]} -

{{{ o.status }}}

+ {[ if (o.type !== o._converse.HEADLINES_TYPE) { ]} +
+ {[ } ]} +
+ {[ if (o.url) { ]} {[ } ]} + {{{ o.display_name }}} + {[ if (o.url) { ]} {[ } ]}
+
+ + +
-
- - -
+

{{{ o.status }}}

diff --git a/src/templates/chatroom_head.html b/src/templates/chatroom_head.html index 7ee3c6216..c5d205382 100644 --- a/src/templates/chatroom_head.html +++ b/src/templates/chatroom_head.html @@ -1,19 +1,17 @@ -{[ if (!o._converse.singleton) { ]} -
-{[ } ]}
-
- {{{ o.title }}} + {[ if (!o._converse.singleton) { ]} +
+ {[ } ]} +
{{{ o.title }}}
+
+ {[ if (!o._converse.singleton) { ]} + + {[ } ]} + {[ if (o.isOwner) { ]} + + {[ } ]} +
-

{{o.description}}

-
-
- {[ if (!o._converse.singleton) { ]} - - {[ } ]} - {[ if (o.isOwner) { ]} - - {[ } ]} -
+

{{o.description}}

diff --git a/webpack.html b/webpack.html index ef5c7a8b2..6d39021b9 100644 --- a/webpack.html +++ b/webpack.html @@ -27,7 +27,7 @@ message_archiving: 'always', muc_domain: 'conference.chat.example.org', muc_respect_autojoin: true, - view_mode: 'fullscreen', + view_mode: 'overlayed', websocket_url: 'ws://chat.example.org:5380/xmpp-websocket', // bosh_service_url: 'http://chat.example.org:5280/http-bind', muc_show_logs_before_join: true,