nodebb-theme-harmony 1.0.0-beta.22 → 1.0.0-beta.24

package/library.js

@@ -77,6 +77,16 @@ library.defineWidgetAreas = async function (areas) {
 	});
 
 	areas = areas.concat([
+		{
+			name: 'Main post header',
+			template: 'topic.tpl',
+			location: 'mainpost-header',
+		},
+		{
+			name: 'Main post footer',
+			template: 'topic.tpl',
+			location: 'mainpost-footer',
+		},
 		{
 			name: 'Sidebar Footer',
 			template: 'global',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.24",
   "nbbpm": {
     "compatibility": "^3.0.0"
   },

package/scss/common.scss

@@ -23,6 +23,26 @@ body {
 	}
 }
 
+body:not(.page-user) {
+	#content {
+		transition: opacity 150ms linear;
+		&.ajaxifying {
+			-moz-opacity: 0;
+			opacity: 0;
+		}
+	}
+}
+.page-user {
+	#content {
+		transition: opacity 150ms linear;
+		&.ajaxifying .account-content {
+			transition: opacity 150ms linear;
+			-moz-opacity: 0;
+			opacity: 0;
+		}
+	}
+}
+
 .sticky-tools {
 	position: sticky;
 	z-index: 3;

package/scss/harmony.scss

@@ -9,6 +9,7 @@
 @import "status";
 @import "account";
 @import "groups";
+@import "search";
 @import "modals";
 
 @import "modules/breadcrumbs";

package/scss/search.scss

@@ -0,0 +1,8 @@
+[component="search/filters"] {
+	.filter-btn {
+		border-color: $gray-300!important;
+		&.active-filter {
+			border-color: $primary!important;
+		}
+	}
+}

package/templates/account/blocks.tpl

@@ -2,7 +2,7 @@
 	<!-- IMPORT partials/account/header.tpl -->
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="d-flex justify-content-between mb-3">
 				<h3 class="fw-semibold fs-5">[[pages:account/blocks, {username}]]</h3>
 				<div class="justify-content-end">

package/templates/account/categories.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">{title}</h3>
 
 			<div class="row">

package/templates/account/consent.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[user:consent.title]]</h3>
 
 			<p class="lead">[[user:consent.lead]]</p>

package/templates/account/edit/password.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:change_password]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
 
 			<form class="edit-form">

package/templates/account/edit/username.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:change_username]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
 
 			<form class="form-horizontal edit-form">

package/templates/account/edit.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="d-flex justify-content-between mb-3">
 				<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:edit-profile]]{{{ else }}}[[pages:account/edit, {username}]]{{{ end }}}</h3>
 				<button id="submitBtn" class="btn btn-primary">[[global:save_changes]]</button>

package/templates/account/followers.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
 			{{{ if !users.length }}}

package/templates/account/following.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
 			{{{ if !users.length }}}

package/templates/account/groups.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
 			<div class="groups">

package/templates/account/info.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			{{{ if sessions.length }}}
 			<div class="mb-3">
 				<h4>[[global:sessions]]</h4>

package/templates/account/posts.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
 				<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
 				<div class="d-flex flex-wrap gap-1">

package/templates/account/profile.tpl

@@ -4,9 +4,9 @@
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
 
-		<div class="flex-1 ps-md-2 ps-lg-5">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			{{{ if aboutme }}}
-			<div component="aboutme" class="text-sm">
+			<div component="aboutme" class="text-sm text-break">
 			{aboutmeParsed}
 			</div>
 			{{{ end }}}

package/templates/account/sessions.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<p class="lead">[[user:sessions.description]]</p>
 			<hr />
 			<ul class="list-group" component="user/sessions">

package/templates/account/settings.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="mb-3 d-flex justify-content-between">
 				<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[pages:account/settings]]{{{ else }}}[[pages:account/settings-of, {username}]]{{{ end }}}</h3>
 				<button id="submitBtn" class="btn btn-primary">[[global:save_changes]]</button>

