@okjavis/nodebb-theme-javis 1.6.0 → 2.0.0

package/scss/_sidebar.scss

@@ -6,14 +6,18 @@
 // ===========================================================
 // JAVIS SIDEBAR LOGO
 // ===========================================================
+// Height should match the sticky header (64px) for visual alignment
 .javis-sidebar-logo {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: $jv-space-6 $jv-space-4; // 12px top/bottom, 8px left/right
-  margin-bottom: $jv-space-4; // 8px gap before nav - industry standard
+  height: 65px; // Match header height (12px + 40px + 12px)
+  min-height: 65px;
+  padding: 0 $jv-space-4; // Only horizontal padding
+  margin-bottom: $jv-space-3; // 12px space below border before nav items
   border-bottom: 1px solid $jv-border-subtle;
   flex-shrink: 0;
+  box-sizing: border-box;
 
   .javis-logo-link {
     display: flex;
@@ -22,40 +26,42 @@
     text-decoration: none;
   }
 
-  // Icon logo (collapsed state) - 32x32px
+  // Icon logo (collapsed state) - 28px to match header logo
   .javis-logo-icon {
-    width: 32px;
-    height: 32px;
+    width: 28px;
+    height: 28px;
     object-fit: contain;
   }
 
-  // Full logo (expanded state) - max 140px width
+  // Full logo (expanded state) - max 140px width, 28px height
   .javis-logo-full {
     max-width: 140px;
-    height: 32px;
+    height: 28px;
     object-fit: contain;
   }
 }
 
-// Adjust when sidebar is open
+// Adjust when sidebar is open - same height, just different horizontal padding
 .sidebar-left.open .javis-sidebar-logo {
-  padding: $jv-space-6 $jv-space-10; // 12px vertical, 20px horizontal when expanded
+  padding: 0 $jv-space-6; // Only horizontal padding changes
   justify-content: flex-start;
 }
 
 // ===========================================================
 // LEFT SIDEBAR (Main Navigation)
 // ===========================================================
+
+// Override Bootstrap's bg-light class on sidebar
+.sidebar.bg-light,
+nav.sidebar.bg-light {
+  background-color: $jv-surface !important; // Pure white - cohesive with header
+}
+
 .sidebar {
-  background: $jv-surface;
+  background: $jv-surface !important; // Pure white - cohesive with header
   border-right: 1px solid $jv-border-subtle;
   padding-top: 0 !important; // Remove top padding so logo sits at top edge
 
-  // Main navigation list
-  #main-nav {
-    // No gap class - we control spacing per nav-item instead
-  }
-
   // Nav items - proper spacing between items
   .nav-item {
     margin-bottom: $jv-space-2; // 4px between nav items - compact like Slack/Discord
@@ -177,151 +183,6 @@ div[data-widget-area] {
   }
 }
 
