Timeline-style design for a topic's posts (#512)

* feat: basic timeline-style styling for posts in a topic

* fix: mobile-style for timeline-style styling

* feat: slight white opaque ring around timeline items

removed glowing OP ring

* fix: playing nice with core's necro-post styling

* fix: increase padding between posts by 20px

* fix: restrict timeline styling to top-level only

* fix: added back padding between posts on mobile

* refactor: genericise necro-post into timeline-event class, fixed vertical alignment issues with timeline-badge icons

* fix: use hourglass-half icon instead of clock-o

* fix: adjust centering of text, dashed border on necro-post

* feat: add topic event template

* feat: add a little marker at the last post to signify end of timeline

* fix: updated dashed border on necro-post

* refactor: updated mobile styling of timeline effect

* feat: styling changes for user obj in timeline events

* feat: proper handling for no uid

* fix: override generics introduced by core

less/mixins.less

@@ -47,3 +47,105 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
+.timeline {
+	.posts > [component="post"], .timeline-event {
+		position: relative;	// for absolutely positioned pseudo-element, below
+		border-left: 2px solid lighten(@brand-primary, 30%);
+		margin-left: 2.5rem;
+
+		&:not(:last-child) {
+			padding-bottom: @post-padding;
+		}
+		&:not(:first-child) {
+			padding-top: @post-padding;
+		}
+
+		> div {
+			margin-left: -2.5rem;
+		}
+
+		.avatar, .timeline-badge {
+			// Opaque ring
+			position: relative;
+			z-index: 1;
+			box-shadow: 0 0 0 .5rem @body-bg;
+		}
+	}
+
+	@media (max-width: @screen-sm-max) {
+		.posts > [component="post"] {
+			border: 0;
+			padding: @post-padding 0;
+
+			margin-left: initial;
+			> div {
+				margin-left: 1.5rem;
+			}
+		}
+
+		.posts [component="post"]:last-child:after {
+			display: none;
+		}
+
+		.timeline-event {
+			&:before, &+:not(.timeline-event):before {
+				content: '';
+				width: 1rem;
+				position: absolute;
+				top: 0;
+				left: calc(-0.5rem - 1px);
+				border-bottom: 2px solid lighten(@brand-primary, 30%);
+			}
+
+			&+:not(.timeline-event):before {
+				left: calc(2rem + 1px);
+			}
+
+			&+.timeline-event:before {
+				display: none;
+			}
+		}
+	}
+
+	.necro-post {
+		border-left-style: dashed;
+	}
+
+	.posts [component="post"]:last-child:after {
+		content: '';
+		width: 1rem;
+		position: absolute;
+		bottom: 0;
+		left: calc(-0.5rem - 1px);
+		border-bottom: 2px solid lighten(@brand-primary, 30%);
+	}
+
+	.posts .timeline-event {
+		text-align: left;
+		justify-content: left;
+		font-size: 1em;
+
+		.timeline-badge {
+			float: left;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 32px;
+			height: 32px;
+			padding: 0;
+			margin-left: -17px;
+			margin-right: 17px;
+			color: lighten(@brand-primary, 30%);
+			background-color: @body-bg;
+			border: 2px solid lighten(@brand-primary, 30%);
+			border-radius: 50%;
+		}
+
+		.timeline-text {
+			line-height: 32px;
+			text-transform: initial;
+			color: rgba(127,127,127,.5);
+		}
+	}
+}

less/modules/necro-post.less

@@ -1,4 +1,9 @@
 .topic .necro-post {
-	border-bottom: 1px solid @post-border-color;
-	padding-bottom: @post-padding;
+	text-align: center;
+	margin-bottom: 0;
+	font-size: 1.5em;
+
+	.timeline-text {
+		margin-left: 32px;
+	}
 }

less/topic.less

@@ -116,6 +116,7 @@
 				right: 12px;
 				font-size: 12px;
 				top: 0px;
+				z-index: 1;
 
 				@media (min-width: @screen-md-min) {
 					top: 2px;
@@ -411,6 +412,8 @@
 
 
 .topic {
+	.timeline;
+
 	&.deleted {
 		.opacity(0.3);
 
@@ -422,16 +425,9 @@
 	.posts {
 		list-style-type: none;
 		padding: 0;
-		[component="post"][data-index="0"] {
-			border-bottom: 5px solid @post-border-color;
-		}
+
 		[component="post"] {
 			position: relative;
-			border-bottom: 1px solid @post-border-color;
-
-			padding-bottom: @post-padding;
-			margin-bottom: @post-padding;
-
 			.transition(0.75s ease-in-out border-color);
 
 			.edit-icon {
@@ -657,12 +653,6 @@
 }
 
 [component="post"] {
-	&.topic-owner-post>.post-header .avatar {
-		-webkit-box-shadow: 0px 0px 4px 3px @brand-primary;
-		-moz-box-shadow: 0px 0px 4px 3px @brand-primary;
-		box-shadow: 0px 0px 4px 3px @brand-primary;
-	}
-
 	.avatar.avatar-sm2x {
 		font-size: 2.875rem;
 	}

templates/partials/topic/event.tpl

@@ -0,0 +1,15 @@
+<li component="topic/event" class="timeline-event" data-topic-event-id="{id}">
+	<div class="timeline-badge">
+		<i class="fa {{{ if icon }}}{icon}{{{ else }}}fa-circle{{{ end }}}"></i>
+	</div>
+	<span class="timeline-text">{text}&nbsp;</span>
+
+	{{{ if user }}}
+		{{{ if !./user.system }}}<span><a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(user, "xs", true)}&nbsp;{./user.username}</a></span>&nbsp;{{{ end }}}
+		{{{ if ./user.system }}}<span class="timeline-text">[[global:system-user]]</span>&nbsp;{{{ end }}}
+	{{{ else }}}
+		<span class="timeline-text">[[global:unknown-user]]</span>&nbsp;
+	{{{ end }}}
+
+	<span class="timeago timeline-text" title="{timestampISO}"></span>
+</li>

templates/partials/topic/necro-post.tpl

@@ -1,3 +1,3 @@
-<li component="topic/necro-post" class="necro-post">
-	<span>{text}</span>
+<li component="topic/necro-post" class="necro-post timeline-event">
+	<span class="timeline-text">{text}</span>
 </li>