nodebb-theme-persona 12.1.4 → 13.0.0

package/templates/partials/menu.tpl

@@ -1,55 +1,113 @@
-			<div class="navbar-header">
-				<button type="button" class="navbar-toggle pull-left" id="mobile-menu">
-					<i class="fa fa-lg fa-fw fa-bars unread-count" data-content="{unreadCount.mobileUnread}" data-unread-url="{unreadCount.unreadUrl}"></i>
+			<div class="d-flex align-items-center me-auto">
+				<button type="button" class="navbar-toggler border-0" id="mobile-menu">
+					<i class="fa fa-lg fa-fw fa-bars unread-count" ></i>
+					<span component="unread/icon" class="notification-icon fa fa-fw fa-book unread-count" data-content="{unreadCount.mobileUnread}" data-unread-url="{unreadCount.unreadUrl}"></span>
 				</button>
-				{{{ if config.loggedIn }}}
-				<button type="button" class="navbar-toggle" id="mobile-chats">
-					<span component="notifications/icon" class="notification-icon fa fa-fw fa-bell-o unread-count" data-content="{unreadCount.notification}"></span>
-					<span component="chat/icon" class="notification-icon fa fa-fw fa-comments unread-count" data-content="{unreadCount.chat}"></span>
-					{buildAvatar(user, "md", true)}
-				</button>
-				{{{ end }}}
+				<div class="d-inline-flex align-items-center">
+					{{{ if brand:logo }}}
+					<a class="navbar-brand" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}">
+						<img alt="{brand:logo:alt}" class="{brand:logo:display} forum-logo d-inline-block align-text-bottom" src="{brand:logo}?{config.cache-buster}" />
+					</a>
+					{{{ end }}}
+					{{{ if config.showSiteTitle }}}
+					<a class="navbar-brand text-truncate" href="{{{ if title:url }}}{title:url}{{{ else }}}{relative_path}/{{{ end }}}">
+						<span class="forum-title">{config.siteTitle}</span>
+					</a>
+					{{{ end }}}
+				</div>
+			</div>
 
-				{{{ if config.searchEnabled }}}
-				<div class="navbar-search visible-xs pull-right">
-					<form action="{config.relative_path}/search" method="GET">
-						<button type="button" class="btn btn-link"><i class="fa fa-lg fa-fw fa-search" title="[[global:header.search]]"></i></button>
-						<input autocomplete="off" type="text" class="form-control hidden" name="term" placeholder="[[global:search]]"/>
-						<button class="btn btn-primary hidden" type="submit"></button>
-						<input type="text" class="hidden" name="in" value="{config.searchDefaultInQuick}" />
-					</form>
-					<div class="quick-search-container hidden">
-						<div class="quick-search-results-container"></div>
-					</div>
+			{{{ if config.searchEnabled }}}
+			<div class="navbar-search visible-xs">
+				<form action="{config.relative_path}/search" method="GET">
+					<button type="button" class="btn btn-link"><i class="fa fa-lg fa-fw fa-search" title="[[global:header.search]]"></i></button>
+					<input autocomplete="off" type="text" class="form-control hidden" name="term" placeholder="[[global:search]]"/>
+					<button class="btn btn-primary hidden" type="submit"></button>
+					<input type="text" class="hidden" name="in" value="{config.searchDefaultInQuick}" />
+				</form>
+				<div class="quick-search-container hidden">
+					<div class="quick-search-results-container"></div>
 				</div>
-				{{{ end }}}
+			</div>
+			{{{ end }}}
 
-				<!-- IF brand:logo -->
-				<a href="<!-- IF brand:logo:url -->{brand:logo:url}<!-- ELSE -->{relative_path}/<!-- ENDIF brand:logo:url -->">
-					<img alt="{brand:logo:alt}" class="{brand:logo:display} forum-logo" src="{brand:logo}?{config.cache-buster}" />
-				</a>
-				<!-- ENDIF brand:logo -->
-				<!-- IF config.showSiteTitle -->
-				<a href="<!-- IF title:url -->{title:url}<!-- ELSE -->{relative_path}/<!-- ENDIF title:url -->">
-					<h1 class="navbar-brand forum-title">{config.siteTitle}</h1>
-				</a>
-				<!-- ENDIF config.showSiteTitle -->
+			{{{ if config.loggedIn }}}
+			<button type="button" class="navbar-toggler border-0" id="mobile-chats">
+				<span component="notifications/icon" class="notification-icon fa fa-fw fa-bell-o unread-count" data-content="{unreadCount.notification}"></span>
+				<span component="chat/icon" class="notification-icon fa fa-fw fa-comments unread-count" data-content="{unreadCount.chat}"></span>
+				{buildAvatar(user, "32px", true)}
+			</button>
+			{{{ end }}}
 