-// Widget titles
-.widget-title,
-div[data-widget-area] h5,
-div[data-widget-area] h6,
-div[data-widget-area="right"] h5,
-div[data-widget-area="right"] h8 {
-  font-size: 14px;
-  font-weight: 700;
-  margin-bottom: $jv-space-6;
-  color: $jv-text-main;
-  text-transform: uppercase;
-  letter-spacing: 0.3px;
-}
-
-// ===========================================================
-// TRENDING TAGS
-// ===========================================================
-
-.popular-tags {
-  gap: 6px;
-
-  .tag-list > div {
-    background: $jv-surface;
-    border: 1px solid $jv-border-subtle;
-    border-radius: 10px;
-    padding: 10px 12px;
-    font-size: 14px;
-    color: $jv-text-main;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    cursor: pointer;
-    transition: border-color $jv-transition-fast, background-color $jv-transition-fast; // Modern transitions
-
-    &:hover {
-      border-color: $jv-border-strong; // Consistent border
-      background: $jv-hover-bg; // Consistent hover state
-    }
-
-    // Focus state for accessibility
-    &:focus-visible {
-      outline: none;
-      box-shadow: $jv-focus-ring;
-    }
-
-    small {
-      color: $jv-text-muted;
-      font-size: $jv-font-size-xs;
-    }
-  }
-}
-
-// ===========================================================
-// TRENDING NOW
-// ===========================================================
-
-#recent_posts {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  margin-top: $jv-space-6;
-
-  li.widget-posts {
-    background: $jv-surface;
-    border: 1px solid rgba(0,0,0,0.05);
-    border-radius: $jv-radius-md;
-    padding: 10px 14px;
-    display: flex;
-    flex-direction: column;
-    gap: $jv-space-4;
-    transition: $jv-transition-shadow, border-color $jv-transition-fast; // Modern transitions
-
-    &:hover {
-      border-color: $jv-border-strong; // Consistent border
-      box-shadow: $jv-shadow-sm; // shadcn subtle shadow
-    }
-
-    // Focus state for accessibility
-    &:focus-within {
-      outline: none;
-      box-shadow: $jv-shadow-md, $jv-focus-ring;
-    }
-
-    // Meta info
-    .d-flex.gap-2,
-    .timeago {
-      font-size: $jv-font-size-xs;
-      color: $jv-text-muted;
-    }
-
-    // Title inside mini post
-    a {
-      font-size: 14px;
-      font-weight: 500;
-      color: $jv-text-main;
-      text-decoration: none;
-      line-height: $jv-line-height-tight;
-
-      &:hover {
-        color: $jv-primary;
-      }
-    }
-
-    // 2-line clamp for content preview
-    p,
-    .content {
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      font-size: $jv-font-size-sm;
-      color: $jv-text-muted;
-      margin: 0;
-    }
-
-    // Read more alignment
-    a.stretched-link {
-      font-size: $jv-font-size-xs;
-      color: $jv-primary;
-    }
-  }
-}
-
-// ===========================================================
-// SEARCH WIDGET
-// ===========================================================
-.search-widget {
-  .input-group {
-    display: flex;
-
-    .form-control {
-      flex: 1;
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-      border-right: none;
-    }
-
-    .btn {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-      padding: 8px 14px;
-    }
-  }
-}
-
 // ===========================================================
 // ONLINE USERS WIDGET
 // ===========================================================
@@ -643,7 +504,7 @@ div[data-widget-area="right"],
 
   // Sticky positioning - stays visible when scrolling
   position: sticky;
-  top: 80px; // Adjust based on your header height
+  top: 48px; // 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
@@ -681,9 +542,9 @@ div[data-widget-area="right"],
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: $jv-text-soft;
-    padding: $jv-space-4 $jv-space-4;
-    margin: 0 0 $jv-space-4 0 !important;
-    border-bottom: 1px solid $jv-border-subtle;
+    padding: $jv-space-4 $jv-space-4 $jv-space-4 $jv-space-4;
+    margin: 0 !important;
+    border-bottom: none !important; // Removed border
   }
 
   // Add spacing between widgets
@@ -693,136 +554,279 @@ div[data-widget-area="right"],
 }
 
 // ===========================================================
