From ff6267e021d05937a78867331c9f635da22fa71f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Mon, 8 Feb 2016 09:13:54 +0100
Subject: [PATCH] style: link journal items together (#9903)

---
 wcs/qommon/static/css/qommon.css | 55 ++++++++++++++++++++++++++++++++--------
 1 file changed, 44 insertions(+), 11 deletions(-)

diff --git a/wcs/qommon/static/css/qommon.css b/wcs/qommon/static/css/qommon.css
index c863bfa..4b93837 100644
--- a/wcs/qommon/static/css/qommon.css
+++ b/wcs/qommon/static/css/qommon.css
@@ -430,17 +430,46 @@ ul#evolutions {
 	list-style: none;
 	padding: 0;
 	margin: 0;
-	background: linear-gradient(to right, transparent 0%, transparent 30px, #666 30px, white 32px, #666 34px, transparent 24px, transparent 100%) no-repeat;
+	position: relative;
+}
+
+#evolutions:after {
+	/* the vertical timeline itself */
+	content: "";
+	background: #bbb;
+	position: absolute;
+	width: 5px;
+	top: 40px;
+	left: 28px;
+	height: calc(100% - 40px);
+	z-index: 0;
+	border-radius: 3px;
 }
 
 ul#evolutions li {
+	list-style-image: none;
 	margin: 1em 0 2em 0;
+	z-index: 10;
+	position: relative;
+}
+
+ul#evolutions li:after {
+	/* li:after, horizontal line, from the timeline to the item */
+	content: "";
+	background: #bbb;
+	position: absolute;
+	width: 100px;
+	left: 30px;
+	top: 40px;
+	height: 5px;
+	z-index: -10;
 }
 
 ul#evolutions div.evolution-metadata {
 	width: auto;
 	display: inline-block;
 	background: white;
+	margin-left: 70px;
 	padding: 1ex;
 	border: 1px solid #666;
 	margin-bottom: 0;
@@ -449,6 +478,13 @@ ul#evolutions div.evolution-metadata {
 ul#evolutions span.time {
 	display: inline-block;
 	padding-left: 1em;
+	color: #aaa;
+}
+
+ul#evolutions li div.msg span.time {
+	position: absolute;
+	top: 1ex;
+	right: 1em;
 }
 
 ul#evolutions span.status {
@@ -472,26 +508,23 @@ ul#evolutions li div.msg {
         box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
 	position: relative;
 	background: white;
-}
-
-ul#evolutions li div.msg span.time {
-	position: absolute;
-	top: 1ex;
-	right: 1em;
-	opacity: 0.5;
+	margin-left: 60px;
+	margin-right: 30px;
 }
 
 ul#evolutions li.msg-in div.msg {
-	margin-left: 60px;
-	margin-right: 10%;
 	background: #dfd;
 }
 
 ul#evolutions li.msg-out div.msg {
-	margin-left: 20%;
 	background: #ddf;
 }
 
+#evolutions .msg-system {
+	padding-top: 23px;
+	margin-bottom: 30px;
+}
+
 div.halfwidth {
 	width: 45%;
 	float: left;
-- 
2.7.0