nodebb-theme-harmony 1.0.0 → 1.0.2

package/templates/flags/list.tpl

@@ -1,73 +1,6 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 
-<div class="row">
-	<div class="col-sm-4 col-md-3">
-		<!-- IMPORT partials/flags/filters.tpl -->
-	</div>
-	<div class="col-sm-8 col-md-9">
-		<!-- IF hasFilter -->
-		<div class="alert alert-warning">
-			<p class="float-end">
-				<a href="{config.relative_path}/flags">[[flags:filter-reset]]</a>
-			</p>
-			[[flags:filter-active]]
-		</div>
-		<!-- ENDIF hasFilter -->
-
-		<div class="btn-group float-end" component="flags/bulk-actions">
-			<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
-				<i class="fa fa-clone"></i> [[flags:bulk-actions]] <span class="caret"></span>
-			</button>
-			<ul class="dropdown-menu">
-				<li><a href="#" class="dropdown-item" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>
-				<li><a href="#" class="dropdown-item" data-action="bulk-mark-resolved">[[flags:bulk-resolve]]</a></li>
-			</ul>
-		</div>
-
-		<table class="table table-striped table-hover" component="flags/list">
-			<thead>
-				<tr>
-					<th>
-						<input type="checkbox" data-action="toggle-all" autocomplete="off" />
-					</th>
-					<th></th>
-					<th><span class="hidden-xs">[[flags:reports]] </span><i class="fa fa-user-plus"></i></th>
-					<th><span class="hidden-xs">[[flags:first-reported]] </span><i class="fa fa-clock-o"></i></th>
-					<th>[[flags:state]]</th>
-				</tr>
-			</thead>
-			<tbody>
-				<!-- IF !flags.length -->
-				<tr>
-					<td colspan="5">
-						<div class="alert alert-success text-center">
-							[[flags:no-flags]]
-						</div>
-					</td>
-				</tr>
-				<!-- ENDIF !flags.length -->
-				{{{each flags}}}
-				<tr data-flag-id="{../flagId}">
-					<td>
-						<input type="checkbox" autocomplete="off" />
-					</td>
-					<td>
-						<a href="{config.relative_path}/flags/{../flagId}">
-							<strong>{../target_readable}</strong>
-						</a>
-					</td>
-					<td>
-						{./heat}
-					</td>
-					<td><span class="timeago" title="{../datetimeISO}"></span></td>
-					<td><span class="badge bg-{../labelClass}">[[flags:state-{../state}]]</span></td>
-				</tr>
-				{{{end}}}
-			</tbody>
-		</table>
-
-		<!-- IMPORT partials/paginator.tpl -->
-	</div>
+<div class="d-flex flex-column gap-3">
+	<!-- IMPORT partials/flags/filters.tpl -->
+	<!-- IMPORT partials/flags/results.tpl -->
 </div>

package/templates/footer.tpl

@@ -5,8 +5,8 @@
 	</div>
 	<!-- IMPORT partials/mobile-footer.tpl -->
 	{{{ if !isSpider }}}
-	<div class="row">
-		<div component="toaster/tray" class="col-12 col-md-3 alert-window fixed-bottom pb-3 mb-5 mb-md-2 me-md-5 ms-auto">
+	<div class="">
+		<div component="toaster/tray" class="alert-window fixed-bottom mb-5 mb-md-2 me-2 me-md-5 ms-auto" style="width:300px; z-index: 1090;">
 			<div id="reconnect-alert" class="alert alert-dismissible alert-warning clearfix hide" component="toaster/toast">
 				<button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-hidden="true"></button>
 				<p>[[global:reconnecting-message, {config.siteTitle}]]</p>

package/templates/groups/details.tpl

@@ -2,10 +2,10 @@
 	<div class="cover position-absolute start-0 top-0" component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
 		<div class="container">
 			{{{ if group.isOwner }}}
-			<div class="controls">
-				<span class="upload"><i class="fa fa-fw fa-2x fa-upload"></i></span>
-				<span class="resize"><i class="fa fa-fw fa-2x fa-arrows"></i></span>
-				<span class="remove"><i class="fa fa-fw fa-2x fa-times"></i></span>
+			<div class="controls text-center">
+				<span class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></span>
+				<span class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></span>
+				<span class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></span>
 			</div>
 			<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
 			<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
@@ -13,24 +13,27 @@
 		</div>
 	</div>
 
