@okjavis/nodebb-theme-javis 5.0.4 → 5.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "5.0.4",
+  "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

@@ -340,3 +340,94 @@ a {
     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/_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
 // ===========================================================
@@ -300,6 +309,13 @@
       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

@@ -54,12 +54,16 @@
     // 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();
@@ -79,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();
+    });
   });
 
   /**
@@ -805,6 +814,72 @@
     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