nodebb-theme-harmony 0.0.1 → 0.0.3

package/templates/partials/sidebar/search.tpl

@@ -0,0 +1,30 @@
+<a component="search/button" id="search-button" href="#" role="button" class="nav-link nav-btn d-flex gap-2 align-items-center text-truncate" data-bs-toggle="dropdown" title="[[global:header.search]]">
+	<span>
+		<i class="fa fa-search fa-fw"></i>
+	</span>
+	<span class="nav-text small visible-open fw-semibold">[[global:search]]</span>
+</a>
+<div class="search-dropdown dropdown-menu p-2 shadow">
+	<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="w-100" id="search-fields">
+			<div class="d-flex gap-1">
+				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
+
+				<div class="nav-btn d-flex justify-content-center align-items-center advanced-search-link">
+					<i class="fa fa-gears fa-fw text-muted"></i>
+				</div>
+			</div>
+
+			<div id="quick-search-container" class="quick-search-container d-block mt-2 hidden">
+				<div class="form-check filter-category mb-2 ms-2">
+					<input class="form-check-input" type="checkbox" checked>
+					<label class="form-check-label name text-sm"></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>
+	</form>
+</div>

package/templates/partials/sidebar/user-menu.tpl

@@ -0,0 +1,87 @@
+<label class="nav-link nav-btn text-truncate d-flex gap-2 align-items-center" data-bs-toggle="dropdown" id="user_dropdown" role="button">
+	{buildAvatar(user, "20px", true)}
+	<span id="user-header-name" class="nav-text small visible-open fw-semibold">{user.username}</span>
+</label>
+<ul id="user-control-list" component="header/usercontrol" class="dropdown-menu shadow p-1 text-sm" aria-labelledby="user_dropdown">
+	<li>
+		<a class="dropdown-item rounded-1 d-flex align-items-center gap-1" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
+			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span></div>
+			<span class="fw-semibold" component="header/username">{user.username}</span>
+		</a>
+	</li>
+	<li role="presentation" class="dropdown-divider"></li>
+	<li><h6 class="dropdown-header text-xs">[[global:status]]</h6></li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="online">
+			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span></div>
+			<span{{{ if user.online }}} class="fw-semibold"{{{ end }}}> [[global:online]]</span>
+		</a>
+	</li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="away">
+			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span></div>
+			<span{{{ if user.away}}} class="fw-semibold"{{{ end }}}> [[global:away]]</span>
+		</a>
+	</li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="dnd">
+			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span></div>
+			<span{{{ if user.dnd}}} class="fw-semibold"{{{ end }}}> [[global:dnd]]</span>
+		</a>
+	</li>
+	<li>
+		<a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-1" data-status="offline">
+			<div class="text-center"><span component="user/status" class="badge border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span></div>
+			<span{{{ if user.offline}}} class="fw-semibold"{{{ end }}}> [[global:invisible]]</span>
+		</a>
+	</li>
+	<li role="presentation" class="dropdown-divider"></li>
+	<li>
+		<a class="dropdown-item rounded-1" 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 class="dropdown-item rounded-1" 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="dropdown-divider"></li>
+	<li><h6 class="dropdown-header text-xs">[[pages:moderator-tools]]</h6></li>
+	<li>
+		<a class="dropdown-item rounded-1" href="{relative_path}/flags">
+			<i class="fa fa-fw fa-flag"></i> <span>[[pages:flagged-content]]</span>
+		</a>
+	</li>
+	<li>
+		<a class="dropdown-item rounded-1" href="{relative_path}/post-queue">
+			<i class="fa fa-fw fa-list-alt"></i> <span>[[pages:post-queue]]</span>
+		</a>
+	</li>
+	<li>
+		<a class="dropdown-item rounded-1" 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 class="dropdown-item rounded-1" 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="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="dropdown-item rounded-1">
+				<i class="fa fa-fw fa-sign-out"></i><span> [[global:logout]]</span>
+			</button>
+		</form>
+	</li>
+</ul>

