posts_list first pass

less/account.less

@@ -159,13 +159,6 @@
 }
 
 
-.posts-list .posts-list-item {
-	// temp global, port to groups/fav/account
-	border-bottom: 1px solid @gray-lighter;
-	margin-bottom: 25px !important;
-	padding-bottom: 40px;
-}
-
 
 
 //

less/posts_list.less

@@ -1,13 +1,18 @@
 .posts-list {
 	list-style-type: none;
 	padding-left: 0px;
+
 	.posts-list-item {
+		@icon-diameter: 12px;
 		width: 100%;
-		margin-bottom: 10px;
+		margin-bottom: 0px;
 
 		.user-img {
-			.user-icon-style(24px, 1.5rem, 50%);
-			float: left;
+			.user-icon-style(@icon-diameter * 2px, 1.5rem, 50%);
+			position: absolute;
+			top: 50%;
+			margin-top: -1 * @icon-diameter;
+			margin-left: -1 * @icon-diameter;
 		}
 
 		a {
@@ -25,5 +30,33 @@
 			display: block;
 			overflow: hidden;
 		}
+
+		.post-body {
+			border-right: 2px solid @brand-primary;
+			min-height: 100px;
+		}
+
+		.post-info {
+			position: absolute;
+			top: 50%;
+			left: 100%;
+			width: 175px;
+			height: 28px;
+			margin-top: -14px;
+			font-size: 10px;
+
+			.post-meta {
+				padding-left: 28px;
+				color: #aaa;
+
+				a {
+					color: @gray-light;
+					font-weight: 900;
+
+				}
+
+				text-transform: uppercase;
+			}
+		}
 	}
 }

templates/account/profile.tpl

@@ -2,7 +2,7 @@
 	<!-- IMPORT partials/account/header.tpl -->
 
 	<div class="row">
-		<div class="col-xs-12 account-block">
+		<div class="col-xs-12 account-block hidden">
 			<div class="account-picture-block text-center">
 				<span>
 					<span class="account-username"> {username}</span>

templates/partials/posts_list.tpl

@@ -1,28 +1,32 @@
 <ul component="posts" class="posts-list" data-nextstart="{nextStart}">
 
 	<!-- BEGIN posts -->
-	<li component="post" class="posts-list-item" data-pid="{posts.pid}" data-uid="{posts.uid}">
-		<a href="{config.relative_path}/user/{posts.user.userslug}">
-			<!-- IF posts.user.picture -->
-			<img title="{posts.user.username}" class="img-rounded user-img" src="{posts.user.picture}">
-			<!-- ELSE -->
-			<div class="user-icon user-img" style="background-color: {posts.user.icon:bgColor};" title="{posts.user.username}">{posts.user.icon:text}</div>
-			<!-- ENDIF posts.user.picture -->
-		</a>
+	<li component="post" class="posts-list-item row" data-pid="{posts.pid}" data-uid="{posts.uid}">
+		<div class="col-xs-9 post-body">
+			<strong><a href="{config.relative_path}/topic/{posts.topic.slug}/{posts.index}">{posts.topic.title}</a></strong>
+			<div component="post/content" class="content">
+				<p>{posts.content}</p>
+			</div>
 
-		<a href="{config.relative_path}/user/{posts.user.userslug}">
-			<strong><span>{posts.user.username}</span></strong>
-		</a>
-		<div component="post/content" class="content">
-			<p>{posts.content}</p>
-			<p class="fade-out"></p>
+			<div class="post-info">
+				<a href="{config.relative_path}/user/{posts.user.userslug}">
+					<!-- IF posts.user.picture -->
+					<img title="{posts.user.username}" class="img-rounded user-img" src="{posts.user.picture}">
+					<!-- ELSE -->
+					<div class="user-icon user-img" style="background-color: {posts.user.icon:bgColor};" title="{posts.user.username}">{posts.user.icon:text}</div>
+					<!-- ENDIF posts.user.picture -->
+				</a>
+
+				<div class="post-meta">
+					<a href="{config.relative_path}/user/{posts.user.userslug}">{posts.user.username}</a><br />
+					<span class="timeago" title="{posts.relativeTime}"></span>
+				</div>
+			</div>
+		</div>
+
+		<div class="col-xs-3">
+			<!--<a href="{config.relative_path}/category/{posts.category.slug}">{posts.category.name}</a><br />-->
 		</div>
-		<small>
-			<span class="pull-right">
-				[[global:posted_in_ago, <a href="{config.relative_path}/category/{posts.category.slug}"><i class="fa {posts.category.icon}"></i> {posts.category.name}</a>, <span class="timeago" title="{posts.relativeTime}"></span>]] &bull;
-				<a href="{config.relative_path}/topic/{posts.topic.slug}/{posts.index}">[[global:read_more]]</a>
-			</span>
-		</small>
 	</li>
 	<!-- END posts -->
 </ul>