package/templates/account/theme.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="mb-3 d-flex justify-content-between">
 				<h3 class="fw-semibold fs-5">[[harmony:settings.title]]</h3>
 

package/templates/account/topics.tpl

@@ -3,7 +3,7 @@
 
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<div class="d-flex justify-content-between align-items-center mb-3">
 				<div class="d-flex gap-1">
 					<h3 class="fw-semibold fs-5 mb-0">[[global:topics]]</h3>

package/templates/account/uploads.tpl

@@ -2,7 +2,7 @@
 	<!-- IMPORT partials/account/header.tpl -->
 	<div class="d-flex flex-column flex-md-row">
 		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
+		<div class="account-content flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
 			<h3 class="fw-semibold fs-5">{title}</h3>
 
 			<!-- IF privateUploads -->

package/templates/partials/category/filter-dropdown-content.tpl

@@ -12,15 +12,17 @@
     <input type="text" class="form-control form-control-sm" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
-    <li role="presentation" class="category" data-all="all">
-        <a class="dropdown-item" role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
+    <li role="presentation" class="category" data-cid="all">
+        <a class="dropdown-item" role="menu-item" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
     </li>
     {{{each categoryItems}}}
     <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
         <a class="dropdown-item" role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
             <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
                 <div class="category-item d-inline-block">
