removed mobile menu until it can be pluginified. refactored topics UX a hell of a lot, looks much better on both desktop+mobile now.

public/css/topic.less

@@ -42,6 +42,9 @@
 		}
 	}
 
+	.post-signature {
+		margin-left: 5px;
+	}
 	.profile-block {
 		background: rgba(0, 0, 0, 0.02);
 		margin-right: -11px;
@@ -50,9 +53,10 @@
 		margin-top: 15px;
 		border-radius: 0 0 5px 5px;
 		font-size: 10px;
-		line-height: 18px;
+		line-height: 15px;
 		padding: 5px;
 		padding-left: 10px;
+		color: #777;
 
 		img.hidden-desktop {
 			max-width: 10px;
@@ -64,7 +68,7 @@
 	}
 	.post-content {
 		min-height: 50px;
-		padding: 2px 5px 0 5px;
+		padding: 10px 5px 0 5px;
 		word-wrap: break-word;
 	}
 
@@ -74,6 +78,24 @@
 
 	.post-block {
 		.post-buttons {
+			background: rgba(0, 0, 0, 0.02);
+			border: 1px solid rgba(0, 0, 0, 0.06);
+
+			margin-left: 0px;
+			margin-top: -5px;
+			padding-top: 8px;
+			padding-left: 23px;
+			padding-bottom: 0;
+			button.show {
+				display: inline-block !important;
+			}
+
+			@media (max-width: 767px) {
+				padding-left: 9px;
+			}
+
+		}
+		/*.post-buttons {
 			font-size: 12px;
 			float: right;
 			margin-right: 5px;
@@ -100,7 +122,7 @@
 			.icon-star {
 				//theme this to make it yellow eventually
 			}
-		}
+		}*/
 	}
 
 
@@ -129,7 +151,7 @@
 			left: -7px;
 			border-style: solid;
 			border-width: 7px 7px 7px 0;
-			border-color: transparent #FFFFFF;
+			border-color: transparent rgb(250,250,250);
 			display: block;
 			width: 0;
 			z-index: 1;
@@ -150,6 +172,27 @@
 		}
 	}
 
