@okjavis/nodebb-theme-javis 3.0.6 → 3.0.9

package/package.json

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

package/scss/_cards.scss

@@ -61,25 +61,36 @@
   cursor: pointer;
   border-radius: $jv-radius-xs;
   transition: color 0.15s ease, background-color 0.15s ease;
+  text-decoration: none;
 
   &:hover {
     background: rgba(0, 0, 0, 0.06);
+    text-decoration: none;
   }
 
-  &.vote-up:hover {
+  // Upvote - orange/red on hover and when active
+  &.vote-up:hover,
+  &.vote-up.upvoted {
     color: #ff4500; // Reddit orange-red
+    background: rgba(255, 69, 0, 0.1);
   }
 
-  &.vote-down:hover {
-    color: #7193ff; // Reddit periwinkle
+  // Downvote - blue/periwinkle on hover and when active
+  &.vote-down:hover,
+  &.vote-down.downvoted {
+    color: #7193ff; // Reddit periwinkle/blue
+    background: rgba(113, 147, 255, 0.1);
   }
 
+  // Legacy active class support
   &.active.vote-up {
     color: #ff4500;
+    background: rgba(255, 69, 0, 0.1);
   }
 
   &.active.vote-down {
     color: #7193ff;
+    background: rgba(113, 147, 255, 0.1);
   }
 
   i {

package/scss/_composer.scss

@@ -414,10 +414,14 @@ html.composing .composer .formatting-group {
   gap: 2px !important;
   flex-wrap: nowrap !important;
   overflow-x: auto !important;
+  overflow-y: visible !important; // Allow badges to overflow vertically
+  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,27 @@ 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;
+      }
     }
   }
 

package/static/lib/theme.js

@@ -33,6 +33,12 @@
     // Initialize click handler for composer prompt card (rendered server-side in feed.tpl)
     initFeedComposerPromptHandler();
 
+    // Initialize voting handlers for category/topics listing pages
+    initTopicListVoting();
+
+    // Initialize immediate category filter navigation on feed page
+    initFeedCategoryFilter();
+
     // 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() {
@@ -40,6 +46,8 @@
       initParentPostNavigation();
       initPostHoverActions();
       initFeedComposerPromptHandler();
+      initTopicListVoting();
+      initFeedCategoryFilter();
     });
 
     // Handle post edits - need to re-process the edited post
@@ -497,4 +505,205 @@
     });
   }
 