package/templates/partials/sidebar-left.tpl

@@ -0,0 +1,40 @@
+<nav class="text-dark bg-light sidebar sidebar-left vh-100 d-none d-md-flex flex-column justify-content-between sticky-top ff-secondary">
+	<ul id="main-nav" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
+		{{{ each navigation }}}
+		<!-- IF function.displayMenuItem, @index -->
+		<li class="nav-item mx-2 {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
+			<a class="nav-link nav-btn navigation-link d-flex gap-2 justify-content-between align-items-center {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
+			{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
+				<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
+					<span class="position-relative">
+						{{{ if ./iconClass }}}
+						<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
+						<span component="navigation/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
+						{{{ end }}}
+					</span>
+					{{{ if navigation.text }}}
+					<span class="nav-text small visible-open fw-semibold text-truncate">{navigation.text}</span>
+					{{{ end }}}
+				</span>
+				<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
+			</a>
+			{{{ if navigation.dropdown }}}
+			<ul class="dropdown-menu shadow">
+				{navigation.dropdownContent}
+			</ul>
+			{{{ end }}}
+		</li>
+		<!-- ENDIF function.displayMenuItem -->
+		{{{end}}}
+	</ul>
+	<div class="w-100">
+		<!-- IMPORT partials/skin-switcher.tpl -->
+		<div class="sidebar-toggle m-2">
+			<a href="#" role="button" component="sidebar/toggle" class="nav-btn d-flex gap-2 align-items-center p-2 pointer nav-link w-100 text-nowrap">
+				<i class="fa fa-fw fa-angles-right"></i>
+				<i class="fa fa-fw fa-angles-left"></i>
+				<span class="nav-text visible-open fw-semibold small lh-1">[[harmony:collapse]]</span>
+			</a>
+		</div>
+	</div>
+</nav>

package/templates/partials/sidebar-right.tpl

@@ -0,0 +1,41 @@
+<nav class="text-dark bg-light sidebar sidebar-right vh-100 d-none d-md-flex flex-column sticky-top ff-secondary">
+	{{{ if config.loggedIn }}}
+	<ul id="logged-in-menu" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
+		<li id="user_label" class="nav-item mx-2 dropstart usermenu" title="[[global:header.profile]]">
+		<!-- IMPORT partials/sidebar/user-menu.tpl -->
+		</li>
+
+		{{{ if config.searchEnabled }}}
+		<li component="sidebar/search" class="nav-item mx-2 search dropstart position-relative">
+		<!-- IMPORT partials/sidebar/search.tpl -->
+		</li>
+		{{{ end }}}
+
+		<li component="notifications" class="nav-item mx-2 notifications dropstart">
+		<!-- IMPORT partials/sidebar/notifications.tpl -->
+		</li>
+
+		{{{ if canChat }}}
+		<li class="nav-item mx-2 chats dropstart">
+		<!-- IMPORT partials/sidebar/chats.tpl -->
+		</li>
+		{{{ end }}}
+
+		<li component="sidebar/drafts" class="nav-item mx-2 drafts dropstart">
+		<!-- IMPORT partials/sidebar/drafts.tpl -->
+		</li>
+	</ul>
+	{{{ else }}}
+	<ul id="logged-out-menu" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
+	<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
+	</ul>
+	{{{ end }}}
+
+	<!-- IMPORT partials/topic/navigator.tpl -->
+
+	<div class="visible-open small text-secondary mt-auto" data-widget-area="sidebar-footer">
+		{{{each widgets.sidebar-footer}}}
+		{{./html}}
+		{{{end}}}
+	</div>
+</nav>

package/templates/partials/skin-switcher.tpl

@@ -0,0 +1,35 @@
+<div class="dropend m-2" component="skinSwitcher">
+	<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link nav-btn position-relative" title="[[harmony:skins]]">
+		<span class="justify-content-between w-100">
+			<span class="d-flex gap-2 align-items-center text-nowrap truncate-open">
+				<span>
+					<i component="skinSwitcher/icon" class="fa fa-fw fa-paintbrush"></i>
+				</span>
+				<span class="nav-text small visible-open fw-semibold">[[harmony:skins]]</span>
+			</span>
+		</span>
+	</a>
+
+	<ul class="dropdown-menu overflow-auto">
+		<div class="d-flex px-2">
+			<div>
+				<li class="dropdown-header">Light</li>
+				<div class="d-grid" style="grid-template-columns: 1fr 1fr;">
+					{{{ each bootswatchSkinOptions.light }}}
+					<li>
+						<a href="#" class="dropdown-item rounded-1" data-value="{./value}">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
+					</li>
+					{{{ end }}}
+				</div>
+			</div>
+			<div>
+				<li class="dropdown-header">Dark</li>
+				{{{ each bootswatchSkinOptions.dark }}}
+				<li>
+					<a href="#" class="dropdown-item rounded-1" data-value="{./value}">{./name} <i class="fa fa-fw fa-check {{{ if !./selected }}} invisible {{{ end }}}"></i></a>
+				</li>
+				{{{ end }}}
+			</div>
+		</div>
+	</ul>
+</div>

package/templates/partials/tags_list.tpl

@@ -1,5 +1,3 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 {{{each tags}}}
 <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>

package/templates/partials/toast.tpl

@@ -1,16 +1,14 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div id="{alert_id}" role="alert" class="alert alert-dismissible alert-{type}" component="toaster/toast">
 	<button type="button" class="btn-close float-end" data-bs-dismiss="alert" aria-label="close"></button>
-	<!-- IF image -->
+	{{{ if image }}}
 	<img src="{image}">
-	<!-- ENDIF image -->
+	{{{ end }}}
 
-	<!-- IF title -->
+	{{{ if title }}}
 	<strong>{title}</strong>
-	<!-- ENDIF title -->
+	{{{ end }}}
 
-	<!-- IF message -->
+	{{{ if message }}}
 	<p>{message}</p>
-	<!-- ENDIF message -->
+	{{{ end }}}
 </div>

package/templates/partials/topic/event.tpl

@@ -1,28 +1,12 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<li component="topic/event" class="timeline-event text-muted" data-topic-event-id="{./id}" data-topic-event-type="{./type}">
+<li component="topic/event" class="timeline-event text-muted d-flex gap-2 pt-4" data-topic-event-id="{./id}" data-topic-event-type="{./type}">
 	<div class="timeline-badge">
-		<i class="fa {{{ if ./icon }}}{./icon}{{{ else }}}fa-circle{{{ end }}}"></i>
+		<i class="fa {{{ if ./icon }}}{./icon}{{{ else }}}fa-circle{{{ end }}} small"></i>
 	</div>
-	<span class="timeline-text">
-		{{{ if ./href}}}
-		<a href="{config.relative_path}{./href}">{./text}</a>
-		{{{ else }}}
+	<span class="timeline-text small">
 		{./text}
-		{{{ end }}}
-		&nbsp;
 	</span>
-	{{{ if ./user }}}
-		{{{ if ./user.system }}}
-		<span class="timeline-text">[[global:system-user]]</span>&nbsp;
-		{{{ else }}}
-		<span><a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true)} &nbsp; {./user.username}</a></span>&nbsp;
-		{{{ end }}}
-	{{{ end }}}
-	<span class="timeago timeline-text" title="{./timestampISO}"></span>
-
 	{{{ if privileges.isAdminOrMod }}}