-	<div class="d-flex flex-column pb-4 mb-4 mt-2 border-bottom">
-		<div class="d-flex justify-content-between mt-1 align-items-center">
+	<div class="d-flex flex-column flex-md-row justify-content-md-between pb-4 mb-4 mt-2 border-bottom">
+		<div class="d-flex flex-column mt-1">
 			<div class="d-flex align-items-center gap-2">
-				<h2 class="mb-0">{group.displayName}</h2>
-				{{{ if group.private }}}<span class="badge text-bg-light border border-1">[[groups:details.private]]</span>{{{ end }}}
-				{{{ if group.hidden }}}<span class="badge text-bg-light border border-1">[[groups:details.hidden]]</span>{{{ end }}}
+				<h3 class="mb-0">{group.displayName}</h3>
 			</div>
-
-			<div>
-				{{{ if loggedIn }}}
-				{function.membershipBtn, group}
-				{{{ end }}}
-				{{{ if isAdmin }}}
-				<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-light"><i class="fa fa-gear"></i> [[user:edit]]</a>
-				{{{ end }}}
+			<div class="d-flex gap-2">
+				{group.descriptionParsed}
+				<div>
+					{{{ if group.private }}}<span class="badge text-bg-light border border-1">[[groups:details.private]]</span>{{{ end }}}
+					{{{ if group.hidden }}}<span class="badge text-bg-light border border-1">[[groups:details.hidden]]</span>{{{ end }}}
+				</div>
 			</div>
 		</div>
-		{group.descriptionParsed}
+		<div>
+			{{{ if loggedIn }}}
+			{function.membershipBtn, group}
+			{{{ end }}}
+			{{{ if isAdmin }}}
+			<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-light"><i class="fa fa-gear"></i> [[user:edit]]</a>
+			{{{ end }}}
+		</div>
 	</div>
 
 	<div class="d-flex flex-column flex-md-row">
@@ -41,7 +44,7 @@
 		</div>
 		<!-- IMPORT partials/groups/sidebar-left.tpl -->
 
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width:0;">
+		<div class="flex-grow-1 ps-md-2 ps-lg-5" style="min-width:0;">
 			<div class="tab-content">
 				<div class="tab-pane fade show active" id="groups-posts" role="tabpanel">
 					<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>

package/templates/groups/list.tpl

@@ -4,7 +4,7 @@
 	{{{end}}}
 </div>
 <div class="groups list">
-	<h2 class="fw-semibold">[[pages:groups]]</h2>
+	<h3 class="fw-semibold">[[pages:groups]]</h3>
 	<div class="d-flex flex-wrap justify-content-between">
 		<div class="mb-2 mb-md-0">
 			<div class="text-sm d-flex flex-wrap align-items-center gap-2">

package/templates/groups/members.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT partials/breadcrumbs.tpl -->
 <div class="users">
 	<!-- IMPORT partials/users_list.tpl -->

package/templates/header.tpl

@@ -24,7 +24,7 @@
 </head>
 
 <body class="{bodyClass} skin-{{{if bootswatchSkin}}}{bootswatchSkin}{{{else}}}noskin{{{end}}}">
-	<div class="d-flex justify-content-between pb-4 pb-md-0">
+	<div class="layout-container d-flex justify-content-between pb-4 pb-md-0">
 		<!-- IMPORT partials/sidebar-left.tpl -->
 
 		<main id="panel" class="d-flex flex-column gap-3 flex-grow-1 mt-3" style="min-width: 0;">
@@ -39,6 +39,6 @@
 					document.documentElement.style.setProperty('--panel-offset', `0px`);
 				}
 			</script>
-			<div class="container d-flex flex-column gap-3" id="content">
+			<div class="container px-md-4 d-flex flex-column gap-3" id="content">
 			<!-- IMPORT partials/noscript/warning.tpl -->
 			<!-- IMPORT partials/noscript/message.tpl -->

package/templates/login.tpl

@@ -8,7 +8,7 @@
 		<h2 class="tracking-tight fw-semibold text-center">[[global:login]]</h2>
 		<div class="row justify-content-center gap-5">
 			{{{ if allowLocalLogin }}}
-			<div class="col-12 col-md-3 px-md-0">
+			<div class="col-12 col-md-5 col-lg-3 px-md-0">
 				<div class="login-block">
 					<div class="alert alert-danger alert-dismissible" id="login-error-notify" {{{ if error }}}style="display:block"{{{ else }}}style="display: none;"{{{ end }}}>
 						<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
