@okjavis/nodebb-theme-javis 2.2.0 → 2.3.0

package/package.json

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

package/scss/_topic.scss

@@ -166,11 +166,9 @@ body.template-topic {
         }
       }
 
-      // Align the post header row with avatar
+      // Align the post header row with avatar (extends base .post-header)
       .post-header {
-        min-height: 36px; // Match avatar height
-        align-items: center !important;
-        margin-bottom: 0 !important;
+        min-height: 36px; // Match avatar height for alignment
       }
 
       .post-container {
@@ -191,9 +189,9 @@ body.template-topic {
   // ===========================================================
   .post-header {
     display: flex;
-    align-items: center;
+    align-items: center !important;
     gap: $jv-space-2;
-    margin-bottom: $jv-space-3;
+    margin-bottom: 0 !important;
     font-size: $jv-font-size-xs;
 
     .avatar {
@@ -444,10 +442,32 @@ body.template-topic {
     }
   }
 
-  // Always visible post actions (override Harmony's hover behavior)
-  .topic .posts [component="post"] [component="post/actions"] {
+  // Post actions - show on hover (Reddit/HN style)
+  // Uses JS-managed .post-hovered class to prevent bubble to parent posts
+  .topic .posts [component="post"] {
+    [component="post/actions"] {
+      opacity: 0;
+      transition: opacity $jv-transition-fast;
+    }
+
+    // Show actions only on the directly hovered post (JS adds .post-hovered class)
+    > .post-container-parent.post-hovered [component="post/actions"] {
+      opacity: 1;
+    }
+
+    // Always show if user has interacted (voted, bookmarked)
+    [component="post/actions"] {
+      .upvoted,
+      .downvoted,
+      .bookmarked {
+        opacity: 1;
+      }
+    }
+  }
+
+  // Keep vote count always visible when there are votes
+  .topic .posts [component="post/vote-count"]:not(:empty) {
     opacity: 1 !important;
-    visibility: visible !important;
   }
 
   // ===========================================================
@@ -592,9 +612,21 @@ body.template-topic {
         .dropdown-toggle { display: none; }
       }
 
-      // Consistent ghost button styling for all sidebar action buttons
+      // Sidebar action buttons - full-width, left-aligned (extends base .btn-ghost)
       .btn-ghost,
       .bottom-sheet > .btn,
+      .thread-tools > .dropdown-toggle {
+        text-align: left;
+        width: 100%;
+        justify-content: flex-start;
+
+        i {
+          width: 16px; // Fixed width for icon alignment
+        }
+      }
+
+      // Non-ghost buttons need base ghost styling too
+      .bottom-sheet > .btn,
       .thread-tools > .dropdown-toggle {
         background: transparent !important;
         border: 1px solid transparent !important;
@@ -603,15 +635,10 @@ body.template-topic {
         border-radius: $jv-radius-sm;
         font-size: $jv-font-size-sm;
         font-weight: 500;
-        text-align: left;
-        width: 100%;
-        justify-content: flex-start;
         transition: background-color $jv-transition-fast, color $jv-transition-fast;
-
-        i {
-          width: 16px;
-          color: $jv-primary;
-        }
+        display: inline-flex;
+        align-items: center;
+        gap: $jv-space-2;
 
         &:hover {
           background: $jv-hover-bg !important;
@@ -738,121 +765,143 @@ body.template-topic {
 
   // ===========================================================
   // PARENT POST CONTEXT (shown when viewing a reply)
+  // Compact inline style - visually distinct from main posts
   // ===========================================================
   [component="post/parent"] {
-    background: $jv-surface !important;
-    border: 1px solid $jv-border-subtle !important;
-    border-left: 3px solid $jv-primary !important;
-    border-radius: $jv-radius-sm !important;
-    padding: $jv-space-3 !important;
-    margin-bottom: $jv-space-3 !important;
-    transition: background-color $jv-transition-fast, border-color $jv-transition-fast;
+    background: transparent !important;
+    border: none !important;
+    border-left: 2px solid $jv-border-strong !important;
+    border-radius: 0 !important;
+    padding: $jv-space-1 0 $jv-space-1 $jv-space-3 !important;
+    margin-bottom: $jv-space-2 !important;
+    margin-left: $jv-space-1 !important;
+    transition: border-color $jv-transition-fast;
+    cursor: pointer;
+    display: flex !important;
+    align-items: center !important;
+    gap: $jv-space-2 !important;
+    flex-direction: row !important;
 
     &:hover {
-      background: $jv-hover-bg !important;
-      border-color: $jv-border-strong !important;
-      border-left-color: $jv-primary-hover !important;
-    }
-
-    // Header row with avatar and metadata
-    > .d-flex:first-child {
-      gap: $jv-space-2 !important;
-      margin-bottom: $jv-space-2;
+      border-left-color: $jv-primary !important;
 
-      // Small avatar
-      .avatar,
-      [component="user/picture"] {
-        width: 20px !important;
-        height: 20px !important;
-        border-radius: 50%;
-        flex-shrink: 0;
+      .fw-semibold {
+        color: $jv-primary !important;
       }
+    }
 
-      // Username and time
-      .text-nowrap,
-      .fw-bold {
-        font-size: $jv-font-size-xs !important;
-        font-weight: 600;
-        color: $jv-text-main;
-      }
+    // Avatar
+    .avatar,
+    [component="user/picture"] {
+      width: 16px !important;
+      height: 16px !important;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
 
-      .text-muted {
-        font-size: $jv-font-size-xs !important;
-        color: $jv-text-soft !important;
-      }
+    // Username
+    .fw-semibold {
+      font-size: $jv-font-size-xs !important;
+      font-weight: 600;
+      color: $jv-text-muted;
+      transition: color $jv-transition-fast;
     }
 
-    // Parent content preview
+    // Parent content preview - inline, truncated
     [component="post/parent/content"] {
-      font-size: $jv-font-size-sm !important;
-      color: $jv-text-muted !important;
-      line-height: $jv-line-height-base;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
+      font-size: $jv-font-size-xs !important;
+      color: $jv-text-soft !important;
+      line-height: 1.4;
+      white-space: nowrap;
       overflow: hidden;
+      text-overflow: ellipsis;
+      flex: 1;
+      min-width: 0;
 
       p {
         margin: 0;
+        display: inline;
       }
+
+      // Hide images in preview
+      img {
+        display: none;
+      }
+    }
+
+    // Hide the nested flex container structure, flatten it
+    > .d-flex {
+      display: contents !important;
     }
   }
 
   // ===========================================================
-  // REPLY COUNT BUTTON (Accordion trigger)
+  // POST HIGHLIGHT ANIMATION (when navigating to a post)
+  // ===========================================================
+  .post-highlight-flash {
+    animation: postHighlightFlash 1.5s ease-out;
+  }
+
+  @keyframes postHighlightFlash {
+    0% {
+      background-color: rgba($jv-primary, 0.15);
+      box-shadow: 0 0 0 4px rgba($jv-primary, 0.1);
+    }
+    100% {
+      background-color: $jv-surface;
+      box-shadow: none;
+    }
+  }
+
+  // ===========================================================
+  // REPLY COUNT BUTTON (Reddit/Discord style - no border, text link)
   // ===========================================================
   [component="post/reply-count"] {
-    display: inline-flex !important;
+    display: inline-flex;
     align-items: center;
     gap: $jv-space-2;
-    background: $jv-surface !important;
-    border: 1px solid $jv-border-subtle !important;
-    border-radius: $jv-radius-pill !important;
-    padding: $jv-space-1 $jv-space-3 !important;
+    background: transparent !important;
+    border: none !important;
+    border-radius: $jv-radius-sm !important;
+    padding: $jv-space-1 $jv-space-2 !important;
     font-size: $jv-font-size-xs !important;
     color: $jv-text-muted !important;
     cursor: pointer;
     transition: all $jv-transition-fast;
+    text-decoration: none !important;
 
-    &:hover {
-      background: $jv-hover-bg !important;
-      border-color: $jv-border-strong !important;
-      color: $jv-text-main !important;
+    // Respect the hidden class when there are no replies
+    &.hidden {
+      display: none !important;
     }
 
-    // Avatar stack
-    [component="post/reply-count/avatars"] {
-      display: flex;
-      align-items: center;
-
-      span {
-        margin-left: -4px;
+    &:hover {
+      background: $jv-hover-bg !important;
+      color: $jv-primary !important;
 
-        &:first-child {
-          margin-left: 0;
-        }
+      [component="post/reply-count/text"],
+      .replies-count {
+        color: $jv-primary !important;
       }
+    }
 
-      .avatar,
-      img {
-        width: 18px !important;
-        height: 18px !important;
-        border-radius: 50%;
-        border: 2px solid $jv-surface;
-      }
+    // Hide avatars - cleaner look like Reddit
+    [component="post/reply-count/avatars"] {
+      display: none !important;
     }
 
-    // Reply count text
+    // Reply count text - simple and clean
     .replies-count,
     [component="post/reply-count/text"] {
       font-weight: 600;
-      color: $jv-text-main;
+      font-size: $jv-font-size-xs;
+      color: $jv-text-muted;
+      transition: color $jv-transition-fast;
     }
 
-    // Last reply time
+    // Hide last reply time - too verbose
     .replies-last {
-      color: $jv-text-soft;
-      font-size: $jv-font-size-xs;
+      display: none !important;
     }
 
     // Chevron icon
@@ -864,80 +913,86 @@ body.template-topic {
 
     // Expanded state
     &[aria-expanded="true"] {
+      color: $jv-primary !important;
+
       .fa-chevron-down {
         transform: rotate(180deg);
       }
+
+      [component="post/reply-count/text"],
+      .replies-count {
+        color: $jv-primary !important;
+      }
     }
   }
 
   // ===========================================================
-  // NESTED REPLIES CONTAINER (Threaded style)
+  // NESTED REPLIES CONTAINER (Clean threaded style)
+  // Inspired by Reddit/GitHub - compact, minimal
   // ===========================================================
   [component="post/replies/container"] {
     margin-top: $jv-space-3 !important;
     margin-bottom: 0 !important;
-    margin-left: $jv-space-6;
+    margin-left: $jv-space-4;
     padding: 0 !important;
     background: transparent !important;
     border: none !important;
     border-radius: 0 !important;
     position: relative;
 
-    // Thread line
+    // Simple thread line
     &::before {
       content: "";
       position: absolute;
-      left: -$jv-space-4;
+      left: -$jv-space-2;
       top: 0;
-      bottom: $jv-space-4;
+      bottom: 0;
       width: 2px;
       background: $jv-border-subtle;
       border-radius: 1px;
+      transition: background $jv-transition-fast;
+    }
+
+    // Hover effect on thread line
+    &:hover::before {
+      background: $jv-border-strong;
     }
 
-    // Replies list
+    // Replies list - compact spacing
     [component="post/replies"],
     ul.list-unstyled {
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
-      gap: $jv-space-3;
+      gap: $jv-space-2;
     }
 
-    // Individual reply posts
+    // Individual reply posts - clean, compact
     [component="post"] {
       margin: 0 !important;
       padding: 0 !important;
       background: transparent !important;
       position: relative;
 
-      // Thread connector dot
+      // No connector dots
       &::before {
-        content: "";
-        position: absolute;
-        left: -$jv-space-4 - 3px;
-        top: $jv-space-4;
-        width: 8px;
-        height: 8px;
-        background: $jv-surface;
-        border: 2px solid $jv-border-strong;
-        border-radius: 50%;
-        z-index: 1;
+        display: none !important;
       }
 
-      // Reply card
+      // Reply container - compact padding
       .post-container-parent {
-        background: $jv-surface !important;
-        border: 1px solid $jv-border-subtle !important;
+        background: transparent !important;
+        border: none !important;
         border-radius: $jv-radius-sm !important;
-        padding: $jv-space-3 !important;
+        padding: $jv-space-2 $jv-space-3 !important;
+        margin-left: 0;
+        margin-right: 0;
         gap: $jv-space-2 !important;
-        transition: border-color $jv-transition-fast, box-shadow $jv-transition-fast;
+        transition: background $jv-transition-fast;
 
         &:hover {
-          border-color: $jv-border-strong !important;
-          box-shadow: $jv-shadow-sm;
+          background: $jv-hover-bg !important;
         }
 
         // Smaller avatar for replies
@@ -945,8 +1000,8 @@ body.template-topic {
         > div:first-child {
           .avatar,
           [component="user/picture"] {
-            width: 28px !important;
-            height: 28px !important;
+            width: 20px !important;
+            height: 20px !important;
           }
         }
       }
@@ -958,16 +1013,20 @@ body.template-topic {
         border: none !important;
       }
 
-      // Reply header
+      // Reply header - inline, compact
       .post-header {
         font-size: $jv-font-size-xs !important;
         min-height: auto !important;
-        margin-bottom: $jv-space-1 !important;
+        margin-bottom: 0 !important;
+        display: flex;
+        align-items: center;
+        gap: $jv-space-2;
 
         .fw-bold,
         a[data-username] {
           font-size: $jv-font-size-xs !important;
           font-weight: 600;
+          color: $jv-text-main;
         }
 
         .text-muted {
@@ -980,22 +1039,22 @@ body.template-topic {
         }
       }
 
-      // Reply content
+      // Reply content - tighter
       [component="post/content"] {
         font-size: $jv-font-size-sm !important;
         line-height: $jv-line-height-base;
+        color: $jv-text-main;
+        margin-top: $jv-space-1;
       }
 
-      // Reply footer/actions
+      // Reply footer - override main post styles (no border, tighter spacing)
       [component="post/footer"],
       .post-footer {
-        margin-top: $jv-space-2 !important;
-        padding-top: $jv-space-2 !important;
-        padding-bottom: 0 !important;
-        border-top: 1px solid $jv-border-subtle !important;
-        border-bottom: none !important;
+        margin-top: $jv-space-1 !important;
+        border-top: none !important;
       }
 
+      // Smaller action buttons for compact reply layout (inherits opacity/hover behavior from main rule)
       [component="post/actions"] {
         gap: $jv-space-1 !important;
 
@@ -1005,15 +1064,10 @@ body.template-topic {
           font-size: $jv-font-size-xs !important;
 
           i {
-            font-size: 14px !important;
+            font-size: 12px !important;
           }
         }
       }
-
-      // Last reply - no bottom spacing on thread line
-      &:last-child::before {
-        display: block !important;
-      }
     }
   }
 }
@@ -1061,33 +1115,23 @@ body.template-topic {
 
     // Mobile adjustments for threaded replies
     [component="post/replies/container"] {
-      margin-left: $jv-space-4;
+      margin-left: $jv-space-3;
 
       &::before {
-        left: -$jv-space-3;
+        left: -$jv-space-2;
       }
 
-      [component="post"] {
-        &::before {
-          left: -$jv-space-3 - 3px;
-        }
+      [component="post"] .post-container-parent {
+        padding: $jv-space-2 $jv-space-3 !important;
+        margin-left: 0;
+        margin-right: 0;
       }
     }
 
     // Mobile adjustments for parent context
     [component="post/parent"] {
-      padding: $jv-space-2 !important;
-
-      [component="post/parent/content"] {
-        -webkit-line-clamp: 1;
-      }
-    }
-
-    // Mobile reply count button
-    [component="post/reply-count"] {
-      .replies-last {
-        display: none !important;
-      }
+      padding: $jv-space-1 0 $jv-space-1 $jv-space-2 !important;
+      margin-left: 0 !important;
     }
   }
 }

package/static/lib/theme.js

@@ -21,10 +21,18 @@
     // Fix bookmark alert - only show when bookmark is meaningfully ahead
     fixBookmarkAlert();
 
+    // Initialize parent post click navigation with smooth scroll
+    initParentPostNavigation();
+
+    // Initialize post hover actions (show actions only on directly hovered post)
+    initPostHoverActions();
+
     // Re-initialize carousels when new posts are loaded (infinite scroll, etc.)
     // Also handle post edits by clearing the processed flag
     $(window).on('action:posts.loaded action:topic.loaded action:ajaxify.end', function() {
       initPostImageCarousels();
+      initParentPostNavigation();
+      initPostHoverActions();
     });
 
     // Handle post edits - need to re-process the edited post
@@ -266,4 +274,100 @@
     });
   }
 
+  /**
+   * Initialize parent post click navigation with smooth scroll
+   * Clicking the "Replying to" component scrolls to the parent post
+   */
+  function initParentPostNavigation() {
+    // Use event delegation on the topic container
+    $('[component="topic"]').off('click.javis-parent').on('click.javis-parent', '[component="post/parent"]', function(e) {
+      // Don't navigate if clicking on a link (username, etc.)
+      if ($(e.target).closest('a').length) {
+        return;
+      }
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      var parentPid = $(this).attr('data-parent-pid');
+      if (!parentPid) {
+        return;
+      }
+
+      // Find the parent post element
+      var $parentPost = $('[component="topic"] > [component="post"][data-pid="' + parentPid + '"]');
+
+      if ($parentPost.length) {
+        // Post is on the current page - smooth scroll to it
+        smoothScrollToPost($parentPost);
+      } else {
+        // Post is on a different page - navigate via URL
+        window.location.href = config.relative_path + '/post/' + parentPid;
+      }
+    });
+  }
+
+  /**
+   * Smooth scroll to a post element with highlight effect
+   */
+  function smoothScrollToPost($postElement) {
+    if (!$postElement.length) {
+      return;
+    }
+
+    // Calculate scroll position (with offset for header)
+    var headerHeight = $('header').outerHeight() || 60;
+    var scrollTop = $postElement.offset().top - headerHeight - 20;
+
+    // Smooth scroll
+    $('html, body').animate({
+      scrollTop: scrollTop
+    }, 400, 'swing', function() {
+      // Add highlight effect after scroll completes
+      highlightPost($postElement);
+    });
+  }
+
+  /**
+   * Briefly highlight a post to draw attention
+   */
+  function highlightPost($postElement) {
+    var $container = $postElement.find('.post-container-parent');
+    if (!$container.length) {
+      $container = $postElement;
+    }
+
+    // Add highlight class
+    $container.addClass('post-highlight-flash');
+
+    // Remove after animation
+    setTimeout(function() {
+      $container.removeClass('post-highlight-flash');
+    }, 1500);
+  }
+
+  /**
+   * Initialize post hover actions
+   * Adds 'post-hovered' class only to the directly hovered post container
+   * This prevents CSS hover from bubbling up to parent posts
+   */
+  function initPostHoverActions() {
+    // Use event delegation for all post containers
+    $(document).off('mouseenter.javis-hover mouseleave.javis-hover', '.post-container-parent');
+
+    $(document).on('mouseenter.javis-hover', '.post-container-parent', function(e) {
+      // Stop propagation to prevent parent containers from getting the event
+      e.stopPropagation();
+      // Remove class from all other containers first
+      $('.post-container-parent.post-hovered').removeClass('post-hovered');
+      // Add class only to this specific container
+      $(this).addClass('post-hovered');
+    });
+
+    $(document).on('mouseleave.javis-hover', '.post-container-parent', function(e) {
+      e.stopPropagation();
+      $(this).removeClass('post-hovered');
+    });
+  }
+
 })();

package/templates/partials/topic/post-parent.tpl

@@ -0,0 +1,9 @@
+<div component="post/parent" data-parent-pid="{./parent.pid}" data-uid="{./parent.uid}" class="btn btn-ghost btn-sm d-flex gap-2 text-start flex-row mb-2 post-parent-clickable" style="font-size: 13px;">
+	<div class="d-flex gap-2 text-nowrap">
+		<div class="d-flex flex-nowrap gap-1 align-items-center">
+			<a href="{config.relative_path}/user/{./parent.user.userslug}" class="text-decoration-none lh-1" onclick="event.stopPropagation();">{buildAvatar(./parent.user, "16px", true, "not-responsive align-middle")}</a>
+			<a class="fw-semibold text-truncate" style="max-width: 150px;" href="{config.relative_path}/user/{./parent.user.userslug}" onclick="event.stopPropagation();">{./parent.user.displayname}</a>
+		</div>
+	</div>
+	<div component="post/parent/content" class="text-muted line-clamp-1 text-break w-100">{./parent.content}</div>
+</div>