@okjavis/nodebb-theme-javis 5.0.2 → 5.0.6

package/package.json

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

package/scss/_base.scss

@@ -307,3 +307,127 @@ 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;
+  }
+}
+
+// ===========================================================
+// ACCOUNT/PROFILE SIDEBAR - Structured layout for mobile
+// ===========================================================
+@media (max-width: 767px) {
+  // Account sidebar container - force column layout
+  .account [component="sidebar/left"] .flex-shrink-0,
+  .account .flex-shrink-0.pe-2.border-end-md {
+    width: 100% !important;
+    padding: 0 !important;
+    border: none !important;
+    margin-bottom: $jv-space-4 !important;
+  }
+
+  // Inner container - structured grid layout
+  .account [component="sidebar/left"] .sticky-md-top,
+  .account .sticky-md-top.d-flex {
+    display: grid !important;
+    grid-template-columns: 1fr 1fr !important;
+    gap: $jv-space-2 !important;
+    padding: $jv-space-3 !important;
+    background: $jv-surface !important;
+    border-radius: $jv-radius-md !important;
+    border: 1px solid $jv-border-subtle !important;
+  }
+
+  // Menu items - consistent sizing
+  .account [component="sidebar/left"] a.btn {
+    margin: 0 !important;
+    padding: $jv-space-3 !important;
+    border-radius: $jv-radius-sm !important;
+    background: $jv-bg !important;
+    border: 1px solid $jv-border-subtle !important;
+    transition: all $jv-transition-fast !important;
+    min-height: 56px !important;
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    justify-content: center !important;
+
+    &:hover {
+      background: $jv-hover-bg !important;
+      border-color: $jv-border-strong !important;
+    }
+
+    &.active {
+      background: $jv-primary !important;
+      color: white !important;
+      border-color: $jv-primary !important;
+
+      .text-xs {
+        color: rgba(255, 255, 255, 0.9) !important;
+      }
+    }
+
+    // Text content
+    .flex-grow-1 {
+      font-size: $jv-font-size-sm !important;
+      font-weight: 600 !important;
+      margin-bottom: 2px !important;
+    }
+
+    // Count badges
+    .text-xs {
+      font-size: $jv-font-size-xs !important;
+      color: $jv-text-soft !important;
+      font-weight: 500 !important;
+    }
+  }
+
+  // Horizontal rules - full width dividers
+  .account [component="sidebar/left"] hr {
+    grid-column: 1 / -1 !important;
+    margin: $jv-space-2 0 !important;
+    border-color: $jv-border-subtle !important;
+  }
+
+  // Settings and action links - full width buttons
+  .account [component="sidebar/left"] a.btn.ff-secondary.text-xs,
+  .account [component="sidebar/left"] a[href*="/edit"],
+  .account [component="sidebar/left"] a[component*="account/"] {
+    grid-column: 1 / -1 !important;
+    flex-direction: row !important;
+    gap: $jv-space-2 !important;
+    align-items: center !important;
+
+    i {
+      flex-shrink: 0 !important;
+    }
+  }
+}

package/scss/_composer.scss

@@ -856,4 +856,32 @@ html.composing .composer.reply {
     padding-bottom: max($jv-space-3, env(safe-area-inset-bottom)) !important;
     border-radius: 0 !important;
   }
