serious clean up of topic.less

public/src/forum/topic.js

@@ -611,7 +611,7 @@
 
 
 
-	var postAuthorImage, postAuthorInfo, pagination;
+	var postAuthorImage, mobileAuthorOverlay, pagination;
 	var	postcount = templates.get('postcount');
 
 	function updateHeader() {
@@ -624,9 +624,9 @@
 			});
 		}
 
-		jQuery('.mobile-author-info').css('bottom', '0px');
+		jQuery('.mobile-author-overlay').css('bottom', '0px');
 		postAuthorImage = postAuthorImage || document.getElementById('mobile-author-image');
-		postAuthorInfo = postAuthorInfo || document.getElementById('mobile-author-info');
+		mobileAuthorOverlay = mobileAuthorOverlay || document.getElementById('mobile-author-overlay');
 		pagination = pagination || document.getElementById('pagination');
 
 		pagination.parentNode.style.display = 'block';
@@ -637,7 +637,7 @@
 
 		if (scrollTop < 50 && postcount > 1) {
 			postAuthorImage.src = (jQuery('.main-avatar img').attr('src'));
-			postAuthorInfo.innerHTML = 'Posted by ' + jQuery('.main-post').attr('data-username') + ', ' + jQuery('.main-post').find('.relativeTimeAgo').html();
+			mobileAuthorOverlay.innerHTML = 'Posted by ' + jQuery('.main-post').attr('data-username') + ', ' + jQuery('.main-post').find('.relativeTimeAgo').html();
 			pagination.innerHTML = '0 out of ' + postcount;
 			return;
 		}
@@ -662,7 +662,7 @@
 		    if (inView) {
 		    	pagination.innerHTML = this.postnumber + ' out of ' + postcount;
 				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();
+				mobileAuthorOverlay.innerHTML = 'Posted by ' + jQuery(this).attr('data-username') + ', ' + jQuery(this).find('.relativeTimeAgo').html();
 		    }
 		});
 

public/templates/topic.tpl

@@ -18,15 +18,14 @@
 			<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="avatar" href="/users/{main_posts.userslug}">
-							<a class="main-avatar" href="/users/{main_posts.userslug}">
 							<img src="{main_posts.picture}" align="left" class="img-thumbnail" width=150 height=150 /><br />
 						</a>
 						<h3>
 							<p id="topic_title_{main_posts.pid}" class="topic-title">{topic_name}</p>
 						</h3>
 
-							<div class="topic-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 {main_posts.username}">
 									<span class="username-field" href="/users/{main_posts.userslug}">{main_posts.username}&nbsp;</span>
@@ -55,8 +54,6 @@
 								<button 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">
@@ -88,7 +85,6 @@
 				</div>
 				<div class="col-md-11">
 					<div class="post-block">
-						<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}">
@@ -118,8 +114,6 @@
 								<button 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">
@@ -162,13 +156,13 @@
 		</div>
 	</div>
 
-	<div class="mobile-author-info">
+	<div class="mobile-author-overlay">
 		<div class="row">
 			<div class="col-xs-3">
 				<img id="mobile-author-image" src="" width=50 height=50 />
 			</div>
 			<div class="col-xs-9">
-				<h4><div id="mobile-author-info"></div></h4>
+				<h4><div id="mobile-author-overlay"></div></h4>
 			</div>
 		</div>
 	</div>

public/themes/cerulean/topic.less

@@ -35,6 +35,15 @@
 		}
 	}
 
+	.profile-block {
+		background: rgba(0, 0, 0, 0.02);
+		margin: 15px -11px -11px -11px;
+		border-radius: 0 0 5px 5px;
+		font-size: 10px;
+		line-height: 15px;
+		padding: 5px 8px 5px 5px;
+		color: #777;
+	}
 
 	.active-users {
 		color: rgb(153,153,153);

public/themes/vanilla/topic.less

@@ -14,44 +14,39 @@
 			&.deleted {
 				-moz-opacity: 0.30;
 				opacity: 0.30;
-				height:30px;
+				height: 30px;
-				overflow-y:hidden;
+				overflow-y: hidden;
 			}
 
 			&.deleted-expanded {
-				height:100%;
+				height: 100%;
-				overflow-y:default;
+				overflow-y: default;
 			}
 		}
 	}
 
+	@media (max-width: 475px) {
+		.post-tools {
+			display: none;
+		}
+
+		.favourite-text {
+			display: none;
+		}
+	}
+
 	@media (max-width: 767px) {
 		.topic-main-buttons {
 			margin-bottom: 0px;
 		}
 	}
 
