@okjavis/nodebb-theme-javis 3.0.0 → 3.0.1

package/package.json

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

package/scss/_base.scss

@@ -138,3 +138,117 @@ a {
     text-underline-offset: 2px;
   }
 }
+
+// ===========================================================
+// LOGIN PAGE ONLY - Hide search bar
+// ===========================================================
+.template-login {
+  .brand-container {
+    display: none !important;
+  }
+}
+
+// ===========================================================
+// LOGIN & REGISTER PAGES - Center aligned forms
+// ===========================================================
+.login,
+.register {
+  // Center the main content area
+  #content {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: $jv-space-12;
+  }
+
+  // The form container
+  .row {
+    justify-content: center !important;
+    width: 100%;
+    max-width: 480px;
+    margin: 0 auto !important;
+  }
+
+  // Make sure columns don't offset
+  .col-12,
+  .col-md-6,
+  .col-lg-4,
+  [class*="col-"] {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    flex: 0 0 100% !important;
+    max-width: 100% !important;
+  }
+
+  // Card styling for the form
+  .card,
+  .login-card,
+  .register-card {
+    background: $jv-surface;
+    border: 1px solid $jv-border-subtle;
+    border-radius: $jv-radius-lg;
+    box-shadow: $jv-shadow-md;
+    padding: $jv-space-8;
+    width: 100%;
+    max-width: 420px;
+    margin: 0 auto;
+  }
+
+  // Page title
+  h1,
+  .page-title {
+    text-align: center;
+    margin-bottom: $jv-space-8;
+  }
+
+  // Form labels
+  label {
+    font-weight: 500;
+    color: $jv-text-main;
+    margin-bottom: $jv-space-2;
+  }
+
+  // Form inputs
+  .form-control {
+    border-radius: $jv-radius-sm;
+    border: 1px solid $jv-border-subtle;
+    padding: $jv-space-3 $jv-space-4;
+    font-size: $jv-font-size-base;
+    transition: border-color $jv-transition-fast, box-shadow $jv-transition-fast;
+
+    &:focus {
+      border-color: $jv-primary;
+      box-shadow: $jv-focus-ring;
+      outline: none;
+    }
+  }
+
+  // Login/Register button
+  .btn-primary {
+    width: 100%;
+    padding: $jv-space-3 $jv-space-6;
+    font-weight: 600;
+    border-radius: $jv-radius-sm;
+    margin-top: $jv-space-4;
+  }
+
+  // Forgot password and other links
+  .forgot-password,
+  a.text-muted {
+    font-size: $jv-font-size-sm;
+    color: $jv-text-muted;
+
+    &:hover {
+      color: $jv-primary;
+    }
+  }
+
+  // Register link section
+  .register-link,
+  .login-link {
+    text-align: center;
+    margin-top: $jv-space-6;
+    padding-top: $jv-space-6;
+    border-top: 1px solid $jv-border-subtle;
+  }
+}

package/scss/_cards.scss

@@ -43,10 +43,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
-  padding: $jv-space-4 $jv-space-3; // Tighter padding
+  padding: $jv-space-6 $jv-space-4; // 24dp vertical, 16dp horizontal - Material grid
   background: rgba(0, 0, 0, 0.02);
-  min-width: 40px;
-  gap: 2px; // Minimal gap
+  min-width: 44px;
+  gap: $jv-space-1; // 4dp - Material grid
 }
 
 .vote-btn {
@@ -100,10 +100,10 @@
 // ===========================================================
 .topic-content {
   flex: 1;
-  padding: $jv-space-3;
+  padding: $jv-space-3; // 12dp - Material grid
   display: flex;
   flex-direction: column;
-  gap: $jv-space-2; // Tighter gap between elements
+  gap: $jv-space-3; // 12dp - Material grid
   min-width: 0; // Allow text truncation
 }
 
@@ -147,10 +147,10 @@
 // Topic Title
 .topic-card .topic-title {
   margin: 0;
-  font-size: $jv-font-size-lg; // 18px - clear hierarchy
-  font-weight: 600; // Semi-bold
-  line-height: $jv-line-height-tight;
-  letter-spacing: -0.02em;
+  font-size: 20px; // Larger for prominence - consistent with feed
+  font-weight: 700; // Bolder for better hierarchy
+  line-height: 1.4; // Better readability
+  letter-spacing: -0.02em; // Tighter for modern feel
 
   a {
     color: $jv-text-main;
@@ -260,7 +260,7 @@
   color: $jv-text-muted;
   line-height: $jv-line-height-base;
   display: -webkit-box;
-  -webkit-line-clamp: 2; // Reduced from 3 to 2 lines
+  -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 
@@ -270,54 +270,6 @@
   }
 }
 
-// ===========================================================
-// MEDIA ROW (Image + Text side by side)
-// ===========================================================
-.topic-media-row {
-  display: flex;
-  gap: $jv-space-4;
-  align-items: flex-start;
-
-  .topic-media-text {
-    flex: 1;
-    min-width: 0; // Allow text truncation
-
-    .topic-teaser {
-      -webkit-line-clamp: 3; // Allow more lines when beside image
-    }
-  }
-
-  .topic-thumbnail {
-    flex-shrink: 0;
-    width: 140px;
-    height: 100px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-}
-
-@media (max-width: 576px) {
-  .topic-media-row {
-    flex-direction: column-reverse;
-    gap: $jv-space-3;
-
-    .topic-thumbnail {
-      width: 100%;
-      height: auto;
-      max-height: 180px;
-
-      img {
-        max-height: 180px;
-        width: 100%;
-      }
-    }
-  }
-}
-
 // ===========================================================
 // ACTION BAR (Bottom - Reddit style)
 // ===========================================================
@@ -346,21 +298,21 @@ li[component="post"] hr,
 .action-btn {
   display: inline-flex;
   align-items: center;
-  gap: $jv-space-1; // Tighter gap
-  padding: $jv-space-1 $jv-space-2; // Smaller padding
-  font-size: $jv-font-size-xs; // Smaller font
-  font-weight: 500; // Lighter weight
-  color: $jv-text-soft; // More subtle color
+  gap: $jv-space-2; // 8dp grid
+  padding: $jv-space-2 $jv-space-3; // 8dp vertical, 12dp horizontal
+  font-size: 14px;
+  font-weight: 600;
+  color: $jv-text-muted;
   background: transparent;
   border: none;
-  border-radius: $jv-radius-xs;
+  border-radius: $jv-radius-sm; // 8px shadcn standard
   cursor: pointer;
   text-decoration: none;
-  transition: background-color $jv-transition-fast, color $jv-transition-fast;
+  transition: background-color $jv-transition-fast, color $jv-transition-fast; // Modern transitions
 
   &:hover {
-    background: $jv-hover-bg;
-    color: $jv-text-muted;
+    background: $jv-hover-bg; // Consistent hover state
+    color: $jv-text-main;
   }
 
   // Focus state for accessibility
@@ -370,11 +322,12 @@ li[component="post"] hr,
   }
 
   i {
-    font-size: 14px; // Smaller icons
+    font-size: 18px; // Larger icons
   }
 
+  // Make numbers bold
   span {
-    font-weight: 500; // Normal weight, not bold
+    font-weight: 700;
   }
 }
 

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;