@okjavis/nodebb-theme-javis 2.4.0 → 2.5.1

package/package.json

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

package/scss/_base.scss

@@ -28,6 +28,13 @@ nav[component="sidebar/left"] {
   }
 }
 
+// Sidebar toggle link padding
+.sidebar-toggle {
+  [component="sidebar/toggle"] {
+    padding: $jv-space-4 $jv-space-5 !important; // 16px vertical, 20px horizontal
+  }
+}
+
 // Reddit-style layout: Equal spacing and wider feed
 .feed > .row {
   max-width: 1400px; // Reddit's approximate max-width

package/scss/_composer.scss

@@ -74,6 +74,14 @@ html.composing .composer .mobile-navbar {
   display: none !important;
 }
 
+// ===========================================================
+// HIDE PREVIEW AND HELP BUTTONS
+// ===========================================================
+html.composing .composer [data-action="preview"],
+html.composing .composer [data-action="help"] {
+  display: none !important;
+}
+
 // ===========================================================
 // HEADER
 // ===========================================================

package/scss/_feed.scss

@@ -24,6 +24,18 @@
       display: none !important;
     }
   }
+
+  // Hide the original "New Topic" button via CSS to prevent flicker
+  // The composer prompt card will replace it via JS
+  #new_topic {
+    display: none !important;
+  }
+
+  // Hide the controls row (category dropdown, options)
+  // The composer prompt card replaces this functionality
+  > .row > div > .d-flex.justify-content-between.py-2.mb-2 {
+    display: none !important;
+  }
 }
 
 // ===========================================================
@@ -33,7 +45,8 @@
   background: $jv-surface;
   border: 1px solid $jv-border-subtle;
   border-radius: $jv-radius-lg;
-  padding: $jv-space-4;
+  padding: $jv-space-4 $jv-space-6; // 16px top/bottom, 24px left/right
+  margin-top: $jv-space-4; // Align with trending tags padding-top
   margin-bottom: $jv-space-4;
   box-shadow: $jv-shadow-sm;
   transition: box-shadow $jv-transition-fast, border-color $jv-transition-fast;
@@ -358,7 +371,7 @@
     font-weight: 700 !important; // Bolder for better hierarchy
     line-height: 1.4 !important; // Better readability
     color: $jv-text-main !important;
