@okjavis/nodebb-theme-javis 1.4.0 → 1.5.1

package/package.json

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

package/plugin.json

@@ -17,7 +17,7 @@
   ],
   "templates": "templates",
   "screenshot": "screenshot.png",
-  "version": "1.0.1",
+  "version": "1.5.0",
   "nbbpm": {
     "compatibility": "^4.0.0"
   }

package/scss/_base.scss

@@ -9,197 +9,61 @@ nav[component="sidebar/right"],
   display: none !important;
 }
 
-// ===========================================================
-// MAIN CONTENT CENTERING (Reddit-style)
-// ===========================================================
-// Center the main content area with equal margins on both sides
-// This applies to ALL main content pages including feed, category, recent, etc.
+// No custom layout overrides - use Harmony defaults
 
-// Feed page uses col-lg-6 for main content and col-lg-3 for sidebars
-.feed > .row {
-  max-width: 1440px !important; // Max width for entire content area
-  margin: 0 auto !important; // Center the row
-  padding: 0 24px !important; // Equal padding on both sides - 24px like Reddit
-  display: flex !important;
-  justify-content: center !important; // Center the flex items
-
-  // Left sidebar (widget area)
-  > .col-lg-3[data-widget-area="left"] {
-    flex: 0 0 auto !important;
-    width: 0 !important; // Hide left sidebar to match your design
-    max-width: 0 !important;
-    padding: 0 !important;
-    overflow: hidden !important;
-  }
-
-  // Main feed content (col-lg-6)
-  > .col-lg-6 {
-    flex: 0 0 auto !important;
-    width: 800px !important; // Main content fixed width (Reddit ~750-800px)
-    max-width: 800px !important;
-    padding-left: 0 !important;
-    padding-right: 24px !important; // Gap between content and sidebar
-  }
-
-  // Right sidebar (trending/widgets)
-  > .col-lg-3[data-widget-area="right"] {
-    flex: 0 0 auto !important;
-    width: 312px !important; // Sidebar fixed width (Reddit ~312px)
-    max-width: 312px !important;
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
-
-  @media (max-width: 991px) {
-    padding: 0 16px !important; // Smaller padding on tablets
-    flex-direction: column !important;
-
-    > .col-lg-6,
-    > .col-lg-3 {
-      width: 100% !important;
-      max-width: 100% !important;
-      padding: 0 !important;
-    }
-  }
-
-  @media (max-width: 768px) {
-    padding: 0 12px !important; // Even smaller on mobile
-  }
+// Search bar width override
+.search-widget .input-group {
+  max-width: 650px;
+  margin: 0 auto;
 }
 
-// ===========================================================
-// SEARCH BAR (Reddit-style)
-// ===========================================================
-// Target the brand header area where search widget is
-.brand-container [data-widget-area="brand-header"] {
-  max-width: 500px !important; // Reddit search bar width (~500px)
-  margin: 0 auto !important; // Center the search bar
-  display: flex !important;
-  align-items: center !important;
+// Left sidebar layout - navigation at top, profile/collapse at bottom
+nav[component="sidebar/left"] {
+  justify-content: flex-start !important; // Remove space-between
 
-  // Search form/input group
-  form,
-  .input-group {
-    width: 100% !important;
-    display: flex !important;
-    align-items: center !important;
-    position: relative !important; // For absolute positioning of button
+  // Main navigation list - keep at top with no extra margin
+  #main-nav {
+    margin-top: 0 !important; // Remove top margin to be close to logo
+    flex-grow: 0 !important; // Don't grow to fill space
   }
 
-  // Search input styling
-  input[type="text"],
-  input[type="search"],
-  .form-control {
-    flex: 1 !important;
-    padding: 10px 48px 10px 16px !important; // Extra padding on right for button
-    border-radius: 20px !important; // Fully rounded like Reddit
-    border: 1px solid $jv-border-subtle !important;
-    background: $jv-surface !important;
-    font-size: 14px !important;
-    width: 100% !important;
-
-    &:focus {
-      border-color: $jv-primary !important;
-      outline: none !important;
-      box-shadow: 0 0 0 1px $jv-primary !important;
-    }
-  }
-
-  // Search button styling - positioned inside input on the right
-  button[type="submit"],
-  .btn {
-    position: absolute !important;
-    right: 4px !important; // Small gap from edge
-    top: 50% !important;
-    transform: translateY(-50%) !important;
-    padding: 8px 12px !important;
-    border-radius: 16px !important;
-    background: transparent !important;
-    border: none !important;
-    color: $jv-text-muted !important;
-    margin: 0 !important;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.05) !important;
-      color: $jv-primary !important;
-    }
-
-    i {
-      font-size: 16px !important;
-    }
+  // Sidebar toggle container - push to bottom
+  .sidebar-toggle-container {
+    margin-top: auto !important; // Push to bottom
   }
 }
 
-// Main container padding adjustments (Reddit-style)
-.container-lg {
-  max-width: 1440px !important; // Match our feed max-width
-  padding-left: 24px !important; // Equal padding like Reddit
-  padding-right: 24px !important;
-
-  @media (max-width: 991px) {
-    padding-left: 16px !important;
-    padding-right: 16px !important;
-  }
-
-  @media (max-width: 768px) {
-    padding-left: 12px !important;
-    padding-right: 12px !important;
+// Reddit-style layout: Equal spacing and wider feed
+.feed > .row {
+  max-width: 1400px; // Reddit's approximate max-width
+  margin: 0 auto;
+  padding: 0 20px; // Reddit-style horizontal padding
+  justify-content: center; // Center the columns
+
+  // Equal gap between columns (Reddit uses ~16-20px)
+  gap: 20px;
+
+  // Adjust column widths for better proportions
+  > [data-widget-area="left"] {
+    flex: 0 0 auto;
+    width: 280px; // Fixed width for left sidebar (not using Bootstrap col-lg-3)
   }
-}
 
-// Feed header area - add more padding (Reddit-style)
-.feed {
-  // Add top padding to feed container
-  padding-top: 20px !important; // Reddit has ~20px top padding
-
-  // Header controls (New Topic button, settings)
-  .d-flex.justify-content-between.py-2.mb-2 {
-    padding: 12px 0 !important; // More padding top/bottom
-    margin-bottom: 20px !important; // More space before cards (Reddit-style)
+  // Center feed content - make it wider
+  > .col-lg-6 {
+    flex: 1 1 auto; // Take remaining space
+    max-width: 700px; // Reddit's feed is ~640-700px
+    margin-left: 0 !important; // Remove ms-auto
+    padding-left: 0 !important; // Remove left padding
+    padding-right: 0 !important; // Remove right padding
   }
-}
-
-// For other pages (category, recent, etc.) that use col-lg-9
-main .container,
-.container-fluid {
-  > .row {
-    max-width: 1440px !important;
-    margin: 0 auto !important;
-    padding: 0 24px !important;
-    justify-content: center !important;
-
-    > .col-lg-9 {
-      flex: 0 0 auto !important;
-      width: 640px !important;
-      max-width: 640px !important;
-      padding-left: 0 !important;
-      padding-right: 24px !important;
-
-      @media (max-width: 1200px) {
-        width: 100% !important;
-        max-width: 640px !important;
-        padding-right: 16px !important;
-      }
-    }
 
-    > .col-lg-3[data-widget-area="sidebar"] {
-      flex: 0 0 auto !important;
-      width: 312px !important;
-      max-width: 312px !important;
-      padding-left: 0 !important;
-      padding-right: 0 !important;
-    }
-
-    @media (max-width: 991px) {
-      padding: 0 16px !important;
-
-      > .col-lg-9,
-      > .col-lg-3 {
-        width: 100% !important;
-        max-width: 100% !important;
-        padding: 0 !important;
-      }
-    }
+  // Right sidebar (Trending)
+  > [data-widget-area="right"] {
+    flex: 0 0 auto;
+    width: 320px; // Fixed width for right sidebar
+    padding-left: 0 !important; // Remove left padding
+    padding-right: 0 !important; // Remove right padding
   }
 }
 
@@ -258,9 +122,17 @@ h6 {
 a {
   color: $jv-primary;
   text-decoration: none;
-  transition: color 0.15s ease;
+  transition: color $jv-transition-fast; // Modern transition
 
   &:hover {
     color: $jv-primary-hover;
   }
+
+  // Focus state for accessibility
+  &:focus-visible {
+    outline: none;
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 2px;
+  }
 }

package/scss/_buttons.scss

@@ -26,7 +26,7 @@ $jv-info-hover: #2563eb;
   font-size: 14px;
   font-weight: 500;
   line-height: 1.4;
-  transition: all 0.2s ease;
+  transition: background-color $jv-transition-fast, border-color $jv-transition-fast, color $jv-transition-fast; // Modern specific transitions
   border: 1px solid transparent;
   cursor: pointer;
   text-decoration: none;
@@ -35,7 +35,7 @@ $jv-info-hover: #2563eb;
   // Focus ring for accessibility
   &:focus {
     outline: none;
-    box-shadow: 0 0 0 3px rgba(0, 81, 255, 0.2);
+    box-shadow: $jv-focus-ring;
   }
 
   &:focus:not(:focus-visible) {
@@ -43,7 +43,8 @@ $jv-info-hover: #2563eb;
   }
 
   &:focus-visible {
-    box-shadow: 0 0 0 3px rgba(0, 81, 255, 0.3);
+    outline: none;
+    box-shadow: $jv-focus-ring;
   }
 
   // Disabled state
@@ -74,12 +75,10 @@ $jv-info-hover: #2563eb;
     background-color: $jv-primary-hover;
     border-color: $jv-primary-hover;
     box-shadow: $jv-shadow-button-hover;
-    transform: translateY(-1px);
     color: #fff;
   }
 
   &:active {
-    transform: translateY(0);
     box-shadow: $jv-shadow-button;
   }
 }
@@ -105,7 +104,7 @@ $jv-info-hover: #2563eb;
   color: $jv-text-main;
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.04);
+    background-color: $jv-hover-bg; // Consistent hover state
     border-color: $jv-border-strong;
     color: $jv-text-main;
   }
@@ -155,11 +154,6 @@ $jv-info-hover: #2563eb;
     background-color: $jv-success-hover;
     border-color: $jv-success-hover;
     color: #fff;
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
   }
 }
 
@@ -172,11 +166,6 @@ $jv-info-hover: #2563eb;
     background-color: $jv-danger-hover;
     border-color: $jv-danger-hover;
     color: #fff;
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
   }
 }
 