-				<div component="navbar/title" class="visible-xs hidden">
-					<span></span>
-				</div>
+			<div component="navbar/title" class="visible-xs hidden">
+				<span></span>
 			</div>
 
-			<div id="nav-dropdown" class="hidden-xs">
-				<!-- IF !maintenanceHeader -->
-				<!-- IF config.loggedIn -->
+			<div id="nav-dropdown" class="collapse navbar-collapse d-none d-lg-block">
+				<ul id="main-nav" class="navbar-nav me-auto mb-2 mb-lg-0">
+					{{{each navigation}}}
+					<!-- IF function.displayMenuItem, @index -->
+					<li class="nav-item {navigation.class}{{{ if navigation.dropdown }}} dropdown{{{ end }}}" title="{navigation.title}">
+						<a class="nav-link navigation-link {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+						{{{ if navigation.dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{navigation.route}"{{{ end }}} {{{ if navigation.id }}}id="{navigation.id}"{{{ end }}}{{{ if navigation.targetBlank }}} target="_blank"{{{ end }}}>
+							{{{ if navigation.iconClass }}}
+							<i class="fa fa-fw {navigation.iconClass}" data-content="{navigation.content}"></i>
+							{{{ end }}}
+							{{{ if navigation.text }}}
+							<span class="{navigation.textClass}">{navigation.text}</span>
+							{{{ end }}}
+							{{{ if navigation.dropdown}}}
+							<i class="fa fa-caret-down"></i>
+							{{{ end }}}
+						</a>
+						{{{ if navigation.dropdown }}}
+						<ul class="dropdown-menu">
+							{navigation.dropdownContent}
+						</ul>
+						{{{ end }}}
+					</li>
+					<!-- ENDIF function.displayMenuItem -->
+					{{{end}}}
+				</ul>
+
+				{{{ if config.searchEnabled }}}
+				<div class="navbar-nav mb-2 mb-lg-0 position-relative">
+					<form component="search/form" id="search-form" class="d-flex justify-content-end align-items-center" role="search" method="GET">
+						<div component="search/fields" class="hidden" id="search-fields">
+							<div class="input-group flex-nowrap">
+								<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
 
-				<ul id="logged-in-menu" class="nav navbar-nav navbar-right">
-					<li class="notifications dropdown text-center hidden-xs" component="notifications">
-						<a href="{relative_path}/notifications" title="[[global:header.notifications]]" class="dropdown-toggle" data-toggle="dropdown" id="notif_dropdown" data-ajaxify="false" role="button">
+								<button href="#" class="btn btn-outline-secondary">
+									<i class="fa fa-gears fa-fw advanced-search-link"></i>
+								</button>
+							</div>
+
+							<div id="quick-search-container" class="quick-search-container dropdown-menu d-block mt-2 hidden">
+								<div class="form-check filter-category mb-2 ms-4">
+									<input class="form-check-input" type="checkbox" checked>
+									<label class="form-check-label name"></label>
+								</div>
+
+								<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
+								<div class="quick-search-results-container"></div>
+							</div>
+							<button type="submit" class="btn btn-outline-secondary hide">[[global:search]]</button>
+						</div>
+
+						<li id="" class="nav-item"><a component="search/button" id="search-button" href="#" class="nav-link"><i class="fa fa-search fa-fw" title="Search"></i></a></li>
+					</form>
+
+				</div>
+				{{{ end }}}
+
+				{{{ if !maintenanceHeader }}}
+				{{{ if config.loggedIn }}}
+				<ul id="logged-in-menu" class="navbar-nav me-0 mb-2 mb-lg-0 align-items-center">
+					<li class="nav-item notifications dropdown d-none d-sm-block" component="notifications" title="[[global:header.notifications]]">
+						<a href="{relative_path}/notifications" class="nav-link" data-bs-toggle="dropdown" id="notif_dropdown" data-ajaxify="false" role="button">
 							<i component="notifications/icon" class="fa fa-fw fa-bell-o unread-count" data-content="{unreadCount.notification}"></i>
 						</a>