-		&nbsp;<span component="topic/event/delete" data-topic-event-id="{./id}" data-topic-event-type="{./type}" class="timeline-text pointer" title="[[topic:delete-event]]"><i class="fa fa-trash"></i></span>
+	<span component="topic/event/delete" data-topic-event-id="{./id}" data-topic-event-type="{./type}" class="timeline-text pointer" title="[[topic:delete-event]]"><i class="fa fa-trash"></i></span>
 	{{{ end }}}
 </li>
 

package/templates/partials/topic/navigator.tpl

@@ -1,41 +1,20 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="pagination-block text-center">
-    <div class="progress-bar"></div>
-    <div class="wrapper dropup">
-        <i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop"></i>
-
-        <a href="#" class="dropdown-toggle d-inline-block" data-bs-toggle="dropdown" data-bs-reference="parent">
-            <span class="pagination-text"></span>
-        </a>
-
-        <i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom"></i>
-        <ul class="dropdown-menu dropdown-menu-end" role="menu">
-            <li>
-                <div class="row">
-                    <div class="col-8 post-content"></div>
-                    <div class="col-4 text-end">
-                        <div class="scroller-content">
-                            <span class="pointer pagetop">[[topic:first-post]] <i class="fa fa-angle-double-up"></i></span>
-                            <div class="scroller-container">
-                                <div class="scroller-thumb">
-                                    <span class="thumb-text"></span>
-                                    <div class="scroller-thumb-icon"></div>
-                                </div>
-                            </div>
-                            <span class="pointer pagebottom">[[topic:last-post]] <i class="fa fa-angle-double-down"></i></span>
-                        </div>
-                    </div>
-                </div>
-                <div class="row">
-                    <div class="col-6">
-                        <button id="myNextPostBtn" class="btn btn-outline-secondary form-control" disabled>[[topic:go-to-my-next-post]]</button>
-                    </div>
-                    <div class="col-6">
-                        <input type="number" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
-                    </div>
-                </div>
-            </li>
-        </ul>
-    </div>
-</div>
+<div class="d-none flex-column flex-grow-1 align-items-center mb-2 mx-2 mt-auto" component="topic/navigator">
+	<a href="#" class="nav-link border-0 p-2" data-action="toTop"><i class="fa fa-fw fa-angles-up"></i></a>
+	<a href="#" class="nav-link border-0 p-2" data-action="scrollUp"><i class="fa fa-fw fa-angle-up"></i></a>
+	<div class="track d-inline-block flex-grow-1 position-relative">
+		<div class="unread d-inline-block position-absolute">
+			<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold">
+				<a href="{url}"></a>
+			</div>
+		</div>
+		<div class="handle d-inline-block position-absolute">
+			<div class="knob d-inline-block rounded-circle translate-middle"></div>
+			<div class="meta small position-absolute text-nowrap fw-semibold">
+				<p class="index text-body mb-0"></p>
+				<p class="timestamp text-secondary timeago mb-0"></p>
+			</div>
+		</div>
+	</div>
+	<a href="#" class="nav-link border-0 p-2" data-action="scrollDown"><i class="fa fa-fw fa-angle-down"></i></a>
+	<a href="#" class="nav-link border-0 p-2" data-action="toBottom"><i class="fa fa-fw fa-angles-down"></i></a>
+</div>

