nodebb-theme-harmony 1.0.0-beta.11 → 1.0.0-beta.14

package/package.json

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

package/scss/common.scss

@@ -14,8 +14,13 @@ body {
 .text-sm { font-size: 0.875rem!important; } // 14px
 .text-xs { font-size: 0.75rem!important; } // 12px
 
-.btn-link:hover {
-	text-decoration: none;
+.caret {
+	&::after {
+		border: none;
+		font-family: "FontAwesome";
+		content: "\f078";
+		color: tint-color($primary, 40%);
+	}
 }
 
 .sticky-tools {
@@ -35,6 +40,13 @@ body {
 	}
 }
 
+.btn-link {
+	&:hover, &.active {
+		background-color: $btn-ghost-hover-color;
+		text-decoration: none;
+	}
+}
+
 @mixin btn-ghost-base {
 	display: flex;
 	align-items: center;
@@ -48,10 +60,10 @@ body {
 	text-align: left;
 	--bs-text-opacity: 1;
 	color: inherit !important;
-	$hover-color: mix($light, $dark, 90);
+
 	cursor: pointer;
 	&:hover, &.active {
-		background-color: $hover-color;
+		background-color: $btn-ghost-hover-color;
 		text-decoration: none;
 	}
 }

package/scss/modules/composer.scss

@@ -6,10 +6,6 @@ $composer-bg: $body-bg !default;
 	background-color: $bg !important;
 }
 
-.composer {
-	z-index: 3 !important;
-}
-
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
 	$composer-color: $secondary;

package/scss/overrides.scss

@@ -39,6 +39,8 @@ $text-muted: $gray-600 !default;
 $border-color: $gray-200 !default;
 $link-color: shade-color($blue, 20%) !default;
 
+$btn-ghost-hover-color: mix($light, $dark, 90);
+
 // no caret on dropdown-toggle
 $enable-caret: false;
 

package/scss/topic.scss

@@ -16,18 +16,6 @@
 		line-height: 20px;
 	}
 
-	.action-bar {
-		.dropdown-toggle::after {
-			border: none;
-			font-family: "FontAwesome";
-			content: "\f078";
-			color: tint-color($primary, 40%);
-
-			position: relative;
-			top: 2px;
-		}
-	}
-
 	.topic {
 		.posts {
 			max-width: 960px;
@@ -69,6 +57,17 @@
 			[component="post/reply-count"] {
 				font-size: $font-size-base * .75;
 			}
+
+			[component="post/upvote"], [component="post/downvote"] {
+				&.upvoted, &.downvoted {
+					background-color: lighten($btn-ghost-hover-color, 5%);
+
+					&:hover {
+					background-color: $btn-ghost-hover-color;
+
+					}
+				}
+			}
 		}
 	}
 

package/templates/account/categories.tpl

@@ -11,7 +11,6 @@
 					<div class="btn-group bottom-sheet" component="category/watch/all">
 						<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
 							<span>[[user:change_all]]</span>
-							<span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu">
 							<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>

package/templates/category.tpl

@@ -33,8 +33,7 @@
 
 		{{{ if !topics.length }}}
 		{{{ if privileges.topics:create }}}
-		<hr class="visible-xs" />
-		<div class="alert alert-warning" id="category-no-topics">
+		<div class="alert alert-info mt-3" id="category-no-topics">
 			[[category:no_topics]]
 		</div>
 		{{{ end }}}

package/templates/flags/detail.tpl

@@ -146,7 +146,6 @@
 						<button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 							<i class="fa fa-street-view"></i>
 							[[flags:flagged-user]]
-							<span class="caret"></span>
 						</button>
 						<ul class="dropdown-menu">
 							<li><a class="dropdown-item" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>

package/templates/flags/list.tpl

@@ -18,7 +18,7 @@
 
 		<div class="btn-group float-end" component="flags/bulk-actions">
 			<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" autocomplete="off" aria-haspopup="true" aria-expanded="false" disabled="disabled">
-				<i class="fa fa-clone"></i> [[flags:bulk-actions]] <span class="caret"></span>
+				<i class="fa fa-clone"></i> <span class="fw-semibold">[[flags:bulk-actions]]</span>
 			</button>
 			<ul class="dropdown-menu">
 				<li><a href="#" class="dropdown-item" data-action="bulk-assign">[[flags:assign-to-me]]</a></li>

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

@@ -9,7 +9,7 @@
     <span class="visible-md-inline visible-lg-inline fw-semibold">[[unread:all_categories]]</span>{{{ end }}}
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <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">

package/templates/partials/category-selector-content.tpl

@@ -12,7 +12,7 @@
     </span>
 </button>
 <div component="category-selector-search" class="hidden position-absolute">
-    <input type="text" class="form-control" autocomplete="off">
+    <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 component="category/no-matches" role="presentation" class="category hidden">

package/templates/partials/sidebar/drafts.tpl

@@ -35,7 +35,7 @@
 						{{{ end }}}
 
 						{{{ if ./text }}}
-						<div class="text text-sm line-clamp-3">{./text}</div>
+						<div class="text text-sm line-clamp-3 text-break">{./text}</div>
 						{{{ end }}}
 						<div class="timeago text-xs text-muted" title="{./timestampISO}"></div>
 					</div>

package/templates/partials/topic/post.tpl

@@ -104,7 +104,7 @@
 				<i class="fa fa-chevron-up text-primary"></i>
 			</a>
 
-			<div class="d-inline-block px-3 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
+			<div class="d-inline-block px-2 mx-1 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}">{posts.votes}</div>
 
 			{{{ if !downvote:disabled }}}
 			<a component="post/downvote" href="#" class="btn-ghost-sm {{{ if posts.downvoted }}}downvoted{{{ end }}}">

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,113 @@
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div class="btn-toolbar justify-content-end">
+	{{{ if (!singlePost && posts.length) }}}
+	<div class="me-2">
+	<!-- IMPORT partials/category-filter-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/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/unread.tpl

@@ -6,7 +6,7 @@
 <div class="unread">
 	<!-- IMPORT partials/topic-list-bar.tpl -->
 	<div class="category">
-		<div id="category-no-topics" class="alert alert-warning {{{ if topics.length }}}hidden{{{ end }}}">[[unread:no_unread_topics]]</div>
+		<div id="category-no-topics" class="alert alert-info mt-3 {{{ if topics.length }}}hidden{{{ end }}}">[[unread:no_unread_topics]]</div>
 
 		<!-- IMPORT partials/topics_list.tpl -->
 		<button id="load-more-btn" class="btn btn-primary hide">[[unread:load_more]]</button>