@okjavis/nodebb-theme-javis 2.5.3 → 3.0.1

package/scss/_composer.scss

@@ -97,7 +97,7 @@ html.composing .composer .title-container {
   border-radius: $jv-radius-lg $jv-radius-lg 0 0 !important;
 }
 
-// Category selector
+// Category selector button
 html.composing .composer .category-list-container {
   flex-shrink: 0 !important;
   display: block !important;
@@ -116,53 +116,152 @@ html.composing .composer .category-list-container {
         background: $jv-hover-bg !important;
       }
     }
+  }
+}
 
-    .dropdown-menu {
-      min-width: 280px !important;
-      max-height: 320px !important;
-      overflow-y: auto !important;
-      padding: $jv-space-2 !important;
+// ===========================================================
+// CATEGORY DROPDOWN - Clean flat list (like reference image)
+// Targeting exact DOM structure from DevTools
+// ===========================================================
 
-      // Fix category list spacing
-      .category-dropdown-menu {
-        margin: 0 !important;
-        padding: 0 !important;
-      }
+// The dropdown container
+div.dropdown-menu.p-1.show {
+  min-width: 280px !important;
+  max-width: 320px !important;
+  padding: $jv-space-2 0 !important;
+  border: 1px solid $jv-border-subtle !important;
+  border-radius: $jv-radius-sm !important;
+  box-shadow: $jv-shadow-lg !important;
+  background: $jv-surface !important;
+}
 
-      // Category items inside dropdown
-      li.category {
-        margin: 0 !important;
-        padding: 0 !important;
-
-        a.dropdown-item {
-          display: flex !important;
-          align-items: center !important;
-          gap: $jv-space-2 !important;
-          padding: $jv-space-2 $jv-space-3 !important;
-          margin: 2px 0 !important;
-          font-size: $jv-font-size-sm !important;
-          color: $jv-text-main !important;
-          border-radius: $jv-radius-xs !important;
-          white-space: nowrap !important;
-          overflow: hidden !important;
-          text-overflow: ellipsis !important;
-
-          &:hover {
-            background: $jv-hover-bg !important;
-          }
-
-          // Category icon
-          .category-item {
-            display: inline-flex !important;
-            align-items: center !important;
-            gap: $jv-space-2 !important;
-          }
-        }
-      }
+// Search input section
+div[component="category-selector-search"] {
+  padding: $jv-space-2 $jv-space-3 $jv-space-3 $jv-space-3 !important;
+  margin: 0 !important;
+  border-bottom: none !important;
+
+  .form-control {
+    width: 100% !important;
+    height: 36px !important;
+    padding: 0 $jv-space-3 !important;
+    font-size: $jv-font-size-sm !important;
+    font-weight: 400 !important;
+    color: $jv-text-main !important;
+    border: 1px solid $jv-border-subtle !important;
+    border-radius: $jv-radius-xs !important;
+    background: $jv-surface !important;
+
+    &:focus {
+      border-color: $jv-primary !important;
+      box-shadow: $jv-focus-ring !important;
+      outline: none !important;
     }
+
+    &::placeholder {
+      color: $jv-text-soft !important;
+    }
+  }
+
+  hr {
+    display: none !important;
   }
 }
 
+// The category list UL - exact class from DOM
+ul.category-dropdown-menu.ghost-scrollbar {
+  margin: 0 !important;
+  padding: 0 !important;
+  max-height: 320px !important;
+  overflow-y: auto !important;
+  overflow-x: hidden !important;
+  list-style: none !important;
+
+  // Scrollbar
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 3px;
+  }
+}
+
+// Each category LI - exact structure: li.category with role="presentation"
+li[role="presentation"].category {
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style: none !important;
+  border: none !important;
+  background: none !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+}
+
+// The anchor - reduce spacing and remove border/card styling
+li.category > a.dropdown-item,
+li.category > a.dropdown-item.rounded-1 {
+  padding: $jv-space-1 $jv-space-3 !important;
+  margin: 2px $jv-space-2 !important;
+  border: none !important;
+  border-radius: $jv-radius-xs !important;
+  background: transparent !important;
+  box-shadow: none !important;
+
+  &:hover {
+    background: $jv-hover-bg !important;
+  }
+}
+
+// Sub-categories indentation
+li.category[data-parent-cid]:not([data-parent-cid="0"]) > a.dropdown-item {
+  padding-left: 36px !important;
+}
+
+// Category icon
+li.category a.dropdown-item [component="category/icon"] {
+  width: 24px !important;
+  height: 24px !important;
+  min-width: 24px !important;
+  border-radius: 50% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  font-size: $jv-font-size-xs !important;
+  flex-shrink: 0 !important;
+  box-shadow: none !important;
+}
+
+// Category name text
+li.category a.dropdown-item > span:last-child {
+  font-size: $jv-font-size-sm !important;
+  font-weight: 400 !important;
+  color: $jv-text-main !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+// Disabled categories
+li.category.disabled > a.dropdown-item > span:last-child {
+  color: $jv-text-soft !important;
+}
+
+// No matches message
+li[component="category/no-matches"].hidden {
+  display: none !important;
+}
+
+li[component="category/no-matches"]:not(.hidden) {
+  padding: $jv-space-4 !important;
+  text-align: center !important;
+  color: $jv-text-soft !important;
+  font-size: $jv-font-size-sm !important;
+}
+
 // Title input
 html.composing .composer [data-component="composer/title"] {
   flex: 1 !important;

package/scss/_feed.scss

@@ -3,6 +3,33 @@
 // Styles for nodebb-plugin-feed (/feed route)
 // ===========================================================
 
+// ===========================================================
+// AVATAR SIZE OVERRIDE - Force 32px avatars on feed page
+// ===========================================================
+.feed {
+  // Composer prompt avatar
+  .composer-prompt-avatar span.avatar,
+  .composer-prompt-avatar .avatar {
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    min-height: 32px !important;
+    font-size: 14px !important;
+    line-height: 32px !important;
+  }
+
+  // Feed card desktop avatar (next to content)
+  li.posts-list-item .d-none.d-lg-block span.avatar,
+  li.posts-list-item .d-none.d-lg-block .avatar {
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    min-height: 32px !important;
+    font-size: 14px !important;
+    line-height: 32px !important;
+  }
+}
+
 // ===========================================================
 // HIDE CATEGORIES WIDGET ON FEED PAGE
 // The categories list widget is not relevant on the feed page
@@ -73,24 +100,38 @@
 .composer-prompt-avatar {
   flex-shrink: 0;
 
+  // Override all avatar types
+  img,
+  span.avatar,
   .avatar {
-    width: 48px !important;
-    height: 48px !important;
+    --avatar-size: 32px !important;
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    min-height: 32px !important;
+    max-width: 32px !important;
+    max-height: 32px !important;
     border-radius: 50% !important;
-    object-fit: cover;
-    border: 2px solid rgba(0, 0, 0, 0.05);
+    font-size: 14px !important;
+    line-height: 32px !important;
   }
 
+  // Placeholder avatar for logged-out users
   .avatar-placeholder {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, $jv-primary-soft 0%, rgba(0, 81, 255, 0.2) 100%);
-    display: flex;
+    width: 32px !important;
+    height: 32px !important;
+    min-width: 32px !important;
+    min-height: 32px !important;
+    border-radius: 50% !important;
+    background: $jv-border-subtle;
+    display: flex !important;
     align-items: center;
     justify-content: center;
-    color: $jv-primary;
-    font-size: 18px;
+    color: $jv-text-soft;
+
+    i {
+      font-size: 14px;
+    }
   }
 }
 
@@ -182,12 +223,12 @@
   .composer-prompt-avatar {
     .avatar,
     .avatar-placeholder {
-      width: 40px !important;
-      height: 40px !important;
+      width: 32px !important;
+      height: 32px !important;
     }
 
     .avatar-placeholder {
-      font-size: 16px;
+      font-size: 14px;
     }
   }
 
@@ -277,29 +318,26 @@
 .feed li[component="post"].posts-list-item {
   background: $jv-surface !important;
   border: 1px solid $jv-border-subtle !important;
-  border-radius: $jv-radius-sm !important; // 8px - shadcn standard
-  margin-bottom: $jv-space-2 !important; // 8dp grid
-  box-shadow: $jv-shadow-sm !important; // shadcn subtle shadow
-  overflow: hidden;
-  transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern smooth transitions
+  border-radius: $jv-radius-sm !important;
+  margin-bottom: $jv-space-2 !important;
+  box-shadow: $jv-shadow-sm !important;
+  overflow: hidden !important;
+  transition: $jv-transition-shadow, border-color $jv-transition-fast;
 
   &:hover {
-    box-shadow: $jv-shadow-md !important; // shadcn hover shadow
-    border-color: $jv-border-strong !important; // Subtle border darkening
+    box-shadow: $jv-shadow-md !important;
+    border-color: $jv-border-strong !important;
   }
 
-  // Focus state for accessibility
   &:focus-within {
     outline: none;
     box-shadow: $jv-shadow-md, $jv-focus-ring !important;
   }
 
-  // Deleted state
   &.deleted {
     opacity: 0.5;
   }
 
-  // Scheduled state
   &.scheduled {
     border-left: 3px solid #f59e0b;
   }
@@ -313,19 +351,19 @@
     padding: 0 !important;
 
     .overflow-hidden {
-      border-radius: $jv-radius-md $jv-radius-md 0 0 !important; // Match card radius
-      max-height: 280px !important; // Reduced from 350px - more balanced ratio
-      background: rgba(0, 0, 0, 0.02); // Subtle background for letterboxing
+      border-radius: $jv-radius-md !important;
+      max-height: 280px !important;
+      background: rgba(0, 0, 0, 0.02);
 
       img {
         width: 100%;
-        height: 280px; // Fixed height for consistency
-        object-fit: contain; // Prevent stretching, maintain aspect ratio
+        height: 280px;
+        object-fit: contain;
       }
     }
 
-    // Hide additional thumbnails - only show main image in feed
-    .position-absolute {
+    // Hide the overlay with image count
+    > .position-absolute {
       display: none !important;
     }
   }
@@ -335,30 +373,26 @@
 // POST CONTENT AREA
 // ===========================================================
 .feed li[component="post"].posts-list-item {
+  // Change layout to vertical stack instead of horizontal
   > .d-flex.gap-2.p-3 {
-    padding: $jv-space-4 $jv-space-3 !important; // 16dp vertical, 12dp horizontal - Material grid
-    gap: $jv-space-3 !important; // 12dp spacing
+    padding: $jv-space-4 !important; // 16dp all sides - equal spacing
+    flex-direction: column !important; // Stack vertically
+    gap: 0 !important; // Remove gap, we'll use margins
 
     @media (max-width: 768px) {
-      padding: $jv-space-3 $jv-space-2 !important; // 12dp vertical, 8dp horizontal on mobile
+      padding: $jv-space-3 !important; // 12dp all sides on mobile
     }
   }
 
-  // Avatar
-  .d-none.d-lg-block {
-    .avatar,
-    img[class*="avatar"] {
-      width: 48px !important; // 48dp - Material standard avatar size
-      height: 48px !important;
-      border-radius: 50% !important;
-      object-fit: cover;
-      border: 2px solid rgba(0, 0, 0, 0.05);
-    }
+  // Hide the separate avatar column - we'll show avatar inline with author
+  > .d-flex.gap-2.p-3 > .d-none.d-lg-block {
+    display: none !important;
   }
 
-  // Post body
+  // Post body - full width, contains everything
   .post-body {
     gap: $jv-space-2 !important; // 8dp - Material grid
+    width: 100% !important;
   }
 }
 
@@ -385,27 +419,39 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   .post-info {
-    font-size: 14px !important; // Slightly larger for readability
-    color: $jv-text-soft; // Lighter for hierarchy
-    gap: $jv-space-3 !important; // More spacing between elements
+    font-size: 14px !important;
+    color: $jv-text-soft;
+    gap: $jv-space-2 !important;
+    display: flex !important;
+    align-items: center !important;
+    margin-bottom: $jv-space-2 !important; // Space before title
 
     .post-author {
+      display: flex !important;
+      align-items: center !important;
+      gap: $jv-space-2 !important;
+
       a {
-        color: $jv-text-soft; // More subtle - not competing with title
-        font-weight: 400; // Normal weight
+        color: $jv-text-soft;
+        font-weight: 400;
         font-size: 14px;
 
         &:hover {
           color: $jv-primary;
         }
-      }
 
-      // Mobile avatar
-      .avatar,
-      img[class*="avatar"] {
-        width: 18px !important;
-        height: 18px !important;
-        border-radius: 50% !important;
+        // Avatar inside the anchor - sized correctly
+        .avatar,
+        span.avatar {
+          width: 32px !important;
+          height: 32px !important;
+          min-width: 32px !important;
+          min-height: 32px !important;
+          border-radius: 50% !important;
+          flex-shrink: 0 !important;
+          font-size: 13px !important;
+          line-height: 32px !important;
+        }
       }
     }
 
@@ -421,6 +467,18 @@
   }
 }
 
+// Override Bootstrap's d-lg-none to show avatar on desktop
+// Must use same media query breakpoint to override
+@media (min-width: 992px) {
+  .feed li[component="post"].posts-list-item {
+    .post-info .post-author a.d-inline.d-lg-none {
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: $jv-space-2 !important;
+    }
+  }
+}
+
 // ===========================================================
 // POST CONTENT
 // ===========================================================
@@ -590,20 +648,19 @@
 // ===========================================================
 .feed li[component="post"].posts-list-item {
   hr {
-    border-color: $jv-border-subtle !important;
-    margin: $jv-space-2 0 !important; // Tighter - 4px
-    opacity: 1;
+    display: none !important; // Hide divider line between content and image
   }
 }
 
 // ===========================================================
 // ACTION BAR (Comments, Bookmark, Upvote, Reply)
+// Now a separate element in the template (not nested in .post-body)
 // ===========================================================
 .feed li[component="post"].posts-list-item {
-  .d-flex.justify-content-between:last-child {
-    margin: 0 (-$jv-space-2);
-    padding-top: $jv-space-4; // More padding - 8px
-    border-top: 1px solid rgba(0, 0, 0, 0.06); // Slightly more visible separator
+  // Action bar - now a direct child of the post card
+  .feed-action-bar {
+    background: $jv-surface !important;
+    border-radius: 0 0 $jv-radius-sm $jv-radius-sm; // Match card's bottom corners
 
     .btn-link {
       display: inline-flex;

package/scss/_header.scss

@@ -5,7 +5,7 @@
 // Inspired by: Slack, Linear, Notion, GitHub
 
 // ===========================================================
-// BRAND CONTAINER (Top Bar)
+// BRAND CONTAINER (Top Bar) - Reddit-style compact header
 // ===========================================================
 .brand-container {
   position: sticky;
@@ -14,8 +14,8 @@
   background: $jv-surface;
   border-bottom: 1px solid $jv-border-subtle;
   margin: 0 !important; // No margins - ever
-  padding: $jv-space-3 $jv-space-4 !important; // 12px vertical, 16px horizontal
-  min-height: 64px; // 12px top + 40px search + 12px bottom
+  padding: $jv-space-2 $jv-space-4 !important; // 8px vertical, 16px horizontal (tighter)
+  min-height: 56px; // Compact like Reddit (was 64px)
   max-width: 100% !important; // Override container-lg max-width
   width: 100% !important; // Full width always
   display: flex;
@@ -79,7 +79,7 @@
 }
 
 // ===========================================================
-// SEARCH BAR - Centered, Prominent
+// SEARCH BAR - Shifted left to align with feed content
 // ===========================================================
 [data-widget-area="brand-header"] {
   flex: 1;
@@ -87,6 +87,9 @@
   justify-content: center;
   align-items: center;
   padding: 0 $jv-space-4 !important;
+  // Shift the entire search area to the left
+  margin-left: -100px !important;
+  margin-right: 100px !important;
 }
 
 // Search widget in header
@@ -145,7 +148,7 @@
       padding-left: $jv-space-2;
       font-size: $jv-font-size-base;
       color: $jv-text-main;
-      height: 40px; // Consistent height
+      height: 36px; // Slightly shorter for compact header
 
       // Placeholder styling
       &::placeholder {
@@ -167,9 +170,9 @@
     // Search submit button (blue button)
     .btn-primary,
     .btn[type="submit"] {
-      height: 40px;
-      min-width: 40px;
-      padding: 0 $jv-space-4;
+      height: 36px; // Match input height
+      min-width: 36px;
+      padding: 0 $jv-space-3;
       border-radius: 0 $jv-radius-pill $jv-radius-pill 0 !important;
       display: flex;
       align-items: center;
@@ -240,7 +243,7 @@
 @media (max-width: 991px) {
   .brand-container {
     // On tablet/mobile, maintain proper spacing
-    min-height: 56px !important;
+    min-height: 52px !important; // Even more compact on mobile
     margin: 0 !important;
     padding: $jv-space-2 0 !important;
 

package/scss/_sidebar-user.scss

@@ -88,24 +88,44 @@
 }
 
 // Auth section for logged-out users
-.sidebar-auth-section {
+// Structure: .sidebar-auth-section.mx-2.mb-2 > .nav-item > .nav-link
+// Skins structure: .dropend.m-2 > .nav-link
+// To match Skins: container has no margin, nav-item gets m-2
+.sidebar-auth-section.mx-2.mb-2 {
   border-top: 1px solid $jv-border-subtle;
   padding-top: $jv-space-4;
   margin-top: auto;
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.sidebar-auth-section {
+  .nav-item {
+    // Match Skins .dropend.m-2
+    margin: 8px !important;
+  }
 
   .nav-link {
-    padding: $jv-space-2 $jv-space-4;
     border-radius: $jv-radius-sm;
     font-size: $jv-font-size-sm;
-    color: $jv-text-main;
+    color: $jv-text-muted;
+    font-weight: 600;
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.04);
+      background-color: rgba(0, 81, 255, 0.06);
       color: $jv-primary;
     }
 
     i {
-      color: $jv-text-muted;
+      width: 1.25em;
+      text-align: center;
+      color: inherit;
+    }
+
+    .nav-text {
+      padding-left: 8px !important;
+      padding-right: 8px !important;
     }
   }
 }