@okjavis/nodebb-theme-javis 3.0.7 → 4.0.1

package/package.json

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

package/scss/_composer.scss

@@ -406,6 +406,7 @@ html.composing .composer .formatting-bar {
   margin: 0 !important;
   flex-shrink: 0 !important;
   gap: $jv-space-3 !important;
+  overflow: visible !important; // Allow dropdowns to show
 }
 
 html.composing .composer .formatting-group {
@@ -413,11 +414,14 @@ html.composing .composer .formatting-group {
   align-items: center !important;
   gap: 2px !important;
   flex-wrap: nowrap !important;
-  overflow-x: auto !important;
+  overflow: visible !important; // Allow dropdowns to show
+  padding-top: 8px !important; // Space for badges that overflow upward
 
   li {
     flex-shrink: 0 !important;
     list-style: none !important;
+    position: relative !important; // For badge positioning
+    overflow: visible !important; // Allow badges to show
 
     .btn {
       color: $jv-text-muted !important;
@@ -430,11 +434,43 @@ html.composing .composer .formatting-group {
       justify-content: center !important;
       background: transparent !important;
       border: none !important;
+      position: relative !important; // For badge positioning
+      overflow: visible !important; // Allow badges to show
 
       &:hover {
         background: $jv-hover-bg !important;
         color: $jv-text-main !important;
       }
+
+      // Badge on buttons (like thumbnail count)
+      .badge {
+        position: absolute !important;
+        top: -4px !important;
+        right: -4px !important;
+        transform: none !important;
+        left: auto !important;
+        font-size: 10px !important;
+        min-width: 16px !important;
+        height: 16px !important;
+        padding: 0 4px !important;
+        line-height: 16px !important;
+      }
+    }
+
+    // Dropdown containers (like Heading dropdown)
+    &.dropdown,
+    &.bottom-sheet {
+      overflow: visible !important;
+      position: relative !important;
+
+      .dropdown-menu {
+        position: absolute !important;
+        top: 100% !important;
+        left: 0 !important;
+        min-width: 150px !important;
+        z-index: 9999 !important;
+        margin-top: 2px !important;
+      }
     }
   }
 

package/scss/_feed.scss

@@ -315,7 +315,7 @@
 .feed li[component="post"].posts-list-item {
   background: $jv-surface !important;
   border: 1px solid $jv-border-subtle !important;
-  border-radius: $jv-radius-sm !important;
+  border-radius: $jv-radius-lg !important; // Match composer and widgets (16px)
   margin-bottom: $jv-space-2 !important;
   box-shadow: $jv-shadow-sm !important;
   overflow: hidden !important;
@@ -657,7 +657,7 @@
   // Action bar - now a direct child of the post card
   .feed-action-bar {
     background: $jv-surface !important;
-    border-radius: 0 0 $jv-radius-sm $jv-radius-sm; // Match card's bottom corners
+    border-radius: 0 0 $jv-radius-lg $jv-radius-lg; // Match card's bottom corners (16px)
 
     .btn-link {
       display: inline-flex;

package/scss/_forms.scss

@@ -116,9 +116,15 @@ textarea {
 
     i {
       width: 16px;
+      flex-shrink: 0;
       color: $jv-text-muted;
     }
 
+    // Hide bookmark option from dropdown menu
+    &[component="post/bookmark"] {
+      display: none !important;
+    }
+
     &:hover {
       background: rgba(0, 81, 255, 0.06);
       color: $jv-primary;

package/static/lib/theme.js

@@ -555,15 +555,33 @@
             // Remove downvoted if it was set
             $downvoteBtn.removeClass('downvoted');
 
-            // Update vote count
-            if (response && response.response) {
-              var votes = response.response.post ? response.response.post.votes : response.response.votes;
-              if (votes !== undefined) {
-                $voteCount.text(votes);
-                $voteCount.attr('data-votes', votes);
-                $voteCount.attr('title', votes);
+            // Update vote count - handle various response structures
+            var votes = null;
+            if (response) {
+              if (response.response && response.response.post) {
+                votes = response.response.post.votes;
+              } else if (response.response && response.response.votes !== undefined) {
+                votes = response.response.votes;
+              } else if (response.post && response.post.votes !== undefined) {
+                votes = response.post.votes;
+              } else if (response.votes !== undefined) {
+                votes = response.votes;
               }
             }
+
+            if (votes !== null) {
+              $voteCount.text(votes);
+              $voteCount.attr('data-votes', votes);
+              $voteCount.attr('title', votes);
+            } else {
+              // Fallback: manually calculate from current state
+              var currentVotes = parseInt($voteCount.attr('data-votes') || $voteCount.text()) || 0;
+              var wasUpvoted = !$upvoteBtn.hasClass('upvoted'); // toggled already
+              votes = wasUpvoted ? currentVotes - 1 : currentVotes + 1;
+              $voteCount.text(votes);
+              $voteCount.attr('data-votes', votes);
+              $voteCount.attr('title', votes);
+            }
           },
           error: function(xhr) {
             var msg = xhr.responseJSON && xhr.responseJSON.status && xhr.responseJSON.status.message;
@@ -601,15 +619,33 @@
             // Remove upvoted if it was set
             $upvoteBtn.removeClass('upvoted');
 
-            // Update vote count
-            if (response && response.response) {
-              var votes = response.response.post ? response.response.post.votes : response.response.votes;
-              if (votes !== undefined) {
-                $voteCount.text(votes);
-                $voteCount.attr('data-votes', votes);
-                $voteCount.attr('title', votes);
+            // Update vote count - handle various response structures
+            var votes = null;
+            if (response) {
+              if (response.response && response.response.post) {
+                votes = response.response.post.votes;
+              } else if (response.response && response.response.votes !== undefined) {
+                votes = response.response.votes;
+              } else if (response.post && response.post.votes !== undefined) {
+                votes = response.post.votes;
+              } else if (response.votes !== undefined) {
+                votes = response.votes;
               }
             }
+
+            if (votes !== null) {
+              $voteCount.text(votes);
+              $voteCount.attr('data-votes', votes);
+              $voteCount.attr('title', votes);
+            } else {
+              // Fallback: manually calculate from current state
+              var currentVotes = parseInt($voteCount.attr('data-votes') || $voteCount.text()) || 0;
+              var wasDownvoted = !$downvoteBtn.hasClass('downvoted'); // toggled already
+              votes = wasDownvoted ? currentVotes + 1 : currentVotes - 1;
+              $voteCount.text(votes);
+              $voteCount.attr('data-votes', votes);
+              $voteCount.attr('title', votes);
+            }
           },
           error: function(xhr) {
             var msg = xhr.responseJSON && xhr.responseJSON.status && xhr.responseJSON.status.message;

package/templates/feed.tpl

@@ -94,13 +94,12 @@
 					{{{ end }}}
 
 					<!-- 3. ACTION BAR (third - separated from content) -->
+					<!-- Order: Likes, Comments, Reply -->
 					<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="{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-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>