Merge pull request #2113 from thelounge/xpaw/refactor-header

Refactor channel titles to use flexbox

client/css/style.css

@@ -452,16 +452,23 @@ kbd {
 #viewport .rt,
 #chat button.menu {
 	color: #ccc;
-	display: none;
+	display: flex;
-	float: left;
 	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,

client/views/chat.tpl

@@ -9,14 +9,14 @@
 >
 	<div class="header">
 		<button class="lt" aria-label="Toggle channel list"></button>
+		<span class="title">{{name}}</span>
+		<span title="{{topic}}" class="topic">{{{parse topic}}}</span>
+		<button class="menu" aria-label="Open the context menu"></button>
 		{{#equal type "channel"}}
 			<span class="rt-tooltip tooltipped tooltipped-w" aria-label="Toggle user list">
 				<button class="rt" aria-label="Toggle user list"></button>
 			</span>
 		{{/equal}}
-		<button class="menu" aria-label="Open the context menu"></button>
-		<span class="title">{{name}}</span>
-		<span title="{{topic}}" class="topic">{{{parse topic}}}</span>
 	</div>
 	<div class="chat">
 		<div class="show-more{{#if messages.length}} show{{/if}}">