package/templates/partials/topic/necro-post.tpl

@@ -1,5 +1,6 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<li component="topic/necro-post" class="necro-post text-muted timeline-event">
-	<span class="timeline-text">{text}</span>
+<li component="topic/necro-post" class="necro-post text-muted timeline-event d-flex gap-2 pt-4">
+	<div class="timeline-badge">
+		<i class="fa fa-clock small"></i>
+	</div>
+	<span class="timeline-text small fw-semibold">{text}</span>
 </li>

package/templates/partials/topic/post-menu.tpl

@@ -1,6 +1,27 @@
 <!-- THIS FILE IS STILL PERSONA -->
 
 <span component="post/tools" class="dropdown moderator-tools bottom-sheet d-inline-block<!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
-	<a class="dropdown-toggle d-block" href="#" data-bs-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-v"></i></a>
-	<ul class="dropdown-menu dropdown-menu-end" role="menu"></ul>
+	<a class="btn btn-link dropdown-toggle d-block" href="#" data-bs-toggle="dropdown"><i class="fa fa-fw fa-ellipsis-v"></i></a>
+	<ul class="dropdown-menu dropdown-menu-end" role="menu">
+		<li class="dropdown-item placeholder-wave">
+			<div class="placeholder" style="width: 20px;">&nbsp;</div>
+			<div class="placeholder col-3">&nbsp;</div>
+		</li>
+		<li class="dropdown-item placeholder-wave">
+			<div class="placeholder" style="width: 20px;">&nbsp;</div>
+			<div class="placeholder col-5">&nbsp;</div>
+		</li>
+		<li class="dropdown-item placeholder-wave">
+			<div class="placeholder" style="width: 20px;">&nbsp;</div>
+			<div class="placeholder col-11">&nbsp;</div>
+		</li>
+		<li class="dropdown-item placeholder-wave">
+			<div class="placeholder" style="width: 20px;">&nbsp;</div>
+			<div class="placeholder col-7">&nbsp;</div>
+		</li>
+		<li class="dropdown-item placeholder-wave">
+			<div class="placeholder" style="width: 20px;">&nbsp;</div>
+			<div class="placeholder col-12">&nbsp;</div>
+		</li>
+	</ul>
 </span>