-	@media (max-width: 475px) {
+	.main-post, .sub-posts {
-		.post-tools {
+		.profile-block, .post-block {
-			display: none;
+			position: relative;
-		}
+			border: 1px solid rgba(0, 0, 0, 0.06);
-		.favourite-text {
+			border-radius: 5px;
-			display: none;
+			padding: 10px;
-		}
-	}
-
-	// styling the chat button in the dropdown to match. surely there's a better way...
-	.chat {
-		display: block;
-		padding: 3px 20px;
-		clear: both;
-		.pointer;
-
-		&:hover, &:focus {
-			color: white;
-			background-color: rgb(66, 139, 202);
-		}
-	}
 
 			.post-signature {
 				color: #666;
@@ -60,36 +55,16 @@
 				display: inline-block;
 
 				img {
-			max-width:200px;
+					max-width: 200px;
-			max-height:60px;
+					max-height: 60px;
 				}
 
 				margin-left: 5px;
 			}
-
-	.profile-block, .post-block {
-		position: relative;
-		border: 1px solid rgba(0, 0, 0, 0.06);
-		border-radius: 5px;
-		padding: 10px;
-
-		p {
-			line-height: 1.75em;
-		}
-	}
-
-	.profile-block {
-		background: rgba(0, 0, 0, 0.02);
-		margin: 15px -11px -11px -11px;
-		border-radius: 0 0 5px 5px;
-		font-size: 10px;
-		line-height: 15px;
-		padding: 5px 8px 5px 5px;
-		color: #777;
 		}
 
 		.post-block {
-		.post-buttons {
+			.topic-buttons {
 				background: rgba(0, 0, 0, 0.02);
 				border: 1px solid rgba(0, 0, 0, 0.06);
 				margin: -5px 0 0 0;
@@ -103,10 +78,8 @@
 					padding-left: 9px;
 				}
 			}
-	}
 
 			.post-content {
-		min-height: 50px;
 				padding: 10px 5px 0 5px;
 				word-wrap: break-word;
 			}
@@ -114,33 +87,35 @@
 			.post-images{
 				padding: 2px 5px 0 5px;
 			}
-
+		}
-
+	}
 
 	.sub-posts {
-		.post-tools {
+		.post-block {
-			margin-right: 9px;
-		}
-		.post-content {
-			margin-left: 10px;
-		}
 			.post-signature {
 				margin-left: 15px;
 			}
+
+			.topic-buttons {
+				margin: -11px -10px 0px -10px;
+				border: 0;
+				border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+				padding: 8px 9px 7px 23px;
+			}
+
+			.post-content {
+				margin-left: 10px;
+			}
+		}
+
 		.img-thumbnail {
 			padding: 2px;
 			border-radius: 0;
 			margin-left: 16px;
 		}
-		.post-buttons {
-			margin: -11px -10px 0 -10px;
-			border: 0;
-			border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-		}
 	}
 
 	.main-post {
-		.main-post-buttons {
 		h3 {
 			margin: 0;
 
@@ -152,14 +127,14 @@
 			}
 		}
 
-			.main-avatar {
+		.avatar {
 			color: white;
 			position: relative;
 			float: left;
 			margin: 0 10px 0 0;
 			padding-bottom: 0px;
 			text-align: center;
-				width:100px;
+			width: 100px;
 
 			@media (max-width: 767px) {
 				display: none;
@@ -170,7 +145,6 @@
 				border-radius: 0;
 			}
 		}
-		}
 
 		.post-content {
 			min-height: 80px;
@@ -181,22 +155,7 @@
 		}
 
 		.post-block {
-			.post-buttons {
+			.topic-buttons {
-				button.show {
-					display: inline-block!important;
-				}
-
-			}
-		}
-
-		.favourite {
-			.pointer;
-		}
-		.btn {
-			display: inline-block;
-		}
-
-		.topic-buttons { //main-post version is called post-buttons, needs to be consolidated.
 				background: rgba(0, 0, 0, 0.02);
 				border: 1px solid rgba(0, 0, 0, 0.06);
 				margin: 0 -11px 0 92px;
@@ -212,13 +171,10 @@
 					display: inline-block!important;
 				}
 			}
-
+		}
 	}
 
-
+	.mobile-author-overlay {
-
-
-	.mobile-author-info {
 		display: none;
 		z-index: 9999;
 
@@ -248,4 +204,17 @@
 			font-size: 16px;
 		}
 	}
+
+	// styling the chat button in the dropdown to match. surely there's a better way...
+	.chat {
+		display: block;
+		padding: 3px 20px;
+		clear: both;
+		.pointer;
+
+		&:hover, &:focus {
+			color: white;
+			background-color: rgb(66, 139, 202);
+		}
+	}
 }