nodebb-theme-harmony 1.0.0-beta.4 → 1.0.0-beta.40

package/templates/partials/topic/watch.tpl

@@ -1,5 +1,5 @@
 {{{ if config.loggedIn }}}
-<div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
+<div class="btn-group bottom-sheet" component="topic/watch">
 	<button class="btn-ghost-sm d-flex gap-2 align-items-baseline dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span component="topic/following/menu" class="d-flex gap-2 align-items-center{{{ if !isFollowing }}} hidden{{{ end }}}">
 			<i class="fa fa-fw fa-bell-o link-primary"></i>
@@ -17,11 +17,35 @@
 		</span>
 	</button>
 	<ul class="dropdown-menu">
-		<li><a class="dropdown-item" href="#" component="topic/following"><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-bell-o"></i> [[topic:watching]]<p class="help-text text-muted"><small>[[topic:watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="topic/following">
+				<span><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-bell-o"></i> [[topic:watching]]</span>
+					<p class="help-text text-muted"><small>[[topic:watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="topic/not-following"><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-bell-slash-o"></i> [[topic:not-watching]]<p class="help-text text-muted"><small>[[topic:not-watching.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="topic/not-following">
+				<span><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-bell-slash-o"></i> [[topic:not-watching]]</span>
+					<p class="help-text text-muted"><small>[[topic:not-watching.description]]</small></p>
+				</div>
+			</a>
+		</li>
 
-		<li><a class="dropdown-item" href="#" component="topic/ignoring"><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]<p class="help-text text-muted"><small>[[topic:ignoring.description]]</small></p></a></li>
+		<li>
+			<a class="dropdown-item d-flex" href="#" component="topic/ignoring">
+				<span><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i></span>
+				<div class="d-flex flex-column">
+					<span><i class="fa fa-fw fa-eye-slash"></i> [[topic:ignoring]]</span>
+					<p class="help-text text-muted"><small>[[topic:ignoring.description]]</small></p>
+				</div>
+			</a>
+		</li>
 	</ul>
 </div>
 {{{ end }}}

package/templates/partials/topic-list-bar.tpl

@@ -1,5 +1,5 @@
-<nav class="topic-list-header {{{ if config.stickyToolbar }}} sticky-tools{{{ end }}} navbar navbar-expand p-0 border-0 rounded">
-	<div class="card card-header flex-row p-2 border rounded ff-secondary w-100">
+<nav class="topic-list-header {{{ if config.theme.stickyToolbar }}} sticky-tools{{{ end }}} navbar navbar-expand p-0 border-0 rounded mb-3">
+	<div class="card card-header flex-row p-2 gap-1 border rounded ff-secondary w-100">
 		<ul class="navbar-nav me-auto gap-2 align-items-center">
 			{{{ if template.category }}}
 			<!-- IMPORT partials/category/watch.tpl -->
@@ -10,15 +10,15 @@
 			{{{ end }}}
 			{{{ if (template.unread || (template.recent || (template.popular || template.top))) }}}
 			<!-- IMPORT partials/topic-filters.tpl -->
-			<!-- IMPORT partials/category-filter.tpl -->
+			<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
 			{{{ end }}}
 			{{{ if template.unread }}}
 			<div class="markread btn-group {{{ if !topics.length }}}hidden{{{ end }}}">
-				<!-- IMPORT partials/category-selector.tpl -->
+				<!-- IMPORT partials/category/selector-dropdown-left.tpl -->
 			</div>
 			{{{ end }}}
 			{{{ if template.tag }}}
-			<!-- IMPORT partials/category-filter.tpl -->
+			<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
 			{{{ end }}}
 			<!-- IMPORT partials/category/tools.tpl -->
 
@@ -27,11 +27,11 @@
 			{{{ end }}}
 
 			<a href="{config.relative_path}{{{ if template.category }}}{url}{{{ else }}}/{selectedFilter.url}{querystring}{{{ end }}}" class="d-inline-block text-decoration-none">
-				<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex align-items-center hide" id="new-topics-alert"></div>
+				<div class="d-md-block alert alert-warning h-100 m-0 px-2 py-1 line-clamp-2 text-sm text-break hide" id="new-topics-alert">There is a new post. Click here to reload.</div>
 			</a>
 		</ul>
 
-		<div class="d-flex gap-1 align-items-stretch">
+		<div class="d-flex gap-1 align-items-center">
 			{{{ if template.category }}}
 				{{{ if privileges.topics:create }}}
 				<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary btn-sm text-nowrap" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>

package/templates/partials/topics_list.tpl

@@ -1,4 +1,4 @@
-<ul component="category" class="list-unstyled topic-list pt-4 overflow-auto position-relative" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
+<ul component="category" class="list-unstyled topic-list overflow-auto position-relative" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
 
 	{{{ each topics }}}
 	<li component="category/topic" class="category-item position-relative {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
@@ -14,9 +14,9 @@
 					<div class="avatar">
 						<a href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" class="text-decoration-none">
 							{{{ if ./thumbs.length }}}
-							<img src="{./thumbs.0.url}" class="not-responsive" />
+							<img class="topic-thumb rounded-1" width="80" height="auto" src="{./thumbs.0.url}" class="not-responsive" />
 							{{{ else }}}
-							{buildAvatar(./user, "40px", true, "not-responsive")}
+							{buildAvatar(./user, "40px", true, "avatar-tooltip not-responsive")}
 							{{{ end }}}
 						</a>
 					</div>
@@ -69,52 +69,52 @@
 					</div>
 				</div>
 			</div>
-
-			<div class="col-md-2 d-none d-lg-flex stats text-muted gap-2 px-0">
-				{{{ if !reputation:disabled }}}
-				<div class="stats-votes flex-1">
-					<div class="align-items-center card card-header px-0 py-2 border-0 rounded-1">
-						<span class="human-readable-number fs-5 fw-semibold ff-secondary lh-1" title="{./votes}" data-toFixed="0">{./votes}</span>
-						<span class="text-lowercase text-xs">[[global:votes]]</span>
+			<div class="row col-md-5 col-sm-3 d-none d-md-flex align-self-stretch align-self-lg-start">
+				<div class="col-md-5 d-none d-lg-flex stats text-muted gap-2 px-0">
+					{{{ if !reputation:disabled }}}
+					<div class="stats-votes flex-1">
+						<div class="align-items-center card card-header px-0 py-2 border-0 rounded-1">
+							<span class="human-readable-number fs-5 fw-semibold ff-secondary lh-1" title="{./votes}" data-toFixed="0">{./votes}</span>
+							<span class="text-lowercase text-xs">[[global:votes]]</span>
+						</div>
 					</div>
-				</div>
-				{{{ end }}}
-				<div class="stats-postcount flex-1">
-					<div class="align-items-center card card-header px-0 py-2 border-0 rounded-1">
-						<span class="human-readable-number fs-5 fw-semibold ff-secondary lh-1" title="{./postcount}" data-toFixed="0">{./postcount}</span>
-						<span class="text-lowercase text-xs">[[global:posts]]</span>
+					{{{ end }}}
+					<div class="stats-postcount flex-1">
+						<div class="align-items-center card card-header px-0 py-2 border-0 rounded-1">
+							<span class="human-readable-number fs-5 fw-semibold ff-secondary lh-1" title="{./postcount}" data-toFixed="0">{./postcount}</span>
+							<span class="text-lowercase text-xs">[[global:posts]]</span>
+						</div>
 					</div>
-				</div>
-				<div class="stats-viewcount flex-1">
-					<div class="align-items-center card card-header px-0 py-2 border-0 rounded-1">
-						<span class="human-readable-number fs-5 fw-semibold ff-secondary lh-1" title="{./viewcount}" data-toFixed="0">{./viewcount}</span>
-						<span class="text-lowercase text-xs">[[global:views]]</span>
+					<div class="stats-viewcount flex-1">
+						<div class="align-items-center card card-header px-0 py-2 border-0 rounded-1">
+							<span class="human-readable-number fs-5 fw-semibold ff-secondary lh-1" title="{./viewcount}" data-toFixed="0">{./viewcount}</span>
+							<span class="text-lowercase text-xs">[[global:views]]</span>
+						</div>
 					</div>
 				</div>
-			</div>
 
-			<div class="col-md-3 col-sm-3 teaser d-none d-md-block overflow-hidden" 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 }}}
-					<p class="ps-3 text-xs lh-1">
-						[[category:no_replies]]
-					</p>
-					{{{ else }}}
-					{{{ if ./teaser.pid }}}
-					<p class="ps-3 mb-0 lh-1">
-						<a href="{config.relative_path}/user/{./teaser.user.userslug}" class="text-decoration-none">{buildAvatar(./teaser.user, "18px", true, "not-responsive")}</a>
-						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}">
-						</a>
-					</p>
-					<div class="post-content overflow-hidden text-xs line-clamp-2 ps-3">
-						{./teaser.content}
+				<div class="col-md-7 col-sm-3 teaser d-none d-md-block overflow-hidden" 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 }}}
+						<p class="ps-3 text-xs lh-1">
+							[[category:no_replies]]
+						</p>
+						{{{ else }}}
+						{{{ if ./teaser.pid }}}
+						<p class="ps-3 mb-0 lh-1">
+							<a href="{config.relative_path}/user/{./teaser.user.userslug}" class="text-decoration-none">{buildAvatar(./teaser.user, "18px", true, "avatar-tooltip not-responsive")}</a>
+							<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}">
+							</a>
+						</p>
+						<div class="post-content overflow-hidden text-xs line-clamp-2 ps-3">
+							{./teaser.content}
+						</div>
+						{{{ end }}}
+						{{{ end }}}
 					</div>