-						<ul class="dropdown-menu" aria-labelledby="notif_dropdown">
+						<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="notif_dropdown">
 							<li>
 								<ul component="notifications/list" class="notification-list">
 									<li class="loading-text">
@@ -58,20 +116,20 @@
 								</ul>
 							</li>
 							<li class="notif-dropdown-link">
-								<div class="btn-group btn-group-justified">
-									<a role="button" href="#" class="btn btn-secondary mark-all-read"><i class="fa fa-check-double"></i> [[notifications:mark_all_read]]</a>
-									<a class="btn btn-secondary" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see_all]]</a>
+								<div class="btn-group d-flex justify-content-center">
+									<a role="button" href="#" class="btn btn-light mark-all-read"><i class="fa fa-check-double"></i> [[notifications:mark_all_read]]</a>
+									<a class="btn btn-light" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see_all]]</a>
 								</div>
 							</li>
 						</ul>
 					</li>
 
 					<!-- IF canChat -->
-					<li class="chats dropdown">
-						<a class="dropdown-toggle" data-toggle="dropdown" href="{relative_path}/user/{user.userslug}/chats" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown" data-ajaxify="false" role="button">
-							<i component="chat/icon" class="fa fa-comment-o fa-fw unread-count" data-content="{unreadCount.chat}"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
+					<li class="nav-item chats dropdown" title="[[global:header.chats]]">
+						<a class="nav-link" data-bs-toggle="dropdown" href="{relative_path}/user/{user.userslug}/chats" id="chat_dropdown" component="chat/dropdown" data-ajaxify="false" role="button">
+							<i component="chat/icon" class="fa fa-comment-o fa-fw unread-count" data-content="{unreadCount.chat}"></i> <span class="d-inline d-sm-none">[[global:header.chats]]</span>
 						</a>
-						<ul class="dropdown-menu" aria-labelledby="chat_dropdown">
+						<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="chat_dropdown">
 							<li>
 								<ul component="chat/list" class="chat-list chats-list">
 									<li class="loading-text">
@@ -80,192 +138,127 @@
 								</ul>
 							</li>
 							<li class="notif-dropdown-link">
-								<div class="btn-group btn-group-justified">
-									<a class="btn btn-secondary mark-all-read" href="#" component="chats/mark-all-read"><i class="fa fa-check-double"></i> [[modules:chat.mark_all_read]]</a>
-									<a class="btn btn-secondary" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-comments"></i> [[modules:chat.see_all]]</a>
+								<div class="btn-group d-flex justify-content-center">
+									<a class="btn btn-light mark-all-read" href="#" component="chats/mark-all-read"><i class="fa fa-check-double"></i> [[modules:chat.mark_all_read]]</a>
+									<a class="btn btn-light" href="{relative_path}/user/{user.userslug}/chats"><i class="fa fa-comments"></i> [[modules:chat.see_all]]</a>
 								</div>
 							</li>
 						</ul>
 					</li>
 					<!-- ENDIF canChat -->
 
-					<li id="user_label" class="dropdown">
-						<label for="user-control-list-check" class="dropdown-toggle" data-toggle="dropdown" id="user_dropdown" title="[[global:header.profile]]" role="button">
-							{buildAvatar(user, "md", true)}
-							<span id="user-header-name" class="visible-xs-inline">{user.username}</span>
+					<li id="user_label" class="nav-item dropdown" title="[[global:header.profile]]">
+						<label for="user-control-list-check" class="" data-bs-toggle="dropdown" id="user_dropdown" role="button">
+							{buildAvatar(user, "32px", true)}
+							<span id="user-header-name" class="d-block d-sm-none">{user.username}</span>
 						</label>
 						<input type="checkbox" class="hidden" id="user-control-list-check" aria-hidden="true">
-						<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu" aria-labelledby="user_dropdown">
+						<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu dropdown-menu-end" aria-labelledby="user_dropdown">
 							<li>