@@ -189,11 +178,6 @@ $jv-info-hover: #2563eb;
     background-color: $jv-warning-hover;
     border-color: $jv-warning-hover;
     color: #fff;
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
   }
 }
 
@@ -206,11 +190,6 @@ $jv-info-hover: #2563eb;
     background-color: $jv-info-hover;
     border-color: $jv-info-hover;
     color: #fff;
-    transform: translateY(-1px);
-  }
-
-  &:active {
-    transform: translateY(0);
   }
 }
 
@@ -218,12 +197,12 @@ $jv-info-hover: #2563eb;
 // LIGHT/SUBTLE BUTTON
 // ===========================================================
 .btn-light {
-  background-color: rgba(0, 0, 0, 0.04);
+  background-color: $jv-hover-bg; // Consistent with hover state
   border-color: transparent;
   color: $jv-text-main;
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.08);
+    background-color: $jv-active-bg; // Consistent active state
     color: $jv-text-main;
   }
 }
@@ -237,7 +216,7 @@ $jv-info-hover: #2563eb;
   color: $jv-text-muted;
 
   &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
+    background-color: $jv-hover-bg; // Consistent hover state
     color: $jv-text-main;
   }
 }
@@ -353,11 +332,12 @@ $jv-info-hover: #2563eb;
   height: 56px;
   border-radius: 50%;
   padding: 0;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  box-shadow: $jv-shadow-lg; // shadcn large shadow
+  transition: $jv-transition-shadow, transform $jv-transition-fast; // Modern transitions
 
   &:hover {
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
-    transform: translateY(-2px);
+    box-shadow: $jv-shadow-xl; // shadcn extra large shadow
+    transform: translateY(-2px); // FABs are meant to lift on hover
   }
 
   i {