-					{{{ end }}}
-					{{{ end }}}
 				</div>
 			</div>
-
 			{{{ if showSelect }}}
 			<div class="position-absolute top-0 end-0 w-auto p-0">
 				<i component="topic/select" class="fa fa-square-o fs-5 text-muted pointer"></i>

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

@@ -0,0 +1,20 @@
+<button type="button" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown">
+	{{{ if selectedUser }}}
+	<span class="fw-semibold">{buildAvatar(selectedUser, "20px", true, "not-responsive")} {selectedUser.username}</span>
+	{{{ else }}}
+	<span class="fw-semibold">[[users:all-users]]</span>
+	{{{ end }}} <span class="caret"></span>
+</button>
+<ul class="dropdown-menu" role="menu">
+	<li role="presentation" class="user {{{ if !selectedUser}}}selected{{{end}}}">
+		<a class="dropdown-item" role="menu-item" href="{config.relative_path}/{allUsersUrl}"><i class="fa fa-fw {{{ if !selectedUser }}}fa-check{{{ end }}}"></i>[[users:all-users]]</a>
+	</li>
+	{{{ each users }}}
+	<li role="presentation" class="user {{{ if ./selected}}}selected{{{end}}}">
+		<a class="dropdown-item" role="menu-item" href="{config.relative_path}/{./url}">
+			<i class="fa fa-fw {{{ if ./selected }}}fa-check{{{ end }}}"></i>
+			<div class="d-inline-flex gap-1 align-items-center">{buildAvatar(@value, "24px", true, "not-responsive")} {./username}</div>
+		</a>
+	</li>
+	{{{end}}}
+</ul>