-								<a component="header/profilelink" href="{relative_path}/user/{user.userslug}">
+								<a class="dropdown-item" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
 									<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i> <span component="header/username">{user.username}</span>
 								</a>
 							</li>
-							<li role="presentation" class="divider"></li>
+							<li role="presentation" class="dropdown-divider"></li>
+							<li><h6 class="dropdown-header">[[global:status]]</h6></li>
 							<li>
-								<a href="#" class="user-status" data-status="online">
+								<a href="#" class="dropdown-item user-status" data-status="online">
 									<i class="fa fa-fw fa-circle status online"></i><span <!-- IF user.online -->class="bold"<!-- ENDIF user.online -->> [[global:online]]</span>
 								</a>
 							</li>
 							<li>
-								<a href="#" class="user-status" data-status="away">
+								<a href="#" class="dropdown-item user-status" data-status="away">
 									<i class="fa fa-fw fa-circle status away"></i><span <!-- IF user.away -->class="bold"<!-- ENDIF user.away -->> [[global:away]]</span>
 								</a>
 							</li>
 							<li>
-								<a href="#" class="user-status" data-status="dnd">
+								<a href="#" class="dropdown-item user-status" data-status="dnd">
 									<i class="fa fa-fw fa-circle status dnd"></i><span <!-- IF user.dnd -->class="bold"<!-- ENDIF user.dnd -->> [[global:dnd]]</span>
 								</a>
 							</li>
 							<li>
-								<a href="#" class="user-status" data-status="offline">
+								<a href="#" class="dropdown-item user-status" data-status="offline">
 									<i class="fa fa-fw fa-circle status offline"></i><span <!-- IF user.offline -->class="bold"<!-- ENDIF user.offline -->> [[global:invisible]]</span>
 								</a>
 							</li>
-							<li role="presentation" class="divider"></li>
+							<li role="presentation" class="dropdown-divider"></li>
 							<li>
-								<a component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit">
+								<a class="dropdown-item" component="header/profilelink/edit" href="{relative_path}/user/{user.userslug}/edit">
 									<i class="fa fa-fw fa-edit"></i> <span>[[user:edit-profile]]</span>
 								</a>
 							</li>
 							<li>
-								<a component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings">
+								<a class="dropdown-item" component="header/profilelink/settings" href="{relative_path}/user/{user.userslug}/settings">
 									<i class="fa fa-fw fa-gear"></i> <span>[[user:settings]]</span>
 								</a>
 							</li>
 							{{{ if showModMenu }}}
-							<li role="presentation" class="divider"></li>
-							<li class="dropdown-header">[[pages:moderator-tools]]</li>
+							<li role="presentation" class="dropdown-divider"></li>
+							<li><h6 class="dropdown-header">[[pages:moderator-tools]]</h6></li>
 							<li>
-								<a href="{relative_path}/flags">
+								<a class="dropdown-item" href="{relative_path}/flags">
 									<i class="fa fa-fw fa-flag"></i> <span>[[pages:flagged-content]]</span>
 								</a>
 							</li>
 							<li>
-								<a href="{relative_path}/post-queue">
+								<a class="dropdown-item" href="{relative_path}/post-queue">
 									<i class="fa fa-fw fa-list-alt"></i> <span>[[pages:post-queue]]</span>
 								</a>
 							</li>
 							<li>
-								<a href="{relative_path}/ip-blacklist">
+								<a class="dropdown-item" href="{relative_path}/ip-blacklist">
 									<i class="fa fa-fw fa-ban"></i> <span>[[pages:ip-blacklist]]</span>
 								</a>
 							</li>
 							{{{ else }}}
 							{{{ if postQueueEnabled }}}
 							<li>
-								<a href="{relative_path}/post-queue">
+								<a class="dropdown-item" href="{relative_path}/post-queue">
 									<i class="fa fa-fw fa-list-alt"></i> <span>[[pages:post-queue]]</span>
 								</a>
 							</li>
 							{{{ end }}}
 							{{{ end }}}
 
-							<li role="presentation" class="divider"></li>
+							<li role="presentation" class="dropdown-divider"></li>
 							<li component="user/logout">
 								<form method="post" action="{relative_path}/logout">
 									<input type="hidden" name="_csrf" value="{config.csrf_token}">
 									<input type="hidden" name="noscript" value="true">