@@ -68,7 +68,7 @@
 			{{{ end }}}
 
 			{{{ if alternate_logins }}}
-			<div class="col-12 col-md-3 px-md-0">
+			<div class="col-12 col-md-5 col-lg-3 px-md-0">
 				<div class="alt-login-block d-flex flex-column gap-2">
 					<label>[[login:alternative_logins]]</label>
 					<ul class="alt-logins list-unstyled">
@@ -78,10 +78,10 @@
 								{{{ if ./icons.svg }}}
 								{./icons.svg}
 								{{{ else }}}
-								<i class="{./icons.normal}" style="color:{./color};"></i>
+								<i class="flex-shrink-0 {./icons.normal}" style="color:{./color};"></i>
 								{{{ end }}}
 								{{{ if ./labels.login }}}
-								<div class="flex-1 text-body text-sm">{./labels.login}</div>
+								<div class="flex-grow-1 text-body text-sm">{./labels.login}</div>
 								{{{ end }}}
 							</a></li>
 						{{{ end }}}

package/templates/notifications.tpl

@@ -1,26 +1,26 @@
 <div class="notifications">
 	<div class="btn-toolbar justify-content-end" role="toolbar">
-		<button class="btn btn-light" component="notifications/mark_all">[[notifications:mark_all_read]]</button>
+		<button class="btn btn-sm btn-light" component="notifications/mark_all">[[notifications:mark_all_read]]</button>
 	</div>
 
 	<hr class="text-muted opacity-25"/>
 
 	<div class="d-flex flex-column flex-md-row">
-		<div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
+		<div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
 			<div class="nav sticky-top d-flex flex-row flex-md-column flex-wrap gap-1" style="z-index: 1;">
 				{{{ each filters }}}
 				{{{ if ./separator }}}
 				<hr/>
 				{{{ else }}}
 				<a class="btn-ghost fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
-					<div class="flex-1">{filters.name}</div>
-					<span class="text-xs human-readable-number" title="{./count}">{./count}</span>
+					<div class="flex-grow-1">{filters.name}</div>
+					<span class="flex-shrink-0 text-xs human-readable-number" title="{./count}">{./count}</span>
 				</a>
 				{{{ end }}}
 				{{{ end }}}
 			</div>
 		</div>
-		<div class="flex-1 ps-md-2 ps-lg-5">
+		<div class="flex-grow-1 ps-md-2 ps-lg-5">
 			<ul component="notifications/list" class="notifications-list list-unstyled" data-nextstart="{nextStart}">
 				<!-- IMPORT partials/notifications_list.tpl -->
 			</ul>

package/templates/partials/account/admin-menu.tpl

@@ -2,34 +2,34 @@
 	<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-gear fa-fw"></i>
 	</button>
-	<ul class="dropdown-menu dropdown-menu-end account-sub-links">
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm account-sub-links">
 		<li>
-			<a class="dropdown-item" href="{config.relative_path}/user/{userslug}/info">[[user:account_info]]</a>
+			<a class="dropdown-item rounded-1" href="{config.relative_path}/user/{userslug}/info">[[user:account_info]]</a>
 		</li>
 		{{{ if (canBan || canMute) }}}
 		<li role="separator" class="dropdown-divider"></li>
 		{{{ end }}}
 		{{{ if canBan }}}
 		<li class="{{{ if banned }}}hide{{{ end }}}">
-			<a class="dropdown-item" component="account/ban" href="#">[[user:ban_account]]</a>
+			<a class="dropdown-item rounded-1" component="account/ban" href="#">[[user:ban_account]]</a>
 		</li>
 		<li class="{{{ if !banned }}}hide{{{ end }}}">
-			<a class="dropdown-item" component="account/unban" href="#">[[user:unban_account]]</a>
+			<a class="dropdown-item rounded-1" component="account/unban" href="#">[[user:unban_account]]</a>
 		</li>
 		{{{ end }}}
 		{{{ if canMute }}}
 		<li class="{{{ if muted }}}hide{{{ end }}}">
-			<a class="dropdown-item" component="account/mute" href="#">[[user:mute_account]]</a>
+			<a class="dropdown-item rounded-1" component="account/mute" href="#">[[user:mute_account]]</a>
 		</li>
 		<li class="{{{ if !muted }}}hide{{{ end }}}">