+                    {{{ if ./icon }}}
                     {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                    {{{ end }}}
                     {./name}
                 </div>
             </span>

package/templates/partials/groups/sidebar-left.tpl

@@ -1,5 +1,5 @@
 <div class="flex-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;">
+	<div class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem; z-index: 1;">
 		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
 			<div class="flex-1">[[global:posts]]</div>
 		</button>

package/templates/partials/posts_list_item.tpl

@@ -1,19 +1,19 @@
 <hr/>
-<a class="topic-title fw-semibold fs-5 text-reset text-break" href="{config.relative_path}/post/{./pid}">
+<a class="d-inline-block topic-title fw-semibold fs-5 mb-3 text-reset text-break" href="{config.relative_path}/post/{./pid}">
     {{{ if !./isMainPost }}}RE: {{{ end }}}{./topic.title}
 </a>
 <li component="post" class="posts-list-item  {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
     <div class="post-body d-flex flex-column gap-1">
         <div class="d-flex gap-3 post-info">
             <div class="post-author d-flex gap-1">
-                <a class="lh-1" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
+                <a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
                 <a class="fw-semibold text-sm" href="{config.relative_path}/user/{./user.userslug}">{../user.displayname}</a>
             </div>
-            <span class="timeago text-sm text-muted" title="{../timestampISO}"></span>
+            <span class="timeago text-sm text-muted" title="{./timestampISO}"></span>
         </div>
 
         <div component="post/content" class="content text-sm text-break">
-            {../content}
+            {./content}
         </div>
     </div>
 </li>

package/templates/partials/search-filters.tpl

@@ -0,0 +1,184 @@
+<div class="d-flex flex-wrap gap-2 align-items-center" component="search/filters">
+	<!-- category filter -->
+	<div class="post-search-item">
+		<div component="category/filter" class="dropdown" data-filter-name="category">
+			<a component="category/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.categories.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.categories.active }}}{filters.categories.label}{{{ else }}}[[search:categories]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu">
+				<li class="px-3 py-1 mb-2 d-flex flex-column gap-2">
+					<div component="category-selector-search">
+						<input type="text" class="form-control" component="category/filter/search" placeholder="[[search:type-a-category]]">
+					</div>
+				</li>
+				<div component="category/list" class="overflow-auto" style="max-height: 350px;"></div>
+				<div class="px-3 py-1">
+					<div class="form-check">
+						<input id="search-children" class="form-check-input" type="checkbox"/>
+						<label class="form-check-label" for="search-children">[[search:search-child-categories]]</label>
+					</div>
+				</div>
+			</ul>
+		</div>
+	</div>
+
+
+	<!-- tag filter -->
+	<div class="post-search-item">
+		<div component="tag/filter" class="dropdown" data-filter-name="tag">
+			<a component="tag/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.tags.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.tags.active }}}{filters.tags.label}{{{ else }}}[[search:tags]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<input type="text" class="form-control" component="tag/filter/search" placeholder="[[search:type-a-tag]]">
+					<div component="tag/filter/selected" class="d-flex flex-wrap gap-2">
+						{{{ each tagFilterSelected }}}
+						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+							<div>{./valueEscaped}</div>
+							<button component="tag/filter/delete" data-tag="{./valueEscaped}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+					<div component="tag/filter/results" class="d-flex flex-wrap gap-2">
+						{{{ each tagFilterResults }}}
+						<button class="btn btn-light btn-sm border" data-tag="{./valueEscaped}">{./valueEscaped}</button>
+						{{{ end }}}
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<!-- user name filter -->
+	<div class="post-search-item">
+		<div component="user/filter" class="dropdown" data-filter-name="user">
+			<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.users.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.users.active }}}{filters.users.label}{{{ else }}}[[search:posted-by]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<input type="text" class="form-control" component="user/filter/search" placeholder="[[search:type-a-username]]">
+					<div component="user/filter/selected" class="d-flex flex-wrap gap-2">
+						{{{ each userFilterSelected }}}
+						<div class="d-flex px-2 py-1 rounded-1 text-bg-primary gap-2 align-items-center text-sm">
+							{buildAvatar(@value, "16px", true)} {./username}
+							<button component="user/filter/delete" data-uid="{./uid}" class="btn btn-primary btn-sm py-0"><i class="fa fa-times fa-xs"></i></button>
+						</div>
+						{{{ end }}}
+					</div>
+					<hr/>
+					<div component="user/filter/results" class="d-flex flex-wrap gap-2">
+						{{{ each userFilterResults }}}
+						<button class="btn btn-light btn-sm border" data-uid="{./uid}" data-username="{./username}">{buildAvatar(@value, "16px", true)} {./username}</button>
+						{{{ end }}}
+					</div>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+
+	<!-- reply count filter -->
+	<div class="post-search-item">
+		<div class="dropdown" data-filter-name="replies">
+			<a id="reply-count-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.replies.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.replies.active }}}{filters.replies.label}{{{ else }}}[[search:replies]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu" style="width: 300px;">
+				<li class="px-3 py-1 d-flex flex-nowrap gap-2">
+					<select id="reply-count-filter" class="form-select py-2 ps-2 pe-3">
+						<option value="atleast">[[search:at-least]]</option>
+						<option value="atmost">[[search:at-most]]</option>
+					</select>
+					<input id="reply-count" type="number" min="0" class="form-control py-2 ps-2 pe-3" />
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<!-- time filter -->
+	<div class="post-search-item">
+		<div class="dropdown" data-filter-name="time">
+			<a id="post-time-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.time.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.time.active }}}{filters.time.label}{{{ else }}}[[search:time]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu" style="width: 350px;">
+				<li class="px-3 py-1 d-flex flex-nowrap gap-2">
+					<select id="post-time-filter" class="form-select py-2 ps-2 pe-3">
+						<option value="newer">[[search:newer-than]]</option>
+						<option value="older">[[search:older-than]]</option>
+					</select>
+					<select id="post-time-range" class="form-select py-2 ps-2 pe-3">
+						<option value="">[[search:any-date]]</option>
+						<option value="86400">[[search:yesterday]]</option>
+						<option value="604800">[[search:one-week]]</option>
+						<option value="1209600">[[search:two-weeks]]</option>
+						<option value="2592000">[[search:one-month]]</option>
+						<option value="7776000">[[search:three-months]]</option>
+						<option value="15552000">[[search:six-months]]</option>
+						<option value="31104000">[[search:one-year]]</option>
+					</select>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<!-- sort filter -->
+	<div class="post-search-item">
+		<div class="dropdown" data-filter-name="sort">
+			<a id="sort-by-button" class="filter-btn btn btn-light btn-sm border {{{ if filters.sort.active }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+				<span class="filter-label">{{{ if filters.sort.active }}}{filters.sort.label}{{{ else }}}[[search:sort]]{{{ end }}}</span>
+				<span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu" style="width: 250px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<select id="post-sort-by" class="form-select py-2 ps-2 pe-3">
+						<option value="relevance">[[search:relevance]]</option>
+						<option value="timestamp">[[search:post-time]]</option>
+						<option value="votes">[[search:votes]]</option>
+						<option value="topic.lastposttime">[[search:last-reply-time]]</option>
+						<option value="topic.title">[[search:topic-title]]</option>
+						<option value="topic.postcount">[[search:number-of-replies]]</option>
+						<option value="topic.viewcount">[[search:number-of-views]]</option>
+						<option value="topic.votes">[[search:topic-votes]]</option>
+						<option value="topic.timestamp">[[search:topic-start-date]]</option>
+						<option value="user.username">[[search:username]]</option>
+						<option value="category.name">[[search:category]]</option>
+					</select>
+					<select id="post-sort-direction" class="form-select py-2 ps-2 pe-3">
+						<option value="desc">[[search:descending]]</option>
+						<option value="asc">[[search:ascending]]</option>
+					</select>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+	<!-- save & reset preferences -->
+	<div class="post-search-item">
+		<div class="dropdown">
+			<a class="btn btn-light btn-sm border border-gray-300 dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">[[search:save]] <span class="caret"></span>
+			</a>
+
+			<ul class="dropdown-menu" style="width: 300px;">
+				<li class="px-3 py-1 d-flex flex-column gap-2">
+					<button id="save-preferences" class="btn btn-primary">[[search:save-preferences]]</button>
+					<button id="clear-preferences" class="btn-outline border">[[search:clear-preferences]]</button>
+				</li>
+			</ul>
+		</div>
+	</div>
+</div>

package/templates/partials/search-results.tpl

@@ -1,41 +1,37 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
-<div id="results" class="search-results col-md-12" data-search-query="{search_query}">
-	{{{ if matchCount }}}
-	<div class="alert alert-info">[[search:results_matching, {matchCount}, {search_query}, {time}]] </div>
-	{{{ else }}}
-	{{{ if search_query }}}
-	<div class="alert alert-warning">[[search:no-matches]]</div>
+{{{ if matchCount }}}
+<div class="card card-header text-xs px-2 py-1 fw-semibold border-0 align-self-start">[[search:results_matching, {matchCount}, {search_query}, {time}]] </div>
+{{{ else }}}
+{{{ if search_query }}}
+<div class="badge text-bg-warning align-self-start">[[search:no-matches]]</div>
+{{{ end }}}
+{{{ end }}}
+
+<div id="results" class="search-results" data-search-query="{search_query}">
+	{{{ if showAsPosts }}}
+	{{{ if posts.length }}}
+	<!-- IMPORT partials/posts_list.tpl -->
 	{{{ end }}}
 	{{{ end }}}
 
-	{{{each posts}}}
-	<div class="topic-row card clearfix mb-3">
-		<div class="card-body">
-			<div>
-				<a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "24px", true)}</a>
-				<span class="search-result-text search-result-title"><a href="{config.relative_path}/post/{posts.pid}">{./topic.title}</a></span>
-			</div>
-
-			{{{ if showAsPosts }}}
-			<div class="search-result-text">
-				{./content}
-				<p class="fade-out"></p>
+	{{{ if showAsTopics }}}
+	{{{ each posts }}}
+	<hr/>
+	<div class="topic-row  mb-3">
+		<a class="topic-title fw-semibold fs-5 text-reset text-break" href="{config.relative_path}/post/{./pid}">
+			{{{ if !./isMainPost }}}RE: {{{ end }}}{./topic.title}
+		</a>
+		<div class="post-body d-flex flex-column gap-1">
+			<div class="d-flex gap-3 post-info">
+				<div class="post-author d-flex gap-1">
+					<a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
+					<a class="fw-semibold text-sm" href="{config.relative_path}/user/{./user.userslug}">{../user.displayname}</a>
+				</div>
+				<span class="timeago text-sm text-muted" title="{./timestampISO}"></span>
 			</div>
