@okjavis/nodebb-theme-javis 5.0.2 → 5.0.4

package/package.json

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

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

@@ -51,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();
@@ -728,6 +732,79 @@
     });
   }
 
+  /**
+   * 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/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}}}