@okjavis/nodebb-theme-javis 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "1.3.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,6 +9,64 @@ nav[component="sidebar/right"],
   display: none !important;
 }
 
+// No custom layout overrides - use Harmony defaults
+
+// Search bar width override
+.search-widget .input-group {
+  max-width: 650px;
+  margin: 0 auto;
+}
+
+// Left sidebar layout - navigation at top, profile/collapse at bottom
+nav[component="sidebar/left"] {
+  justify-content: flex-start !important; // Remove space-between
+
+  // 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
+  }
+
+  // Sidebar toggle container - push to bottom
+  .sidebar-toggle-container {
+    margin-top: auto !important; // Push to bottom
+  }
+}
+
+// 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)
+  }
+
+  // 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
+  }
+
+  // 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
+  }
+}
+
 body {
   font-family: $jv-font-sans;
   font-size: $jv-font-size-base;

package/scss/_feed.scss

@@ -7,6 +7,9 @@
 // FEED CONTAINER
 // ===========================================================
 .feed {
+  // No max-width - let Bootstrap grid handle width
+  // Already inside col-lg-9 which provides proper constraints
+
   // Header controls row
   .d-flex.justify-content-between.py-2.mb-2 {
     padding: $jv-space-4 0 !important;
@@ -72,8 +75,8 @@
 .feed li[component="post"].posts-list-item {
   background: $jv-surface !important;
   border: 1px solid $jv-border-subtle !important;
-  border-radius: $jv-radius-lg !important;
-  margin-bottom: $jv-space-4 !important;
+  border-radius: $jv-radius-md !important; // 12px - more compact than 16px
+  margin-bottom: $jv-space-4 !important; // 8px - compact like Reddit
   box-shadow: none !important;
   overflow: hidden;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
@@ -102,7 +105,7 @@
     padding: 0 !important;
 
     .overflow-hidden {
-      border-radius: $jv-radius-lg $jv-radius-lg 0 0 !important;
+      border-radius: $jv-radius-md $jv-radius-md 0 0 !important; // Match card radius
       max-height: 350px !important;
 
       img {
@@ -128,16 +131,20 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   > .d-flex.gap-2.p-3 {
-    padding: $jv-space-6 !important;
+    padding: $jv-space-6 !important; // 12px - compact but comfortable
     gap: $jv-space-4 !important;
+
+    @media (max-width: 768px) {
+      padding: $jv-space-4 !important; // 8px on mobile
+    }
   }
 
   // Avatar
   .d-none.d-lg-block {
     .avatar,
     img[class*="avatar"] {
-      width: 44px !important;
-      height: 44px !important;
+      width: 40px !important; // Smaller, cleaner
+      height: 40px !important;
       border-radius: 50% !important;
       object-fit: cover;
       border: 2px solid rgba(0, 0, 0, 0.05);
@@ -146,7 +153,7 @@
 
   // Post body
   .post-body {
-    gap: $jv-space-4 !important;
+    gap: $jv-space-2 !important; // Tighter gap - 4px
   }
 }
 
@@ -155,11 +162,12 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   .topic-title {
-    font-size: 18px !important;
+    font-size: 18px !important; // Keeping subtle
     font-weight: 600 !important;
-    line-height: 1.35 !important;
+    line-height: 1.3 !important; // Tighter for clean look
     color: $jv-text-main !important;
-    margin-bottom: $jv-space-2;
+    margin-bottom: $jv-space-2; // 4px
+    letter-spacing: -0.01em; // Slight tightening for modern feel
 
     &:hover {
       color: $jv-primary !important;
@@ -173,13 +181,13 @@
 .feed li[component="post"].posts-list-item {
   .post-info {
     font-size: 13px !important;
-    color: $jv-text-muted;
+    color: $jv-text-soft; // Lighter for hierarchy
     gap: $jv-space-2 !important;
 
     .post-author {
       a {
-        color: $jv-text-main;
-        font-weight: 600;
+        color: $jv-text-muted; // Less prominent
+        font-weight: 500; // Lighter weight
 
         &:hover {
           color: $jv-primary;
@@ -281,7 +289,7 @@
 .feed li[component="post"].posts-list-item {
   hr {
     border-color: $jv-border-subtle !important;
-    margin: $jv-space-4 0 !important;
+    margin: $jv-space-2 0 !important; // Tighter - 4px
     opacity: 1;
   }
 }
@@ -292,14 +300,16 @@
 .feed li[component="post"].posts-list-item {
   .d-flex.justify-content-between:last-child {
     margin: 0 (-$jv-space-2);
+    padding-top: $jv-space-2; // Small padding above - 4px
+    border-top: 1px solid rgba(0, 0, 0, 0.04); // Subtle separator
 
     .btn-link {
       display: inline-flex;
       align-items: center;
       gap: 6px;
-      padding: 8px 12px !important;
+      padding: 6px 10px !important; // Tighter padding
       font-size: 13px !important;
-      font-weight: 600 !important;
+      font-weight: 500 !important; // Lighter weight
       color: $jv-text-muted !important;
       background: transparent;
       border: none;
@@ -308,7 +318,7 @@
       transition: background-color 0.15s ease, color 0.15s ease;
 
       &:hover {
-        background: rgba(0, 0, 0, 0.04);
+        background: rgba(0, 0, 0, 0.03); // Subtler hover
         color: $jv-text-main !important;
       }