Webpack5 (#545)

* webpack changes

* refactor: remove 500-embed.tpl

* fix: admin script

* chore: up compat

* refactor: remove pulling js from modules

* fix: unintentional padding in notification dropdown elements/lists

* revert: zero-out padding in notifications-list (wrong element selector)

* fix: no padding in notification-list dropdown

* refactor: notifications dropdown to use flexbox, fixes nodebb/nodebb#10284

* fix: nodebb/nodebb#10351, refactor chats menu and dropdown to use flexbox as well

this also fixes the regression caused by nodebb/nodebb#10284

* fix: incorrect default panel-offset

* fix: wonky margins on chat list

* fix: nodebb/nodebb#10363, more timestamp oddities

* Remove hardcoded 70px body padding (#547)

* fix: nodebb/nodebb#10476, eliminate the hardcoded 70px padding in the body element

This also has the nice side effect of simplifying a lot of the panel-offset styling

* fix: adjust topic header distance from top of page

* style: fix spacing

* feat: save panelOffset into localStorage, read by core

* fix: hide post-tools dropdown menu by default, made visible when menu options are loaded (see nodebb/nodebb@690ec2d59

Co-authored-by: Julian Lam <julian@nodebb.org>

less/account.less

@@ -166,12 +166,6 @@
 		}
 	}
 
-	@media (min-width: @screen-lg-min) {
-		.cover {
-			top: calc(var(--panel-offset) + @navbar-height);
-		}
-	}
-
 	@media (min-width: @screen-md-min) {
 		margin-top: 300px;
 

less/chats.less

@@ -22,7 +22,7 @@
 .chats-full, .chat-modal {
 	display: flex;
 	flex-wrap: nowrap;
-	height: calc(100vh - var(--panel-offset) - 70px);
+	height: calc(100vh - var(--panel-offset));
 
 	[component="chat/nav-wrapper"] {
 		flex: 1;
@@ -157,8 +157,7 @@
 }
 
 .chat-list {
-	margin-top: -6px;
-    margin-left: -1px;
+	margin-top: -5px;
 }
 
 .chats-list {
@@ -174,10 +173,10 @@
 	}
 
 	> li {
+		display: flex;
 		position: relative;
 		clear: both;
 		list-style-type: none;
-		padding: 0.5em;
 		height: 80px;
 		.pointer;
 
@@ -195,36 +194,29 @@
 		&.unread {
 			background: lighten(@brand-primary, 35%);
 			border-bottom: 0;
-
 		}
 
 		.teaser-content {
-			display: block;
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
 			font-size: 13px;
 			opacity: 0.8;
 		}
 
-		.room-name {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			display: block;
-			[component="chat/title"] {
+		.notification-chat-content {
+			.room-name {
+				white-space: nowrap;
 				overflow: hidden;
-    			white-space: nowrap;
-    			text-overflow: ellipsis;
-    			max-width: 350px;
-    			display: inline-block;
+				text-overflow: ellipsis;
+				display: block;
+				[component="chat/title"] {
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					max-width: 350px;
+					display: inline-block;
+				}
 			}
 		}
 
-		.teaser-content, .room-name {
-			padding-left: 80px;
-		}
-
 		&.bg-primary {
 			background: @brand-primary;
 			border-bottom: 0;
@@ -244,8 +236,8 @@
 
 		.teaser-timestamp {
 			font-size: 10px;
-			margin-top: 10px;
-			margin-right: 10px;
+			margin-top: .5rem;
+			margin-right: .5rem;
 		}
 
 		a {
@@ -307,26 +299,14 @@
 		}
 
 		.main-avatar {
-			position: absolute;
-			top: 0px;
-			left: 0px;
-
 			.avatar {
 				height: 80px;
 				width: 80px;
 				font-size: 40px;
 				border-radius: 0;
+				background: @gray-lighter;
 			}
 		}
-
-		.avatar-placeholder {
-			height: 80px;
-			width: 80px;
-			background: @gray-lighter;
-			position: absolute;
-			top: 0px;
-			left: 0px;
-		}
 	}
 }
 

less/groups.less

@@ -22,7 +22,7 @@
 		margin-bottom: 1em;
 		background-origin: content-box;
 		width: 100%;
-		top: calc(var(--panel-offset) + @navbar-height);
+		top: calc(var(--panel-offset) - 20px);
 		position: absolute;
 		left: auto;
 		right: 0px;

less/header.less

@@ -9,36 +9,51 @@
 		max-height: 250px;
 		padding: 0;
 
-		li.no-notifs {
-			text-align: center;
-		}
-
 		li {
+			display: flex;
+			gap: 1rem;
 			width: 400px;
 			text-align: left;
 			list-style-type: none;
-			padding: 0.5em;
-			clear: both;
+			padding: .75em 0.5em;
 
-			&.loading-text {
-				text-align: center;
+			&:hover {
+				background-color: @dropdown-link-hover-bg;
 			}
 
-			a {
-				white-space: normal;
-				margin: 0;
-				text-overflow: ellipsis;
+			&.loading-text, &.no-notifs {
+				justify-content: center;
 
-				.text {
-					margin-left: 40px;
-					margin-right: 60px;
-					display: block;
-					min-height: 32px;
+				a {
+					color: inherit;
 				}
+			}
+
+			.notification-chat-content {
+				flex: 1;
+
+				a {
+					white-space: normal;
+					margin: 0;
+					text-overflow: ellipsis;
+
+					.text {
+						margin-left: 40px;
+						margin-right: 60px;
+						display: block;
+						min-height: 32px;
+					}
+				}
+			}
+
+			.notification-chat-controls {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				gap: .5rem;
+
 				.relTime {
 					font-size: 10px;
-					margin-top: 10px;
-					margin-right: 10px;
 				}
 			}
 
@@ -61,7 +76,11 @@
 			}
 
 			&.unread {
-				.bg-variant(@state-warning-bg);
+				background-color: @state-warning-bg;
+
+				&:hover {
+					background-color: darken(@state-warning-bg, 5%);
+				}
 
 				.mark-read:after {
 					font-weight: 900;
@@ -76,14 +95,20 @@
 		> li {
 			.pointer;
 			width: 500px;
-			padding-bottom: 1rem;
+			padding: 0;
 			margin: 0;
+			gap: 0;
+			overflow-y: hidden;
+
+			.notification-chat-content {
+				padding: 0.5rem;
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
 
 			.teaser-content {
 				white-space: nowrap;
 				max-height: 19px;
-				padding-left: 90px;
-    			padding-right: 10px;
 			}
 
 			&:not(:last-child) {

less/mobile.less

@@ -34,11 +34,6 @@
 }
 
 @media (max-width: @screen-md-max) {
-	body {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
-
 	#panel {
 		background-color: inherit;
 		min-height: 100%;
@@ -180,7 +175,9 @@
 					text-overflow: ellipsis;
 				}
 				.teaser-timestamp {
-					margin-right: 10px;
+					font-size: 10px;
+					margin-right: 0.5rem;
+					margin-top: 0.5rem;
 				}
 			}
 		}
@@ -196,6 +193,15 @@
 				.unread {
 					background-color: inherit;
 				}
+
+				.notification-chat-content {
+					padding-top: 10px;
+					padding-right: 20px;
+				}
+
+				.notification-chat-controls {
+					display: none;
+				}
 			}
 			.chat-list .unread .room-name::after,
 			.notification-list-mobile .unread a::after {

less/style.less

@@ -4,17 +4,6 @@ html {
 }
 
 body {
-	@media (min-width: 979px)
-	{
-		padding-top: 70px;
-	}
-
-	@media (max-width: 979px)
-	{
-		padding-top: 70px;
-		padding-bottom: 50px;
-	}
-
 	min-height: 100%;
 }
 

less/topic.less

@@ -41,7 +41,7 @@
 	}
 	.topic-header {
 		position: sticky;
-		top: calc(var(--panel-offset) + @navbar-height);
+		top: calc(var(--panel-offset) - 20px);
 		background-color: @body-bg;
 		z-index: @zindex-navbar;
 		margin-left: -15px;
@@ -50,12 +50,6 @@
 		padding-right: 15px;
 	}
 
-	@media (max-width: @screen-md-max) {
-		.topic-header {
-			top: calc(var(--panel-offset) + @navbar-height - 70px);
-		}
-	}
-
 	.topic-info {
 		border-bottom: 1px solid @post-border-color;
 		margin-bottom: 10px;

package.json

@@ -2,7 +2,7 @@
   "name": "nodebb-theme-persona",
   "version": "11.4.4",
   "nbbpm": {
-    "compatibility": "^1.18.0"
+    "compatibility": "^2.0.0"
   },
   "description": "Persona theme for NodeBB",
   "main": "library.js",

plugin.json

@@ -9,16 +9,13 @@
 		{ "hook": "filter:topic.build", "method": "addUserToTopic" }
 	],
 	"scripts": [
-		"public/persona.js",
-		"public/settings.js",
 		"public/modules/autohidingnavbar.js",
-		"public/modules/quickreply.js"
+		"public/persona.js"
 	],
 	"modules": {
-		"pulling.js": "node_modules/pulling/build/pulling-drawer.js"
+		"../admin/plugins/persona.js": "public/admin.js",
+		"persona/quickreply.js": "public/modules/quickreply.js",
+		"../client/account/theme.js": "public/settings.js"
 	},
-	"acpScripts": [
-		"public/admin.js"
-	],
 	"languages": "languages"
 }

public/persona.js

@@ -31,13 +31,9 @@ $(document).ready(function () {
 			(parseInt(headerStyle.marginTop, 10) || 0) +
 			(parseInt(headerStyle.marginBottom, 10) || 0);
 
-		// body element itself introduces a hardcoded 70px padding on desktop resolution
-		if (env === 'lg') {
-			offset -= 70;
-		}
-
 		offset = Math.max(0, offset);
 		document.documentElement.style.setProperty('--panel-offset', `${offset}px`);
+		localStorage.setItem('panelOffset', offset);
 	}
 
 	var lastBSEnv = '';
@@ -207,7 +203,7 @@ $(document).ready(function () {
 			return;
 		}
 
-		require(['pulling', 'storage', 'alerts', 'search'], function (Pulling, Storage, alerts, search) {
+		require(['pulling/build/pulling-drawer', 'storage', 'alerts', 'search'], function (Pulling, Storage, alerts, search) {
 			if (!Pulling) {
 				return;
 			}

templates/footer.tpl

@@ -9,10 +9,6 @@
 	</div>
 	<!-- ENDIF !isSpider -->
 
-	<div class="hide">
-	<!-- IMPORT 500-embed.tpl -->
-	</div>
-
 	<!-- IMPORT partials/footer/js.tpl -->
 </body>
 </html>

templates/header.tpl

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection}; --panel-offset: 50px;" {{{end}}} >
+<html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
 <head>
 	<title>{browserTitle}</title>
 	{{{each metaTags}}}{function.buildMetaTag}{{{end}}}

templates/partials/chats/dropdown.tpl

@@ -1,14 +1,6 @@
 <!-- IF rooms.length -->
 {{{each rooms}}}
 <li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->" data-roomid="{rooms.roomId}">
-	<strong class="room-name">
-		<!-- IF !rooms.lastUser.uid -->
-		<span>[[modules:chat.no-users-in-room]]</span>
-		<!-- ELSE -->
-		<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
-		<!-- ENDIF !rooms.lastUser.uid -->
-	</strong>
-	<div class="avatar-placeholder"></div>
 	{{{each rooms.users}}}
 	<!-- IF @first -->
 	<div class="main-avatar">
@@ -25,8 +17,20 @@
 		{{{end}}}
 	</ul>
 
-	<span class="teaser-content"><strong class="teaser-username">{rooms.teaser.user.username}:</strong> {rooms.teaser.content}</span>
-	<span class="teaser-timestamp pull-right">{rooms.teaser.timeago}</span>
+	<div class="notification-chat-content">
+		<strong class="room-name">
+			<!-- IF !rooms.lastUser.uid -->
+			<span>[[modules:chat.no-users-in-room]]</span>
+			<!-- ELSE -->
+			<!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName -->
+			<!-- ENDIF !rooms.lastUser.uid -->
+		</strong>
+		<span class="teaser-content">
+			<strong class="teaser-username">{rooms.teaser.user.username}:</strong>
+			{rooms.teaser.content}
+		</span>
+	</div>
+	<div class="teaser-timestamp notification-chat-controls">{rooms.teaser.timeago}</div>
 </li>
 {{{end}}}
 <!-- ELSE -->

templates/partials/chats/recent_room.tpl

@@ -1,12 +1,4 @@
 <li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
-	<strong class="room-name">
-		<!-- IF !rooms.lastUser.uid -->
-		<span>[[modules:chat.no-users-in-room]]</span>
-		<!-- ELSE -->
-		<span component="chat/title"><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></span>
-		<!-- ENDIF !rooms.lastUser.uid -->
-	</strong>
-	<div class="avatar-placeholder"></div>
 	{{{each rooms.users}}}
 	<!-- IF @first -->
 	<div class="main-avatar">
@@ -22,4 +14,14 @@
 		</li>
 		{{{end}}}
 	</ul>
+
+	<div class="notification-chat-content">
+		<strong class="room-name">
+			<!-- IF !rooms.lastUser.uid -->
+			<span>[[modules:chat.no-users-in-room]]</span>
+			<!-- ELSE -->
+			<span component="chat/title"><!-- IF rooms.roomName -->{rooms.roomName}<!-- ELSE -->{rooms.usernames}<!-- ENDIF rooms.roomName --></span>
+			<!-- ENDIF !rooms.lastUser.uid -->
+		</strong>
+	</div>
 </li>

templates/partials/notifications_list.tpl

@@ -13,11 +13,13 @@
 	<a href="{config.relative_path}/user/{notifications.user.userslug}"><div class="pull-left avatar avatar-md avatar-rounded" style="background-color: {notifications.user.icon:bgColor};">{notifications.user.icon:text}</div></a>
 	<!-- ENDIF notifications.image -->
 
-	{{{ if ./nid }}}<div class="pull-right mark-read" aria-label="Mark Read"></div>{{{ end }}}
-	<a href="{notifications.path}" class="deco-none">
+	<a href="{notifications.path}" class="notification-chat-content deco-none">
 		<span class="text">{notifications.bodyShort}</span>
-		<span class="pull-right relTime">{notifications.timeago}</span>
 	</a>
-	<div class="clear"></div>
+
+	<div class="notification-chat-controls">
+		{{{ if ./nid }}}<div class="mark-read" aria-label="Mark Read"></div>{{{ end }}}
+		<span class="relTime">{notifications.timeago}</span>
+	</div>
 </li>
 {{{end}}}

templates/partials/topic/post-menu.tpl

@@ -1,4 +1,4 @@
 <span component="post/tools" class="dropdown moderator-tools bottom-sheet <!-- IF !posts.display_post_menu -->hidden<!-- ENDIF !posts.display_post_menu -->">
 	<a href="#" data-toggle="dropdown" data-ajaxify="false"><i class="fa fa-fw fa-ellipsis-v"></i></a>
-	<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
+	<ul class="dropdown-menu dropdown-menu-right hidden" role="menu"></ul>
 </span>