-									<button type="submit" class="btn btn-link">
+									<button type="submit" class="dropdown-item">
 										<i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span>
 									</button>
 								</form>
 							</li>
 						</ul>
 					</li>
-
 				</ul>
-				<!-- ELSE -->
-				<ul id="logged-out-menu" class="nav navbar-nav navbar-right">
-					<!-- IF allowRegistration -->
-					<li>
-						<a href="{relative_path}/register">
-							<i class="fa fa-pencil fa-fw hidden-sm hidden-md hidden-lg"></i>
+				{{{ else }}}
+				<ul id="logged-out-menu" class="navbar-nav me-0 mb-2 mb-lg-0 align-items-center">
+					{{{ if allowRegistration }}}
+					<li class="nav-item">
+						<a class="nav-link" href="{relative_path}/register">
+							<i class="fa fa-pencil fa-fw d-inline-block d-sm-none"></i>
 							<span>[[global:register]]</span>
 						</a>
 					</li>
-					<!-- ENDIF allowRegistration -->
-					<li>
-						<a href="{relative_path}/login">
-							<i class="fa fa-sign-in fa-fw hidden-sm hidden-md hidden-lg"></i>
+					{{{ end }}}
+					<li class="nav-item">
+						<a class="nav-link" href="{relative_path}/login">
+							<i class="fa fa-sign-in fa-fw d-inline-block d-sm-none"></i>
 							<span>[[global:login]]</span>
 						</a>
 					</li>
 				</ul>
-				<!-- ENDIF config.loggedIn -->
-				<!-- IF config.searchEnabled -->
-				<ul class="nav navbar-nav navbar-right">
-					<li>
-						<form id="search-form" class="navbar-form navbar-right hidden-xs" role="search" method="GET">
-							<button id="search-button" type="button" class="btn btn-link"><i class="fa fa-search fa-fw" title="[[global:header.search]]"></i></button>
-							<div class="hidden" id="search-fields">
-								<div class="form-group">
-									<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
-									<a href="#"><i class="fa fa-gears fa-fw advanced-search-link"></i></a>
-								</div>
-								<button type="submit" class="btn btn-default hide">[[global:search]]</button>
-							</div>
-						</form>
-						<div id="quick-search-container" class="quick-search-container hidden">
-							<div class="checkbox filter-category">
-								<label>
-									<input type="checkbox" checked><span class="name"></span>
-								</label>
-							</div>
-							<div class="text-center loading-indicator"><i class="fa fa-spinner fa-spin"></i></div>
-							<div class="quick-search-results-container"></div>
-						</div>
-					</li>
-					<li class="visible-xs" id="search-menu">
-						<a href="{relative_path}/search">
-							<i class="fa fa-search fa-fw"></i> [[global:search]]
-						</a>
-					</li>
-				</ul>
-				<!-- ENDIF config.searchEnabled -->
-
-				<ul class="nav navbar-nav navbar-right hidden-xs">
-					<li>
-						<a href="#" id="reconnect" class="hide" title="[[global:reconnecting-message, {config.siteTitle}]]">
-							<i class="fa fa-check"></i>
-						</a>
-					</li>
-				</ul>
-
-				<ul id="main-nav" class="nav navbar-nav">
-					{{{each navigation}}}
-					<!-- IF function.displayMenuItem, @index -->
-					<li class="{navigation.class}{{{ if navigation.dropdown }}} dropdown{{{ end }}}">
-						<a title="{navigation.title}" class="navigation-link {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
-						{{{ if navigation.dropdown }}} href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{navigation.route}"{{{ end }}} {{{ if navigation.id }}}id="{navigation.id}"{{{ end }}}{{{ if navigation.targetBlank }}} target="_blank"{{{ end }}}>
-							{{{ if navigation.iconClass }}}
-							<i class="fa fa-fw {navigation.iconClass}" data-content="{navigation.content}"></i>
-							{{{ end }}}
-							{{{ if navigation.text }}}
-							<span class="{navigation.textClass}">{navigation.text}</span>
-							{{{ end }}}
-							{{{ if navigation.dropdown}}}
-							<i class="fa fa-caret-down"></i>
-							{{{ end }}}
-						</a>
-						{{{ if navigation.dropdown }}}
-						<ul class="dropdown-menu">
-							{navigation.dropdownContent}
-						</ul>
-						{{{ end }}}
-					</li>
-					<!-- ENDIF function.displayMenuItem -->
-					{{{end}}}
-				</ul>
-
-				<!-- ELSE -->
-				<ul class="nav navbar-nav navbar-right">
-					<li>
+				{{{ end }}}
+				{{{ else }}}
+				<ul class="navbar-nav me-0 mb-2 mb-lg-0"></ul>
+					<li class="nav-item">
 						<a href="{relative_path}/login">
