@okjavis/nodebb-theme-javis 3.0.1 → 3.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "3.0.1",
+  "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

@@ -12,6 +12,9 @@
   $(document).ready(function() {
     console.log('JAVIS Community Theme initialized');
 
+    // Initialize sidebar toggle handler
+    initSidebarToggle();
+
     // Auto-expand sidebar on desktop (Reddit-style default)
     initSidebarAutoExpand();
 
@@ -198,6 +201,17 @@
     console.log('JAVIS: Created carousel with ' + $images.length + ' images');
   }
 
+  /**
+   * Initialize sidebar toggle click handler
+   * We don't need our own handler - Harmony's handler works fine.
+   * This function is now a no-op to avoid conflicts.
+   */
+  function initSidebarToggle() {
+    // 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');
+  }
+
   /**
    * Auto-expand sidebar on desktop (Reddit-style default)
    * The sidebar will be expanded by default on desktop, but users can still toggle it.

package/templates/feed.tpl

@@ -0,0 +1,148 @@
+<!--
+    JAVIS Community Theme - Feed Page
+    Overrides nodebb-plugin-feed/public/templates/feed.tpl
+    Structure: Content first, Image second, Action bar third (separated)
+-->
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<style>.feed .post-body .content > p:last-child { margin-bottom: 0px; }</style>
+<div class="feed">
+	<div class="row">
+		<div data-widget-area="left" class="col-lg-3 col-sm-12 {{{ if !widgets.left.length }}}hidden{{{ end }}}">
+			{{{each widgets.left}}}
+			{{widgets.left.html}}
+			{{{end}}}
+		</div>
+		{{{ if ((widgets.left.length && widgets.right.length) || (!widgets.left.length && !widgets.right.length))}}}
+		<div class="col-lg-6 col-sm-12 mx-auto">
+		{{{ end }}}
+		{{{ if (widgets.left.length && !widgets.right.length) }}}
+		<div class="col-lg-6 col-sm-12 me-auto">
+		{{{ end }}}
+		{{{ if (!widgets.left.length && widgets.right.length) }}}
+		<div class="col-lg-6 col-sm-12 ms-auto">
+		{{{ end }}}
+
+			<div class="d-flex justify-content-between py-2 mb-2 gap-1">
+				{{{ if canPost }}}
+				<button id="new_topic" class="btn btn-primary btn-sm">[[category:new-topic-button]]</button>
+				{{{ end }}}
+				{{{ if (!loggedIn && !canPost) }}}
+				<a href="{config.relative_path}/login" class="btn btn-primary btn-sm">[[category:guest-login-post]]</a>
+				{{{ end }}}
+
+				<div class="d-flex justify-content-end gap-1">
+					<!-- IMPORT partials/category/filter-dropdown-right.tpl -->
+
+					<div id="options-dropdown" class="btn-group dropdown dropdown-right bottom-sheet">
+						<button type="button" class="btn btn-ghost btn-sm d-flex align-items-center gap-2 ff-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+							<i class="fa fa-fw fa-gear text-primary"></i>
+						</button>
+						<ul class="dropdown-menu p-1 text-sm" role="menu">
+							<li class="py-1 px-3">
+								<div class="form-check form-switch d-flex px-0 align-items-center justify-content-between gap-3">
+									<label class="form-check-label text-nowrap" for="showAllPosts">[[feed:show-all-posts]]</label>
+									<input class="form-check-input float-none m-0 pointer" type="checkbox" role="switch" id="showAllPosts" {{{ if showAllPosts }}}checked{{{ end }}}>
+								</div>
+							</li>
+							{{{ if loggedIn }}}
+							<li class="py-1 px-3">
+								<div class="form-check form-switch d-flex px-0 align-items-center justify-content-between gap-3">
+									<label class="form-check-label text-nowrap" for="showFollowedUsers">[[feed:followed-users-only]]</label>
+									<input class="form-check-input float-none m-0 pointer" type="checkbox" role="switch" id="showFollowedUsers" {{{ if showFollowed }}}checked{{{ end }}}>
+								</div>
+							</li>
+							{{{ end }}}
+						</ul>
+					</div>
+				</div>
+			</div>
+
+			{{{ if !posts.length  }}}
+			<div class="alert alert-warning text-center">[[feed:no-posts-found]] {{{ if !following.length }}}[[feed:are-you-following-anyone]] {{{ end }}}</div>
+			{{{ end }}}
+
+			<ul component="posts" class="list-unstyled" data-nextstart="{nextStart}">
+				{{{ each posts }}}
+				<li component="post" class="shadow-sm mb-3 rounded-2 border posts-list-item  {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
+
+					<!-- 1. CONTENT (first) -->
+					<div class="d-flex gap-2 p-3">
+						<div class="d-none d-lg-block">
+							<a class="lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "40px", true, "not-responsive")}</a>
+						</div>
+						<div class="post-body d-flex flex-column gap-2 flex-grow-1 hover-parent" style="min-width: 0px;">
+							{{{ if ./isMainPost }}}
+							<a class="lh-1 topic-title fw-semibold fs-5 text-reset text-break d-block" href="{config.relative_path}/topic/{./topic.slug}">
+							{./topic.title}
+							</a>
+							{{{ end }}}
+
+							<div class="d-flex gap-1 post-info text-sm align-items-center">
+								<div class="post-author d-flex align-items-center gap-1">
+									<a class="d-inline d-lg-none lh-1 text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true, "not-responsive")}</a>
+									<a class="lh-normal fw-semibold text-nowrap" href="{config.relative_path}/user/{./user.userslug}">{./user.displayname}</a>
+								</div>
+								{{{ if !./isMainPost}}}{./repliedString}{{{ else }}}<span class="timeago text-muted lh-normal" title="{./timestampISO}"></span>{{{ end}}}
+							</div>
+
+							<div component="post/content" class="content text-sm text-break position-relative truncate-post-content">
+								<a href="{config.relative_path}/post/{./pid}" class="stretched-link"></a>
+								{./content}
+							</div>
+							<div class="position-relative hover-visible">
+								<button component="show/more" class="btn btn-light btn-sm rounded-pill position-absolute start-50 translate-middle-x bottom-0 z-1 hidden ff-secondary">[[feed:see-more]]</button>
+							</div>
+						</div>
+					</div>
+
+					<!-- 2. IMAGE (second) -->
+					{{{ if (showThumbs && ./topic.thumbs.length)}}}
+					<div class="p-1 position-relative">
+						<div class="overflow-hidden rounded-1" style="max-height: 300px;">
+							<a href="{config.relative_path}/topic/{./topic.slug}">
+								<img class="w-100" src="{./topic.thumbs.0.url}">
+							</a>
+						</div>
+
+						<div class="position-absolute end-0 bottom-0 p-3 d-flex gap-2 align-items-center pe-none">
+							{{{ each ./topic.thumbs }}}
+							{{{ if (@index != 0) }}}
+							<img class="rounded-1" style="max-height: 64px; object-fit: contain;" src="{./url}">
+							{{{ end }}}
+							{{{ end }}}
+						</div>
+					</div>
+					{{{ end }}}
+
+					<!-- 3. ACTION BAR (third - separated from content) -->
+					<div class="feed-action-bar d-flex justify-content-between px-3 py-2 border-top">
+						<a href="{config.relative_path}/post/{{{ if ./topic.teaserPid }}}{./topic.teaserPid}{{{ else }}}{./pid}{{{ end }}}" class="btn btn-link btn-sm text-body {{{ if !./isMainPost }}}invisible{{{ end }}}"><i class="fa-fw fa-regular fa-message text-muted"></i> {humanReadableNumber(./topic.postcount)}</a>
+
+						<a href="#" data-pid="{./pid}" data-action="bookmark" data-bookmarked="{./bookmarked}" data-bookmarks="{./bookmarks}" class="btn btn-link btn-sm text-body"><i class="fa-fw fa-bookmark {{{ if ./bookmarked }}}fa text-primary{{{ else }}}fa-regular text-muted{{{ end }}}"></i> <span component="bookmark-count">{humanReadableNumber(./bookmarks)}</span></a>
+
+						<a href="#" data-pid="{./pid}" data-action="upvote" data-upvoted="{./upvoted}" data-upvotes="{./upvotes}" class="btn btn-link btn-sm text-body"><i class="fa-fw fa-heart {{{ if ./upvoted }}}fa text-danger{{{ else }}}fa-regular text-muted{{{ end }}}"></i> <span component="upvote-count">{humanReadableNumber(./upvotes)}</span></a>
+
+						<a href="#" data-pid="{./pid}" data-is-main="{./isMainPost}" data-tid="{./tid}" data-action="reply" class="btn btn-link btn-sm text-body"><i class="fa-fw fa fa-reply text-muted"></i> [[topic:reply]]</a>
+					</div>
+				</li>
+				{{{ end }}}
+			</ul>
+		</div>
+
+		<div data-widget-area="right" class="col-lg-3 col-sm-12 {{{ if !widgets.right.length }}}hidden{{{ end }}}">
+			{{{each widgets.right}}}
+			{{widgets.right.html}}
+			{{{end}}}
+		</div>
+	</div>
+</div>
+
+<div data-widget-area="footer">
+	{{{each widgets.footer}}}
+	{{widgets.footer.html}}
+	{{{end}}}
+</div>

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 }}}