package/templates/popular.tpl

@@ -7,7 +7,7 @@
 	<!-- IMPORT partials/topic-list-bar.tpl -->
 	<div class="category">
 		{{{ if !topics.length }}}
-		<div class="alert alert-warning" id="category-no-topics">[[recent:no_popular_topics]]</div>
+		<div class="alert alert-info mt-3" id="category-no-topics">[[recent:no_popular_topics]]</div>
 		{{{ end }}}
 
 		<!-- IMPORT partials/topics_list.tpl -->

package/templates/post-queue.tpl

@@ -0,0 +1,112 @@
+<div class="btn-toolbar justify-content-end">
+	{{{ if (!singlePost && posts.length) }}}
+	<div class="me-2">
+	<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
+	</div>
+	<div class="btn-group bottom-sheet" component="post-queue/bulk-actions">
+		<button type="button" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false">
+			<i class="fa fa-clone"></i><span class="fw-semibold"> [[post-queue:bulk-actions]]</span>
+		</button>
+		<ul class="dropdown-menu dropdown-menu-end">
+			{{{ if canAccept }}}
+			<li><a class="dropdown-item" href="#" data-action="accept-all">[[post-queue:accept-all]]</a></li>
+			<li><a class="dropdown-item" href="#" data-action="accept-selected">[[post-queue:accept-selected]]</a></li>
+			<li class="dropdown-divider"></li>
+			<li><a class="dropdown-item" href="#" data-action="reject-all">[[post-queue:reject-all]]</a></li>
+			<li><a class="dropdown-item" href="#" data-action="reject-selected">[[post-queue:reject-selected]]</a></li>
+			{{{ else }}}
+			<li><a class="dropdown-item" href="#" data-action="reject-all">[[post-queue:remove-all]]</a></li>
+			<li><a class="dropdown-item" href="#" data-action="reject-selected">[[post-queue:remove-selected]]</a></li>
+			{{{ end }}}
+		</ul>
+	</div>
+	{{{ end }}}
+</div>
+<hr/>
+<div class="row">
+	<div class="col-12">
+		<div class="post-queue preventSlideout posts-list">
+			{{{ if !posts.length }}}
+			{{{ if isAdmin }}}
+			<div class="card card-body">
+				<p>
+				[[post-queue:description, {config.relative_path}/admin/settings/post#post-queue]]
+				</p>
+			</div>
+			{{{ end }}}
+			{{{ end }}}
+
+			{{{ each posts }}}
+			<div class="card mb-3" data-id="{posts.id}">
+				<div class="card-header">
+					{{{ if !singlePost }}}
+					<input type="checkbox" class="form-check-input" autocomplete="off" />
+					{{{ end }}}
+					<strong>{{{ if posts.data.tid }}}[[post-queue:reply]]{{{ else }}}[[post-queue:topic]]{{{ end }}}</strong>
+					<span class="timeago float-end" title={posts.data.timestampISO}></span>
+				</div>
+				<div class="card-body">
+					<div class="row">
+						<div class="col-lg-2 col-12">
+							<strong>[[post-queue:user]]</strong>
+							<div>
+								{{{ if posts.user.userslug}}}
+								<a href="{config.relative_path}/uid/{posts.user.uid}">{buildAvatar(posts.user, "24px", true, "not-responsive")} {posts.user.username}</a>
+								{{{ else }}}
+								{posts.user.username}
+								{{{ end }}}
+							</div>
+						</div>
+						<div class="col-lg-3 col-12">
+							<strong>[[post-queue:category]]{{{ if posts.data.cid}}} <i class="fa fa-fw fa-edit" data-bs-toggle="tooltip" title="[[post-queue:category-editable]]"></i>{{{ end }}}</strong>
+							<div class="topic-category" {{{if posts.data.cid}}}data-editable="editable"{{{end}}}">
+								<a href="{config.relative_path}/category/{posts.category.slug}">
+									<div class="category-item d-inline-block">
+										{buildCategoryIcon(./category, "24px", "rounded-circle")}
+										{posts.category.name}
+									</div>
+								</a>
+							</div>
+						</div>
+						<div class="col-lg-7 col-12">
+							<strong>{{{ if posts.data.tid }}}[[post-queue:topic]]{{{ else }}}[[post-queue:title]] <i class="fa fa-fw fa-edit" data-bs-toggle="tooltip" title="[[post-queue:title-editable]]"></i>{{{ end }}}</strong>
+							<div class="topic-title text-break">
+								{{{ if posts.data.tid }}}
+								<a href="{config.relative_path}/topic/{posts.data.tid}">{posts.topic.title}</a>
+								{{{ end }}}
+								<span class="title-text">{posts.data.title}</span>
+							</div>
+							{{{if !posts.data.tid}}}
+							<div class="topic-title-editable hidden">
+								<input class="form-control" type="text" value="{posts.data.title}"/>
+							</div>
+							{{{end}}}
+						</div>
+					</div>
+					<hr/>
+					<div>
+						<strong>[[post-queue:content]] <i class="fa fa-fw fa-edit" data-bs-toggle="tooltip" title="[[post-queue:content-editable]]"></i></strong>
+						<div class="post-content text-break">{posts.data.content}</div>
+						<div class="post-content-editable hidden">
+							<textarea class="form-control w-100" style="height:300px;">{posts.data.rawContent}</textarea>
+						</div>
+					</div>
+				</div>
+				<div class="card-footer text-end">
+					<div>
+						{{{ if canAccept }}}
+						<button class="btn btn-danger btn-sm" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:reject]]</button>
+						<button class="btn btn-info btn-sm" data-action="notify"><i class="fa fa-fw fa-bell-o"></i> [[post-queue:notify]]</button>
+						<button class="btn btn-success btn-sm" data-action="accept"><i class="fa fa-fw fa-check"></i> [[post-queue:accept]] </button>
+						{{{ else }}}
+						<button class="btn btn-danger btn-sm" data-action="reject"><i class="fa fa-fw fa-times"></i> [[post-queue:remove]]</button>
+						{{{ end }}}
+					</div>
+				</div>
+			</div>
+			{{{ end }}}
+		</div>
+
+		<!-- IMPORT partials/paginator.tpl -->
+	</div>
+</div>