+
+  // Fix composer category dropdown positioning on mobile
+  html.composing .composer .category-list-container {
+    [component="category-selector"],
+    .btn-group {
+      position: relative !important;
+    }
+
+    .dropdown-menu {
+      transition: none !important;
+      animation: none !important;
+
+      &.show {
+        position: absolute !important;
+        top: 100% !important;
+        left: 0 !important;
+        right: auto !important;
+        bottom: auto !important;
+        transform: none !important;
+        margin: 4px 0 0 0 !important;
+        width: auto !important;
+        min-width: 280px !important;
+        max-width: 320px !important;
+        max-height: none !important;
+        height: auto !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

@@ -237,6 +237,15 @@
   }
 }
 
+// ===========================================================
+// NOTIFICATION DROPDOWN - Reduced width for better fit
+// ===========================================================
+.notifications-dropdown {
+  min-width: 300px !important;
+  max-width: 340px !important;
+  width: 300px !important;
+}
+
 // ===========================================================
 // RESPONSIVE ADJUSTMENTS
 // ===========================================================
@@ -262,6 +271,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 +301,21 @@
     > .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;
+    }
+
+    // Reduce notification dropdown width on mobile to prevent cutoff
+    .notifications-dropdown {
+      min-width: 280px !important;
+      max-width: 90vw !important;
+      width: 280px !important;
+    }
   }
 }
 

package/static/lib/theme.js

@@ -51,11 +51,19 @@
     // Initialize immediate category filter navigation on feed page
     initFeedCategoryFilter();
 
+    // Fix mobile category dropdown positioning on feed page
+    fixMobileFeedCategoryDropdown();
+
+    // Fix mobile category dropdown positioning in composer
+    fixMobileComposerCategoryDropdown();
+
     // 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();
+      fixMobileComposerCategoryDropdown();
       initPostHoverActions();
       initFeedComposerPromptHandler();
       initTopicListVoting();
@@ -75,6 +83,11 @@
         initPostImageCarousels();
       }
     });
+
+    // Handle composer events - fix category dropdown on mobile when composer is shown
+    $(window).on('action:composer.loaded action:composer.enhanced', function() {
+      fixMobileComposerCategoryDropdown();
+    });
   });
 
   /**
@@ -728,6 +741,145 @@
     });
   }
 
+  /**
+   * 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');
+  }
+
+  /**
+   * Fix mobile category dropdown positioning in composer
+   * Aggressively overrides Popper.js positioning on mobile to prevent bottom-left corner issue
+   */
+  function fixMobileComposerCategoryDropdown() {
+    console.log('JAVIS: fixMobileComposerCategoryDropdown called, window width:', window.innerWidth);
+
+    // Find the composer category selector
+    var $categorySelector = $('.composer [component="category-selector"]');
+    if (!$categorySelector.length) {
+      console.log('JAVIS: Composer category selector not found');
+      return;
+    }
+
+    console.log('JAVIS: Composer category selector found, setting up mobile fix');
+
+    // Find the dropdown button and menu
+    var $dropdownButton = $categorySelector.find('.dropdown-toggle');
+    var $dropdownMenu = $categorySelector.find('.dropdown-menu');
+
+    if (!$dropdownButton.length || !$dropdownMenu.length) {
+      console.log('JAVIS: Composer 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 for composer');
+    }
+
+    // Always bind the event, but check window width when it fires
+    $categorySelector.off('shown.bs.dropdown.javisComposerMobileFix').on('shown.bs.dropdown.javisComposerMobileFix', function() {
+      console.log('JAVIS: Composer dropdown shown event fired, window width:', window.innerWidth);
+
+      // Only apply fix on mobile
+      if (window.innerWidth > 767) {
+        console.log('JAVIS: Not mobile, skipping composer positioning fix');
+        return;
+      }
+
+      console.log('JAVIS: Applying mobile positioning fix for composer');
+
+      // Use requestAnimationFrame to ensure we override after Popper runs
+      requestAnimationFrame(function() {
+        $dropdownMenu.css({
+          'position': 'absolute',
+          'top': '100%',
+          'left': '0',
+          'right': 'auto',
+          'bottom': 'auto',
+          'transform': 'none',
+          'margin': '4px 0 0 0',
+          'inset': 'auto'
+        });
+
+        // Also remove Popper attributes
+        $dropdownMenu.removeAttr('data-popper-placement');
+
+        console.log('JAVIS: Composer mobile positioning applied successfully');
+      });
+    });
+
+    console.log('JAVIS: Composer 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}}}