From 3cddbbce6eca34843c7cc4b876a9ecb12602672e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Mon, 4 Jul 2016 17:57:49 -0400
Subject: [PATCH] Improve styling of the unread marker

---
 client/css/style.css           | 48 ++++++++++++++++++++--------------
 client/themes/crypto.css       |  4 +++
 client/themes/morning.css      |  8 ++++++
 client/themes/zenburn.css      |  8 ++++++
 client/views/unread_marker.tpl |  6 ++---
 5 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index d17e82d6..519ede9b 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -701,22 +701,36 @@ button {
 }
 
 #chat .messages {
-	display: table;
-	table-layout: fixed;
 	width: 100%;
 	padding: 10px 0;
-}
-
-#chat .msg {
-	display: table-row;
+	overflow-wrap: break-word;
 	word-wrap: break-word;
+	word-break: break-word;
 }
 
-#chat .unread-marker span {
-	padding: 0;
-	height: 1px;
-	border-color: #455164;
-	background-color: #455164;
+#chat .unread-marker {
+	position: relative;
+	text-align: center;
+	opacity: .5;
+	margin: 0 10px;
+}
+
+#chat .unread-marker:before {
+	position: absolute;
+	z-index: -1;
+	content: "";
+	left: 0;
+	right: 0;
+	top: 50%;
+	border-top: 1px solid #e74c3c;
+}
+
+#chat .unread-marker-text:before {
+	content: "New messages";
+	background-color: white;
+	color: #e74c3c;
+	padding: 0 10px;
+	font: bold 12px Lato;
 }
 
 #chat .unread-marker:last-child {
@@ -751,7 +765,7 @@ button {
 	color: #b1c3ce;
 	padding-right: 10px;
 	text-align: right;
-	width: 134px;
+	max-width: 134px;
 	min-width: 134px;
 }
 
@@ -1645,14 +1659,8 @@ button {
 		padding: 0;
 	}
 
-	#chat .unread-marker .time,
-	#chat .unread-marker .from {
-		display: none;
-	}
-
-	#chat .unread-marker .text {
-		display: block;
-		width: 100%;
+	#chat .unread-marker {
+		margin: 0;
 	}
 }
 
diff --git a/client/themes/crypto.css b/client/themes/crypto.css
index e1a57b0f..28b1007b 100644
--- a/client/themes/crypto.css
+++ b/client/themes/crypto.css
@@ -117,6 +117,10 @@ a:hover,
 	font-weight: bold;
 }
 
+#chat .unread-marker-text:before {
+	font: bold 12px Inconsolata-g, monospace;
+}
+
 #form .input {
 	font: 12px Inconsolata-g, monospace;
 }
diff --git a/client/themes/morning.css b/client/themes/morning.css
index 46267804..5318e17c 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -175,6 +175,14 @@ body {
 	color: #99a2b4;
 }
 
+#chat .unread-marker {
+	opacity: 1;
+}
+
+#chat .unread-marker-text:before {
+	background-color: #333c4a;
+}
+
 /* Setup text colors */
 #chat .msg {
 	color: #f3f3f3;
diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css
index 20a9f17d..b08ea7bf 100644
--- a/client/themes/zenburn.css
+++ b/client/themes/zenburn.css
@@ -202,6 +202,14 @@ body {
 	color: #d2d39b;
 }
 
+#chat .unread-marker {
+	opacity: 1;
+}
+
+#chat .unread-marker-text:before {
+	background-color: #3f3f3f;
+}
+
 /* Setup text colors */
 #chat .msg {
 	color: #ffcfaf;
diff --git a/client/views/unread_marker.tpl b/client/views/unread_marker.tpl
index 9e24bc63..cb952947 100644
--- a/client/views/unread_marker.tpl
+++ b/client/views/unread_marker.tpl
@@ -1,5 +1,3 @@
-<div class="msg unread-marker">
-	<span class="time"></span>
-	<span class="from"></span>
-	<span class="text"></span>
+<div class="unread-marker">
+	<span class="unread-marker-text"></span>
 </div>