-							<i class="fa fa-sign-in fa-fw hidden-sm hidden-md hidden-lg"></i>
+							<i class="fa fa-sign-in fa-fw d-block d-sm-none"></i>
 							<span>[[global:login]]</span>
 						</a>
 					</li>
 				</ul>
-				<!-- ENDIF !maintenanceHeader -->
+				{{{ end }}}
 			</div>

package/templates/partials/notifications_list.tpl

@@ -7,10 +7,10 @@
 <li class="{notifications.readClass}" data-nid="{notifications.nid}" data-path="{notifications.path}" <!-- IF notifications.pid --> data-pid="{notifications.pid}"<!-- ENDIF notifications.pid --><!-- IF notifications.tid --> data-tid="{notifications.tid}"<!-- ENDIF notifications.tid -->>
 	<!-- IF notifications.image -->
 	<!-- IF notifications.from -->
-	<a href="{config.relative_path}/user/{notifications.user.userslug}"><img class="pull-left user-img avatar avatar-md avatar-rounded"src="{notifications.image}" /></a>
+	<a href="{config.relative_path}/user/{notifications.user.userslug}"><img class="float-start user-img avatar avatar-rounded" style="--avatar-size: 32px;" src="{notifications.image}" /></a>
 	<!-- ENDIF notifications.from -->
 	<!-- ELSE -->
-	<a href="{config.relative_path}/user/{notifications.user.userslug}"><div class="pull-left avatar avatar-md avatar-rounded" style="background-color: {notifications.user.icon:bgColor};">{notifications.user.icon:text}</div></a>
+	<a href="{config.relative_path}/user/{notifications.user.userslug}"><div class="float-start avatar avatar-rounded" style="--avatar-size: 32px; background-color: {notifications.user.icon:bgColor};">{notifications.user.icon:text}</div></a>
 	<!-- ENDIF notifications.image -->
 
 	<a href="{notifications.path}" class="notification-chat-content deco-none">

package/templates/partials/paginator.tpl

@@ -1,45 +1,45 @@
-<div component="pagination" class="text-center pagination-container<!-- IF !pagination.pages.length --> hidden<!-- ENDIF !pagination.pages.length -->">
-	<ul class="pagination hidden-xs">
-		<li class="previous pull-left<!-- IF !pagination.prev.active --> disabled<!-- ENDIF !pagination.prev.active -->">
-			<a href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+<div component="pagination" class="pagination-container<!-- IF !pagination.pages.length --> hidden<!-- ENDIF !pagination.pages.length -->">
+	<ul class="pagination hidden-xs justify-content-center">
+		<li class="page-item previous float-start<!-- IF !pagination.prev.active --> disabled<!-- ENDIF !pagination.prev.active -->">
+			<a class="page-link" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
 		{{{each pagination.pages}}}
 			<!-- IF pagination.pages.separator -->
-			<li component="pagination/select-page" class="page select-page">
-				<a href="#"><i class="fa fa-ellipsis-h"></i></a>
+			<li component="pagination/select-page" class="page-item page select-page">
+				<a class="page-link" href="#"><i class="fa fa-ellipsis-h"></i></a>
 			</li>
 			<!-- ELSE -->
-			<li class="page<!-- IF pagination.pages.active --> active<!-- ENDIF pagination.pages.active -->" >
-				<a href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
+			<li class="page-item page<!-- IF pagination.pages.active --> active<!-- ENDIF pagination.pages.active -->" >
+				<a class="page-link" href="?{pagination.pages.qs}" data-page="{pagination.pages.page}">{pagination.pages.page}</a>
 			</li>
 			<!-- ENDIF pagination.pages.separator -->
 		{{{end}}}
 