-			{{{ end }}}
-
-			<small class="post-info float-end">
-				<a href="{config.relative_path}/category/{./category.slug}">
-					<div class="category-item d-inline-block">
-						{buildCategoryIcon(./category, "24px", "rounded-circle")}
-						{./category.name}
-					</div>
-				</a> &bull;
-				<span class="timeago" title="{./timestampISO}"></span>
-			</small>
 		</div>
 	</div>
-	{{{end}}}
+	{{{ end }}}
+	{{{ end }}}
 
 	{{{ if users.length }}}
 	<!-- IMPORT partials/users_list.tpl -->

package/templates/partials/topic/post.tpl

@@ -1,3 +1,11 @@
+{{{ if (!./index && widgets.mainpost-header.length) }}}
+<div data-widget-area="mainpost-header">
+	{{{ each widgets.mainpost-header }}}
+	{widgets.mainpost-header.html}
+	{{{ end }}}
+</div>
+{{{ end }}}
+
 <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 }}}">
@@ -116,4 +124,12 @@
 
 		<!-- IMPORT partials/topic/post-menu.tpl -->
 	</div>
-</div>
+</div>
+
+{{{ if (!./index && widgets.mainpost-footer.length) }}}
+<div data-widget-area="mainpost-footer">
+	{{{ each widgets.mainpost-footer }}}
+	{widgets.mainpost-footer.html}
+	{{{ end }}}
+</div>
+{{{ end }}}

