@okjavis/nodebb-theme-javis 1.5.1 → 1.6.0

package/package.json

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

package/scss/_base.scss

@@ -30,6 +30,7 @@ nav[component="sidebar/left"] {
   // Sidebar toggle container - push to bottom
   .sidebar-toggle-container {
     margin-top: auto !important; // Push to bottom
+    width: 100% !important;
   }
 }
 

package/scss/_feed.scss

@@ -3,6 +3,24 @@
 // Styles for nodebb-plugin-feed (/feed route)
 // ===========================================================
 
+// ===========================================================
+// HIDE NEW TOPIC BUTTON AND ALL CATEGORIES ROW
+// ===========================================================
+// Hide New Topic button
+// #new_topic,
+// .btn[href*="/compose"],
+// button[data-action="newTopic"],
+// a[href*="/compose"] {
+//   display: none !important;
+// }
+
+// // Hide All categories row
+// .category-selector-container,
+// [component="category/dropdown"],
+// .d-flex.justify-content-between.py-2.mb-2 {
+//   display: none !important;
+// }
+
 // ===========================================================
 // FEED CONTAINER
 // ===========================================================
@@ -10,12 +28,12 @@
   // No max-width - let Bootstrap grid handle width
   // Already inside col-lg-9 which provides proper constraints
 