package/templates/partials/topic/post-placeholder.tpl

@@ -0,0 +1,15 @@
+<div class="d-flex align-items-start gap-3">
+	<div class="icon py-1 bg-body d-none d-sm-block">
+		<div class="placeholder bg-secondary rounded-circle" style="width: 48px; height: 48px;"></div>
+	</div>
+
+	<div class="d-flex flex-grow-1 flex-column placeholder-wave">
+		<div class="d-flex align-items-center gap-1 flex-wrap w-100 post-header mt-1">
+			<div class="placeholder bg-secondary rounded-1 col-2">&nbsp;</div>
+		</div>
+
+		<div class="content mt-2 placeholder bg-secondary rounded-1 col-5" component="post/content" itemprop="text">
+			<p>&nbsp;</p>
+		</div>
+	</div>
+</div>

package/templates/partials/topic/post.tpl

@@ -1,18 +1,23 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div class="clearfix post-header">
-	<div class="icon float-start">
-		<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->">
+<div class="d-flex align-items-start gap-3">
+	<div class="icon py-1 bg-body d-none d-sm-block">
+		<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
 			{buildAvatar(posts.user, "48px", true, "", "user/picture")}
-			<i component="user/status" class="fa fa-circle status {posts.user.status}" title="[[global:{posts.user.status}]]"></i>
+			<span component="user/status" class="position-absolute translate-middle-y badge border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
 		</a>
 	</div>
 
-	<small class="d-flex">
-		<div class="d-flex align-items-center gap-1 flex-wrap w-100">
-			<strong class="text-nowrap">
-				<a href="<!-- IF posts.user.userslug -->{config.relative_path}/user/{posts.user.userslug}<!-- ELSE -->#<!-- ENDIF posts.user.userslug -->" itemprop="author" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
-			</strong>
+	<div class="d-flex flex-grow-1 flex-column w-100" style="min-width: 0;">
+		<div class="d-flex align-items-center gap-1 flex-wrap w-100 post-header mt-1">
+			<div class="icon bg-body d-sm-none">
+				<a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+					{buildAvatar(posts.user, "20px", true, "", "user/picture")}
+					<span component="user/status" class="position-absolute translate-middle-y badge border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
+				</a>
+			</div>
+
+			<span class="text-nowrap">
+				<a class="fw-bold" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" itemprop="author" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
+			</span>
 
 			{{{ each posts.user.selectedGroups }}}
 			{{{ if posts.user.selectedGroups.slug }}}
@@ -21,14 +26,24 @@
 			{{{ end }}}
 
 			<!-- IF posts.user.banned -->
-			<span class="badge bg-danger">[[user:banned]]</span>
+			<span class="badge bg-danger rounded-1">[[user:banned]]</span>
 			<!-- ENDIF posts.user.banned -->
 