+  /**
+   * Initialize voting handlers for topic listing pages (category, recent, etc.)
+   * NodeBB's native voting only works on topic detail pages, so we add custom handlers here
+   */
+  function initTopicListVoting() {
+    // Only run on pages with topic listings (not on topic detail page)
+    if ($('[component="topic"]').length) {
+      // We're on a topic detail page, NodeBB handles voting natively
+      return;
+    }
+
+    // Find vote columns that haven't been initialized
+    $('.vote-column:not([data-vote-initialized])').each(function() {
+      var $voteColumn = $(this);
+      $voteColumn.attr('data-vote-initialized', 'true');
+
+      var pid = $voteColumn.attr('data-pid');
+      if (!pid) return;
+
+      var $upvoteBtn = $voteColumn.find('[component="post/upvote"]');
+      var $downvoteBtn = $voteColumn.find('[component="post/downvote"]');
+      var $voteCount = $voteColumn.find('[component="post/vote-count"]');
+
+      // Upvote click handler
+      $upvoteBtn.on('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!config.loggedIn) {
+          window.location.href = config.relative_path + '/login';
+          return;
+        }
+
+        var isUpvoted = $upvoteBtn.hasClass('upvoted');
+        var method = isUpvoted ? 'del' : 'put';
+
+        $.ajax({
+          url: config.relative_path + '/api/v3/posts/' + pid + '/vote',
+          method: method,
+          data: JSON.stringify({ delta: 1 }),
+          contentType: 'application/json',
+          headers: {
+            'x-csrf-token': config.csrf_token
+          },
+          success: function(response) {
+            // Toggle upvoted state
+            $upvoteBtn.toggleClass('upvoted');
+            // Remove downvoted if it was set
+            $downvoteBtn.removeClass('downvoted');
+
+            // 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;
+            if (msg) {
+              alert(msg);
+            }
+          }
+        });
+      });
+
+      // Downvote click handler
+      $downvoteBtn.on('click', function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (!config.loggedIn) {
+          window.location.href = config.relative_path + '/login';
+          return;
+        }
+
+        var isDownvoted = $downvoteBtn.hasClass('downvoted');
+        var method = isDownvoted ? 'del' : 'put';
+
+        $.ajax({
+          url: config.relative_path + '/api/v3/posts/' + pid + '/vote',
+          method: method,
+          data: JSON.stringify({ delta: -1 }),
+          contentType: 'application/json',
+          headers: {
+            'x-csrf-token': config.csrf_token
+          },
+          success: function(response) {
+            // Toggle downvoted state
+            $downvoteBtn.toggleClass('downvoted');
+            // Remove upvoted if it was set
+            $upvoteBtn.removeClass('upvoted');
+
+            // 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;
+            if (msg) {
+              alert(msg);
+            }
+          }
+        });
+      });
+    });
+  }
+
+  /**
+   * Initialize immediate category filter navigation on feed page
+   * When a category is selected, navigate immediately instead of waiting for dropdown close
+   */
+  function initFeedCategoryFilter() {
+    // Only run on feed page
+    if (!$('.feed').length) {
+      return;
+    }
+
+    var $categoryDropdown = $('.feed-category-filter [component="category/dropdown"]');
+    if (!$categoryDropdown.length || $categoryDropdown.attr('data-filter-initialized')) {
+      return;
+    }
+    $categoryDropdown.attr('data-filter-initialized', 'true');
+
+    // Handle category selection - navigate immediately
+    $categoryDropdown.on('click', '[component="category/list"] [data-cid]', function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      var $item = $(this);
+      var cid = $item.attr('data-cid');
+      var currentParams = utils.params();
+
+      // Build the new URL
+      if (cid === 'all') {
+        delete currentParams.cid;
+      } else {
+        currentParams.cid = cid;
+      }
+
+      // Remove page parameter to start from first page
+      delete currentParams.page;
+
+      var url = '/feed';
+      if (Object.keys(currentParams).length) {
+        url += '?' + $.param(currentParams);
+      }
+
+      // Close the dropdown
+      $categoryDropdown.find('.dropdown-toggle').dropdown('hide');
+
+      // Navigate to the filtered feed
+      ajaxify.go(url);
+    });
+  }
+
 })();

package/templates/partials/topics_list.tpl

@@ -14,14 +14,14 @@
 
 		<!-- Vote Column (Reddit-style) -->
 		{{{ if !reputation:disabled }}}
-		<div class="vote-column">
-			<button class="vote-btn vote-up" title="[[topic:upvote]]">
+		<div class="vote-column" data-pid="{./mainPid}">
+			<a component="post/upvote" href="#" class="vote-btn vote-up{{{ if ./upvoted }}} upvoted{{{ end }}}" title="[[topic:upvote]]">
 				<i class="fa fa-chevron-up"></i>
-			</button>
-			<span class="vote-count" title="{./votes}">{humanReadableNumber(./votes, 0)}</span>
-			<button class="vote-btn vote-down" title="[[topic:downvote]]">
+			</a>
+			<span component="post/vote-count" class="vote-count" data-votes="{./votes}" title="{./votes}">{humanReadableNumber(./votes, 0)}</span>
+			<a component="post/downvote" href="#" class="vote-btn vote-down{{{ if ./downvoted }}} downvoted{{{ end }}}" title="[[topic:downvote]]">
 				<i class="fa fa-chevron-down"></i>
-			</button>
+			</a>
 		</div>
 		{{{ end }}}