Merge remote-tracking branch 'origin/master' into user-icons

less/categories.less

@@ -35,7 +35,6 @@
 				line-height: 22px;
 				margin: 0;
 				margin-left: 62px;
-				width: 85%;
 
 				strong {
 					color: @gray-dark;

less/category.less

@@ -50,7 +50,6 @@
 					.transition(.2s ease-in-out opacity);
 				}
 
-				width: 50px;
 				float: left;
 			}
 
@@ -70,8 +69,13 @@
 					font-size: 10px;
 					background: lighten(@gray-lighter, 2.5%);
 					padding: 5px;
+					white-space: nowrap;
 				}
 			}
+
+			.fa-stack {
+				font-size: 90%;
+			}
 		}
 
 		&:last-child li {
@@ -84,6 +88,8 @@
 			font-weight: bold;
 		}
 	}
+
+
 }
 
 .category, .categories, .subcategory {

less/mobile.less

@@ -1,8 +1,17 @@
-#menu {
+
+.slideout-menu {
+	position: fixed;
+	left: auto;
+	top: 0;
+	bottom: 0;
+	right: 0;
+	z-index: 0;
+	width: 256px;
+	overflow-y: auto;
+	-webkit-overflow-scrolling: touch;
 	display: none;
 }
 
-
 @media (max-width: 980px) {
 	body {
 		padding-top: 0;
@@ -20,6 +29,7 @@
 	}
 
 	#menu {
+
 		padding-top: 100px;
 		background-color: #1D1F20;
 		background-image: linear-gradient(145deg, #1D1F20, #404348);
@@ -120,19 +130,6 @@
 		}
 	}
 
-	.slideout-menu {
-		position: fixed;
-		left: auto;
-		top: 0;
-		bottom: 0;
-		right: 0;
-		z-index: 0;
-		width: 256px;
-		overflow-y: auto;
-		-webkit-overflow-scrolling: touch;
-		display: none;
-	}
-
 	.slideout-panel {
 		position: relative;
 		z-index: 1;

less/topic.less

@@ -64,6 +64,19 @@
 		right: 25px;
 	}
 
+	.bookmarked {
+		position: absolute;
+		top: 1px;
+		padding-top: 3px;
+		border-radius: 4px;
+		right: 72px;
+		font-size: 10px;
+		padding-bottom: 4px;
+		background: darken(@brand-info, 20%);
+		opacity: 0;
+		.transition(0.75s ease-in-out opacity);
+	}
+
 	[component="post/upvote"], [component="post/downvote"] {
 		color: @gray-light;
 	}
@@ -110,9 +123,10 @@
 
 	.post-tools {
 		text-transform: lowercase;
-		:before {
+		a::before {
 			content: "\2022\0020";
 		}
+
 		a {
 			.pointer;
 		}
@@ -241,13 +255,17 @@
 				border-color: darken(@brand-info, 20%);
 				box-shadow: 0px 0px 1px @brand-info;
 			}
+
+			&.highlight .bookmarked {
+				opacity: 1;
+			}
 		}
 
 		.content {
 			.fix-lists;
 
 			blockquote {
-				font-size: 85%;
+				font-size: 12px;
 			}
 
 			> blockquote {
@@ -305,6 +323,25 @@
 			}
 		}
 	}
