Merge branch 'master' into develop

install/package.json

@@ -110,7 +110,7 @@
         "nodebb-rewards-essentials": "1.0.0",
         "nodebb-theme-harmony": "2.0.0-pre.46",
         "nodebb-theme-lavender": "7.1.17",
-        "nodebb-theme-peace": "2.2.32",
+        "nodebb-theme-peace": "2.2.33",
         "nodebb-theme-persona": "14.0.0-pre.5",
         "nodebb-widget-essentials": "7.0.31",
         "nodemailer": "6.9.16",

public/scss/generics.scss

@@ -117,16 +117,21 @@ blockquote {
 	.hover-visible {
 		visibility: hidden;
 	}
+	.hover-opacity-75 {
+		opacity: 0;
+		&:focus { opacity: 0.75 }
+	}
+	.hover-opacity-100 {
+		opacity: 0;
+		&:focus {opacity: 1; }
+	}
+
 	&:hover {
-		.hover-d-block {
+		.hover-d-block { display: block!important; }
-			display: block!important;
+		.hover-d-flex { display: flex!important; }
-		}
+		.hover-visible { visibility: visible; }
-		.hover-d-flex {
+		.hover-opacity-100 { opacity: 1; }
-			display: flex!important;
+		.hover-opacity-75 { opacity: 0.75; }
-		}
-		.hover-visible {
-			visibility: visible;
-		}
 	}
 }
 

public/vendor/jquery/draggable-background/backgroundDraggable.js

@@ -79,6 +79,39 @@
       imageDimensions = getBackgroundImageDimensions($el);
     }
 
+    $(window).on('keydown.dbg', (e) => {
+      var pos = $el.css('background-position').match(/(-?\d+).*?\s(-?\d+)/) || [];
+      var xPos = parseInt(pos[1]) || 0;
+      var yPos = parseInt(pos[2]) || 0;
+      // We must convert percentage back to pixels
+      if (options.units == 'percent') {
+        xPos = Math.round(xPos / -200 * imageDimensions.width);
+        yPos = Math.round(yPos / -200 * imageDimensions.height);
+      }
+
+      var x = 0, y = 0;
+      if (e.which === 37) { // left
+        x = -5
+      } else if (e.which === 39) { // right
+        x = 5
+      } else if (e.which === 38) { // up
+        y = -5
+      } else if (e.which === 40) { // down
+        y = +5
+      }
+      if (options.units === 'percent') {
+        xPos = options.axis === 'y' ? xPos : limit(-imageDimensions.width/2, 0, xPos+x, options.bound);
+        yPos = options.axis === 'x' ? yPos : limit(-imageDimensions.height/2, 0, yPos+y, options.bound);
+
+        // Convert pixels to percentage
+        $el.css('background-position', xPos / imageDimensions.width * -200 + '% ' + yPos / imageDimensions.height * -200 + '%');
+      } else {
+        xPos = options.axis === 'y' ? xPos : limit($el.innerWidth()-imageDimensions.width, 0, xPos+x, options.bound);
+        yPos = options.axis === 'x' ? yPos : limit($el.innerHeight()-imageDimensions.height, 0, yPos+y, options.bound);
+      }
+      return [37, 38, 39, 40].includes(e.which) ? false : undefined;
+    });
+
     $el.on('mousedown.dbg touchstart.dbg', function(e) {
       if (e.target !== $el[0]) {
         return;
@@ -145,7 +178,7 @@
   Plugin.prototype.disable = function() {
     var $el = $(this.element);
     $el.off('mousedown.dbg touchstart.dbg');
-    $window.off('mousemove.dbg touchmove.dbg mouseup.dbg touchend.dbg mouseleave.dbg');
+    $window.off('mousemove.dbg touchmove.dbg mouseup.dbg touchend.dbg mouseleave.dbg keydown.dbg');
   }
 
   $.fn.backgroundDraggable = function(options) {

src/controllers/api.js

@@ -91,7 +91,7 @@ apiController.loadConfig = async function (req) {
 		},
 		emailPrompt: meta.config.emailPrompt,
 		useragent: {
-			isSafari: req.useragent.isSafari,
+			isSafari: req.useragent && req.useragent.isSafari,
 		},
 		fontawesome: {
 			pro: fontawesome_pro,

src/views/admin/dashboard/searches.tpl

@@ -17,7 +17,7 @@
 			<button id="clear-search-history" class="btn btn-sm btn-light"><i class="fa fa-trash text-danger"></i> [[admin/dashboard:clear-search-history]]</button>
 		</div>
 
-		<table class="table table-sm text-sm search-list">
+		<table class="table table-sm text-sm search-list w-100">
 			<thead>
 				<th>[[admin/dashboard:search-term]]</th>
 				<th class="text-end">[[admin/dashboard:search-count]]</th>
@@ -30,8 +30,8 @@
 				{{{ end }}}
 				{{{ each searches }}}
 				<tr>
-					<td>{searches.value}</td>
+					<td class="w-100 text-truncate" style="max-width:1px;">{searches.value}</td>
-					<td class="text-end" style="width: 1px;">{formattedNumber(searches.score)}</td>
+					<td class="w-0 text-end text-nowrap">{formattedNumber(searches.score)}</td>
 				</tr>
 				{{{ end }}}
 			</tbody>