-			<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
-				<!-- IF posts.toPid -->
-				<a component="post/parent" class="btn btn-sm btn-outline-secondary hidden-xs" data-topid="{posts.toPid}" href="{config.relative_path}/post/{posts.toPid}"><i class="fa fa-reply"></i> @<!-- IF posts.parent.username -->{posts.parent.username}<!-- ELSE -->[[global:guest]]<!-- ENDIF posts.parent.username --></a>
-				<!-- ENDIF posts.toPid -->
+			<div class="d-flex gap-1 hidden-xs align-items-center">
+				{{{ if posts.toPid }}}
+				<span class="text-muted">replied to</span><!-- FIX THIS, DOES NOT l10n PROPERLY -->
+				<a component="post/parent" data-topid="{posts.toPid}" href="{config.relative_path}/post/{posts.toPid}"><!-- IF posts.parent.username -->{posts.parent.username}<!-- ELSE -->[[global:guest]]<!-- ENDIF posts.parent.username --></a>
+				{{{ else }}}
+				<span class="text-muted">wrote</span><!-- FIX THIS, DOES NOT l10n PROPERLY -->
+				{{{ end }}}
+
+				<a class="permalink text-muted" href="{config.relative_path}/post/{posts.pid}"><span class="timeago" title="{posts.timestampISO}"></span></a>
+
+				<i component="post/edit-indicator" class="fa fa-pencil-square<!-- IF privileges.posts:history --> pointer<!-- END --> edit-icon <!-- IF !posts.editor.username -->hidden<!-- ENDIF !posts.editor.username -->"></i>
+				<span data-editor="{posts.editor.userslug}" component="post/editor" class="visually-hidden">[[global:last_edited_by, {posts.editor.username}]] <span class="timeago" title="{posts.editedISO}"></span></span>
+			</div>
 
+			<div>
 				<span>
 					<!-- IF posts.user.custom_profile_info.length -->
 					&#124;
@@ -37,80 +52,68 @@
 					{{{end}}}
 					<!-- ENDIF posts.user.custom_profile_info.length -->
 				</span>
-			</span>
+			</div>
 			<div class="d-flex align-items-center gap-1 flex-grow-1 justify-content-end">
-				<span>
-					<i component="post/edit-indicator" class="fa fa-pencil-square<!-- IF privileges.posts:history --> pointer<!-- END --> edit-icon <!-- IF !posts.editor.username -->hidden<!-- ENDIF !posts.editor.username -->"></i>
-
-					<span data-editor="{posts.editor.userslug}" component="post/editor" class="hidden">[[global:last_edited_by, {posts.editor.username}]] <span class="timeago" title="{posts.editedISO}"></span></span>
-
-					<span class="visible-xs-inline-block visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
-						<a class="permalink text-muted" href="{config.relative_path}/post/{posts.pid}"><span class="timeago" title="{posts.timestampISO}"></span></a>
-					</span>
-				</span>
-				<span class="bookmarked"><i class="fa fa-bookmark-o"></i></span>
+				<span class="bookmarked opacity-0 text-primary"><i class="fa fa-bookmark-o"></i></span>
 			</div>
 		</div>
-	</small>
-</div>
-
-<br />
 
-<div class="content" component="post/content" itemprop="text">
-	{posts.content}
+		<div class="content mt-2 text-break" component="post/content" itemprop="text">
+			{posts.content}
+		</div>
+	</div>
 </div>
 
-<div class="post-footer">
+<div component="post/footer" class="post-footer border-bottom pb-2">
 	{{{ if posts.user.signature }}}
-	<div component="post/signature" data-uid="{posts.user.uid}" class="post-signature">{posts.user.signature}</div>
+	<div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{posts.user.signature}</div>
 	{{{ end }}}
 
 	<div class="clearfix">