+	.sub-posts {
+		.post-content {
+			margin-left: 10px;
+		}
+		.post-signature {
+			margin-left: 15px;
+		}
+		.img-thumbnail {
+			padding: 2px;
+			border-radius: 0;
+			margin-left: 16px;
+		}
+		.post-buttons {
+			margin-top: -11px;
+			margin-left: -10px;
+			margin-right: -10px;
+			border-right: 0;
+			border-top: 0;
+			border-left: 0;
+		}
+	}
 	.main-post {
 		h3 {
 			margin: 0;
@@ -169,16 +212,20 @@
 			color: white;
 			position: relative;
 			float: left;
-			margin-right: 25px;
+			margin-right:10px;
 			margin-bottom: 0px;
 			padding-bottom: 0px;
 			text-align: center;
-			width:80px;
+			width:100px;
 
 			@media (max-width: 767px) {
 				display: none;
 			}
 		}
+		.img-thumbnail {
+			padding: 2px;
+			border-radius: 0;
+		}
 
 		.main-avatar:hover .hover-overlay {
 			opacity: 0.75;
@@ -208,9 +255,10 @@
 		}
 		.post-block {
 			.post-buttons {
-				div {
+				button.show {
-					border: 0;
+					display: inline-block!important;
 				}
+
 			}
 		}
 		.favourite {
@@ -220,7 +268,19 @@
 			display: inline-block;
 		}
 
-		.topic-buttons {
+		.topic-buttons { //mix up with post-buttons, needs to be looked at
+			background: rgba(0, 0, 0, 0.02);
+			border: 1px solid rgba(0, 0, 0, 0.06);
+			margin-left: 92px;
+			padding: 10px;
+			margin-right: -11px;
+			border-right: 0;
+			@media (max-width: 767px) {
+				margin-left: -11px;
+				border-left: 0;
+			}
+
+
 			button.show {
 				display: inline-block!important;
 			}
@@ -230,3 +290,49 @@
 }
 
 
+.topic-main-buttons {
+	@media (max-width: 767px) {
+		margin-bottom: 0px;
+	}
+}
+
+
+@media (max-width: 475px) {
+	.post-tools {
+		display: none;
+	}
+	.favourite-text {
+		display: none;
+	}
+}
+
+.post-author-info {
+	display: none;
+	@media (max-width: 767px) {
+		display: block;
+		position: fixed;
+		width: 100%;
+		margin-left: -15px;
+		bottom: -50px;
+		height: 50px;
+		background: rgba(0,0,0,0.8);
+		-webkit-transition: bottom 150ms linear;
+			-moz-transition: bottom 150ms linear;
+			-ms-transition: bottom 150ms linear;
+			-o-transition: bottom 150ms linear;
+			transition: bottom 150ms linear;
+	}
+
+	img {
+		padding: 5px;
+	}
+
+	h4 {
+		color: white;
+		margin-top:16px;
+		margin-left: -35px;
+		margin-bottom: 0px;
+		font-weight: 300;
+		font-size: 16px;
+	}
+}

public/src/forum/topic.js

@@ -600,4 +600,44 @@
 			deleteEl.addClass('none');
 		}
 	}
+
+
+
+	var postAuthorImage, postAuthorInfo;
+
+	function updateHeader() {
+		jQuery('.post-author-info').css('bottom', '0px');
+		postAuthorImage = postAuthorImage || document.getElementById('post-author-image');
+		postAuthorInfo = postAuthorInfo || document.getElementById('post-author-info');
+
+	  var scrollTop = jQuery(window).scrollTop();
+	  var scrollBottom = scrollTop + jQuery(window).height();
+
+	  if (scrollTop < 50) {
+	    postAuthorImage.src = (jQuery('.main-avatar img').attr('src'));
+	    postAuthorInfo.innerHTML = 'Posted by ' + jQuery('.main-post').attr('data-username') + ', ' + jQuery('.main-post').find('.relativeTimeAgo').html();
+	    return;
+	  }
+
+	  jQuery('.sub-posts').each(function() {
+	    var el = jQuery(this);
+	    var elTop = el.offset().top;
+	    var height = Math.floor(el.height());
+	    var elBottom = elTop + (height < 300 ? height : 300);
+
+	    var inView = ((elBottom >= scrollTop) && (elTop <= scrollBottom)
+	      && (elBottom <= scrollBottom) &&  (elTop >= scrollTop) );
+
+
+	    if (inView) {
+
+	      postAuthorImage.src = (jQuery(this).find('.profile-image-block img').attr('src'));
+	      postAuthorInfo.innerHTML = 'Posted by ' + jQuery(this).attr('data-username') + ', ' + jQuery(this).find('.relativeTimeAgo').html();
+
+	    }
+	  });
+	}
+
+	window.onscroll = updateHeader;
+	window.onload = updateHeader;
 })();

public/src/modules/mobileMenu.js