-			<a class="dropdown-item" component="account/unmute" href="#">[[user:unmute_account]]</a>
+			<a class="dropdown-item rounded-1" component="account/unmute" href="#">[[user:unmute_account]]</a>
 		</li>
 		{{{ end }}}
 		{{{ if isAdmin }}}
 		<li>
-			<a component="account/delete-account" href="#" class="dropdown-item">[[user:delete_account_as_admin]]</a>
-			<a component="account/delete-content" href="#" class="dropdown-item">[[user:delete_content]]</a>
-			<a component="account/delete-all" href="#" class="dropdown-item">[[user:delete_all]]</a>
+			<a component="account/delete-account" href="#" class="dropdown-item rounded-1">[[user:delete_account_as_admin]]</a>
+			<a component="account/delete-content" href="#" class="dropdown-item rounded-1">[[user:delete_content]]</a>
+			<a component="account/delete-all" href="#" class="dropdown-item rounded-1">[[user:delete_all]]</a>
 		</li>
 		{{{ end }}}
 	</ul>

package/templates/partials/account/category-item.tpl

@@ -1,25 +1,22 @@
-<li component="categories/category" data-cid="{./cid}" class="row category-{./cid} mb-4">
+<li component="categories/category" data-cid="{./cid}" data-parent-cid="{../parentCid}" class="category-{./cid}">
 	<meta itemprop="name" content="{./name}">
-	<div class="content col-10 depth-{../depth}">
-		<div class="d-flex">
-			<div class="fs-3">
-				{buildCategoryIcon(@value, "40px", "rounded-1")}
+	<div class="content depth-{./depth} d-flex gap-2">
+		<div class="flex-grow-1 align-items-start d-flex gap-2">
+			<div>
+				{buildCategoryIcon(@value, "24px", "rounded-1")}
 			</div>
-
-			<div class="ms-3">
-				<h3 class="title">
+			<div class="d-grid gap-0">
+				<div class="title fw-semibold">
 					<!-- IMPORT partials/categories/link.tpl -->
-				</h3>
-				<!-- description -->
-				<div class="mb-2">
-					{{{ if ../descriptionParsed }}}
-					<div class="description text-muted">{../descriptionParsed}</div>
-					{{{ end }}}
 				</div>
+				{{{ if ./descriptionParsed }}}
+				<div class="description text-muted text-xs w-100">{./descriptionParsed}</div>
+				{{{ end }}}
 			</div>
 		</div>
+		<div class="flex-shrink-0">
+			<!-- IMPORT partials/category/watch.tpl -->
+		</div>
 	</div>
-	<div class="col-2">
-		<!-- IMPORT partials/category/watch.tpl -->
-	</div>
+	<hr />
 </li>

package/templates/partials/account/footer.tpl

@@ -0,0 +1,3 @@
+		</div>
+	</div>
+</div>

package/templates/partials/account/header.tpl

@@ -1,101 +1,98 @@
-<div data-widget-area="header">
-	{{{each widgets.header}}}
-	{{widgets.header.html}}
-	{{{end}}}
-</div>
+<div class="account">
+	<div data-widget-area="header">
+		{{{each widgets.header}}}
+		{{widgets.header.html}}
+		{{{end}}}
+	</div>
 
-<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
-	<div class="container">
-		{{{ if allowCoverPicture }}}
-		{{{ if canEdit }}}
-		<div class="controls">
-			<span class="upload"><i class="fa fa-fw fa-2x fa-upload"></i></span>
-			<span class="resize"><i class="fa fa-fw fa-2x fa-arrows"></i></span>
-			<span class="remove"><i class="fa fa-fw fa-2x fa-times"></i></span>
+	<div class="cover position-absolute start-0 top-0 w-100" component="account/cover" style="background-image: url({cover:url}); background-position: {cover:position};">
+		<div class="container">
+			{{{ if allowCoverPicture }}}
+			{{{ if canEdit }}}
+			<div class="controls text-center">
+				<span class="upload p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-upload"></i></span>
+				<span class="resize p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-arrows"></i></span>
+				<span class="remove p-2 m-2 rounded-1 text-bg-light opacity-75"><i class="fa fa-fw fa-times"></i></span>
+			</div>
+			<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
+			<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
+			{{{ end }}}
+			{{{ end }}}
 		</div>