package/templates/recent.tpl

@@ -9,7 +9,7 @@
 
 	<div class="category">
 		{{{ if !topics.length }}}
-		<div class="alert alert-warning" id="category-no-topics">[[recent:no_recent_topics]]</div>
+		<div class="alert alert-info mt-3" id="category-no-topics">[[recent:no_recent_topics]]</div>
 		{{{ end }}}
 
 		<!-- IMPORT partials/topics_list.tpl -->

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>

package/templates/tags.tpl

@@ -23,7 +23,7 @@
 	</div>
 	{{{ end }}}
 	{{{ end }}}
-
+	<hr/>
 	{{{ if !tags.length }}}
 	<div class="alert alert-warning">[[tags:no_tags]]</div>
 	{{{ end }}}

package/templates/top.tpl

@@ -7,7 +7,7 @@
 	<!-- IMPORT partials/topic-list-bar.tpl -->
 	<div class="category">
 		{{{ if !topics.length }}}
-		<div class="alert alert-warning" id="category-no-topics">[[top:no_top_topics]]</div>
+		<div class="alert alert-info mt-3" id="category-no-topics">[[top:no_top_topics]]</div>
 		{{{ end }}}
 
 		<!-- IMPORT partials/topics_list.tpl -->

package/templates/topic.tpl