-		<li class="next pull-right<!-- IF !pagination.next.active --> disabled<!-- ENDIF !pagination.next.active -->">
-			<a href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+		<li class="page-item next float-end<!-- IF !pagination.next.active --> disabled<!-- ENDIF !pagination.next.active -->">
+			<a class="page-link" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 	</ul>
 
-	<ul class="pagination hidden-sm hidden-md hidden-lg">
-		<li class="first<!-- IF !pagination.prev.active --> disabled<!-- ENDIF !pagination.prev.active -->">
-			<a href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
+	<ul class="pagination hidden-sm hidden-md hidden-lg justify-content-center">
+		<li class="page-item first<!-- IF !pagination.prev.active --> disabled<!-- ENDIF !pagination.prev.active -->">
+			<a class="page-link" href="?{pagination.first.qs}" data-page="1"><i class="fa fa-fast-backward"></i> </a>
 		</li>
 
-		<li class="previous<!-- IF !pagination.prev.active --> disabled<!-- ENDIF !pagination.prev.active -->">
-			<a href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
+		<li class="page-item previous<!-- IF !pagination.prev.active --> disabled<!-- ENDIF !pagination.prev.active -->">
+			<a class="page-link" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
-		<li component="pagination/select-page" class="page select-page">
-			<a href="#">{pagination.currentPage} / {pagination.pageCount}</a>
+		<li component="pagination/select-page" class="page-item page select-page">
+			<a class="page-link" href="#">{pagination.currentPage} / {pagination.pageCount}</a>
 		</li>
 
-		<li class="next<!-- IF !pagination.next.active --> disabled<!-- ENDIF !pagination.next.active -->">
-			<a href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
+		<li class="page-item next<!-- IF !pagination.next.active --> disabled<!-- ENDIF !pagination.next.active -->">
+			<a class="page-link" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 
-		<li class="last<!-- IF !pagination.next.active --> disabled<!-- ENDIF !pagination.next.active -->">
-			<a href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
+		<li class="page-item last<!-- IF !pagination.next.active --> disabled<!-- ENDIF !pagination.next.active -->">
+			<a class="page-link" href="?{pagination.last.qs}" data-page="{pagination.pageCount}"><i class="fa fa-fast-forward"></i> </a>
 		</li>
 	</ul>
 </div>

package/templates/partials/post_bar.tpl

@@ -1,10 +1,10 @@
-<div class="topic-main-buttons pull-right inline-block">
-	<span class="loading-indicator btn pull-left hidden" done="0">
+<div class="topic-main-buttons float-end d-inline-block">
+	<span class="loading-indicator btn float-start hidden" done="0">
 		<span class="hidden-xs">[[topic:loading_more_posts]]</span> <i class="fa fa-refresh fa-spin"></i>
 	</span>
 
 	<!-- IF loggedIn -->
-	<button component="topic/mark-unread" class="btn btn-sm btn-default" title="[[topic:mark_unread]]">
+	<button component="topic/mark-unread" class="btn btn-sm btn-outline-secondary" title="[[topic:mark_unread]]">
 		<i class="fa fa-fw fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"></span>
 	</button>
 	<!-- ENDIF loggedIn -->
@@ -13,7 +13,7 @@
 
 	<!-- IMPORT partials/topic/sort.tpl -->
 
-	<div class="inline-block">
+	<div class="d-inline-block">
 	<!-- IMPORT partials/thread_tools.tpl -->
 	</div>
 	<!-- IMPORT partials/topic/reply-button.tpl -->

package/templates/partials/posts_list.tpl

@@ -1,4 +1,4 @@
-<ul component="posts" class="posts-list" data-nextstart="{nextStart}">
+<ul component="posts" class="posts-list list-unstyled" data-nextstart="{nextStart}">
 	{{{each posts}}}
 	<!-- IMPORT partials/posts_list_item.tpl -->
 	{{{end}}}

package/templates/partials/posts_list_item.tpl

@@ -1,5 +1,5 @@
 <li component="post" class="posts-list-item row<!-- IF ../deleted --> deleted<!-- ELSE --><!-- IF ../topic.deleted --> deleted<!-- ENDIF --><!-- ENDIF -->{{{ if ../topic.scheduled }}} scheduled{{{ end }}}" data-pid="{../pid}" data-uid="{../uid}">