package/templates/partials/topics_list.tpl

@@ -93,7 +93,7 @@
 				</div>
 			</div>
 
-			<div class="col-md-3 col-sm-3 teaser d-none d-md-block overflow-hidden" component="topic/teaser">
+			<div class="col-md-3 col-sm-3 teaser d-none d-md-block overflow-hidden align-selft-start" component="topic/teaser">
 				<div class="lastpost background-link-container border-start border-2 h-100" style="border-color: {./category.bgColor}!important;">
 					<a class="background-link" href="{config.relative_path}/topic/{./slug}/{./teaser.index}"></a>
 					{{{ if ./unreplied }}}

package/templates/search.tpl

@@ -1,183 +1,45 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="search">
-	<div class="row">
-		<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
-			<form id="advanced-search" class="mb-3">
-				<div class="mb-3">
-					<div class="row">
-						<div class="col-md-5">
-							<label class="form-label">[[global:search]]</label>
-							<input type="text" class="form-control" id="search-input" placeholder="[[global:search]]">
-						</div>
-						<div class="col-md-3">
-							<label class="form-label">[[search:in]]</label>
-							<select id="search-in" class="form-select">
-								<option value="titlesposts">[[search:titles-posts]]</option>
-								<option value="titles">[[search:titles]]</option>
-								<option value="posts">[[global:posts]]</option>
-								<option value="categories">[[global:header.categories]]</option>
-								{{{if privileges.search:users}}}
-								<option value="users">[[global:users]]</option>
-								{{{end}}}
-								{{{if privileges.search:tags}}}
-								<option value="tags">[[tags:tags]]</option>
-								{{{end}}}
-							</select>
-						</div>
-						<div class="col-md-2">
-							<label class="form-label">[[search:match-words]]</label>
-							<select id="match-words-filter" class="form-select">
-								<option value="all">[[search:all]]</option>
-								<option value="any">[[search:any]]</option>
-							</select>
-						</div>
-						<div class="col-md-2">
-							<label class="form-label">&nbsp;</label>
-							<button type="submit" class="btn btn-primary form-control">[[global:search]]</button>
-						</div>
-					</div>
-				</div>
-
-				<div class="card">
-					<h5 class="card-header pointer" data-bs-toggle="collapse" data-bs-target=".search-options">
-						<i class="fa fa-sort"></i> [[search:advanced-search]]
-					</h5>
-					<div class="collapse search-options {{{ if expandSearch }}}show{{{ end }}}">
-					<div class="card-body">
-						<div class="mb-2 post-search-item">
-							<div class="row">
-								<div class="col-md-6">
-									<label class="form-label">[[search:in-categories]]</label>
-									<select multiple class="form-select" id="posted-in-categories" size="{allCategoriesCount}">
-										{{{each allCategories}}}
-										<option value="{allCategories.value}">{allCategories.text}</option>
-										{{{end}}}
-									</select>
-									<div class="form-check">
-										<input id="search-children" class="form-check-input" type="checkbox"/>
-										<label class="form-check-label" for="search-children">[[search:search-child-categories]]</label>
-									</div>
-								</div>
-								<div class="col-md-6">
-									<div class="mb-2 post-search-item">
-										<div class="row">
-											<div class="col-md-6">
-												<label class="form-label">[[search:posted-by]]</label>
-												<div>
-													<input type="text" class="form-control" id="posted-by-user">
-												</div>
-											</div>
-											<div class="col-md-6">
-												<label class="form-label">[[search:has-tags]]</label>
-												<div>
-													<input type="text" class="form-control" id="has-tags">
-												</div>
-											</div>
-										</div>
-									</div>
-
-									<div class="mb-2 post-search-item">
-										<label class="form-label">[[search:reply-count]]</label>
-										<div class="row">
-											<div class="col-md-6">
-												<select id="reply-count-filter" class="form-select">
-													<option value="atleast">[[search:at-least]]</option>
-													<option value="atmost">[[search:at-most]]</option>
-												</select>
-											</div>
-											<div class="col-md-6">
-												<input type="text" class="form-control" id="reply-count">
-											</div>
-										</div>
-									</div>
-
-									<div class="mb-2 post-search-item">
-										<label class="form-label">[[search:post-time]]</label>
-										<div class="row">
-											<div class="col-md-6">
-												<select id="post-time-filter" class="form-select">
-													<option value="newer">[[search:newer-than]]</option>
-													<option value="older">[[search:older-than]]</option>
-												</select>
-											</div>
-											<div class="col-md-6">
-												<select id="post-time-range" class="form-select">
-													<option value="">[[search:any-date]]</option>
-													<option value="86400">[[search:yesterday]]</option>
-													<option value="604800">[[search:one-week]]</option>
-													<option value="1209600">[[search:two-weeks]]</option>
-													<option value="2592000">[[search:one-month]]</option>
-													<option value="7776000">[[search:three-months]]</option>
-													<option value="15552000">[[search:six-months]]</option>
-													<option value="31104000">[[search:one-year]]</option>
-												</select>
-											</div>
-										</div>
-									</div>
-
-									<div class="mb-2 post-search-item">
-										<label class="form-label">[[search:sort-by]]</label>
-										<div class="row">
-											<div class="col-md-6">
-												<select id="post-sort-by" class="form-select">
-													<option value="relevance">[[search:relevance]]</option>
-													<option value="timestamp">[[search:post-time]]</option>
-													<option value="votes">[[search:votes]]</option>
-													<option value="topic.lastposttime">[[search:last-reply-time]]</option>
-													<option value="topic.title">[[search:topic-title]]</option>
-													<option value="topic.postcount">[[search:number-of-replies]]</option>
-													<option value="topic.viewcount">[[search:number-of-views]]</option>
-													<option value="topic.votes">[[search:topic-votes]]</option>
-													<option value="topic.timestamp">[[search:topic-start-date]]</option>
-													<option value="user.username">[[search:username]]</option>
-													<option value="category.name">[[search:category]]</option>
-												</select>
-											</div>
-											<div class="col-md-6">
-												<select id="post-sort-direction" class="form-select">
-													<option value="desc">[[search:descending]]</option>
-													<option value="asc">[[search:ascending]]</option>
-												</select>
-											</div>
-										</div>
-									</div>
-
-									<div class="mb-2 post-search-item">
-										<label class="form-label">[[search:show-results-as]]</label>
-										<div class="radio">
-											<label>
-												<input type="radio" name="options" id="show-as-posts" checked>
-												[[global:posts]]
-											</label>
-										</div>
-										<div class="radio">
-											<label>
-												<input type="radio" name="options" id="show-as-topics">
-												[[global:topics]]
-											</label>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-
-						<div class="btn-group">
-							<button type="submit" class="btn btn-primary">[[global:search]]</button>
-							<a class="btn btn-outline-secondary" id="save-preferences" href="#">[[search:save-preferences]]</a>
-							<a class="btn btn-outline-secondary" id="clear-preferences" href="#">[[search:clear-preferences]]</a>
-						</div>
-					</div>
-					</div>
-				</div>
+	<div id="advanced-search" class="d-flex flex-column flex-md-row">
+		<!-- sidebar -->
+		<div class="flex-0 pe-2 border-end-md text-sm mb-3" style="flex-basis: 240px!important;">
+			<form action="{config.relative_path}/search" method="get" class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-3 pe-md-3" style="top: 1rem; z-index: 1;">
+				<h2 class="fw-semibold tracking-tight mb-0">[[global:search]]</h2>
+
+				<input id="search-input" name="term" type="text" class="form-control fw-semibold py-2 ps-2 pe-3" id="search-input" placeholder="[[search:type-to-search]]">
+
+				<select id="search-in" name="in" class="form-select text-sm py-2 ps-2 pe-3">
+					<option value="titlesposts">[[search:in-titles-posts]]</option>
+					<option value="titles">[[search:in-titles]]</option>
+					<option value="posts">[[search:in-posts]]</option>
+					<option value="categories">[[search:in-categories]]</option>
+					{{{if privileges.search:users}}}
+					<option value="users">[[search:in-users]]</option>
+					{{{end}}}
+					{{{if privileges.search:tags}}}
+					<option value="tags">[[search:in-tags]]</option>
+					{{{end}}}
+				</select>
+
+				<select id="match-words-filter" name="matchWords" class="post-search-item form-select text-sm py-2 ps-2 pe-3">
+					<option value="all">[[search:match-all-words]]</option>
+					<option value="any">[[search:match-any-word]]</option>
+				</select>
+
+				<select id="show-results-as" name="showAs" class="post-search-item form-select text-sm py-2 ps-2 pe-3">
+					<option value="posts" selected>[[search:show-results-as-posts]]</option>
+					<option value="topics">[[search:show-results-as-topics]]</option>
+				</select>
+
+				<button type="submit" class="btn btn-primary fw-semibold form-control py-2 px-3">[[global:search]]</button>
 			</form>
-
-			<!-- IMPORT partials/search-results.tpl -->
 		</div>
-		<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
-			{{{each widgets.sidebar}}}
-			{{widgets.sidebar.html}}
-			{{{end}}}
+
+		<!-- filters and search results -->
+		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width:0;">
+			<div class="d-flex flex-column gap-3">
+				<!-- IMPORT partials/search-filters.tpl -->
+				<!-- IMPORT partials/search-results.tpl -->
+			</div>
 		</div>
 	</div>
 </div>