nodebb-theme-persona 11.3.1 → 11.3.5

package/public/persona.js

@@ -1,16 +1,14 @@
-"use strict";
-
-/*globals ajaxify, config, utils, app, socket, window, document, $*/
+'use strict';
 
 $(document).ready(function () {
 	setupNProgress();
 	setupEditedByIcon();
 	setupQuickReply();
 	configureNavbarHiding();
-	fixHeaderPadding();
+	updatePanelOffset();
 
 	$(window).on('resize', utils.debounce(configureNavbarHiding, 200));
-	$(window).on('resize', fixHeaderPadding);
+	$(window).on('resize', updatePanelOffset);
 
 	$(window).on('action:app.loggedIn', function () {
 		setupMobileMenu();
@@ -21,25 +19,25 @@ $(document).ready(function () {
 		setupMobileMenu();
 	});
 
-	function fixHeaderPadding() {
+	function updatePanelOffset() {
 		var env = utils.findBootstrapEnvironment();
 		const headerEl = document.getElementById('header-menu');
-		const panelEl = document.getElementById('panel');
 
-		if (!headerEl || !panelEl) {
+		if (!headerEl) {
 			return;
 		}
 
 		const headerRect = headerEl.getBoundingClientRect();
 		const headerStyle = window.getComputedStyle(headerEl);
 
-		let paddingTop = headerRect.y + headerRect.height + (parseInt(headerStyle.marginTop, 10) || 0) + (parseInt(headerStyle.marginBottom, 10) || 0);
+		let offset = headerRect.y + headerRect.height +
+			(parseInt(headerStyle.marginTop, 10) || 0) + (parseInt(headerStyle.marginBottom, 10) || 0);
 		// body element itself introduces a hardcoded 70px padding on desktop resolution
 		if (env === 'lg') {
-			paddingTop -= 70;
+			offset -= 70;
 		}
 
-		panelEl.style.paddingTop = `${paddingTop}px`;
+		document.documentElement.style.setProperty('--panel-offset', `${offset}px`);
 	}
 
 	var lastBSEnv = '';
@@ -53,7 +51,7 @@ $(document).ready(function () {
 			return;
 		}
 		lastBSEnv = env;
-		var navbarEl = $(".navbar-fixed-top");
+		var navbarEl = $('.navbar-fixed-top');
 		navbarEl.autoHidingNavbar('destroy').removeData('plugin_autoHidingNavbar');
 		navbarEl.css('top', '');
 
@@ -65,7 +63,7 @@ $(document).ready(function () {
 
 		function fixTopCss(topValue) {
 			if (ajaxify.data.template.topic) {
-				$('.topic .topic-header').css({top: topValue });
+				$('.topic .topic-header').css({ top: topValue });
 			} else {
 				var topicListHeader = $('.topic-list-header');
 				if (topicListHeader.length) {
@@ -75,12 +73,12 @@ $(document).ready(function () {
 		}
 
 		navbarEl.off('show.autoHidingNavbar')
-			.on('show.autoHidingNavbar', function() {
+			.on('show.autoHidingNavbar', function () {
 				fixTopCss('');
 			});
 
 		navbarEl.off('hide.autoHidingNavbar')
-			.on('hide.autoHidingNavbar', function() {
+			.on('hide.autoHidingNavbar', function () {
 				fixTopCss('0px');
 			});
 	}
@@ -165,7 +163,8 @@ $(document).ready(function () {
 	function setupEditedByIcon() {
 		function activateEditedTooltips() {
 			$('[data-pid] [component="post/editor"]').each(function () {
-				var el = $(this), icon;
+				var el = $(this);
+				var icon;
 
 				if (!el.attr('data-editor')) {
 					return;
@@ -360,7 +359,7 @@ $(document).ready(function () {
 									}
 								});
 						});
-					})
+					});
 				}
 			}
 
@@ -450,13 +449,13 @@ $(document).ready(function () {
 	}
 
 	function setupFavouriteMorph(parent, uid, username) {
-		require(['api'], function (api) {
+		require(['api', 'alerts'], function (api, alerts) {
 			parent.find('.btn-morph').click(function (ev) {
 				var type = $(this).hasClass('plus') ? 'follow' : 'unfollow';
 				var method = $(this).hasClass('plus') ? 'put' : 'del';
 
 				api[method]('/users/' + uid + '/follow').then(() => {
-					app.alertSuccess('[[global:alert.' + type + ', ' + username + ']]');
+					alerts.success('[[global:alert.' + type + ', ' + username + ']]');
 				});
 
 				$(this).toggleClass('plus').toggleClass('heart');
@@ -466,9 +465,9 @@ $(document).ready(function () {
 					$(this).prepend('<b class="drop"></b>');
 				}
 
-				var drop = $(this).find('b.drop').removeClass('animate'),
-					x = ev.pageX - drop.width() / 2 - $(this).offset().left,
-					y = ev.pageY - drop.height() / 2 - $(this).offset().top;
+				var drop = $(this).find('b.drop').removeClass('animate');
+				var x = ev.pageX - (drop.width() / 2) - $(this).offset().left;
+				var y = ev.pageY - (drop.height() / 2) - $(this).offset().top;
 
 				drop.css({ top: y + 'px', left: x + 'px' }).addClass('animate');
 			});

package/templates/account/blocks.tpl

@@ -1,35 +1,35 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-
-	<div class="users row">
-		<h1>[[pages:account/blocks, {username}]]</h1>
-
-		<div class="col-sm-8 col-xs-12">
-			<ul id="users-container" class="users-container" data-nextstart="{nextStart}">
-				<!-- IMPORT partials/users_list.tpl -->
-			</ul>
-			<div class="alert alert-warning text-center"<!-- IF users.length --> style="display: none;"<!-- END -->>[[user:has_no_blocks]]</div>
-			<!-- IMPORT partials/paginator.tpl -->
-		</div>
-		<div class="col-sm-4 col-xs-12">
-			<div class="panel panel-default">
-				<div class="panel-body form">
-					<div class="form-group">
-						<label for="user-search">[[users:search]]</label>
-						<input class="form-control" type="text" id="user-search" placeholder="[[users:enter_username]]" />
-						<ul class="block-edit list-group">
-							{{{ each edit }}}
-							<li class="list-group-item clearfix">
-								<button class="btn btn-sm btn-primary pull-right" data-uid="{../uid}" data-action="toggle">[[user:block_toggle]]</button>
-								<div class="pull-left">
-									<a href="{config.relative_path}/uid/{../uid}">{buildAvatar(edit, "sm", true)} {../username}</a>
-								</div>
-							</li>
-							{{{ end }}}
-						</ul>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<div class="users row">
+		<h1>[[pages:account/blocks, {username}]]</h1>
+
+		<div class="col-sm-8 col-xs-12">
+			<ul id="users-container" class="users-container" data-nextstart="{nextStart}">
+				<!-- IMPORT partials/users_list.tpl -->
+			</ul>
+			<div class="alert alert-warning text-center"<!-- IF users.length --> style="display: none;"<!-- END -->>[[user:has_no_blocks]]</div>
+			<!-- IMPORT partials/paginator.tpl -->
+		</div>
+		<div class="col-sm-4 col-xs-12">
+			<div class="panel panel-default">
+				<div class="panel-body form">
+					<div class="form-group">
+						<label for="user-search">[[users:search]]</label>
+						<input class="form-control" type="text" id="user-search" placeholder="[[users:enter_username]]" />
+						<ul class="block-edit list-group">
+							{{{ each edit }}}
+							<li class="list-group-item clearfix">
+								<button class="btn btn-sm btn-primary pull-right" data-uid="{../uid}" data-action="toggle">[[user:block_toggle]]</button>
+								<div class="pull-left">
+									<a href="{config.relative_path}/uid/{../uid}">{buildAvatar(edit, "sm", true)} {../username}</a>
+								</div>
+							</li>
+							{{{ end }}}
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </div>

package/templates/account/categories.tpl

@@ -1,28 +1,28 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-
-	<div class="row">
-		<h1>{title}</h1>
-		<div class="col-lg-12">
-			<div class="btn-group bottom-sheet" component="category/watch/all">
-				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
-					<span>[[user:change_all]]</span>
-					<span class="caret"></span>
-				</button>
-				<ul class="dropdown-menu">
-					<li><a href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
-					<li><a href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
-					<li><a href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
-				</ul>
-			</div>
-		</div>
-		<div class="col-lg-12">
-			<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
-				{{{each categories}}}
-				<!-- IMPORT partials/account/category-item.tpl -->
-				{{{end}}}
-			</ul>
-			<!-- IMPORT partials/paginator.tpl -->
-		</div>
-	</div>
-</div>
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<div class="row">
+		<h1>{title}</h1>
+		<div class="col-lg-12">
+			<div class="btn-group bottom-sheet" component="category/watch/all">
+				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+					<span>[[user:change_all]]</span>
+					<span class="caret"></span>
+				</button>
+				<ul class="dropdown-menu">
+					<li><a href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
+					<li><a href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
+					<li><a href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+				</ul>
+			</div>
+		</div>
+		<div class="col-lg-12">
+			<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+				{{{each categories}}}
+				<!-- IMPORT partials/account/category-item.tpl -->
+				{{{end}}}
+			</ul>
+			<!-- IMPORT partials/paginator.tpl -->
+		</div>
+	</div>
+</div>

package/templates/account/consent.tpl

@@ -1,69 +1,69 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-	<h2>[[user:consent.title]]</h2>
-	<p class="lead">[[user:consent.lead]]</p>
-	<p>[[user:consent.intro]]</p>
-
-	<hr />
-
-	<div class="row">
-		<div class="col-sm-6">
-			<!-- IF gdpr_consent -->
-			<div class="alert alert-success">
-				<i class="fa fa-check pull-right fa-3x"></i>
-				[[user:consent.received]]
-			</div>
-			<!-- ELSE -->
-			<div class="alert alert-warning">
-				[[user:consent.not_received]]
-				<br /><br />
-				<div class="text-center">
-					<button class="btn btn-warning" data-action="consent">[[user:consent.give]]</button>
-				</div>
-			</div>
-			<!-- END -->
-			<div class="panel panel-default">
-				<div class="panel-body">
-					<p>[[user:consent.email_intro]]</p>
-					<!-- IF digest.enabled -->
-					<p>[[user:consent.digest_frequency, {digest.frequency}]]</p>
-					<!-- ELSE -->
-					[[user:consent.digest_off]]
-					<!-- END -->
-
-					<div class="text-center">
-						<a class="btn btn-default" href="./settings">
-							<i class="fa fa-cog"></i>
-							[[pages:account/settings]]
-						</a>
-					</div>
-				</div>
-			</div>
-		</div>
-		<div class="col-sm-6">
-			<div class="panel panel-default">
-				<div class="panel-body">
-					<p><strong>[[user:consent.right_of_access]]</strong></p>
-					<p>[[user:consent.right_of_access_description]]</p>
-					<p><strong>[[user:consent.right_to_rectification]]</strong></p>
-					<p>[[user:consent.right_to_rectification_description]]</p>
-					<p><strong>[[user:consent.right_to_erasure]]</strong></p>
-					<p>[[user:consent.right_to_erasure_description]]</p>
-					<p><strong>[[user:consent.right_to_data_portability]]</strong></p>
-					<p>[[user:consent.right_to_data_portability_description]]</p>
-
-					<div class="btn-group-vertical btn-block">
-						<a data-action="export-profile" class="btn btn-default">
-							<i class="fa fa-download"></i> [[user:consent.export_profile]]
-						</a>
-						<a data-action="export-posts" class="btn btn-default">
-							<i class="fa fa-download"></i> [[user:consent.export_posts]]
-						</a>
-						<a data-action="export-uploads" class="btn btn-default">
-							<i class="fa fa-download"></i> [[user:consent.export_uploads]]
-						</a>
-					</div>
-				</div>
-			</div>
-	</div>
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+	<h2>[[user:consent.title]]</h2>
+	<p class="lead">[[user:consent.lead]]</p>
+	<p>[[user:consent.intro]]</p>
+
+	<hr />
+
+	<div class="row">
+		<div class="col-sm-6">
+			<!-- IF gdpr_consent -->
+			<div class="alert alert-success">
+				<i class="fa fa-check pull-right fa-3x"></i>
+				[[user:consent.received]]
+			</div>
+			<!-- ELSE -->
+			<div class="alert alert-warning">
+				[[user:consent.not_received]]
+				<br /><br />
+				<div class="text-center">
+					<button class="btn btn-warning" data-action="consent">[[user:consent.give]]</button>
+				</div>
+			</div>
+			<!-- END -->
+			<div class="panel panel-default">
+				<div class="panel-body">
+					<p>[[user:consent.email_intro]]</p>
+					<!-- IF digest.enabled -->
+					<p>[[user:consent.digest_frequency, {digest.frequency}]]</p>
+					<!-- ELSE -->
+					[[user:consent.digest_off]]
+					<!-- END -->
+
+					<div class="text-center">
+						<a class="btn btn-default" href="./settings">
+							<i class="fa fa-cog"></i>
+							[[pages:account/settings]]
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div class="col-sm-6">
+			<div class="panel panel-default">
+				<div class="panel-body">
+					<p><strong>[[user:consent.right_of_access]]</strong></p>
+					<p>[[user:consent.right_of_access_description]]</p>
+					<p><strong>[[user:consent.right_to_rectification]]</strong></p>
+					<p>[[user:consent.right_to_rectification_description]]</p>
+					<p><strong>[[user:consent.right_to_erasure]]</strong></p>
+					<p>[[user:consent.right_to_erasure_description]]</p>
+					<p><strong>[[user:consent.right_to_data_portability]]</strong></p>
+					<p>[[user:consent.right_to_data_portability_description]]</p>
+
+					<div class="btn-group-vertical btn-block">
+						<a data-action="export-profile" class="btn btn-default">
+							<i class="fa fa-download"></i> [[user:consent.export_profile]]
+						</a>
+						<a data-action="export-posts" class="btn btn-default">
+							<i class="fa fa-download"></i> [[user:consent.export_posts]]
+						</a>
+						<a data-action="export-uploads" class="btn btn-default">
+							<i class="fa fa-download"></i> [[user:consent.export_uploads]]
+						</a>
+					</div>
+				</div>
+			</div>
+	</div>
 </div>

package/templates/account/edit/email.tpl

@@ -1,30 +1,30 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-
-	<form class="form-horizontal edit-form">
-		<div class="control-group">
-			<label class="control-label" for="inputNewEmail">[[user:email]]</label>
-			<div class="controls">
-				<input class="form-control" type="text" id="inputNewEmail" placeholder="[[user:email]]" value="{email}">
-			</div>
-		</div>
-
-		<!-- disables autocomplete on FF --><input type="password" style="display:none">
-
-		<!-- IF isSelf -->
-		<div class="control-group">
-			<label class="control-label" for="inputCurrentPassword">[[user:current_password]]</label>
-			<div class="controls">
-				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-			</div>
-		</div>
-		<!-- ENDIF isSelf -->
-
-		<input type="hidden" name="uid" id="inputUID" value="{uid}" />
-
-		<br/>
-		<div class="form-actions">
-			<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_email]]</button>
-		</div>
-	</form>
-</div>
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<form class="form-horizontal edit-form">
+		<div class="control-group">
+			<label class="control-label" for="inputNewEmail">[[user:email]]</label>
+			<div class="controls">
+				<input class="form-control" type="text" id="inputNewEmail" placeholder="[[user:email]]" value="{email}">
+			</div>
+		</div>
+
+		<!-- disables autocomplete on FF --><input type="password" style="display:none">
+
+		<!-- IF isSelf -->
+		<div class="control-group">
+			<label class="control-label" for="inputCurrentPassword">[[user:current_password]]</label>
+			<div class="controls">
+				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+			</div>
+		</div>
+		<!-- ENDIF isSelf -->
+
+		<input type="hidden" name="uid" id="inputUID" value="{uid}" />
+
+		<br/>
+		<div class="form-actions">
+			<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_email]]</button>
+		</div>
+	</form>
+</div>

package/templates/account/edit/password.tpl

@@ -1,32 +1,32 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-
-	<form class="edit-form">
-		<!-- disables autocomplete on FF --><input type="password" style="display:none">
-
-		<!-- IF isSelf -->
-		<div class="form-group">
-			<label class="control-label" for="inputCurrentPassword">[[user:current_password]]</label>
-			<div class="controls">
-				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-			</div>
-		</div>
-		<!-- ENDIF isSelf -->
-
-		<div class="form-group">
-			<label class="control-label" for="inputNewPassword">[[user:password]]</label>
-			<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
-			<span class="form-feedback" id="password-notify"></span>
-		</div>
-
-		<div class="form-group">
-			<label class="control-label" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
-			<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
-			<span class="form-feedback" id="password-confirm-notify"></span>
-		</div>
-		
-		<div class="form-actions">
-			<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
-		</div>
-	</form>
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<form class="edit-form">
+		<!-- disables autocomplete on FF --><input type="password" style="display:none">
+
+		<!-- IF isSelf -->
+		<div class="form-group">
+			<label class="control-label" for="inputCurrentPassword">[[user:current_password]]</label>
+			<div class="controls">
+				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+			</div>
+		</div>
+		<!-- ENDIF isSelf -->
+
+		<div class="form-group">
+			<label class="control-label" for="inputNewPassword">[[user:password]]</label>
+			<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
+			<span class="form-feedback" id="password-notify"></span>
+		</div>
+
+		<div class="form-group">
+			<label class="control-label" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
+			<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
+			<span class="form-feedback" id="password-confirm-notify"></span>
+		</div>
+		
+		<div class="form-actions">
+			<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
+		</div>
+	</form>
 </div>

package/templates/account/edit/username.tpl

@@ -1,30 +1,30 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-
-	<form class="form-horizontal edit-form">
-		<div class="control-group">
-			<label class="control-label" for="inputNewUsername">[[user:username]]</label>
-			<div class="controls">
-				<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
-			</div>
-		</div>
-
-		<!-- disables autocomplete on FF --><input type="password" style="display:none">
-
-		<!-- IF isSelf -->
-		<div class="control-group">
-			<label class="control-label" for="inputCurrentPassword">[[user:current_password]]</label>
-			<div class="controls">
-				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-			</div>
-		</div>
-		<!-- ENDIF isSelf -->
-
-		<input type="hidden" name="uid" id="inputUID" value="{uid}" />
-
-		<br/>
-		<div class="form-actions">
-			<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_username]]</button>
-		</div>
-	</form>
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<form class="form-horizontal edit-form">
+		<div class="control-group">
+			<label class="control-label" for="inputNewUsername">[[user:username]]</label>
+			<div class="controls">
+				<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
+			</div>
+		</div>
+
+		<!-- disables autocomplete on FF --><input type="password" style="display:none">
+
+		<!-- IF isSelf -->
+		<div class="control-group">
+			<label class="control-label" for="inputCurrentPassword">[[user:current_password]]</label>
+			<div class="controls">
+				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
+			</div>
+		</div>
+		<!-- ENDIF isSelf -->
+
+		<input type="hidden" name="uid" id="inputUID" value="{uid}" />
+
+		<br/>
+		<div class="form-actions">
+			<button id="submitBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_username]]</button>
+		</div>
+	</form>
 </div>

package/templates/account/followers.tpl

@@ -1,17 +1,17 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-
-	<div class="users row">
-		<h1>[[pages:{template.name}, {username}]]</h1>
-
-		<ul id="users-container" class="users-container" data-nextstart="{nextStart}">
-			<!-- IMPORT partials/users_list.tpl -->
-		</ul>
-
-		<!-- IF !users.length -->
-		<div class="alert alert-warning text-center">[[user:has_no_follower]]</div>
-		<!-- ENDIF !users.length -->
-
-		<!-- IMPORT partials/paginator.tpl -->
-	</div>
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<div class="users row">
+		<h1>[[pages:{template.name}, {username}]]</h1>
+
+		<ul id="users-container" class="users-container" data-nextstart="{nextStart}">
+			<!-- IMPORT partials/users_list.tpl -->
+		</ul>
+
+		<!-- IF !users.length -->
+		<div class="alert alert-warning text-center">[[user:has_no_follower]]</div>
+		<!-- ENDIF !users.length -->
+
+		<!-- IMPORT partials/paginator.tpl -->
+	</div>
 </div>