-// POPULAR TAGS WIDGET (Sidebar) - Reddit-style vertical list
+// TRENDING TAGS WIDGET (Sidebar) - Pill-style flowing tags
 // ===========================================================
 div[data-widget-area="right"] {
+  // Remove outer card for tags widget - let it flow directly
+  > div:has(.popular-tags) {
+    background: transparent !important;
+    border: none !important;
+    border-radius: 0 !important;
+    overflow: visible !important;
+
+    // Keep the header styled
+    h5 {
+      padding: $jv-space-3 0 !important;
+      border-bottom: none !important;
+    }
+  }
+
   .popular-tags {
-    width: 100% !important;
+    padding: 0 !important;
+    margin: 0;
   }
 
+  // Override Bootstrap's grid - make it a flowing wrap layout
   .tag-list {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: $jv-space-2 !important; // 8px gap between pills
     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
+    // Reset Bootstrap row/column styles
     &.row {
-      --bs-gutter-x: 0 !important;
-      --bs-gutter-y: 0 !important;
       margin: 0 !important;
+      display: flex !important;
+      flex-wrap: wrap !important;
     }
 
-    // Force each tag to be full width (override col classes)
-    > * {
-      width: 100% !important;
-      max-width: 100% !important;
-      flex: 0 0 100% !important;
+    // Reset column divs - let them be inline
+    > div {
+      flex: none !important;
+      width: auto !important;
       padding: 0 !important;
+      margin: 0 !important;
+      max-width: none !important;
     }
 
+    // Style each tag as a compact pill
     .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;
+      display: inline-flex !important;
+      flex-direction: row !important;
+      align-items: center !important;
+      gap: $jv-space-1 !important; // 4px between tag name and count
+      background: rgba(0, 0, 0, 0.04) !important;
+      border: 1px solid transparent !important;
+      border-radius: $jv-radius-pill !important;
+      // [Enhancement 5] Increased padding for better touch targets
+      padding: $jv-space-2 $jv-space-3 !important; // 8px vertical, 12px horizontal
+      transition: all $jv-transition-fast !important;
+      text-decoration: none !important;
+      width: auto !important;
+      min-height: auto !important;
 
       &:hover {
-        background: $jv-hover-bg !important;
+        background: $jv-primary-soft !important;
+        color: $jv-primary !important;
+        // [Enhancement 6] Subtle shadow on hover
+        box-shadow: $jv-shadow-xs !important;
+        transform: translateY(-1px);
+
+        .tag-item {
+          color: $jv-primary !important;
+        }
+
+        .tag-topic-count {
+          color: $jv-primary !important;
+          opacity: 0.7;
+        }
+      }
+
+      &:focus-visible {
+        outline: none;
+        box-shadow: $jv-focus-ring;
       }
 
       .tag-item {
-        font-size: 14px !important;
-        font-weight: 600 !important;
+        font-size: $jv-font-size-xs !important; // 12px
+        font-weight: 500 !important;
         color: $jv-text-main !important;
-        margin-bottom: $jv-space-1 !important;
+        line-height: 1.2 !important;
+        margin: 0 !important;
+
+        // [Enhancement 2] Add # icon before tag name
+        &::before {
+          content: "#";
+          color: $jv-text-soft;
+          margin-right: 2px;
+          font-weight: 400;
+        }
       }
 
       .tag-topic-count {
-        font-size: 12px !important;
-        font-weight: 400 !important;
-        color: $jv-text-soft !important;
+        display: none !important;
+      }
+
+      // [Enhancement 3] Color-code tags by popularity
+      // Tags with topics get slightly darker background
+      &[data-tag]:not([data-count="0"]) {
+        background: rgba(0, 0, 0, 0.06) !important;
+
+        .tag-item {
+          font-weight: 600 !important;
+        }
       }
     }
   }
 
-}
+  // ===========================================================
+  // TRENDING POSTS WIDGET - Widget Essentials Specific
+  // ===========================================================
 