-  // Header controls row
+  // Header controls row (keeping for reference, but hidden above)
   .d-flex.justify-content-between.py-2.mb-2 {
     padding: $jv-space-4 0 !important;
     margin-bottom: $jv-space-6 !important;
 
-    // New Topic button
+    // New Topic button (hidden above)
     #new_topic,
     .btn-primary {
       font-weight: 600;

package/scss/_sidebar.scss

@@ -156,7 +156,6 @@
 div[data-widget-area] {
   display: flex;
   flex-direction: column;
-  gap: $jv-space-6;
 }
 
 // Individual widget card
@@ -637,11 +636,35 @@ div[data-widget-area="right"] h8 {
 // ===========================================================
 // RIGHT SIDEBAR WIDGET AREA (Reddit-style)
 // ===========================================================
-div[data-widget-area="sidebar"],
-.col-lg-3[data-widget-area="sidebar"] {
+div[data-widget-area="right"],
+.col-lg-3.col-sm-12 {
   display: flex;
   flex-direction: column;
-  gap: $jv-space-6;
+
+  // Sticky positioning - stays visible when scrolling
+  position: sticky;
+  top: 80px; // Adjust based on your header height
+  align-self: flex-start;
+  max-height: calc(100vh - 100px); // Account for header + padding
+  overflow-y: auto; // Allow scrolling if content is too tall
+
+  // Smooth scrollbar styling (webkit browsers)
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.25);
+    }
+  }
 
   // Widget card container
   > div {
@@ -651,219 +674,155 @@ div[data-widget-area="sidebar"],
     overflow: hidden;
   }
 
-  // Widget header/title
+  // Widget header/title - clean and simple
   h5, h6, .widget-title {
-    font-size: 12px !important;
+    font-size: 11px !important;
     font-weight: 700 !important;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: $jv-text-soft;
-    padding: $jv-space-6 $jv-space-6 $jv-space-4;
-    margin: 0 !important;
+    padding: $jv-space-4 $jv-space-4;
+    margin: 0 0 $jv-space-4 0 !important;
     border-bottom: 1px solid $jv-border-subtle;
-    background: rgba(0, 0, 0, 0.015);
+  }
+
+  // Add spacing between widgets
+  > div + div {
+    margin-top: $jv-space-4;
   }
 }
 
 // ===========================================================
-// POPULAR TAGS WIDGET (Sidebar)
+// POPULAR TAGS WIDGET (Sidebar) - Reddit-style vertical list
 // ===========================================================
-div[data-widget-area="sidebar"] {
-  .popular-tags,
-  [class*="tag"] {
-    padding: $jv-space-4;
-
-    // Tag items grid
-    .tag-list,
-    > div {
-      display: flex;
-      flex-direction: column;
-      gap: $jv-space-2;
+div[data-widget-area="right"] {
+  .popular-tags {
+    width: 100% !important;
+  }
 
-      > div,
-      > a {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        padding: $jv-space-4 $jv-space-4;
-        background: transparent;
-        border: none;
-        border-radius: $jv-radius-sm;
-        color: $jv-text-main;
-        font-size: 14px;
-        font-weight: 500;
-        text-decoration: none;
-        transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
-        cursor: pointer;
+  .tag-list {
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 100% !important;
+
+    // Override Bootstrap grid classes to force vertical layout
+    display: flex !important;
+    flex-direction: column !important;
+
+    // Remove any grid/row styling
+    &.row {
+      --bs-gutter-x: 0 !important;
+      --bs-gutter-y: 0 !important;
+      margin: 0 !important;
+    }
+
+    // Force each tag to be full width (override col classes)
+    > * {
+      width: 100% !important;
+      max-width: 100% !important;
+      flex: 0 0 100% !important;
+      padding: 0 !important;
+    }
+
+    .btn-ghost,
+    a.btn-ghost {
+      display: flex !important;
+      flex-direction: column !important;
+      align-items: flex-start !important;
+      background: transparent !important;
+      border: none !important;
+      border-radius: 0 !important;
+      padding: $jv-space-3 $jv-space-4 !important;
+      transition: background-color $jv-transition-fast !important;
+      text-align: left !important;
+      width: 100% !important;
+      margin: 0 !important;
 
-        &:hover {
-          background: rgba(0, 81, 255, 0.06);
-          color: $jv-primary;
-        }
+      &:hover {
+        background: $jv-hover-bg !important;
+      }
 
-        // Focus state for accessibility
-        &:focus-visible {
-          outline: none;
-          box-shadow: $jv-focus-ring;
-        }
+      .tag-item {
+        font-size: 14px !important;
+        font-weight: 600 !important;
+        color: $jv-text-main !important;
+        margin-bottom: $jv-space-1 !important;
+      }
 
-        // Topic count
-        small,
-        .count,
-        span:last-child {
-          font-size: 12px;
-          color: $jv-text-soft;
-          font-weight: 400;
-        }
+      .tag-topic-count {
+        font-size: 12px !important;
+        font-weight: 400 !important;
+        color: $jv-text-soft !important;
       }
     }
   }
+
 }
 
 // ===========================================================
-// RECENT/TRENDING POSTS WIDGET (Sidebar)
+// RECENT/TRENDING POSTS WIDGET (Sidebar) - Widget Essentials Specific
 // ===========================================================
-div[data-widget-area="sidebar"] {
+div[data-widget-area="right"] {
+  // Recent posts container with scrolling
   #recent_posts,
-  .recent-posts,
-  ul {
-    list-style: none;
+  ul[id*="recent"] {
+    max-height: 400px;
+    overflow-y: auto;
     padding: 0;
     margin: 0;
 
-    li {
-      padding: $jv-space-4 $jv-space-6;
-      border-bottom: 1px solid $jv-border-subtle;
-      transition: background-color $jv-transition-fast; // Modern transition
-
-      &:last-child {
-        border-bottom: none;
-      }
-
-      &:hover {
-        background: $jv-hover-bg; // Consistent hover state
-      }
-
-      // Focus state for accessibility
-      &:focus-within {
-        outline: none;
-        background: $jv-hover-bg;
-      }
-
-      // Post header with avatar
-      .d-flex {
-        display: flex;
-        align-items: center;
-        gap: $jv-space-2;
-        margin-bottom: $jv-space-2;
-
-        // Avatar
-        .avatar,
-        img[class*="avatar"] {
-          width: 20px !important;
-          height: 20px !important;
-          border-radius: 50%;
-          flex-shrink: 0;
-        }
+    // Smooth scrollbar
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
 
-        // Username
-        a:first-of-type {
-          font-size: 12px;
-          font-weight: 600;
-          color: $jv-text-main;
-          text-decoration: none;
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
 
-          &:hover {
-            color: $jv-primary;
-          }
-        }
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.15);
+      border-radius: 2px;
 
-        // Timeago
-        .timeago {
-          font-size: 11px;
-          color: $jv-text-soft;
-        }
+      &:hover {
+        background: rgba(0, 0, 0, 0.25);
       }
+    }
+  }
 
-      // Post title/content
-      > a,
-      .post-content a,
-      p {
-        display: block;
-        font-size: 13px;
-        font-weight: 500;
-        color: $jv-text-main;
-        text-decoration: none;
-        line-height: 1.4;
-        margin-bottom: $jv-space-2;
-
-        // Line clamp
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
+  // Style the actual widget-posts items
+  .widget-posts {
+    padding: $jv-space-3 $jv-space-4 !important;
+    transition: background-color $jv-transition-fast !important;
+    border-bottom: 1px solid $jv-border-subtle !important;
 
-        &:hover {
-          color: $jv-primary;
-        }
-      }
-
-      // Content preview text
-      .post-content,
-      .content,
-      .text-xs {
-        font-size: 12px;
-        color: $jv-text-muted;
-        line-height: 1.45;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
+    &:last-child {
+      border-bottom: none !important;
+    }
 
-      // Read more link
-      a.stretched-link,
-      .read-more {
-        font-size: 12px;
-        font-weight: 600;
-        color: $jv-primary;
-        text-decoration: none;
-        margin-top: $jv-space-2;
-        display: inline-block;
+    &:hover {
+      background: $jv-hover-bg !important;
+    }
 
-        &:hover {
-          text-decoration: underline;
-        }
-      }
+    .post-author a {
+      font-size: 12px !important;
+      font-weight: 500 !important;
+      color: $jv-text-main !important;
     }
-  }
-}
 
-// ===========================================================
-// WIDGET HEADER ICONS
-// ===========================================================
-div[data-widget-area="sidebar"] {
-  h5, h6, .widget-title {
-    display: flex;
-    align-items: center;
-    gap: $jv-space-2;
+    .line-clamp-6 {
+      font-size: 13px !important;
+      font-weight: 400 !important;
+      color: $jv-text-main !important;
+      line-height: 1.5 !important;
+    }
 
-    i {
-      font-size: 14px;
-      color: $jv-text-soft;
+    .post-preview-footer a {
+      font-size: 12px !important;
+      font-weight: 500 !important;
+      color: $jv-primary !important;
+      text-decoration: none !important;
     }
   }
 }
 
-// ===========================================================
-// EMPTY STATE
-// ===========================================================
-div[data-widget-area="sidebar"] {
-  .empty,
-  .no-content {
-    padding: $jv-space-8;
-    text-align: center;
-    color: $jv-text-soft;
-    font-size: $jv-font-size-sm;
-  }
-}