@okjavis/nodebb-theme-javis 3.0.2 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "Modern, premium NodeBB theme for JAVIS Community - Extends Harmony with custom styling",
   "main": "theme.js",
   "scripts": {

package/plugin.json

@@ -22,7 +22,7 @@
   },
   "templates": "templates",
   "screenshot": "screenshot.png",
-  "version": "1.5.0",
+  "version": "3.0.3",
   "nbbpm": {
     "compatibility": "^4.0.0"
   }

package/scss/_base.scss

@@ -30,8 +30,13 @@ nav[component="sidebar/left"] {
 
 // Sidebar toggle link padding
 .sidebar-toggle {
+  position: relative;
+  z-index: 10;
+
   [component="sidebar/toggle"] {
     padding: $jv-space-4 $jv-space-5 !important; // 16px vertical, 20px horizontal
+    pointer-events: auto !important;
+    cursor: pointer !important;
   }
 }
 

package/scss/_sidebar-user.scss

@@ -137,6 +137,11 @@
   margin-top: auto;
 }
 
+// Ensure the dropup container has proper positioning context
+.sidebar-user-section .dropup {
+  position: relative;
+}
+
 // User dropdown menu styling
 .sidebar-user-section .dropdown-menu {
   min-width: 220px;
@@ -145,6 +150,18 @@
   border: 1px solid $jv-border-subtle;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
 
+  // Fix the shifting issue - disable Popper transforms and use fixed position
+  // Position dropdown to open upward from the bottom of the trigger
+  transform: none !important;
+  inset: auto auto 100% 0 !important;  // bottom: 100%, left: 0
+  margin-bottom: $jv-space-2;
+  top: auto !important;
+  bottom: 100% !important;
+  left: 0 !important;
+
+  // Remove animation that could cause visual shifting
+  animation: none;
+
   .dropdown-item {
     padding: $jv-space-2 $jv-space-4;
     font-size: $jv-font-size-sm;

package/scss/_topic.scss

@@ -382,10 +382,11 @@ body.template-topic {
   // ===========================================================
   [component="post/footer"],
   .post-footer {
-    padding-top: 0 !important;
+    padding-top: $jv-space-3 !important;
     padding-bottom: 0 !important;
-    margin-top: $jv-space-4;
+    margin-top: $jv-space-3;
     border-top: 1px solid $jv-border-subtle;
+    border-bottom: none !important; // Remove duplicate line from HTML class
   }
 
   [component="post/actions"] {
@@ -569,6 +570,9 @@ body.template-topic {
     align-self: flex-start;
     z-index: 100;
     pointer-events: auto;
+    // Match the top padding of posts list (py-3 = 1rem) + first post pt-4 (1.5rem)
+    // to align sidebar with post card
+    margin-top: calc(1rem + 1.5rem);
   }
 
   .topic-sidebar {
@@ -648,17 +652,60 @@ body.template-topic {
         }
       }
 
-      .bottom-sheet {
+      // Each dropdown container gets stacking context
+      .bottom-sheet,
+      .thread-tools {
         width: 100%;
-        .dropdown-menu { width: 100%; }
+        position: relative;
+        z-index: 1;
+
+        // When dropdown is open, raise z-index
+        &.show,
+        &:focus-within {
+          z-index: 100;
+        }
+
+        .dropdown-menu {
+          position: absolute;
+          top: 100%;
+          left: 0;
+          width: 100%;
+          min-width: 200px;
+          max-width: 280px;
+          z-index: 1050;
+          margin-top: $jv-space-1;
+          padding: $jv-space-2;
+          background: $jv-surface;
+          border: 1px solid $jv-border-subtle;
+          border-radius: $jv-radius-md;
+          box-shadow: $jv-shadow-lg;
+
+          // Dropdown items
+          .dropdown-item {
+            padding: $jv-space-2 $jv-space-3;
+            border-radius: $jv-radius-sm;
+            font-size: $jv-font-size-sm;
+            white-space: normal;
+
+            .help-text {
+              font-size: $jv-font-size-xs;
+              line-height: 1.3;
+              margin-top: 2px;
+            }
+          }
+        }
       }
 
-      .thread-tools {
-        .dropdown-menu { min-width: 100%; }
+      // Ensure pagination block stays below dropdowns
+      & + .pagination-block {
+        position: relative;
+        z-index: 0;
       }
     }
 
     .pagination-block {
+      position: relative;
+      z-index: 0;
       margin-top: $jv-space-4;
       padding-top: $jv-space-4;
       border-top: 1px solid $jv-border-subtle;

package/static/lib/theme.js

@@ -203,42 +203,13 @@
 
   /**
    * Initialize sidebar toggle click handler
-   * Ensures the sidebar can be toggled and saves user preference
+   * We don't need our own handler - Harmony's handler works fine.
+   * This function is now a no-op to avoid conflicts.
    */
   function initSidebarToggle() {
-    var $toggle = $('[component="sidebar/toggle"]');
-    if (!$toggle.length) {
-      console.log('JAVIS: Sidebar toggle element not found');
-      return;
-    }
-
-    // Remove any existing handlers to avoid duplicates, then add our handler
-    $toggle.off('click.javis').on('click.javis', function(e) {
-      e.preventDefault();
-      e.stopPropagation();
-
-      var $sidebar = $('.sidebar-left');
-      $sidebar.toggleClass('open');
-
-      console.log('JAVIS: Sidebar toggled, open:', $sidebar.hasClass('open'));
-
-      // Save preference if user is logged in
-      if (typeof app !== 'undefined' && app.user && app.user.uid) {
-        require(['api'], function(api) {
-          api.put('/users/' + app.user.uid + '/settings', {
-            settings: {
-              openSidebars: $sidebar.hasClass('open') ? 'on' : 'off',
-            },
-          }).catch(function(err) {
-            console.warn('JAVIS: Could not save sidebar preference', err);
-          });
-        });
-      }
-
-      $(window).trigger('action:sidebar.toggle');
-    });
-
-    console.log('JAVIS: Sidebar toggle initialized');
+    // Let Harmony's built-in handler manage the sidebar toggle
+    // We just ensure the sidebar auto-expands on desktop (handled by initSidebarAutoExpand)
+    console.log('JAVIS: Sidebar toggle - using Harmony default handler');
   }
 
   /**

package/templates/partials/sidebar-left.tpl

@@ -38,7 +38,7 @@
 		<!-- User Profile Section (only for logged-in users) -->
 		{{{ if config.loggedIn }}}
 		<div class="sidebar-user-section mx-2 mb-2">
-			<div class="nav-item dropend usermenu">
+			<div class="nav-item dropup usermenu">
 				<a component="header/avatar" id="sidebar_user_dropdown" href="#" role="button"
 				   class="nav-link d-flex gap-2 align-items-center text-truncate sidebar-user-trigger"
 				   data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"

package/templates/partials/topic/reply-button.tpl

@@ -0,0 +1,20 @@
+<div component="topic/reply/container" class="btn-group {{{ if !privileges.topics:reply }}}hidden{{{ end }}}">
+	<a href="{config.relative_path}/compose?tid={tid}" class="d-flex gap-2 align-items-center btn btn-sm btn-primary fw-semibold w-100 justify-content-center" component="topic/reply" data-ajaxify="false" role="button">
+		<i class="fa fa-fw fa-reply"></i>
+		<span>[[topic:reply]]</span>
+	</a>
+	<button type="button" class="btn btn-sm btn-primary dropdown-toggle flex-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:reply-options]]">
+		<span class="caret"></span>
+	</button>
+	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">
+		<li><a class="dropdown-item rounded-1" href="#" component="topic/reply-as-topic" role="menuitem">[[topic:reply-as-topic]]</a></li>
+	</ul>
+</div>
+
+{{{ if loggedIn }}}
+	<a href="#" component="topic/reply/locked" class="d-flex gap-2 align-items-center fw-semibold btn btn-sm btn-primary disabled hidden w-100 justify-content-center {{{ if (privileges.topics:reply || !locked) }}}hidden{{{ end }}}" disabled><i class="fa fa-fw fa-lock"></i> [[topic:locked]]</a>
+{{{ else }}}
+	{{{ if !privileges.topics:reply }}}
+	<a component="topic/reply/guest" href="{config.relative_path}/login" class="d-flex gap-2 align-items-center fw-semibold btn btn-sm btn-primary w-100 justify-content-center"><i class="fa fa-fw fa-sign-in"></i><span>[[topic:guest-login-reply]]</span></a>
+	{{{ end }}}
+{{{ end }}}

package/templates/partials/topic/sidebar.tpl

@@ -5,7 +5,7 @@
 			<!-- IMPORT partials/topic/reply-button.tpl -->
 
 			<!-- Mark Unread Button -->
-			{{{ if loggedIn }}}
+			{{{ if config.loggedIn }}}
 			<button component="topic/mark-unread" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center w-100 justify-content-start">
 				<i class="fa fa-fw fa-inbox"></i>
 				<span class="fw-semibold text-nowrap">[[topic:mark-unread]]</span>

package/templates/partials/topic/sort.tpl

@@ -0,0 +1,27 @@
+<div class="btn-group bottom-sheet w-100" component="thread/sort">
+	<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center dropdown-toggle w-100 justify-content-start" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:post-sort-option, {sortOptionLabel}]]">
+		<i class="fa fa-fw fa-arrow-down-wide-short"></i>
+		<span class="fw-semibold text-nowrap">{sortOptionLabel}</span>
+	</button>
+
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest" role="menuitem">
+				<span class="flex-grow-1">[[topic:oldest-to-newest]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest" role="menuitem">
+				<span class="flex-grow-1">[[topic:newest-to-oldest]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
+			</a>
+		</li>
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_votes" data-sort="most_votes" role="menuitem">
+				<span class="flex-grow-1">[[topic:most-votes]]</span>
+				<i class="flex-shrink-0 fa fa-fw text-secondary"></i>
+			</a>
+		</li>
+	</ul>
+</div>

package/templates/partials/topic/tools.tpl

@@ -0,0 +1,9 @@
+{{{ if privileges.view_thread_tools }}}
+<div class="btn-group thread-tools bottom-sheet w-100">
+	<button class="btn btn-ghost btn-sm d-flex align-items-center gap-2 dropdown-toggle w-100 justify-content-start" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+		<i class="fa fa-fw fa-gear"></i>
+		<span class="fw-semibold text-nowrap">[[topic:thread-tools.title]]</span>
+	</button>
+	<ul class="dropdown-menu p-1 text-sm" role="menu"></ul>
+</div>
+{{{ end }}}

package/templates/partials/topic/watch.tpl

@@ -0,0 +1,60 @@
+{{{ if config.loggedIn }}}
+<div class="btn-group bottom-sheet w-100" component="topic/watch">
+	<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center dropdown-toggle w-100 justify-content-start" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+		<span component="topic/following/menu" class="d-flex gap-2 align-items-center{{{ if !isFollowing }}} hidden{{{ end }}}">
+			<i class="fa fa-fw fa-bell-o"></i>
+			<span class="fw-semibold text-nowrap">[[topic:watching]]</span>
+		</span>
+
+		<span component="topic/not-following/menu" class="d-flex gap-2 align-items-center{{{ if !isNotFollowing}}} hidden{{{ end }}}">
+			<i class="fa fa-fw fa-bell-slash-o"></i>
+			<span class="fw-semibold text-nowrap">[[topic:not-watching]]</span>
+		</span>
+
+		<span component="topic/ignoring/menu" class="d-flex gap-2 align-items-center{{{ if !isIgnoring }}} hidden{{{ end }}}">
+			<i class="fa fa-fw fa-eye-slash"></i>
+			<span class="fw-semibold text-nowrap">[[topic:ignoring]]</span>
+		</span>
+	</button>
+	<ul class="dropdown-menu p-1 text-sm" role="menu">
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/following" role="menuitem">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="fa fa-fw fa-bell-o text-secondary"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:watching]]</span>
+					</span>
+					<div class="help-text text-secondary text-xs">[[topic:watching.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
+
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/not-following" role="menuitem">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="fa fa-fw fa-bell-slash-o text-secondary"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:not-watching]]</span>
+					</span>
+					<div class="help-text text-secondary text-xs">[[topic:not-watching.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
+
+		<li>
+			<a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/ignoring" role="menuitem">
+				<div class="flex-grow-1 d-flex flex-column">
+					<span class="d-flex align-items-center gap-2">
+						<i class="fa fa-fw fa-eye-slash text-secondary"></i>
+						<span class="flex-grow-1 fw-semibold">[[topic:ignoring]]</span>
+					</span>
+					<div class="help-text text-secondary text-xs">[[topic:ignoring.description]]</div>
+				</div>
+				<span class="flex-shrink-0"><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i></span>
+			</a>
+		</li>
+	</ul>
+</div>
+{{{ end }}}

package/templates/topic.tpl

@@ -57,9 +57,9 @@
 			<div class="d-flex gap-2 align-items-center mt-2 hidden-empty" component="topic/thumb/list"><!-- IMPORT partials/topic/thumbs.tpl --></div>
 		</div>
 
-		<div class="topic-layout d-flex gap-4 mb-4 mb-lg-0">
+		<div class="topic topic-layout d-flex gap-4 mb-4 mb-lg-0">
 			<!-- Main Content Area -->
-			<div class="topic flex-grow-1" style="min-width: 0;">
+			<div class="topic-main flex-grow-1" style="min-width: 0;">
 				{{{ if merger }}}
 				<!-- IMPORT partials/topic/merged-message.tpl -->
 				{{{ end }}}