@okjavis/nodebb-theme-javis 5.0.1 → 5.0.4

package/package.json

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

package/plugin.json

@@ -18,7 +18,8 @@
     "static/lib/theme.js"
   ],
   "modules": {
-    "../admin/plugins/javis.js": "public/admin.js"
+    "../admin/plugins/javis.js": "public/admin.js",
+    "forum/search": "public/src/client/search.js"
   },
   "templates": "templates",
   "screenshot": "screenshot.png",

package/public/src/client/search.js

@@ -257,12 +257,14 @@ define('forum/search', [
 		categoryFilter.init(dropdownEl, {
 			selectedCids: _selectedCids,
 			updateButton: false, // prevent categoryFilter module from updating the button
+			states: [], // FIX: Disable watch states to remove "Watched categories" from dropdown
+			showLinks: true, // FIX: Show regular category links
 			onSelect: function (data) {
-				// Update selectedCids immediately when a category is clicked
+				// FIX: Update selectedCids immediately when a category is clicked
 				ajaxify.data.selectedCids = data.selectedCids;
 				selectedCids = data.selectedCids;
 
-				// Trigger search immediately
+				// FIX: Trigger search immediately without requiring additional clicks
 				const searchFiltersNew = getSearchDataFromDOM();
 				if (JSON.stringify(searchFilters) !== JSON.stringify(searchFiltersNew)) {
 					searchFilters = searchFiltersNew;

package/scss/_base.scss

@@ -307,3 +307,36 @@ a {
     border-top: 1px solid $jv-border-subtle;
   }
 }
+
+// ===========================================================
+// MOBILE NAVIGATION - Hide Chat and Notification Widgets
+// ===========================================================
+// Hide chat and notifications from mobile bottom navbar only
+@media (max-width: 767px) {
+  // Hide notifications widget - multiple selectors for comprehensive coverage
+  li[component="notifications"],
+  nav[component="sidebar/left"] li[component="notifications"],
+  .sidebar-left li[component="notifications"],
+  .nav-item.notifications {
+    display: none !important;
+    visibility: hidden !important;
+  }
+
+  // Hide chat widget - multiple selectors for comprehensive coverage
+  li.chats,
+  nav[component="sidebar/left"] li.chats,
+  .sidebar-left li.chats,
+  .nav-item.chats {
+    display: none !important;
+    visibility: hidden !important;
+  }
+
+  // Also hide drafts widget if present
+  li[component="sidebar/drafts"],
+  nav[component="sidebar/left"] li[component="sidebar/drafts"],
+  .sidebar-left li[component="sidebar/drafts"],
+  .nav-item.drafts {
+    display: none !important;
+    visibility: hidden !important;
+  }
+}

package/scss/_feed.scss

@@ -1017,6 +1017,8 @@ ul.categories-list {
 }
 
 .feed-category-filter {
+  // Ensure proper positioning context for dropdown
+  position: relative !important;
   .category-dropdown-container,
   [component="category/dropdown"] {
     // Override the btn-group styling
@@ -1135,3 +1137,41 @@ ul.categories-list {
     }
   }
 }
+
+// ===========================================================
+// MOBILE FIX - Category dropdown positioning
+// Fix dropdown opening from bottom left corner on mobile
+// ===========================================================
+@media (max-width: 767px) {
+  .feed-category-filter {
+    // Ensure button group has proper positioning
+    .category-dropdown-container,
+    [component="category/dropdown"],
+    .btn-group {
+      position: relative !important;
+    }
+
+    // Force dropdown to position relative to button, not viewport
+    // Use extremely high specificity to override Popper's inline styles
+    .dropdown-menu {
+      // Disable all transitions and animations on mobile
+      transition: none !important;
+      animation: none !important;
+
+      &.show {
+        position: absolute !important;
+        top: 100% !important;
+        right: 0 !important;
+        left: auto !important;
+        bottom: auto !important;
+        transform: none !important;
+        margin: 4px 0 0 0 !important;
+        // Ensure dropdown has proper dimensions
+        width: auto !important;
+        min-width: 200px !important;
+        max-height: none !important;
+        height: auto !important;
+      }
+    }
+  }
+}

package/scss/_header.scss

@@ -262,6 +262,26 @@
   }
 }
 
+// ===========================================================
+// MOBILE HEADER LOGO (hidden on desktop)
+// ===========================================================
+.javis-mobile-header-logo {
+  display: none !important; // Hidden by default on desktop
+
+  .javis-mobile-logo-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+  }
+
+  .javis-mobile-logo-img {
+    max-width: 120px; // Logo width on mobile
+    height: 32px; // Logo height on mobile
+    object-fit: contain;
+  }
+}
+
 @media (max-width: 767px) {
   .brand-container {
     // Hide search in header on mobile (use mobile header instead)
@@ -272,6 +292,14 @@
     > .col-12 {
       justify-content: center;
     }
+
+    // Show mobile logo on mobile devices only
+    .javis-mobile-header-logo {
+      display: flex !important; // Show on mobile
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
   }
 }
 

package/static/lib/theme.js

@@ -8,10 +8,22 @@
 
   var carouselCounter = 0;
 
+  // Patch search module to fix category filter
+  $(window).on('action:ajaxify.end', function(ev, data) {
+    if (data.url && data.url.startsWith('search')) {
+      patchSearchCategoryFilter();
+    }
+  });
+
   // Theme initialization
   $(document).ready(function() {
     console.log('JAVIS Community Theme initialized');
 
+    // Patch search if we're already on the search page
+    if (window.location.pathname.includes('/search')) {
+      setTimeout(patchSearchCategoryFilter, 500);
+    }
+
     // Initialize sidebar toggle handler
     initSidebarToggle();
 
@@ -39,11 +51,15 @@
     // Initialize immediate category filter navigation on feed page
     initFeedCategoryFilter();
 
+    // Fix mobile category dropdown positioning on feed page
+    fixMobileFeedCategoryDropdown();
+
     // 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();
+      fixMobileFeedCategoryDropdown();
       initPostHoverActions();
       initFeedComposerPromptHandler();
       initTopicListVoting();
@@ -658,6 +674,137 @@
     });
   }
 
+  /**
+   * Patch search page category filter to:
+   * 1. Remove "Watched categories" from dropdown
+   * 2. Auto-apply category filter on selection (no additional click needed)
+   */
+  function patchSearchCategoryFilter() {
+    var $categoryFilter = $('[component="search/filters"] [component="category/filter"]');
+    if (!$categoryFilter.length || $categoryFilter.attr('data-javis-patched')) {
+      return;
+    }
+    $categoryFilter.attr('data-javis-patched', 'true');
+
+    console.log('JAVIS: Patching search category filter');
+
+    // Function to remove "Watched categories" from the dropdown
+    function removeWatchedCategories() {
+      // Method 1: Remove by data-cid="watched"
+      var $watchedItem = $categoryFilter.find('[component="category/list"] li[data-cid="watched"]');
+      if ($watchedItem.length) {
+        $watchedItem.remove();
+        console.log('JAVIS: Removed "Watched categories" by data-cid');
+        return true;
+      }
+
+      // Method 2: Remove by text content (fallback)
+      $categoryFilter.find('[component="category/list"] li').each(function() {
+        var $li = $(this);
+        var text = $li.text().toLowerCase().trim();
+        if (text.includes('watched') && text.includes('categor')) {
+          $li.remove();
+          console.log('JAVIS: Removed "Watched categories" by text match');
+          return false; // break the loop
+        }
+      });
+    }
+
+    // Remove immediately
+    removeWatchedCategories();
+
+    // Also remove when dropdown opens (in case categories are loaded dynamically)
+    $categoryFilter.on('shown.bs.dropdown', function() {
+      setTimeout(removeWatchedCategories, 100);
+    });
+
+    // Add immediate search trigger on category selection
+    $categoryFilter.on('click', '[component="category/list"] [data-cid]', function(e) {
+      var $item = $(this);
+      var cid = $item.attr('data-cid');
+
+      // Let the original handler update the selection state first
+      setTimeout(function() {
+        // Trigger the search by closing the dropdown (which triggers the existing onHidden handler)
+        $categoryFilter.find('.dropdown-toggle').dropdown('hide');
+        console.log('JAVIS: Auto-triggering search for category:', cid);
+      }, 50);
+    });
+  }
+
+  /**
+   * Fix mobile category dropdown positioning on feed page
+   * Aggressively overrides Popper.js positioning on mobile to prevent bottom-left corner issue
+   */
+  function fixMobileFeedCategoryDropdown() {
+    console.log('JAVIS: fixMobileFeedCategoryDropdown called, window width:', window.innerWidth);
+
+    // Only run on feed page
+    if (!$('.feed').length) {
+      console.log('JAVIS: Not on feed page, exiting');
+      return;
+    }
+
+    console.log('JAVIS: On feed page, looking for category filter');
+
+    var $categoryFilter = $('.feed-category-filter [component="category/dropdown"]');
+    if (!$categoryFilter.length) {
+      console.log('JAVIS: Category filter not found');
+      return;
+    }
+
+    console.log('JAVIS: Category filter found, setting up mobile fix');
+
+    // Find the dropdown button and menu
+    var $dropdownButton = $categoryFilter.find('.dropdown-toggle');
+    var $dropdownMenu = $categoryFilter.find('.dropdown-menu');
+
+    if (!$dropdownButton.length || !$dropdownMenu.length) {
+      console.log('JAVIS: Dropdown button or menu not found');
+      return;
+    }
+
+    // Disable Popper immediately on mobile to prevent animation from bottom-left
+    if (window.innerWidth <= 767) {
+      $dropdownButton.attr('data-bs-display', 'static');
+      console.log('JAVIS: Disabled Popper positioning on mobile');
+    }
+
+    // Always bind the event, but check window width when it fires
+    $categoryFilter.off('shown.bs.dropdown.javisMobileFix').on('shown.bs.dropdown.javisMobileFix', function() {
+      console.log('JAVIS: Dropdown shown event fired, window width:', window.innerWidth);
+
+      // Only apply fix on mobile
+      if (window.innerWidth > 767) {
+        console.log('JAVIS: Not mobile, skipping positioning fix');
+        return;
+      }
+
+      console.log('JAVIS: Applying mobile positioning fix');
+
+      // Use requestAnimationFrame to ensure we override after Popper runs
+      requestAnimationFrame(function() {
+        $dropdownMenu.css({
+          'position': 'absolute',
+          'top': '100%',
+          'right': '0',
+          'left': 'auto',
+          'bottom': 'auto',
+          'transform': 'none',
+          'margin': '4px 0 0 0',
+          'inset': 'auto'
+        });
+
+        // Also remove Popper attributes
+        $dropdownMenu.removeAttr('data-popper-placement');
+
+        console.log('JAVIS: Mobile positioning applied successfully');
+      });
+    });
+
+    console.log('JAVIS: Mobile fix event listener attached');
+  }
+
   /**
    * Initialize immediate category filter navigation on feed page
    * When a category is selected, navigate immediately instead of waiting for dropdown close

package/templates/partials/category/filter-dropdown-content.tpl

@@ -41,4 +41,4 @@
         </li>
         {{{end}}}
     </ul>
-</div>
+</div>

package/templates/partials/header/brand.tpl

@@ -1,6 +1,13 @@
 {{{ if widgets.brand-header.length }}}
 <div class="container-lg px-md-4 brand-container">
 	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		<!-- Mobile Logo (only visible on mobile) -->
+		<div class="javis-mobile-header-logo d-none">
+			<a href="{relative_path}/" class="javis-mobile-logo-link" title="JAVIS Community">
+				<img src="{relative_path}/plugins/@okjavis/nodebb-theme-javis/static/images/logo-full.png" alt="JAVIS Community" class="javis-mobile-logo-img" />
+			</a>
+		</div>
+
 		<!-- Search widget area (left/center) -->
 		<div data-widget-area="brand-header" class="flex-fill gap-3 p-2 align-self-center">
 			{{{each widgets.brand-header}}}