@@ -99,6 +99,7 @@ define(function() {
 
 
 	mobileMenu.init = function() {
+		return; // disabling until this can be pluginified.
 		overlay = overlay || document.getElementById('mobile-menu-overlay');
 		menuBtn = menuBtn || document.getElementById('mobile-menu-btn');
 		postBtn = postBtn || document.getElementById('mobile-post-btn');

public/templates/footer.tpl

@@ -28,8 +28,8 @@
 
 	<div id="alert_window"></div>
 
-	<div id="mobile-sidebar">
+	<!--<div id="mobile-sidebar"> disabling until this can be pluginified.
-	</div>
+	</div>-->
 
 	<!-- START Forum Info -->
 	<div id="footer" class="container hidden-xs" style="padding-top: 50px; display: none">
@@ -41,10 +41,10 @@
 		<footer class="footer">Copyright &copy; 2013 <a target="_blank" href="http://www.nodebb.org">NodeBB</a> by <a target="_blank" href="https://github.com/psychobunny">psychobunny</a>, <a href="https://github.com/julianlam" target="_blank">julianlam</a>, <a href="https://github.com/barisusakli" target="_blank">barisusakli</a> from <a target="_blank" href="http://www.designcreateplay.com">designcreateplay</a></footer>
 	</div>
 
-	<div id="mobile-menu">
+	<!--<div id="mobile-menu"> disabling until this can be pluginified.
 		<button id="mobile-menu-btn" type="button" class="btn btn-none"><i class="icon-th icon-2x"></i></button>
 		<button id="mobile-post-btn" type="button" class="btn btn-none"><i class="icon-plus icon-2x"></i></button>
-	</div>
+	</div>-->
 
 	<!-- END Forum Info -->
 	<script>

public/templates/header.tpl

@@ -31,28 +31,8 @@
 </head>
 
 <body>
-	<div id="mobile-menu-overlay">
+	<!--<div id="mobile-menu-overlay"> disabling until this can be pluginified.
-	</div>
+	</div>-->
-
-	<div class="navbar navbar-inverse navbar-fixed-top">
-      <div class="container">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="#">Project name</a>
-        </div>
-        <div class="collapse navbar-collapse">
-          <ul class="nav navbar-nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#about">About</a></li>
-            <li><a href="#contact">Contact</a></li>
-          </ul>
-        </div><!--/.nav-collapse -->
-      </div>
-    </div>
 
 	<div class="navbar navbar-inverse navbar-fixed-top" id="header-menu">
 		<div class="container">

public/templates/topic.tpl

@@ -17,23 +17,24 @@
 
 	<!-- BEGIN main_posts -->
 		<a id="post_anchor_{main_posts.pid}" name="{main_posts.pid}"></a>
-		<li class="row post-row main-post" data-pid="{main_posts.pid}" data-uid="{main_posts.uid}" data-deleted="{main_posts.deleted}">
+		<li class="row post-row main-post" data-pid="{main_posts.pid}" data-uid="{main_posts.uid}" data-username="{main_posts.username}" data-deleted="{main_posts.deleted}">
 			<div class="col-md-12">
 				<div class="post-block">
+					<div class="main-post-buttons">
 						<a class="main-avatar" href="/users/{main_posts.userslug}">
-						<img src="{main_posts.picture}" align="left" class="img-thumbnail"/><br />
+							<img src="{main_posts.picture}" align="left" class="img-thumbnail" width=150 height=150 /><br />
-						<div class="hover-overlay">
+							<!--<div class="hover-overlay">
 								{main_posts.username}<br />
 								<i class="icon-star"></i><span class="user_rep_{main_posts.uid}">{main_posts.user_rep}</span>
 								<i class="icon-pencil"></i><span class="user_posts_{main_posts.uid}">{main_posts.user_postcount}</span>
-						</div>
+							</div>-->
 						</a>
 						<h3><p id="topic_title_{main_posts.pid}" class="topic-title">{topic_name}</p></h3>
 
-					<div class="topic-buttons pull-left">
+						<div class="topic-buttons" >
 							<div class="btn-group">
-							<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="Posted by {main_posts.username}">
+								<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="Posted by {main_posts.username}">
-								<span class="username-field" href="/users/{main_posts.userslug}">{main_posts.username}</span>
+									<span class="username-field" href="/users/{main_posts.userslug}">{main_posts.username}&nbsp;</span>
 									<span class="caret"></span>
 								</button>
 
@@ -45,21 +46,25 @@
 							</div>
 
 
-						<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn btn-default edit {main_posts.display_moderator_tools}" type="button" title="Edit"><i class="icon-pencil"></i></button>
-						<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn btn-default delete {main_posts.display_moderator_tools}" type="button" title="Delete"><i class="icon-trash"></i></button>
 							<div class="btn-group">
-							<button class="btn btn-default follow" type="button" title="Be notified of new replies in this topic"><i class="icon-eye-open"></i></button>
+								<button class="btn btn-sm btn-default follow" type="button" title="Be notified of new replies in this topic"><i class="icon-eye-open"></i></button>
-							<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn btn-default {main_posts.fav_button_class}" type="button">
+								<button id="favs_{main_posts.pid}_{main_posts.uid}" class="favourite btn btn-sm btn-default {main_posts.fav_button_class}" type="button">
-								<span>Favourite</span>
+									<span class="favourite-text">Favourite</span>
 									<span class="post_rep_{main_posts.pid}">{main_posts.post_rep} </span><i class="{main_posts.fav_star_class}"></i>
 								</button>
 							</div>
 							<div class="btn-group">
-							<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn btn-default quote" type="button" title="Quote"><i class="icon-quote-left"></i></button>
+								<button id="quote_{main_posts.pid}_{main_posts.uid}" class="btn btn-sm btn-default quote" type="button" title="Quote"><i class="icon-quote-left"></i></button>
-							<button class="btn btn-primary btn post_reply" type="button">Reply <i class="icon-reply"></i></button>
+								<button class="btn btn-sm btn-primary btn post_reply" type="button">Reply <i class="icon-reply"></i></button>
+							</div>
+
+							<div class="btn-group pull-right post-tools">
+								<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn btn-sm btn-default edit {main_posts.display_moderator_tools}" type="button" title="Edit"><i class="icon-pencil"></i></button>
+								<button id="ids_{main_posts.pid}_{main_posts.uid}" class="btn btn-sm btn-default delete {main_posts.display_moderator_tools}" type="button" title="Delete"><i class="icon-trash"></i></button>
 							</div>
 						</div>
 						<div style="clear:both; margin-bottom: 10px;"></div>
+					</div>
 
 					<div id="content_{main_posts.pid}" class="post-content">{main_posts.content}</div>
 					<div id="images_{main_posts.pid}" class="post-images">
@@ -69,16 +74,24 @@
 					</div>
 					<div class="post-signature">{main_posts.signature}</div>
 					<div class="profile-block">
-						posted {main_posts.relativeTime} ago
+						<span class="pull-right">
+							posted <span class="relativeTimeAgo">{main_posts.relativeTime} ago</span>
+							<span class="{main_posts.edited-class}">| last edited by <strong><a href="/users/{main_posts.editorslug}">{main_posts.editorname}</a></strong> {main_posts.relativeEditTime} ago</span>
+						</span>
+						<div style="clear:both;"></div>
+
+					</div>
+					<!--<div class="profile-block">-->
+						<!--Posted {main_posts.relativeTime} ago
 						<span class="{main_posts.edited-class} hidden-xs">| last edited by <strong><a href="/users/{main_posts.editorslug}">{main_posts.editorname}</a></strong> {main_posts.relativeEditTime} ago</span>
 						<span class="{main_posts.edited-class}"><i class="icon-edit visible-xs" title="edited by {main_posts.editorname} {main_posts.relativeEditTime} ago"></i></span>
 						<div class="post-buttons visible-xs">
 							<button class="post_reply btn-link"><i class="icon-reply"></i></button>
-						</div>
+						</div>-->
-						<div class="post-buttons">
+						<!--<div class="post-buttons">
 							<a href="../{topic_id}.rss" target="_blank"><i class="icon-rss"></i></a>
-						</div>
+						</div>-->
-					</div>
+					<!--</div>-->
 				</div>
 			</div>
 		</li>
@@ -86,20 +99,56 @@
 
 	<!-- BEGIN posts -->
 		<a id="post_anchor_{posts.pid}" name="{posts.pid}"></a>
-		<li class="row post-row" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-deleted="{posts.deleted}">
+		<li class="row post-row sub-posts" data-pid="{posts.pid}" data-uid="{posts.uid}" data-username="{posts.username}" data-deleted="{posts.deleted}">
 			<div class="col-md-1 profile-image-block hidden-xs hidden-sm">
 				<!--<i class="icon-spinner icon-spin icon-2x pull-left"></i>-->
 				<a href="/users/{posts.userslug}">
-					<img src="{posts.picture}" align="left" class="img-thumbnail"/>
+					<img src="{posts.picture}" align="left" class="img-thumbnail" />
 				</a>
-				<div class="stats">
+				<!--<div class="stats">
 					<i class="icon-star"></i><span class="user_rep_{posts.uid} formatted-number">{posts.user_rep}</span>
 					<div id="ids_{posts.pid}_{posts.uid}" class="chat hidden-xs" title="Chat"><i class="icon-comment"></i></div>
-				</div>
+				</div>-->
 				<span class="label label-danger {posts.show_banned}">banned</span>
 			</div>
 			<div class="col-md-11">
 				<div class="post-block speech-bubble">
+					<div class="post-buttons">
+						<div class="topic-buttons
+						">
+							<div class="btn-group">
+								<button class="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown" type="button" title="Posted by {posts.username}">
+									<span class="username-field" href="/users/{posts.userslug}">{posts.username}&nbsp;</span>
+									<span class="caret"></span>
+								</button>
+
+
+							    <ul class="dropdown-menu">
+							      <li><a href="#">Profile</a></li>
+							      <li><a href="#">Chat</a></li>
+							    </ul>
+							</div>
+
+							<div class="btn-group">
+								<button id="favs_{posts.pid}_{posts.uid}" class="favourite btn btn-sm btn-default {posts.fav_button_class}" type="button">
+									<span class="favourite-text">Favourite</span>
+									<span class="post_rep_{posts.pid}">{posts.post_rep} </span><i class="{posts.fav_star_class}"></i>
+								</button>
+							</div>
+							<div class="btn-group">
+								<button id="quote_{posts.pid}_{posts.uid}" class="btn btn-sm btn-default quote" type="button" title="Quote"><i class="icon-quote-left"></i></button>
+								<button class="btn btn-sm btn-primary btn post_reply" type="button">Reply <i class="icon-reply"></i></button>
+							</div>
+
+
+							<div class="btn-group pull-right post-tools">
+								<button id="ids_{posts.pid}_{posts.uid}" class="btn btn-sm btn-default edit {posts.display_moderator_tools}" type="button" title="Edit"><i class="icon-pencil"></i></button>
+								<button id="ids_{posts.pid}_{posts.uid}" class="btn btn-sm btn-default delete {posts.display_moderator_tools}" type="button" title="Delete"><i class="icon-trash"></i></button>
+							</div>
+						</div>
+						<div style="clear:both; margin-bottom: 7px;"></div>
+					</div>
+
 					<div id="content_{posts.pid}" class="post-content">{posts.content}</div>
 					<div id="images_{posts.pid}" class="post-images">
 						<!-- BEGIN uploadedImages -->
@@ -108,25 +157,34 @@
 					</div>
 					<div class="post-signature">{posts.signature}</div>
 					<div class="profile-block">
-						<span class="post-buttons">
+						<span class="pull-right">
+							posted <span class="relativeTimeAgo">{posts.relativeTime} ago</span>
+							<span class="{posts.edited-class}">| last edited by <strong><a href="/users/{posts.editorslug}">{posts.editorname}</a></strong> {posts.relativeEditTime} ago</span>
+						</span>
+						<div style="clear:both;"></div>
+
+					</div>
+					<!--<div class="profile-block">-->
+						<!--<span class="post-buttons">
 							<button id="ids_{posts.pid}_{posts.uid}" class="edit {posts.display_moderator_tools} btn-link" title="Edit"><i class="icon-pencil"></i></button>
 							<button id="ids_{posts.pid}_{posts.uid}" class="delete {posts.display_moderator_tools} btn-link" title="Delete"><i class="icon-trash"></i></button>
 							<button id="favs_{posts.pid}_{posts.uid}" class="favourite btn-link" title="Favourite"><span class="post_rep_{posts.pid}">{posts.post_rep} </span><i class="{posts.fav_star_class}"></i></button>
 							<button id="quote_{posts.pid}_{posts.uid}" class="quote btn-link" title="Quote"><i class="icon-quote-left"></i></button>
 							<button class="post_reply btn-link" title="Reply"><i class="icon-reply"></i></button>
-						</span>
+						</span>-->
-						<img class="hidden-lg hidden-md" src="{posts.picture}" align="left" /> posted by <strong><a class="username-field" href="/users/{posts.userslug}">{posts.username}</a></strong> {posts.relativeTime} ago
+						<!--Posted by <strong><a class="username-field" href="/users/{posts.userslug}">{posts.username}</a></strong> {posts.relativeTime} ago-->
-						<span class="{posts.edited-class}">| last edited by <strong><a href="/users/{posts.editorslug}">{posts.editorname}</a></strong> {posts.relativeEditTime} ago</span>
+						<!--<span class="{posts.edited-class}">| last edited by <strong><a href="/users/{posts.editorslug}">{posts.editorname}</a></strong> {posts.relativeEditTime} ago</span>
 						<span class="{posts.edited-class}"><i class="icon-edit visible-xs" title="edited by {posts.editorname} {posts.relativeEditTime} ago"></i></span>
-					</div>
+					</div>-->
 				</div>
 			</div>
 		</li>
 	<!-- END posts -->
 </ul>
 <hr />
-<button id="post_reply" class="btn btn-primary btn-lg post_reply" type="button">Reply</button>
+<div class="topic-main-buttons">
-<div class="btn-group pull-right" id="thread-tools" style="visibility: hidden;">
+	<button id="post_reply" class="btn btn-primary btn-lg post_reply" type="button">Reply</button>
+	<div class="btn-group pull-right" id="thread-tools" style="visibility: hidden;">
 		<button class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" type="button">Thread Tools <span class="caret"></span></button>
 		<ul class="dropdown-menu">
 			<li><a href="#" id="pin_thread"><i class="icon-pushpin"></i> Pin Thread</a></li>
@@ -136,7 +194,21 @@
 			<li class="divider"></li>
 			<li><a href="#" id="delete_thread"><span class="text-error"><i class="icon-trash"></i> Delete Thread</span></a></li>
 		</ul>
+	</div>
 </div>
+
+
+<div class="post-author-info">
+	<div class="row">
+		<div class="col-xs-3">
+			<img id="post-author-image" src="http://www.gravatar.com/avatar/ec001b26766105ea038160c98a317956?size=128&default=identicon&rating=pg" width=50 height=50 />
+		</div>
+		<div class="col-xs-9">
+			<h4><div id="post-author-info"></div></h4>
+		</div>
+	</div>
+</div>
+
 <div id="move_thread_modal" class="modal hide fade">
 	<div class="modal-header">
 		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>