nodebb-theme-harmony 0.0.1 → 0.0.2

package/scss/status.scss

@@ -0,0 +1,25 @@
+.status {
+	padding: 3px;
+
+	&.online {
+		background-color: $success;
+	}
+
+	&.away {
+		background-color: $warning;
+	}
+
+	&.dnd {
+		background-color: $danger;
+	}
+
+	&.offline {
+		background-color: $gray-600;
+	}
+}
+
+@include media-breakpoint-up(sm) {
+	.status {
+		padding: 5px;
+	}
+}

package/scss/topic.scss

@@ -0,0 +1,128 @@
+.page-topic {
+	[component="topic/title"] {
+		font-size: 28px;
+		line-height: 34px;
+		font-weight: $font-weight-semibold;
+	}
+
+	.tag-list:empty {
+		display: none !important;
+	}
+
+	[component="topic/reply"], [component="topic/reply/locked"], [component="topic/reply/guest"] {
+		font-size: 14px;
+		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;
+			// fixes code blocks pushing content out on mobile
+			@include media-breakpoint-down(md) {
+				max-width: calc(100vw - $grid-gutter-width);
+			}
+			list-style-type: none;
+
+			&.timeline {
+				@include timeline-style;
+			}
+
+			.post-header {
+				font-size: 13px;
+				line-height: 20px;
+
+				.bookmarked {
+					transition: $transition-fade;
+				}
+			}
+
+			[component="post"] {
+				&.deleted {
+					opacity: .5;
+				}
+
+				[component="post/content"] {
+					pre {
+						max-height: calc($font-size-base * 24);
+					}
+				}
+
+				> [component="post/footer"] {
+					margin-left: calc($spacer * 2.5);
+				}
+			}
+
+			[component="post/reply-count"] {
+				font-size: $font-size-base * .75;
+			}
+		}
+	}
+
+	.quick-reply {
+		max-width: 960px;
+		@include topic-avatars();
+	}
+
+	[component="post/replies/container"] {
+		&:empty {
+			display: none;
+		}
+
+		.icon {
+			display: none !important;
+		}
+
+		.post-header .icon {
+			display: initial !important;
+
+			.status {
+				display: none;
+			}
+		}
+
+		.timeline-event {
+			display: none !important;
+		}
+
+		[component="post"] {
+			padding-top: 0 !important;
+
+			&:last-of-type {
+				.post-footer {
+					border-bottom: none !important;
+				}
+			}
+		}
+	}
+}
+
+@include media-breakpoint-up(sm) {
+	.page-topic {
+		.topic .posts {
+			[component="post"] {
+				[component="post/actions"] {
+					opacity: 0;
+					transition: $transition-fade;
+				}
+
+				&:hover {
+					> .post-footer > [component="post/actions"] {
+						opacity: 1;
+					}
+				}
+			}
+		}
+	}
+}

package/templates/account/best.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT account/posts.tpl -->

package/templates/account/blocks.tpl

@@ -1,35 +1,40 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
-	<h1>[[pages:account/blocks, {username}]]</h1>
-	<div class="row justify-content-end mb-2">
-		<div class="col-3">
-			<div class="dropdown">
-				<input class="form-control" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
+	<div class="row gx-5">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
+		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+			<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">
+						<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
 
-				<ul class="dropdown-menu block-edit list-unstyled">
-					<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}">{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>
+						<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 -->
 					{{{ end }}}
-				</ul>
+				</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>
 		</div>
-	</div>
 
-	<div class="users row">
-		<div class="col-12">
-			<!-- IMPORT partials/users_list.tpl -->
-			<div class="alert alert-warning text-center"<!-- IF users.length --> style="display: none;"<!-- END -->>[[user:has_no_blocks]]</div>
-			<!-- IMPORT partials/paginator.tpl -->
-		</div>
 	</div>
 </div>

package/templates/account/bookmarks.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT account/posts.tpl -->

package/templates/account/categories.tpl

@@ -1,10 +1,8 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
 	<div class="row">
-		<h1>{title}</h1>
+		<h3 class="fw-semibold fs-4">{title}</h3>
 		<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">

package/templates/account/controversial.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT account/posts.tpl -->

package/templates/account/downvoted.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT account/posts.tpl -->

package/templates/account/followers.tpl

@@ -1,19 +1,23 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="users row">
-		<div class="col-12">
-		<h1>[[pages:{template.name}, {username}]]</h1>
+	<div class="row gx-5">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
+
+		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
-		<!-- IMPORT partials/users_list.tpl -->
+			{{{ if !users.length }}}
+			<div class="alert alert-warning text-center">[[user:has_no_follower]]</div>
+			{{{ end }}}
 
-		<!-- IF !users.length -->
-		<div class="alert alert-warning text-center">[[user:has_no_follower]]</div>
-		<!-- ENDIF !users.length -->
+			<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+			{{{ each users }}}
+			<!-- IMPORT partials/users/item.tpl -->
+			{{{end}}}
+			</div>
 
