@okjavis/nodebb-theme-javis 1.4.0 → 1.5.0

package/package.json

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