-		<div class="save text-bg-primary">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
-		<div class="indicator text-bg-primary">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
-		{{{ end }}}
-		{{{ end }}}
 	</div>
-</div>
 
-<div class="d-flex flex-column flex-md-row gap-2 w-100 pb-4 mb-4 mt-2 border-bottom">
-	<div class="avatar-wrapper border-4 position-relative align-self-start d-none d-md-block" style="margin-top: -75px;">
-		{{{ if picture }}}
-		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 142px;" />
-		{{{ else }}}
-		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 142px;" title="{username}">{icon:text}</div>
-		{{{ end }}}
-	</div>
+	<div class="d-flex flex-column flex-md-row gap-2 w-100 pb-4 mb-4 mt-2 border-bottom">
+		<div {{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}component="profile/change/picture"{{{ end }}} class="avatar-wrapper border-4 position-relative align-self-center align-self-md-start hover-parent" style="margin-top: -75px;">
+			{buildAvatar(@value, "142px", true)}
+			{{{ if (allowProfilePicture && isSelfOrAdminOrGlobalModerator)}}}
+			<div component="profile/change/picture" class="d-none d-md-block pointer p-2 rounded-1 opacity-75 text-bg-light position-absolute top-50 start-50 translate-middle hover-visible">
+				<span class="upload"><i class="fa fa-fw fa-upload"></i></span>
+			</div>
+			{{{ end }}}
+		</div>
 
-	<div class="avatar-wrapper border-4 position-relative align-self-center d-block d-md-none" style="margin-top: -75px;">
-		{{{ if picture }}}
-		<img src="{picture}" class="avatar avatar-rounded" style="--avatar-size: 142px;" />
-		{{{ else }}}
-		<div class="avatar avatar-rounded" style="background-color: {icon:bgColor}; --avatar-size: 142px;" title="{username}">{icon:text}</div>
-		{{{ end }}}
-	</div>
+		<div class="d-flex flex-column flex-md-row mt-1 justify-content-between w-100 gap-2">
+			<div class="d-flex flex-grow-1 flex-row gap-2">
+				<div class="d-flex flex-column">
+					<h2 class="fullname fw-semibold fs-2 tracking-tight mb-0">{{{ if fullname }}}{fullname}{{{ else }}}{username}{{{ end }}}</h2>
+					<div class="d-flex flex-wrap gap-1 text-sm align-items-center">
+						<span class="username fw-bold">{{{ if !banned }}}@{username}{{{ else }}}[[user:banned]]{{{ end }}}</span>
+						<div class="d-flex align-items-center gap-1 p-1">
+							{{{ if selectedGroup.length }}}
+							{{{ each selectedGroup }}}
+							{{{ if ./slug }}}
+							<!-- IMPORT partials/groups/badge.tpl -->
+							{{{ end }}}
+							{{{ end }}}
+							{{{ end }}}
+						</div>
+					</div>
 
-	<div class="d-flex flex-column flex-md-row mt-1 justify-content-between w-100 gap-2">
-		<div class="d-flex flex-1 flex-row gap-2">
-			<div class="d-flex flex-column">
-				<h2 class="fullname fw-semibold fs-2 tracking-tight mb-0">{{{ if fullname }}}{fullname}{{{ else }}}{username}{{{ end }}}</h2>
-				<div class="d-flex flex-wrap gap-1 text-sm align-items-center">
-					<span class="username fw-bold">{{{ if !banned }}}@{username}{{{ else }}}[[user:banned]]{{{ end }}}</span>
-					<div class="d-flex align-items-center gap-1 p-1">
-						{{{ if selectedGroup.length }}}
-						{{{ each selectedGroup }}}
-						{{{ if ./slug }}}
-						<!-- IMPORT partials/groups/badge.tpl -->
-						{{{ end }}}
-						{{{ end }}}
+					{{{ if isAdminOrGlobalModeratorOrModerator }}}
+					{{{ if banned }}}
+					<div class="text-xm text-muted">
+						{{{ if banned_until }}}
+						[[user:info.banned-until, {banned_until_readable}]]
+						{{{ else }}}
+						[[user:info.banned-permanently]]
 						{{{ end }}}
 					</div>
+					{{{ end }}}
+					{{{ end }}}
 				</div>
+			</div>
+
+			<div class="flex-shrink-0 d-flex gap-1 align-self-stretch align-self-md-start justify-content-end">
+				{{{ if loggedIn }}}
+				{{{ if !isSelf }}}
+				<a component="account/unfollow" href="#" class="btn btn-info flex-fill{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
+				<a component="account/follow" href="#" class="btn btn-primary flex-fill{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
+				{{{ end }}}
+				{{{ end }}}
 
-				{{{ if isAdminOrGlobalModeratorOrModerator }}}
-				{{{ if banned }}}
-				<div class="text-xm text-muted">
-					{{{ if banned_until }}}
-					[[user:info.banned-until, {banned_until_readable}]]
-					{{{ else }}}
-					[[user:info.banned-permanently]]
+				{{{ if (loggedIn && (!isSelf && (!banned && !config.disableChat))) }}}
+				<div class="btn-group flex-fill">
+					<a {{{ if hasPrivateChat }}}component="account/chat"{{{ else }}}component="account/new-chat"{{{ end }}} href="#" class="btn btn-light" role="button">[[user:chat]]</a>
+					{{{ if hasPrivateChat}}}
+					<button type="button" class="btn btn-light dropdown-toggle flex-0" data-bs-toggle="dropdown">
+						<i class="fa fa-caret-down"></i>
+					</button>
+					<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
+						<li><a class="dropdown-item rounded-1" href="#" component="account/new-chat">[[user:new_chat_with, {username}]]</a></li>
+					</ul>
 					{{{ end }}}
 				</div>
 				{{{ end }}}
+				{{{ if !isSelf }}}
+				{{{ if (isAdmin || (canBan || canMute ))}}}
+				<!-- IMPORT partials/account/admin-menu.tpl -->
 				{{{ end }}}
-			</div>
-		</div>
-
-		<div class="d-flex gap-1 align-self-stretch align-self-md-start justify-content-end">
-			{{{ if loggedIn }}}
-			{{{ if !isSelf }}}
-			<a component="account/unfollow" href="#" class="btn btn-info flex-fill{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
-			<a component="account/follow" href="#" class="btn btn-primary flex-fill{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
-			{{{ end }}}
-			{{{ end }}}
-
-			{{{ if (loggedIn && (!isSelf && (!banned && !config.disableChat))) }}}
-			<div class="btn-group flex-fill">
-				<a {{{ if hasPrivateChat }}}component="account/chat"{{{ else }}}component="account/new-chat"{{{ end }}} href="#" class="btn btn-light" role="button">[[user:chat]]</a>
-				{{{ if hasPrivateChat}}}
-				<button type="button" class="btn btn-light dropdown-toggle flex-0" data-bs-toggle="dropdown">
-					<i class="fa fa-caret-down"></i>
-				</button>
-				<ul class="dropdown-menu dropdown-menu-end" role="menu">
-					<li><a class="dropdown-item" href="#" component="account/new-chat">[[user:new_chat_with, {username}]]</a></li>
-				</ul>
 				{{{ end }}}
 			</div>
-			{{{ end }}}
-			{{{ if !isSelf }}}
-			{{{ if (isAdmin || (canBan || canMute ))}}}
-			<!-- IMPORT partials/account/admin-menu.tpl -->
-			{{{ end }}}
-			{{{ end }}}
 		</div>
 	</div>
-</div>
 
+	<div class="d-flex flex-column flex-md-row">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
+		<div class="account-content flex-grow-1 ps-md-2 ps-lg-3 ps-xl-4" style="min-width: 0;">
 

package/templates/partials/account/session-list.tpl

@@ -0,0 +1,18 @@
+{{{ each sessions }}}
+<li class="list-group-item text-break" data-uuid="{./uuid}">
+	<div class="float-end">
+		{{{ if isSelfOrAdminOrGlobalModerator }}}
+		{{{ if !./current }}}
+		<button class="btn btn-sm btn-outline-secondary" type="button" data-action="revokeSession">[[user:revoke-session]]</button>
+		{{{ end }}}
+		{{{ end }}}
+		{function.userAgentIcons}
+		<i class="fa fa-circle text-{{{ if ./current }}}success{{{ else }}}muted{{{ end }}}"></i>
+	</div>
+	[[user:browser-version-on-platform, {./browser}, {./version}, {./platform}]]<br />
+	<small class="timeago text-muted" title="{../datetimeISO}"></small>
+	<ul>
+		<li><strong>[[global:ip_address]]</strong>: {../ip}</li>
+	</ul>
+</li>
+{{{ end }}}