-// ===========================================================
-// RECENT/TRENDING POSTS WIDGET (Sidebar) - Widget Essentials Specific
-// ===========================================================
-div[data-widget-area="right"] {
-  // Recent posts container with scrolling
-  #recent_posts,
-  ul[id*="recent"] {
-    max-height: 400px;
-    overflow-y: auto;
-    padding: 0;
-    margin: 0;
+  // Override Bootstrap's overflow-hidden on wrapper divs
+  .overflow-hidden {
+    overflow: visible !important;
+  }
 
-    // Smooth scrollbar
+  // The wrapper div after h5 (Trending Posts header) - make it scrollable
+  h5 + div {
+    max-height: 420px;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+
+    // Scrollbar styling
     &::-webkit-scrollbar {
-      width: 4px;
+      width: 6px;
     }
-
     &::-webkit-scrollbar-track {
       background: transparent;
     }
-
     &::-webkit-scrollbar-thumb {
       background: rgba(0, 0, 0, 0.15);
-      border-radius: 2px;
-
+      border-radius: 3px;
       &:hover {
         background: rgba(0, 0, 0, 0.25);
       }
     }
   }
 
+  // Recent posts container - no scroll here, parent wrapper handles it
+  #recent_posts,
+  ul[id*="recent"] {
+    max-height: none !important;
+    overflow: visible !important;
+    padding: $jv-space-3 !important;
+    padding-bottom: $jv-space-5 !important;
+    margin: 0;
+    list-style: none;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: $jv-space-3 !important;
+  }
+
   // 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;
+    transition: $jv-transition-shadow, border-color $jv-transition-fast !important;
+    border: 1px solid rgba(0,0,0,0.05) !important;
+    border-radius: $jv-radius-md !important;
+    background: $jv-surface !important;
+    cursor: pointer;
+    flex-shrink: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    gap: $jv-space-3 !important;
 
-    &:last-child {
-      border-bottom: none !important;
+    &:hover {
+      border-color: $jv-border-strong !important;
+      box-shadow: $jv-shadow-sm;
     }
 
-    &:hover {
-      background: $jv-hover-bg !important;
+    &:focus-within {
+      outline: none;
+      box-shadow: $jv-shadow-md, $jv-focus-ring;
+    }
+
+    // Hide hr elements
+    hr {
+      display: none !important;
+    }
+
+    // Meta info row (author + timeago)
+    .d-flex.gap-2 {
+      display: flex !important;
+      align-items: center !important;
+      gap: $jv-space-2 !important;
+      font-size: $jv-font-size-xs;
+      color: $jv-text-muted;
+      flex-wrap: nowrap;
+    }
+
+    .timeago {
+      font-size: $jv-font-size-xs;
+      color: $jv-text-soft;
     }
 
     .post-author a {
-      font-size: 12px !important;
+      font-size: $jv-font-size-xs !important;
       font-weight: 500 !important;
       color: $jv-text-main !important;
     }
 
+    // Title link
+    a {
+      font-size: 14px;
+      font-weight: 500;
+      color: $jv-text-main;
+      text-decoration: none;
+      line-height: $jv-line-height-tight;
+
+      &:hover {
+        color: $jv-primary;
+      }
+    }
+
+    // Content preview
+    p,
+    .content,
     .line-clamp-6 {
-      font-size: 13px !important;
-      font-weight: 400 !important;
-      color: $jv-text-main !important;
-      line-height: 1.5 !important;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: $jv-font-size-sm !important;
+      color: $jv-text-muted !important;
+      line-height: $jv-line-height-base !important;
+      margin: 0;
     }
 
-    .post-preview-footer a {
-      font-size: 12px !important;
-      font-weight: 500 !important;
-      color: $jv-primary !important;
-      text-decoration: none !important;
+    // Read more link
+    a.stretched-link {
+      font-size: $jv-font-size-xs;
+      color: $jv-primary;
     }
-  }
-}
 
+    // Footer with "read more" link
+    .post-preview-footer {
+      margin-top: auto;
+
+      a {
+        font-size: $jv-font-size-xs !important;
+        font-weight: 600 !important;
+        color: $jv-primary !important;
+        text-decoration: none !important;
+        transition: color $jv-transition-fast !important;
+        display: inline-flex;
+        align-items: center;
+        gap: $jv-space-1;
+
+        &:hover {
+          color: $jv-primary-hover !important;
+          text-decoration: underline !important;
+        }
+
+        &::after {
+          content: "→";
+          font-size: inherit;
+          transition: transform $jv-transition-fast;
+        }
+
+        &:hover::after {
+          transform: translateX(2px);
+        }
+      }
+    }
+  }
+}