-    margin-bottom: $jv-space-3; // 6px - more breathing room
+    margin-bottom: 0;
     letter-spacing: -0.02em; // Tighter for modern feel
 
     &:hover {

package/static/lib/theme.js

@@ -375,27 +375,65 @@
   }
 
   /**
-   * Initialize click handler for composer prompt card on feed page
-   * The card HTML is rendered server-side in feed.tpl for instant display (no flicker)
-   * This function only sets up the click handlers
+   * Initialize LinkedIn-style composer prompt card on feed page
+   * Injects the card HTML and sets up click handlers
+   * The original "New Topic" button is hidden via CSS to prevent flicker
    */
   function initFeedComposerPromptHandler() {
-    // Only run on feed page with composer card present
-    var $card = $('.composer-prompt-card');
-    if (!$card.length) {
+    // Only run on feed page
+    if (!$('.feed').length) {
       return;
     }
 
-    // Skip if already initialized
-    if ($card.data('handler-initialized')) {
+    // Don't re-inject if already present
+    if ($('.composer-prompt-card').length) {
       return;
     }
-    $card.data('handler-initialized', true);
 
-    var isLoggedIn = typeof app !== 'undefined' && app.user && app.user.uid;
+    // Find the existing controls row (contains New Topic button)
+    var $controlsRow = $('.feed .d-flex.justify-content-between.py-2.mb-2').first();
+    if (!$controlsRow.length) {
+      return;
+    }
+
+    // Get user info for avatar - clone from header avatar which is already correctly rendered
+    var isLoggedIn = false;
+    var avatarHtml = '';
+
+    if (typeof app !== 'undefined' && app.user && app.user.uid) {
+      isLoggedIn = true;
+      // Clone the avatar from the header - it's already correctly rendered by NodeBB
+      var $headerAvatar = $('[component="header/avatar"] img, [component="header/avatar"] [component="avatar/picture"]').first();
+      if ($headerAvatar.length) {
+        avatarHtml = '<img src="' + $headerAvatar.attr('src') + '" alt="Avatar" class="avatar avatar-rounded" />';
+      } else {
+        // Fallback to icon-based avatar from header
+        var $headerIcon = $('[component="header/avatar"] [component="avatar/icon"]').first();
+        if ($headerIcon.length) {
+          avatarHtml = $headerIcon.clone().addClass('avatar avatar-rounded').get(0).outerHTML;
+        } else {
+          // Last resort: use placeholder
+          avatarHtml = '<div class="avatar avatar-rounded avatar-placeholder"><i class="fa fa-user"></i></div>';
+        }
+      }
+    } else {
+      avatarHtml = '<div class="avatar avatar-rounded avatar-placeholder"><i class="fa fa-user"></i></div>';
+    }
+
+    var cardHtml = '<div class="composer-prompt-card' + (isLoggedIn ? '' : ' composer-prompt-guest') + '">' +
+      '<div class="composer-prompt-inner">' +
+        '<div class="composer-prompt-avatar">' + avatarHtml + '</div>' +
+        '<button class="composer-prompt-input" type="button" id="composer-prompt-btn">' +
+          '<span class="composer-prompt-placeholder">' + (isLoggedIn ? 'Start a discussion...' : 'Sign in to start a discussion...') + '</span>' +
+        '</button>' +
+      '</div>' +
+    '</div>';
+
+    // Insert the card before the controls row
+    $controlsRow.before(cardHtml);
 
     // Bind click handler to open composer
-    $card.on('click', '.composer-prompt-input, .composer-prompt-action', function(e) {
+    $('.composer-prompt-card').on('click', '.composer-prompt-input, .composer-prompt-action', function(e) {
       e.preventDefault();
 
       if (!isLoggedIn) {

package/templates/feed.tpl

@@ -1,163 +0,0 @@
-<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 }}}
-
-			<!-- JAVIS: LinkedIn-style Composer Prompt Card -->
-			<div class="composer-prompt-card{{{ if !loggedIn }}} composer-prompt-guest{{{ end }}}">
-				<div class="composer-prompt-inner">
-					<div class="composer-prompt-avatar">
-						{{{ if loggedIn }}}
-						{buildAvatar(loggedInUser, "48px", true, "avatar avatar-rounded")}
-						{{{ else }}}
-						<div class="avatar avatar-rounded avatar-placeholder"><i class="fa fa-user"></i></div>
-						{{{ end }}}
-					</div>
-					<button class="composer-prompt-input" type="button" id="composer-prompt-btn">
-						<span class="composer-prompt-placeholder">{{{ if loggedIn }}}Start a discussion...{{{ else }}}Sign in to start a discussion...{{{ end }}}</span>
-					</button>
-					{{{ if loggedIn }}}
-					<div class="composer-prompt-actions">
-						<button class="composer-prompt-action" type="button" title="Add image"><i class="fa fa-image"></i></button>
-						<button class="composer-prompt-action" type="button" title="Add link"><i class="fa fa-link"></i></button>
-					</div>
-					{{{ end }}}
-				</div>
-			</div>
-
-			<!-- Hidden controls row - New Topic button kept for JS functionality -->
-			<div class="d-flex justify-content-between py-2 mb-2 gap-1 feed-controls-row">
-				{{{ if canPost }}}
-				<button id="new_topic" class="btn btn-primary btn-sm d-none">[[category:new-topic-button]]</button>
-				{{{ end }}}
-				{{{ if (!loggedIn && !canPost) }}}
-				<a href="{config.relative_path}/login" class="btn btn-primary btn-sm d-none">[[category:guest-login-post]]</a>
-				{{{ end }}}
-
-				<div class="d-flex justify-content-end gap-1 ms-auto">
-					<!-- 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}">
-
-					{{{ 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 }}}
-
-					<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>
-							<hr class="my-2"/>
-							<div class="d-flex justify-content-between">
-								<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>
-						</div>
-					</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>