nodebb-theme-harmony 1.0.0-beta.8 → 1.0.0-beta.81

package/scss/modules/cover.scss

@@ -12,12 +12,11 @@
 
 	&:hover {
 		.controls {
-			opacity: 0.8;
+			opacity: 1;
 		}
 	}
 
 	.controls {
-		text-align: center;
 		height: 200px;
 		line-height: 200px;
 		opacity: 0;
@@ -28,15 +27,6 @@
 		> * {
 			pointer-events: all;
 		}
-
-		.fa {
-			color: white;
-			background-color: #333;
-			opacity: 1;
-			margin: 15px;
-			padding: 5px;
-			border-radius: 4px;
-		}
 	}
 
 	&.active {

package/scss/modules/filters.scss

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

package/scss/modules/paginator.scss

@@ -0,0 +1,24 @@
+.skin-noskin [component="pagination"] {
+	.page-item.active:not(.disabled) .page-link {
+		color: $body-color;
+		background-color: $gray-300;
+		border-color: $gray-300;
+	}
+
+	.page-item:not(.disabled):hover .page-link {
+		color: $body-color;
+	}
+}
+
+[component="pagination"] {
+	.page-item.active:not(.disabled) .page-link {
+		color: $pagination-active-color;
+	}
+	.page-item:not(.disabled):hover .page-link {
+		color: $pagination-hover-color;
+		background-color: $pagination-hover-bg;
+	}
+	.page-item:not(.disabled) .page-link {
+		color: $body-color;
+	}
+}

package/scss/modules/topic-navigator.scss

@@ -1,59 +1,31 @@
-body:not(.page-topic) [component="topic/navigator"] {
-	display: none!important;
-}
-
-[component="topic/navigator"] {
-	max-height: calc(200px + (2rem * 4));
-	user-select: none;
-
-	.track {
-		width: 2px;
-		background-color: mix($dark, $light, 10%);
-
-		.handle {
+.topic .pagination-block {
+	min-width: 150px;
+	.scroller-container {
+		height: 300px;
+		border-left: 2px solid $border-color;
+
+		.scroller-thumb {
+			&:not(.active) {
+				transition: top 100ms linear;
+			}
 			cursor: grab;
-			transition: $transition-base;
-
-			&:active {
-				transition: none;
+			&.active {
 				cursor: grabbing;
 			}
-
-			.meta {
-				top: -8px;
-				left: calc($spacer + 8px);
-				font-size: 13px;
-			}
-		}
-
-		.knob {
-			width: 16px;
-			height: 16px;
-			background-color: $link-color;
-			margin-left: 1px;
 		}
 
 		.unread {
-			width: 2px;
+			width: 1px;
 			height: 0; // initial
 			bottom: 0;
 			background: $primary;
 			transition: $transition-base;
+			left: -1px;
 
 			.meta {
-				left: calc($spacer + 8px);
+				left: 5px;
 				font-size: 13px;
 			}
 		}
 	}
-}
-
-.sidebar.open {
-	[component="topic/navigator"] {
-		align-self: flex-start;
-	}
-
-	[component="topic/navigator"].d-sm-flex.mt-auto + .mt-auto {
-		margin-top: 0 !important;
-	}
 }

package/scss/modules/topics-list.scss

@@ -1,7 +1,13 @@
 .topic-list {
 	overflow-x: hidden!important;
 }
+
 [component="category/topic"] {
+	&.deleted {
+		opacity: 0.6;
+		.meta { display: none!important; }
+	}
+
 	&.selected {
 		[component="topic/select"] {
 			color: $success!important;

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;
 
@@ -53,8 +55,9 @@ $link-hover-decoration: underline;
 
 // Custom fonts
 $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font-family-secondary: "Poppins" !default;
+$font-family-secondary: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-weight-semibold: 500 !default;
+$small-font-size: 0.875rem !default;
 
 $breadcrumb-divider: quote("→");
 $breadcrumb-divider-color: $gray-500 !default;

package/scss/sidebar.scss

@@ -1,10 +1,10 @@
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
-	nav.sidebar, .bottombar {
+	nav.sidebar, .bottombar-nav {
 		color: $secondary !important;
 		background-color: $light !important;
 	}
-	.bottombar {
+	.bottombar-nav {
 		.dropdown-menu {
 			color: $secondary !important;
 			background-color: $light !important;
@@ -13,7 +13,7 @@
 }
 
 .sidebar {
-	$hover-color: mix($light, $dark, 90);
+	$hover-color: mix($light, $dark, 90%);
 
 	@include media-breakpoint-up(lg) {
 		&.open {
@@ -76,7 +76,7 @@
 	.chats-dropdown, .notifications-dropdown, .drafts-dropdown {
 		min-width: 300px;
 		width: 300px;
-		ul {
+		.list-container {
 			max-height: 400px;
 			overflow-y: auto;
 		}
@@ -87,7 +87,8 @@
 		line-height: 12px;
 		&.visible-open {
 			font-size:12px;
-			line-height: 16px;
+			line-height: 12px;
+			font-weight: normal;
 		}
 	}
 
@@ -97,7 +98,10 @@
 }
 
 .bottombar {
-	z-index: $zindex-dropdown;
+	transition: bottom 150ms linear;
+}
+
+.bottombar-nav {
 	.nav-text {
 		font-size: 1rem;
 		color: $body-color;
@@ -128,15 +132,21 @@
 		overflow: auto!important;
 	}
 	.search-dropdown .quick-search-results {
-		max-height: 250px!important;
+		max-height: 225px!important;
 		overflow-y: auto!important;
 	}
 	.search-dropdown, .chats-dropdown, .notifications-dropdown, .drafts-dropdown {
-		left: 0!important;
-		right: 0!important;
-		bottom: $spacer!important;
+		left: 0 !important;
+		right: 0 !important;
+		bottom: $spacer * 0.7 !important;
 		box-shadow: none!important;
-		ul {
+
+		border-left: 0;
+		border-right: 0;
+		border-bottom: 0;
+		border-radius: 0;
+
+		.list-container {
 			max-height: 60vh!important;
 			overflow-y: auto!important;
 		}

package/scss/topic.scss

@@ -1,3 +1,5 @@
+.pagination-block { display: none; }
+
 .page-topic {
 	[component="topic/title"] {
 		font-size: 28px;
@@ -14,21 +16,10 @@
 		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;
+			width: 960px;
 			// fixes code blocks pushing content out on mobile
 			@include media-breakpoint-down(md) {
 				max-width: calc(100vw - $grid-gutter-width);
@@ -49,11 +40,13 @@
 			}
 
 			[component="post"] {
-				&.deleted {
+				&.deleted .post-container {
 					opacity: .5;
 				}
 
 				[component="post/content"] {
+					@include fix-lists();
+
 					pre {
 						max-height: calc($font-size-base * 24);
 					}
@@ -67,6 +60,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;
+
+					}
+				}
+			}
 		}
 	}
 
@@ -106,6 +110,15 @@
 			}
 		}
 	}
+
+	.pagination-block {
+		display: block;
+		transition: opacity 250ms ease-in;
+		opacity: 0;
+		&.ready {
+			opacity: 1;
+		}
+	}
 }
 
 @include media-breakpoint-up(sm) {

package/templates/account/blocks.tpl

@@ -1,45 +1,40 @@
-<div class="account">
-	<!-- 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="d-flex justify-content-between mb-3">
-				<h3 class="fw-semibold fs-5">[[pages:account/blocks, {username}]]</h3>
-				<div class="justify-content-end">
-					<div class="dropdown">
-						<div class="input-group">
-							<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
-							<button class="btn btn-primary btn-sm" type="button">
-								<i class="fa fa-search"></i>
-							</button>
-						</div>
+<!-- IMPORT partials/account/header.tpl -->
+<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">
+		<div class="dropdown">
+			<div class="input-group">
+				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
 
-						<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end block-edit overflow-auto" style="max-height:300px;">
-							<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
-							{{{ each edit }}}
-							<li class="">
-								<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
-									<div class="text-truncate">
-										<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
-									</div>
-									<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block_toggle]]</button>
-								</div>
-							</li>
-							{{{ end }}}
-						</ul>
-					</div>
-				</div>
-			</div>
-			<div class="users">
-				<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
-					{{{ each users }}}
-					<!-- IMPORT partials/users/item.tpl -->
+				<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end block-edit overflow-auto" style="max-height:300px;">
+					<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+					{{{ each edit }}}
+					<li class="">
+						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
+							<div class="text-truncate">
+								<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
+							</div>
+							<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block_toggle]]</button>
+						</div>
+					</li>
 					{{{ end }}}
-				</div>
-				<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has_no_blocks]]</div>
-				<!-- IMPORT partials/paginator.tpl -->
+				</ul>
+
+				<button class="btn btn-primary btn-sm" type="button">
+					<i class="fa fa-search"></i>
+				</button>
 			</div>
 		</div>
-
 	</div>
-</div>
+</div>
+<div class="users">
+	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+		{{{ each users }}}
+		<!-- IMPORT partials/users/item.tpl -->
+		{{{ end }}}
+	</div>
+	<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has_no_blocks]]</div>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/categories.tpl

@@ -1,34 +1,31 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- 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;">
-			<h3 class="fw-semibold fs-5">{title}</h3>
+<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">{title}</h3>
+	</div>
 
-			<div class="row">
-				<div class="col-lg-12 mb-2">
-					<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>
-							<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
-							<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
-						</ul>
-					</div>
-				</div>
-				<div class="col-lg-12">
-					<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
-						{{{each categories}}}
-						<!-- IMPORT partials/account/category-item.tpl -->
-						{{{end}}}
-					</ul>
-					<!-- IMPORT partials/paginator.tpl -->
-				</div>
-			</div>
+	<div class="d-flex gap-1">
+		<div class="btn-group bottom-sheet" component="category/watch/all">
+			<button class="btn-ghost-sm fw-semibold dropdown-toggle" data-bs-toggle="dropdown" type="button">
+				<span>[[user:change_all]]</span>
+			</button>
+			<ul class="dropdown-menu dropdown-menu-end">
+				<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>
+				<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
+				<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+			</ul>
 		</div>
 	</div>
 </div>
+
+<div>
+	<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+		{{{each categories}}}
+		<!-- IMPORT partials/account/category-item.tpl -->
+		{{{end}}}
+	</ul>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/consent.tpl

@@ -1,17 +1,73 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- IMPORT partials/account/header.tpl -->
+<h3 class="fw-semibold fs-5">[[user:consent.title]]</h3>
 
-	<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;">
-			<h3 class="fw-semibold fs-5">[[user:consent.title]]</h3>
+<p class="lead">[[user:consent.lead]]</p>
+<p>[[user:consent.intro]]</p>
 
-			<p class="lead">[[user:consent.lead]]</p>
-			<p>[[user:consent.intro]]</p>
+<hr />
 
-			<hr />
+<div class="row">
+	<div class="col-sm-6">
+		{{{ if gdpr_consent }}}
+		<div class="alert alert-success">
+			<i class="fa fa-check float-end fa-3x"></i>
+			[[user:consent.received]]
+		</div>
+		{{{ else }}}
+		<div class="alert alert-warning">
+			[[user:consent.not_received]]
+			<br /><br />
+			<div class="text-center">
+				<button class="btn btn-warning" data-action="consent">[[user:consent.give]]</button>
+			</div>
+		</div>
+		{{{ end }}}
+		<div class="card">
+			<div class="card-body">
+				<p>[[user:consent.email_intro]]</p>
+				{{{ if digest.enabled }}}
+				<p>[[user:consent.digest_frequency, {digest.frequency}]]</p>
+				{{{ else }}}
+				<p>[[user:consent.digest_off]]</p>
+				{{{ end }}}
 
-			<div class="row">
+				<div class="d-grid">
+					<a class="btn btn-outline-secondary" href="./settings">
+						<i class="fa fa-cog"></i>
+						[[pages:account/settings]]
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-sm-6">
+		<div class="card">
+			<div class="card-body">
+				<p><strong>[[user:consent.right_of_access]]</strong></p>
+				<p>[[user:consent.right_of_access_description]]</p>
+				<p><strong>[[user:consent.right_to_rectification]]</strong></p>
+				<p>[[user:consent.right_to_rectification_description]]</p>
+				<p><strong>[[user:consent.right_to_erasure]]</strong></p>
+				<p>[[user:consent.right_to_erasure_description]]</p>
+				<p><strong>[[user:consent.right_to_data_portability]]</strong></p>
+				<p>[[user:consent.right_to_data_portability_description]]</p>
+
+				<hr />
+
+				<div class="btn-group-vertical d-grid">
+					<a data-action="export-profile" class="btn btn-outline-secondary">
+						<i class="fa fa-download"></i> [[user:consent.export_profile]]
+					</a>
+					<a data-action="export-posts" class="btn btn-outline-secondary">
+						<i class="fa fa-download"></i> [[user:consent.export_posts]]
+					</a>
+					<a data-action="export-uploads" class="btn btn-outline-secondary">
+						<i class="fa fa-download"></i> [[user:consent.export_uploads]]
+					</a>
+				</div>
+			</div>
 		</div>
 	</div>
 </div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/edit/password.tpl

@@ -1,37 +1,32 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- 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;">
-			<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:change_password]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
+<h3 class="fw-semibold fs-5">{{{ if isSelf }}}[[user:change_password]]{{{ else }}}[[pages:{template.name}, {username}]]{{{ end }}}</h3>
 
-			<form class="edit-form">
-				<!-- disables autocomplete on FF --><input type="password" style="display:none">
+<form class="edit-form">
+	<!-- disables autocomplete on FF --><input type="password" style="display:none">
 
-				{{{ if isSelf }}}
-				<div class="mb-2">
-					<label class="form-label fw-semibold text-xm" for="inputCurrentPassword">[[user:current_password]]</label>
-					<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-				</div>
-				{{{ end }}}
+	{{{ if isSelf }}}
+	<div class="mb-2">
+		<label class="form-label fw-semibold text-xm" for="inputCurrentPassword">[[user:current_password]]</label>
+		<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value="" {{{ if !hasPassword }}} disabled{{{ end }}}>
+	</div>
+	{{{ end }}}
 
-				<div class="mb-2">
-					<label class="form-label fw-semibold text-xm" for="inputNewPassword">[[user:new_password]]</label>
-					<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
-					<span class="form-feedback" id="password-notify"></span>
-				</div>
+	<div class="mb-2">
+		<label class="form-label fw-semibold text-xm" for="inputNewPassword">[[user:new_password]]</label>
+		<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
+		<span class="form-feedback" id="password-notify"></span>
+	</div>
 
-				<div class="mb-2">
-					<label class="form-label fw-semibold text-xm" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
-					<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
-					<span class="form-feedback" id="password-confirm-notify"></span>
-				</div>
+	<div class="mb-2">
+		<label class="form-label fw-semibold text-xm" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
+		<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
+		<span class="form-feedback" id="password-confirm-notify"></span>
+	</div>
 
-				<div class="form-actions">
-					<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
-				</div>
-			</form>
-		</div>
+	<div class="form-actions">
+		<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
 	</div>
-</div>
+</form>
+
+<!-- IMPORT partials/account/footer.tpl -->