-		<!-- IMPORT partials/paginator.tpl -->
+			<!-- IMPORT partials/paginator.tpl -->
 		</div>
 	</div>
 </div>

package/templates/account/following.tpl

@@ -1,19 +1,23 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="users row">
-		<div class="col-12">
-		<h1>[[pages:{template.name}, {username}]]</h1>
+	<div class="row gx-5">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
+
+		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
-		<!-- IMPORT partials/users_list.tpl -->
+			{{{ if !users.length }}}
+			<div class="alert alert-warning text-center">[[user:follows_no_one]]</div>
+			{{{ end }}}
 
-		<!-- IF !users.length -->
-		<div class="alert alert-warning text-center">[[user:follows_no_one]]</div>
-		<!-- ENDIF !users.length -->
+			<div class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+			{{{ each users }}}
+			<!-- IMPORT partials/users/item.tpl -->
+			{{{end}}}
+			</div>
 
-		<!-- IMPORT partials/paginator.tpl -->
+			<!-- IMPORT partials/paginator.tpl -->
 		</div>
 	</div>
 </div>

package/templates/account/groups.tpl

@@ -1,18 +1,20 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row">
-		<h1>[[pages:{template.name}, {username}]]</h1>
+	<div class="row gx-5">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
+
+		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+			<h3 class="fw-semibold fs-5">[[pages:{template.name}, {username}]]</h3>
 
-		<div class="col-12 groups list">
-			<div component="groups/container" id="groups-list" class="row">
-				<!-- IF !groups.length -->
-				<div class="alert alert-warning text-center">[[groups:no_groups_found]]</div>
-				<!-- ELSE -->
-				<!-- IMPORT partials/groups/list.tpl -->
-				<!-- ENDIF !groups.length -->
+			<div class="groups">
+				<div component="groups/container" id="groups-list" class="row">
+					{{{ if !groups.length }}}
+					<div class="alert alert-warning text-center">[[groups:no_groups_found]]</div>
+					{{{ else }}}
+					<!-- IMPORT partials/groups/list.tpl -->
+					{{{ end }}}
+				</div>
 			</div>
 		</div>
 	</div>

package/templates/account/ignored.tpl

@@ -1,3 +1 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <!-- IMPORT account/topics.tpl -->

package/templates/account/posts.tpl

@@ -1,21 +1,40 @@
-<!-- THIS FILE IS STILL PERSONA -->
-
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="row">
-		<h1>{title}</h1>
+	<div class="row gx-5">
+		<!-- IMPORT partials/account/sidebar-left.tpl -->
+		<div class="col-12 col-md-9 col-lg-10 ps-md-5">
+			<div class="d-flex justify-content-between align-items-center mb-3">
+				<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
+				<div class="d-flex gap-1">
+					<a href="{config.relative_path}/user/{userslug}/posts" class="btn-ghost-sm fw-semibold {{{ if template.account/posts }}}active{{{ end }}}">[[global:header.recent]]</a>
+					{{{ if !reputation:disabled }}}
+					<a href="{config.relative_path}/user/{userslug}/best"class="btn-ghost-sm fw-semibold {{{ if template.account/best }}}active{{{ end }}}">[[global:best]]</a>
+					<a href="{config.relative_path}/user/{userslug}/controversial" class="btn-ghost-sm fw-semibold {{{ if template.account/controversial }}}active{{{ end }}}">[[global:controversial]]</a>
+					{{{ if canEdit }}}
+					<a href="{config.relative_path}/user/{userslug}/upvoted" class="btn-ghost-sm fw-semibold {{{ if template.account/upvoted }}}active{{{ end }}}">[[global:upvoted]]</a>
+					{{{ if !downvote:disabled }}}
+					<a href="{config.relative_path}/user/{userslug}/downvoted" class="btn-ghost-sm fw-semibold {{{ if template.account/downvoted }}}active{{{ end }}}">[[global:downvoted]]</a>
+					{{{ end }}}
+					{{{ end }}}
+					{{{ end }}}
+					{{{ if canEdit }}}
+					<a href="{config.relative_path}/user/{userslug}/bookmarks" class="btn-ghost-sm fw-semibold {{{ if template.account/bookmarks }}}active{{{ end }}}">[[user:bookmarks]]</a>
+					{{{ end }}}
+				</div>
+			</div>
 
-		<!-- IF !posts.length -->
+			{{{ if !posts.length }}}
 			<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
-		<!-- ENDIF !posts.length -->
+			{{{ end }}}
 
-		<div class="col-12">
-			<!-- IMPORT partials/posts_list.tpl -->
+			<div class="">
+				<!-- IMPORT partials/posts_list.tpl -->
 
-			<!-- IF config.usePagination -->
+				{{{ if config.usePagination }}}
 				<!-- IMPORT partials/paginator.tpl -->
-			<!-- ENDIF config.usePagination -->
+				{{{ end }}}
+			</div>
 		</div>
 	</div>
 </div>