@@ -6,11 +6,11 @@
 </div>
 {{{ end }}}
 
-<h2 component="post/header" class="fs-2 mb-0 text-break {{{ if config.centerHeaderElements }}}text-center{{{ end }}}" itemprop="name">
+<h2 component="post/header" class="fs-2 mb-0 text-break {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}" itemprop="name">
 	<span class="topic-title" component="topic/title">{title}</span>
 </h2>
 
-<div class="topic-info d-flex gap-2 align-items-center flex-wrap {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
+<div class="topic-info d-flex gap-2 align-items-center flex-wrap {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 	<span component="topic/labels" class="d-flex gap-2">
 		<span component="topic/scheduled" class="badge badge border border-gray-300 text-primary {{{ if !scheduled }}}hidden{{{ end }}}">
 			<i class="fa fa-clock-o"></i>
@@ -28,7 +28,7 @@
 			<i class="fa fa-arrow-circle-right"></i>
 			{{{ if privileges.isAdminOrMod }}}[[topic:moved-from, {oldCategory.name}]]{{{ else }}}[[topic:moved]]{{{ end }}}
 		</span>
-		{{{each icons}}}<span class="align-middle">{@value}</span>{{{end}}}
+		{{{each icons}}}<span>{@value}</span>{{{end}}}
 	</span>
 	<a class="lh-1" href="{config.relative_path}/category/{category.slug}">{function.buildCategoryLabel, category, "border"}</a>
 	<div class="lh-1 tags tag-list d-flex hidden-xs gap-2"><!-- IMPORT partials/topic/tags.tpl --></div>
@@ -74,7 +74,7 @@
 		</div>
 		{{{ end }}}
 
-		{{{ if config.enableQuickReply }}}
+		{{{ if config.theme.enableQuickReply }}}
 		<!-- IMPORT partials/topic/quickreply.tpl -->
 		{{{ end }}}