-    <div class="col-lg-11 col-sm-10 col-xs-9 post-body">
+    <div class="col-lg-11 col-sm-10 col-9 post-body">
         <a class="topic-title" href="{config.relative_path}/post/{../pid}">
             <!-- IF !../isMainPost -->RE: <!-- ENDIF -->{../topic.title}
         </a>
@@ -21,7 +21,7 @@
         {{{ end }}}
 
         <div class="post-info">
-            <a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(../user, "md", true, "user-img not-responsive")}</a>
+            <a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(../user, "28px", true, "user-img not-responsive")}</a>
 
             <div class="post-author">
                 <a href="{config.relative_path}/user/{../user.userslug}">{../user.displayname}</a><br />

package/templates/partials/quick-search-results.tpl

@@ -1,26 +1,29 @@
-<ul id="quick-search-results" class="quick-search-results">
+<ul id="quick-search-results" class="quick-search-results list-unstyled mb-0 p-0 overflow-auto" style="max-width:400px; max-height: 500px;">
 {{{each posts}}}
 <li data-tid="{posts.topic.tid}" data-pid="{posts.pid}">
-	<a href="{config.relative_path}/post/{posts.pid}" class="deco-none">
-		{buildAvatar(posts.user, "sm", true)}
-		<span class="quick-search-title">{posts.topic.title}</span>
+	<a href="{config.relative_path}/post/{posts.pid}"
+		class="text-decoration-none text-reset clearfix d-block text-truncate px-3 py-1">
+		{buildAvatar(posts.user, "24px", true)}
+		<span class="quick-search-title fw-bold">{posts.topic.title}</span>
 		<br/>
-		<p class="snippet">
+		<p class="snippet text-break text-wrap">
 		{posts.snippet}
 		</p>
-		<small class="post-info pull-right">
-			<span class="fa-stack" style="{function.generateCategoryBackground, posts.category}"><i style="color:{posts.category.color};" class="fa {posts.category.icon} fa-stack-1x"></i></span> {posts.category.name} &bull;
-			<span class="timeago" title="{posts.timestampISO}"></span>
+		<small class="post-info float-end">
+			<div class="category-item d-inline-block">
+				{buildCategoryIcon(./category, "24px", "rounded-circle")} {posts.category.name}
+				&bull; <span class="timeago" title="{posts.timestampISO}"></span>
+			</div>
 		</small>
-	 </a>
+	</a>
 </li>
 <!-- IF !@last -->
-<li role="separator" class="divider"></li>
+<li role="separator" class="dropdown-divider"></li>
 <!-- ENDIF -->
 {{{end}}}
 </ul>
 <!-- IF multiplePages -->
-<div class="text-center">
+<div class="text-center mt-2">
 	<a href="{url}">
 		[[search:see-more-results, {matchCount}]]
 	</a>

package/templates/partials/slideout-menu.tpl

@@ -1,4 +1,4 @@
 <section class="menu-section" data-section="navigation">
-	<ul class="menu-section-list"></ul>
+	<ul class="menu-section-list text-bg-dark"></ul>
 </section>
 

package/templates/partials/tags_list.tpl

@@ -1,5 +1,5 @@
 {{{each tags}}}
-<h3 class="pull-left tag-container">
-	<a href="{config.relative_path}/tags/{tags.valueEncoded}" data-value="{tags.valueEscaped}"><span class="tag-item tag-class-{tags.class}" data-tag="{tags.valueEscaped}">{tags.valueEscaped}</span><span class="tag-topic-count human-readable-number" title="{tags.score}">{tags.score}</span></a>
-</h3>
+<h5 class="float-start tag-container me-4 mb-4 fw-bold">
+	<a href="{config.relative_path}/tags/{tags.valueEncoded}" data-tag="{tags.valueEscaped}"><span class="tag-item text-muted text-uppercase text-nowrap tag-class-{tags.class} me-2" data-tag="{tags.valueEscaped}">{tags.valueEscaped}</span><span class="tag-topic-count text-primary text-nowrap human-readable-number" title="{tags.score}">{tags.score}</span></a>
+</h5>
 {{{end}}}