-	{{{ if !hideReplies }}}
-	<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="threaded-replies user-select-none float-start text-muted {{{ if !posts.replies.count }}}hidden{{{ end }}}">
-		<span component="post/reply-count/avatars" class="avatars d-inline-flex gap-1 align-items-top hidden-xs {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
-			{{{each posts.replies.users}}}
-			<span>{buildAvatar(posts.replies.users, "16px", true, "")}</span>
-			{{{end}}}
-			{{{ if posts.replies.hasMore}}}
-			<span><i class="fa fa-ellipsis"></i></span>
-			{{{ end }}}
-		</span>
+		{{{ if !hideReplies }}}
+		<a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center mt-2 border rounded-1 p-1 threaded-replies user-select-none float-start text-muted text-decoration-none {{{ if !posts.replies.count }}}hidden{{{ end }}}">
+			<span component="post/reply-count/avatars" class="avatars d-inline-flex gap-1 align-items-top {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
+				{{{each posts.replies.users}}}
+				<span>{buildAvatar(posts.replies.users, "20px", true, "")}</span>
+				{{{end}}}
+				{{{ if posts.replies.hasMore}}}
+				<span><i class="fa fa-ellipsis"></i></span>
+				{{{ end }}}
+			</span>
 
-		<span class="replies-count small" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
-		<span class="replies-last hidden-xs small">[[topic:last_reply_time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
+			<span class="ms-2 replies-count fw-semibold" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
+			<span class="ms-2 replies-last hidden-xs fw-semibold">[[topic:last_reply_time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
 
-		<i class="fa fa-fw fa-chevron-right" component="post/replies/open"></i>
-		<i class="fa fa-fw fa-chevron-down hidden" component="post/replies/close"></i>
-		<i class="fa fa-fw fa-spin fa-spinner hidden" component="post/replies/loading"></i>
-	</a>
-	{{{ end }}}
+			<i class="fa fa-fw fa-chevron-down" component="post/replies/open"></i>
+			<i class="fa fa-fw fa-chevron-up hidden" component="post/replies/close"></i>
+			<i class="fa fa-fw fa-spin fa-spinner hidden" component="post/replies/loading"></i>
+		</a>
+		{{{ end }}}
+	</div>
+
+	<div component="post/replies/container" class="mt-2 col-11 border rounded-1 p-3"></div>
 
-	<small class="float-end">
+	<div component="post/actions" class="d-flex justify-content-end post-tools">
 		<!-- IMPORT partials/topic/reactions.tpl -->
-		<span class="post-tools">
-			<a component="post/reply" href="#" class="user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:reply]]</a>
-			<a component="post/quote" href="#" class="user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->">[[topic:quote]]</a>
-		</span>
+		<a component="post/reply" href="#" class="btn btn-link user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->" title="[[topic:reply]]"><i class="fa fa-reply"></i></a>
+		<a component="post/quote" href="#" class="btn btn-link user-select-none <!-- IF !privileges.topics:reply -->hidden<!-- ENDIF !privileges.topics:reply -->" title="[[topic:quote]]"><i class="fa fa-quote-right"></i></a>
 
 		<!-- IF !reputation:disabled -->
-		<span class="votes">
-			<a component="post/upvote" href="#" class="<!-- IF posts.upvoted -->upvoted<!-- ENDIF posts.upvoted -->">
+		<div class="d-flex votes align-items-center">
+			<a component="post/upvote" href="#" class="btn btn-link text-secondary <!-- IF posts.upvoted -->upvoted<!-- ENDIF posts.upvoted -->">
 				<i class="fa fa-chevron-up"></i>
 			</a>
 
-			<span component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</span>
+			<div class="d-inline-block px-3" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
 
 			<!-- IF !downvote:disabled -->
-			<a component="post/downvote" href="#" class="<!-- IF posts.downvoted -->downvoted<!-- ENDIF posts.downvoted -->">
+			<a component="post/downvote" href="#" class="btn btn-link text-secondary <!-- IF posts.downvoted -->downvoted<!-- ENDIF posts.downvoted -->">
 				<i class="fa fa-chevron-down"></i>
 			</a>
 			<!-- ENDIF !downvote:disabled -->
-		</span>
+		</div>
 		<!-- ENDIF !reputation:disabled -->
 
 		<!-- IMPORT partials/topic/post-menu.tpl -->
-	</small>
 	</div>
-	<div component="post/replies/container"></div>
 </div>