From c051b705375c838d189d3dec7aa74c80794bb356 Mon Sep 17 00:00:00 2001 From: Pavel Djundik Date: Fri, 23 Feb 2018 23:57:45 +0200 Subject: [PATCH] Refactor channel titles to use flexbox --- client/css/style.css | 49 +++++++++++++++++++++---------------------- client/views/chat.tpl | 6 +++--- 2 files changed, 27 insertions(+), 28 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 3ee56eeb..a17be73f 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -452,16 +452,23 @@ kbd { #viewport .rt, #chat button.menu { color: #ccc; - display: none; - float: left; + display: flex; font-size: 14px; line-height: 1; height: 36px; - margin: 6px 12px 0 -12px; + width: 36px; + margin-top: 6px; + flex-shrink: 0; +} + +#viewport .lt::before, +#viewport .rt::before, +#chat button.menu::before { width: 36px; } #viewport .lt { + display: none; position: relative; } @@ -488,17 +495,6 @@ kbd { float: right; } -#viewport .rt { - display: block; - margin: 6px -12px 0 0; -} - -#chat button.menu { - display: block; - float: right; - margin: 6px -8px 0 12px; -} - #viewport.rt #chat .sidebar { right: -180px; } @@ -871,18 +867,24 @@ kbd { border-bottom: 1px solid #e7e7e7; line-height: 48px; height: 48px; - padding: 0 20px; + padding: 0 6px; overflow: hidden; } #windows .header .title { font-size: 15px; + padding-left: 14px; + flex-shrink: 0; } #windows .header .topic { color: #777; margin-left: 8px; word-break: break-all; + flex-grow: 1; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } #windows .window .header { @@ -972,11 +974,10 @@ kbd { .messages .msg, .sidebar { font-size: 14px; - line-height: 1.4; } #windows #chat .header { - display: block; + display: flex; } #chat .chat, @@ -1941,16 +1942,11 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ } .emoji { - display: inline-block; font-size: 1.4em; - vertical-align: bottom; + vertical-align: text-top; line-height: 1; } -.topic .emoji { - vertical-align: middle; -} - .textcomplete-item .emoji { width: 32px; text-align: center; @@ -2279,7 +2275,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ #viewport .lt, #viewport .channel .rt { - display: block; + display: flex; } #windows .window .header { @@ -2298,6 +2294,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ right: 0; } + #chat .header .title { + padding-left: 6px; + } + #chat .title::before { display: none; } @@ -2472,7 +2472,6 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */ /* Correctly handle multiple successive whitespace characters. For example: user has quit ( ===> L O L <=== ) */ -#windows .header .topic, #chat .message .text, #chat .motd .text, #chat .notice .text, diff --git a/client/views/chat.tpl b/client/views/chat.tpl index a7b69ad6..771bed13 100644 --- a/client/views/chat.tpl +++ b/client/views/chat.tpl @@ -9,14 +9,14 @@ >
+ {{name}} + {{{parse topic}}} + {{#equal type "channel"}} {{/equal}} - - {{name}} - {{{parse topic}}}