+
+	.pagination-block {
+		position: fixed;
+		width: 100%;
+		background-color: #eee;
+		bottom: 0px;
+		left: 0px;
+		z-index: 100;
+
+		.wrapper {
+			padding: 5px 0px 5px 0px;
+		}
+		.progress-bar {
+			background-color: @brand-info;
+			display:block;
+			z-index: -1;
+			position: absolute;
+		}
+	}
 }
 
 .thread_active_users {

lib/persona.js

@@ -6,7 +6,6 @@ $(document).ready(function() {
 	setupNProgress();
 	setupTaskbar();
 	setupEditedByIcon();
-	setupPaginator();
 	setupMobileMenu();
 
 	var env = utils.findBootstrapEnvironment();
@@ -88,81 +87,13 @@ $(document).ready(function() {
 		$(window).on('action:posts.loaded', activateEditedTooltips);
 	}
 
-	function setupPaginator() {
-		function appendPageNumber(ev, data) {
-			var el = data.after ? data.after : data.before;
-			if (!el) {
-				return;
-			}
-			var	page = Math.ceil((el.attr('data-index') - 1) / config.postsPerPage),
-				handle = $('<div class="page-number pointer">' + page + '</div>'),
-				shadow = $('<div class="shadow"></div>');
-
-			el.append(handle);
-			el.append(shadow);
-
-			handle.tooltip({
-				title: 'Slide to paginate',
-				placement: 'auto left'
-			});
-
-			var dragging = false, originalX = 0, toPage = page;
-			handle.on('touchstart', function(ev) {
-				dragging = true;
-				originalX = ev.originalEvent.touches[0].clientX;
-			});
-
-			$('#content').on('touchend', function() {
-				if (dragging === true) {
-					dragging = false;
-					if (page !== toPage) {
-						ajaxify.go('topic/' + ajaxify.data.slug + '/' + (toPage * config.postsPerPage));
-					}
-
-					shadow.removeClass('active');
-				}
-			});
-
-			$('#content').on('touchmove', function(ev) {
-				if (!dragging) {
-					return;
-				}
-
-				var distance = ev.originalEvent.touches[0].clientX - originalX,
-					handlePos = parseInt(handle.css('left'), 10),
-					postWidth = handle.parents('[component="post"]').width();
-
-				toPage = Math.ceil((handlePos + distance) / postWidth * ajaxify.data.pageCount);
-
-				if (toPage >= ajaxify.data.pageCount) {
-					toPage = (ajaxify.data.pageCount - 1);
-				}
-
-				if (toPage < 0) {
-					toPage = 0;
-				}
-
-				if (parseInt(handle.html(), 10) !== toPage) {
-					handle.html(toPage);
-					handle.removeClass('animated');
-					setTimeout(function() { handle.addClass('animated');}, 10);
-				}
-
-				shadow.addClass('active');
-				shadow.css('left', toPage / ajaxify.data.pageCount * postWidth + 'px');
-			});
-
-			handle.css('left', page / ajaxify.data.pageCount * handle.parents('[component="post"]').width() + 'px');
-		}
-
-		$(window).on('action:posts.loading', appendPageNumber);
-	}
-
 	function setupMobileMenu() {
 		if (!window.addEventListener) {
 			return;
 		}
 
+		$('#menu').removeClass('hidden');
+
 		var slideout = new Slideout({
 			'panel': document.getElementById('panel'),
 			'menu': document.getElementById('menu'),
@@ -172,7 +103,6 @@ $(document).ready(function() {
 		});
 
 		$('#mobile-menu').on('click', function() {
-			$('#menu').show();
 			slideout.toggle();
 		});
 
@@ -180,11 +110,7 @@ $(document).ready(function() {
 			slideout.close();
 		});
 
-		$(window).on('resize', function() {
+		$(window).on('resize action:ajaxify.start', function() {
-			slideout.close();
-		});
-
-		$(window).on('action:ajaxify.start', function() {
 			slideout.close();
 		});
 
@@ -194,8 +120,6 @@ $(document).ready(function() {
 		}
 
 		function openingMenu() {
-			$('#menu').show();
-
 			$('#header-menu').css({
 				'top': $(window).scrollTop() + 'px',
 				'position': 'absolute'
@@ -211,9 +135,13 @@ $(document).ready(function() {
 			});
 		}
 
-		slideout.on('beforeopen', openingMenuAndLoad);
 		slideout.on('open', openingMenuAndLoad);
-		slideout.on('translate', openingMenu);
+		slideout.on('touchmove', function(target) {
+			var $target = $(target);
+			if ($target.length && ($target.is('code') || $target.parents('code').length)) {
+				slideout._preventOpen = true;
+			}
+		});
 
 		slideout.on('close', function() {
 			$('#header-menu').css({
@@ -221,7 +149,6 @@ $(document).ready(function() {
 				'position': 'fixed'
 			});
 			$('.slideout-open').removeClass('slideout-open');
-			$('#menu').hide();
 		});
 
 		$('#menu [data-section="navigation"] ul').html($('#main-nav').html() + ($('#logged-out-menu').html() || ''));

modules.less

@@ -1,3 +1,2 @@
 @import "modules/taskbar";
 @import "modules/alerts";
-@import "modules/paginator";

modules/paginator.less

@@ -1,41 +0,0 @@
-.topic {
-	.page-number {
-		position: absolute;
-		bottom: 6px;
-		background: rgb(219, 68, 55);
-		padding: 4px;
-		width: 26px;
-		height: 26px;
-		text-align: center;
-		border-radius: 50%;
-		color: white;
-		font-size: 11px;
-		z-index: 1;
-
-		.user-select(none);
-
-		&.animated {
-			-webkit-animation-name: bounceIn;
-				animation-name: bounceIn;
-			-webkit-animation-duration: 0.5s;
-			animation-duration: 0.5s;
-			-webkit-animation-fill-mode: both;
-			animation-fill-mode: both;
-		}
-	}
-
-	.shadow.active {
-		border-radius: 50%;
-		width: 13px;
-		height: 13px;
-		border: 1px solid #333;
-		position: absolute;
-		bottom: 13px;
-	}
-
-	@media (min-width: @screen-md-min) {
-		.page-number {
-			display: none;
-		}
-	}
-}

package.json

@@ -1,8 +1,8 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "3.0.23",
+  "version": "3.0.38",
   "nbbpm": {
-    "compatibility": "^0.9.0"
+    "compatibility": "^0.8.2"
   },
   "description": "Persona theme for NodeBB",
   "main": "theme.less",

templates/account/edit.tpl

@@ -145,6 +145,7 @@
 
 			<hr />
 
+			<!-- IF sso.length -->
 			<label class="control-label">[[user:sso.title]]</label>
 			<div class="list-group">
 				<!-- BEGIN sso -->
@@ -155,10 +156,8 @@
 				</a>
 				<!-- END sso -->
 			</div>
+			<!-- ENDIF sso.length -->
 		</div>
 	</div>
-
-	<!-- IMPORT partials/modals/change_picture_modal.tpl -->
-	<!-- IMPORT partials/modals/upload_picture_from_url_modal.tpl -->
 </div>
 

templates/footer.tpl

@@ -1,7 +1,7 @@
 		</div><!--END container -->
 	</main>
 
-	<div class="hide tpl-500">
+	<div class="hide">
 	<!-- IMPORT 500.tpl -->
 	</div>
 

templates/header.tpl

@@ -38,7 +38,7 @@
 </head>
 
 <body>
-	<nav id="menu">
+	<nav id="menu" class="hidden">
 		<section class="menu-profile">
 			<!-- IF user.picture -->
 			<img src="{user.picture}"/>

templates/partials/menu.tpl

@@ -155,7 +155,7 @@
 						<i class="fa fa-angle-up pointer fa-fw pageup"></i>
 
 						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
-							<span id="pagination"></span>
+							<span class="pagination-text"></span>
 						</a>
 
 						<i class="fa fa-angle-down pointer fa-fw pagedown"></i>
@@ -175,7 +175,7 @@
 					<!-- BEGIN navigation -->
 					<!-- IF function.displayMenuItem, @index -->
 					<li class="{navigation.class}">
-						<a href="{relative_path}{navigation.route}" title="{navigation.title}" id="{navigation.id}"<!-- IF navigation.properties.targetBlank --> target="_blank"<!-- ENDIF navigation.properties.targetBlank -->>
+						<a href="{relative_path}{navigation.route}" title="{navigation.title}" <!-- IF navigation.id -->id="{navigation.id}"<!-- ENDIF navigation.id --><!-- IF navigation.properties.targetBlank --> target="_blank"<!-- ENDIF navigation.properties.targetBlank -->>
 							<!-- IF navigation.iconClass -->
 							<i class="fa fa-fw {navigation.iconClass}"></i>
 							<!-- ENDIF navigation.iconClass -->

templates/partials/modals/change_picture_modal.tpl

@@ -1,4 +1,4 @@
-	<div id="change-picture-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="change-picture" aria-hidden="true">
+	<div id="change-picture-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="change-picture" aria-hidden="true">
 		<div class="modal-dialog">
 			<div class="modal-content">
 				<div class="modal-header">
@@ -31,6 +31,6 @@
 					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">[[global:close]]</button>
 					<button id="savePictureChangesBtn" class="btn btn-primary">[[global:save_changes]]</button>
 				</div>
-			</div><!-- /.modal-content -->
+			</div>
-		</div><!-- /.modal-dialog -->
+		</div>
-	</div><!-- /.modal -->
+	</div>

templates/partials/modals/upload_picture_from_url_modal.tpl

@@ -1,4 +1,4 @@
-	<div id="upload-picture-from-url-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-picture-url" aria-hidden="true">
+	<div id="upload-picture-from-url-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="upload-picture-url" aria-hidden="true">
 		<div class="modal-dialog">
 			<div class="modal-content">
 				<div class="modal-header">

templates/partials/modals/upload_picture_modal.tpl

@@ -1,4 +1,4 @@
-	<div id="upload-picture-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="upload-picture" aria-hidden="true">
+	<div id="upload-picture-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="upload-picture" aria-hidden="true">
 		<div class="modal-dialog">
 			<div class="modal-content">
 				<div class="modal-header">

templates/partials/post_bar.tpl

@@ -1,3 +1,4 @@
+<div class="clearfix">
 	<span class="tags">
 		<!-- BEGIN tags -->
 		<a href="{config.relative_path}/tags/{tags.value}">
@@ -11,20 +12,18 @@
 			<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
 		</span>
 
-	<div class="stats">
+		<!-- IMPORT partials/topic/stats.tpl -->
-		<span component="topic/post-count" class="human-readable-number" title="{postcount}">{postcount}</span><br />
-		<small>[[global:posts]]</small>
-	</div>
-	<div class="stats">
-		<span class="human-readable-number" title="{viewcount}">{viewcount}</span><br />
-		<small>[[global:views]]</small>
-	</div>
 
+		<br class="visible-xs"/>
 
 		<!-- IMPORT partials/topic/reply-button.tpl -->
 
+		<!-- IMPORT partials/topic/watch.tpl -->
+
+		<!-- IMPORT partials/topic/sort.tpl -->
+
 		<!-- IMPORT partials/thread_tools.tpl -->
 	</div>
-<div class="clearfix"></div>
+</div>
 
 <hr/>

templates/partials/topic/post.tpl

@@ -27,6 +27,9 @@
 			<span class="post-tools">
 				<a component="post/reply" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!--ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
 				<a component="post/quote" href="#" class="no-select <!-- IF !privileges.topics:reply -->hidden<!--ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
+				<!-- IF posts.toPid -->
+				<button component="post/parent" class="btn btn-xs btn-default" data-topid="{posts.toPid}"><i class="fa fa-reply"></i> @{posts.parent.username} <i class="fa fa-caret-down"></i></button>
+				<!-- ENDIF posts.toPid -->
 			</span>
 			<span>
 				<!-- IF posts.user.custom_profile_info.length -->
@@ -37,6 +40,7 @@
 				<!-- ENDIF posts.user.custom_profile_info.length -->
 			</span>
 		</div>
+		<span class="badge bookmarked"><i class="fa fa-star"></i></span>
 		<div class="votes">
 			<!-- IF !reputation:disabled -->
 			<a component="post/upvote" href="#" class="<!-- IF posts.upvoted -->upvoted<!-- ENDIF posts.upvoted -->">
@@ -56,6 +60,7 @@
 </div>
 
 <br />
+
 <div class="content" component="post/content" itemprop="text">
 	{posts.content}
 </div>
@@ -64,7 +69,4 @@
 <!-- ENDIF posts.user.signature -->
 
 
-<small data-editor="{posts.editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by_ago, <strong>{posts.editor.username}</strong>, <span class="timeago" title="{posts.relativeEditTime}"></span>]]</small>
-
-
 <hr />

templates/partials/topic/sort.tpl

@@ -1,7 +1,8 @@
 <!-- IF loggedIn -->
-<div class="btn-group hidden-xs hidden-sm" component="thread/sort">
+<div class="btn-group" component="thread/sort">
-	<button class="btn dropdown-toggle" data-toggle="dropdown" type="button">[[topic:sort_by]] <span class="caret"></span></button>
+	<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button"><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
-	<ul class="dropdown-menu">
+	<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span> <span class="caret"></span></button>
+	<ul class="dropdown-menu dropdown-menu-right">
 		<li><a href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
 		<li><a href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
 		<li><a href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>

templates/partials/topic/stats.tpl

@@ -0,0 +1,8 @@
+<div class="stats hidden-xs">
+	<span component="topic/post-count" class="human-readable-number" title="{postcount}">{postcount}</span><br />
+	<small>[[global:posts]]</small>
+</div>
+<div class="stats hidden-xs">
+	<span class="human-readable-number" title="{viewcount}">{viewcount}</span><br />
+	<small>[[global:views]]</small>
+</div>

templates/partials/topic/watch.tpl

@@ -0,0 +1,7 @@
+<button component="topic/follow" class="btn btn-info <!-- IF isFollowing -->hidden<!-- ENDIF isFollowing -->">
+	<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:watch]]</span> <i class="fa fa-eye"></i>
+</button>
+
+<button component="topic/unfollow" class="btn btn-warning <!-- IF !isFollowing -->hidden<!-- ENDIF !isFollowing -->">
+	<span class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:unwatch]]</span> <i class="fa fa-eye-slash"></i>
+</button>

templates/partials/topics_list.tpl

@@ -4,7 +4,7 @@
 	<li component="category/topic" class="row clearfix {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
 		<meta itemprop="name" content="{function.stripTags, title}">
 
-		<div class="col-md-7 col-sm-9 col-xs-11 content">
+		<div class="col-md-7 col-sm-9 col-xs-12 content">
 			<div class="avatar pull-left">
 				<!-- IF showSelect -->
 					<div class="select fa-square-o">
@@ -37,7 +37,7 @@
 
 				<!-- IF !template.category -->
 				<small>
-					<a href="{config.relative_path}/category/{topics.category.slug}"><i class="fa {topics.category.icon}"></i> {topics.category.name}</a> &bull;
+					<a href="{config.relative_path}/category/{topics.category.slug}"><span class="fa-stack fa-lg"><i style="color:{topics.category.bgColor};"class="fa fa-circle fa-stack-2x"></i><i style="color:{topics.category.color};" class="fa {topics.category.icon} fa-stack-1x"></i></span> {topics.category.name}</a> &bull;
 				</small>
 				<!-- ENDIF !template.category -->
 
@@ -49,6 +49,9 @@
 				</span>
 
 				<small>[[global:posted_ago, <span class="timeago" title="{topics.relativeTime}"></span>]]</small>
+
+				<small class="clearfix"><span class="visible-xs"><span class="pull-right"><i class="fa fa-pencil"></i> {topics.postcount} &bull; <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a></span>
+				</span></small>
 			</h2>
 		</div>
 
@@ -60,7 +63,7 @@
 			<span class="human-readable-number" title="{topics.viewcount}">{topics.viewcount}</span><br />
 			<small>[[global:views]]</small>
 		</div>
-		<div class="col-md-3 col-sm-3 col-xs-1 teaser hidden-xs">
+		<div class="col-md-3 col-sm-3 teaser hidden-xs">
 			<div class="card" style="border-color: {topics.category.bgColor}">
 				<!-- IF topics.unreplied -->
 				<p class="hidden-xs">

templates/topic.tpl

@@ -4,15 +4,7 @@
 	<h1 component="post/header" itemprop="name">
 
 		<i class="fa fa-thumb-tack <!-- IF !pinned -->hidden<!-- ENDIF !pinned -->"></i> <i class="fa fa-lock <!-- IF !locked -->hidden<!-- ENDIF !locked -->"></i> <span class="topic-title" component="topic/title">{title}</span>
-		<!-- IMPORT partials/topic/sort.tpl -->
 
-		<button component="topic/follow" class="btn hidden-xs hidden-sm <!-- IF isFollowing -->hidden<!-- ENDIF isFollowing -->">
-			<span>[[topic:watch]]</span> <i class="fa fa-eye"></i>
-		</button>
-
-		<button component="topic/unfollow" class="btn hidden-xs hidden-sm <!-- IF !isFollowing -->hidden<!-- ENDIF !isFollowing -->">
-			<span>[[topic:unwatch]]</span> <i class="fa fa-eye-slash"></i>
-		</button>
 
 		<span class="browsing-users hidden hidden-xs hidden-sm pull-right">
 			<span>[[category:browsing]]</span>
@@ -27,8 +19,8 @@
 
 	<ul component="topic" class="posts" data-tid="{tid}">
 		<!-- BEGIN posts -->
-			<li component="post" class="clearfix <!-- IF posts.deleted -->deleted<!-- ENDIF posts.deleted -->" <!-- IMPORT partials/data/topic.tpl -->>
+			<li component="post" class="<!-- IF posts.deleted -->deleted<!-- ENDIF posts.deleted -->" <!-- IMPORT partials/data/topic.tpl -->>
-				<a component="post/anchor" name="{posts.index}"></a>
+				<a component="post/anchor" data-index="{posts.index}" name="{posts.index}"></a>
 
 				<meta itemprop="datePublished" content="{posts.relativeTime}">
 				<meta itemprop="dateModified" content="{posts.relativeEditTime}">
@@ -39,6 +31,7 @@
 				<div class="post-bar" data-index="{posts.index}">
 					<!-- IMPORT partials/post_bar.tpl -->
 				</div>
+
 				<!-- ENDIF !posts.index -->
 			</li>
 
@@ -49,10 +42,22 @@
 		<!-- IMPORT partials/post_bar.tpl -->
 	</div>
 
+
 	<!-- IF config.usePagination -->
 		<!-- IMPORT partials/paginator.tpl -->
 	<!-- ENDIF config.usePagination -->
 
+	<div class="visible-xs visible-sm pagination-block text-center">
+		<div class="progress-bar"></div>
+		<div class="wrapper">
+			<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop"></i>
+			<i class="fa fa-2x fa-angle-up pointer fa-fw pageup"></i>
+			<span class="pagination-text"></span>
+			<i class="fa fa-2x fa-angle-down pointer fa-fw pagedown"></i>
+			<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom"></i>
+		</div>
+	</div>
+
 </div>
 
 <!-- IF !config.usePagination -->
@@ -60,3 +65,4 @@
 	<!-- IMPORT partials/paginator.tpl -->
 </noscript>
 <!-- ENDIF !config.usePagination -->
+