@okjavis/nodebb-theme-javis 2.5.3 → 3.0.1

package/scss/_sidebar.scss

@@ -6,13 +6,13 @@
 // ===========================================================
 // JAVIS SIDEBAR LOGO
 // ===========================================================
-// Height should match the sticky header (64px) for visual alignment
+// Height should match the sticky header (56px) for visual alignment
 .javis-sidebar-logo {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 65px; // Match header height (12px + 40px + 12px)
-  min-height: 65px;
+  height: 56px; // Match header height (8px + 36px + 8px + border)
+  min-height: 56px;
   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;
@@ -26,17 +26,17 @@
     text-decoration: none;
   }
 
-  // Icon logo (collapsed state) - 28px to match header logo
+  // Icon logo (collapsed state) - 36px for better visibility
   .javis-logo-icon {
-    width: 28px;
-    height: 28px;
+    width: 36px;
+    height: 36px;
     object-fit: contain;
   }
 
-  // Full logo (expanded state) - max 140px width, 28px height
+  // Full logo (expanded state) - max 140px width, 36px height
   .javis-logo-full {
     max-width: 140px;
-    height: 28px;
+    height: 36px;
     object-fit: contain;
   }
 }
@@ -50,6 +50,7 @@
 // ===========================================================
 // LEFT SIDEBAR (Main Navigation)
 // ===========================================================
+// Reddit-style wider sidebar (200px) with expanded state as default
 
 // Override Bootstrap's bg-light class on sidebar
 .sidebar.bg-light,
@@ -59,9 +60,18 @@ nav.sidebar.bg-light {
 
 .sidebar {
   background: $jv-surface !important; // Pure white - cohesive with header
-  border-right: 1px solid $jv-border-subtle;
+  border-right: none !important; // Clean look - no vertical divider
   padding-top: 0 !important; // Remove top padding so logo sits at top edge
 
+  // Desktop: Use 270px width when expanded (Reddit-style)
+  @media (min-width: 992px) {
+    &.open {
+      min-width: 270px !important;
+      max-width: 270px !important;
+      width: 270px !important;
+    }
+  }
+
   // Nav items - proper spacing between items
   .nav-item {
     margin-bottom: $jv-space-2; // 4px between nav items - compact like Slack/Discord
@@ -498,7 +508,8 @@ div[data-widget-area] {
 // RIGHT SIDEBAR WIDGET AREA (Reddit-style)
 // ===========================================================
 div[data-widget-area="right"],
-.col-lg-3.col-sm-12 {
+div[data-widget-area="right"].col-lg-3.col-sm-12,
+.col-lg-3.col-sm-12[data-widget-area="right"] {
   display: flex;
   flex-direction: column;
 
@@ -506,33 +517,49 @@ div[data-widget-area="right"],
   position: sticky;
   top: 72px; // 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);
-    }
-  }
+  // CRITICAL: Remove all overflow/scroll from sidebar and ALL descendants
+  overflow: visible !important;
+  max-height: none !important;
 
   // Widget card container
   > div {
     background: $jv-surface;
     border: 1px solid $jv-border-subtle;
     border-radius: $jv-radius-lg;
-    overflow: hidden;
+    overflow: hidden; // Hide overflow on card itself
+  }
+
+  // Trending Now widget - needs scrollable content
+  > div:has(#recent_posts),
+  > div:has(ul[id*="recent"]),
+  > div:has(.widget-posts) {
+    overflow: hidden !important; // Card clips content
+
+    // Inner scrollable container
+    > div {
+      max-height: 500px !important;
+      overflow-y: auto !important;
+      overflow-x: hidden !important;
+
+      // Scrollbar styling
+      &::-webkit-scrollbar {
+        width: 6px;
+      }
+      &::-webkit-scrollbar-track {
+        background: rgba(0, 0, 0, 0.03);
+        border-radius: 3px;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.15);
+        border-radius: 3px;
+        &:hover {
+          background: rgba(0, 0, 0, 0.25);
+        }
+      }
+      scrollbar-width: thin;
+      scrollbar-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.03);
+    }
   }
 
   // Widget header/title - clean and simple
@@ -542,14 +569,19 @@ div[data-widget-area="right"],
     text-transform: uppercase;
     letter-spacing: 0.5px;
     color: $jv-text-soft;
-    padding: $jv-space-4 $jv-space-4 $jv-space-4 $jv-space-4;
+    padding: $jv-space-4 0 $jv-space-3 0 !important; // top right bottom left - no horizontal padding (body handles it)
     margin: 0 !important;
     border-bottom: none !important; // Removed border
   }
 
+  // Remove hr dividers after widget headers
+  hr {
+    display: none !important;
+  }
+
   // Add spacing between widgets
   > div + div {
-    margin-top: $jv-space-4;
+    margin-top: $jv-space-3; // Reduced from 16px to 12px
   }
 }
 
@@ -563,30 +595,35 @@ div[data-widget-area="right"] {
     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;
-    }
+    padding: 0 $jv-space-4 !important; // Horizontal padding for alignment
+    margin-bottom: 0 !important; // Remove extra margin
   }
 
   .popular-tags {
     padding: 0 !important;
-    margin: 0;
+    margin: 0 !important; // Reset all margins
+
+    // Override Bootstrap mb-3 class
+    &.mb-3 {
+      margin-bottom: $jv-space-2 !important; // Space between widgets (reduced to 8px)
+    }
   }
 
   // Override Bootstrap's grid - make it a flowing wrap layout
-  .tag-list {
+  .tag-list,
+  .tag-list.row {
     display: flex !important;
     flex-wrap: wrap !important;
     gap: $jv-space-2 !important; // 8px gap between pills
     padding: 0 !important;
     margin: 0 !important;
+    margin-left: -$jv-space-3 !important; // Offset to align first pill's text with header (compensate for pill padding)
+    margin-bottom: $jv-space-2 !important; // Space between widgets (8px)
 
     // Reset Bootstrap row/column styles
     &.row {
-      margin: 0 !important;
+      margin-left: -$jv-space-3 !important;
+      margin-bottom: $jv-space-2 !important;
       display: flex !important;
       flex-wrap: wrap !important;
     }
@@ -672,43 +709,13 @@ div[data-widget-area="right"] {
   }
 
   // ===========================================================
-  // TRENDING POSTS WIDGET - Widget Essentials Specific
+  // TRENDING POSTS WIDGET - Widget Essentials / Recent Posts
   // ===========================================================
 
-  // Override Bootstrap's overflow-hidden on wrapper divs
-  .overflow-hidden {
-    overflow: visible !important;
-  }
-
-  // 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: 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);
-      }
-    }
-  }
-
-  // Recent posts container - no scroll here, parent wrapper handles it
+  // Recent posts container styling
   #recent_posts,
   ul[id*="recent"] {
-    max-height: none !important;
-    overflow: visible !important;
-    padding: $jv-space-3 !important;
-    padding-bottom: $jv-space-5 !important;
+    padding: $jv-space-3 $jv-space-4 $jv-space-4 $jv-space-4 !important;
     margin: 0;
     list-style: none;
     display: flex !important;
@@ -829,4 +836,51 @@ div[data-widget-area="right"] {
       }
     }
   }
+}
+
+// ===========================================================
+// CRITICAL: Override ALL overflow rules on right sidebar
+// This MUST be at the end to have highest specificity
+// The selector [data-widget-area=right] gets overflow-y:auto from somewhere
+// ===========================================================
+
+// Override the base selector that has overflow-y: auto
+[data-widget-area="right"] {
+  overflow: visible !important;
+  overflow-y: visible !important;
+  overflow-x: visible !important;
+  max-height: none !important;
+}
+
+// More specific selectors to ensure override
+div[data-widget-area="right"],
+.col-lg-3[data-widget-area="right"],
+.col-sm-12[data-widget-area="right"] {
+  overflow: visible !important;
+  overflow-y: visible !important;
+  overflow-x: visible !important;
+  max-height: none !important;
+}
+
+// Override Bootstrap's overflow-hidden utility
+div[data-widget-area="right"] .overflow-hidden,
+[data-widget-area="right"] .overflow-hidden {
+  overflow: visible !important;
+  overflow-x: visible !important;
+  overflow-y: visible !important;
+  max-height: none !important;
+}
+
+// Hide any scrollbar that might appear (as backup)
+[data-widget-area="right"]::-webkit-scrollbar,
+div[data-widget-area="right"]::-webkit-scrollbar {
+  display: none !important;
+  width: 0 !important;
+  height: 0 !important;
+}
+
+[data-widget-area="right"],
+div[data-widget-area="right"] {
+  scrollbar-width: none !important;
+  -ms-overflow-style: none !important;
 }

package/scss/_topic.scss

@@ -63,7 +63,7 @@ body.template-topic {
     display: flex;
     flex-wrap: wrap;
     gap: $jv-space-2;
-    margin-bottom: $jv-space-4;
+    margin-bottom: 0;
 
     .badge,
     .tag {

package/static/lib/theme.js

@@ -12,8 +12,8 @@
   $(document).ready(function() {
     console.log('JAVIS Community Theme initialized');
 
-    // Ensure sidebar toggle works (reinitialize if Harmony's handler isn't loaded)
-    initSidebarToggle();
+    // Auto-expand sidebar on desktop (Reddit-style default)
+    initSidebarAutoExpand();
 
     // Initialize image carousels for posts with multiple images
     initPostImageCarousels();
@@ -198,41 +198,38 @@
     console.log('JAVIS: Created carousel with ' + $images.length + ' images');
   }
 
-  function initSidebarToggle() {
-    // Check if the toggle element exists
-    var toggleEl = $('[component="sidebar/toggle"]');
-    if (!toggleEl.length) {
-      console.log('JAVIS: Sidebar toggle element not found');
+  /**
+   * Auto-expand sidebar on desktop (Reddit-style default)
+   * The sidebar will be expanded by default on desktop, but users can still toggle it.
+   * Their preference is saved and respected on subsequent visits.
+   */
+  function initSidebarAutoExpand() {
+    // Only run on desktop (min-width: 992px)
+    if ($(window).width() < 992) {
       return;
     }
 
-    // Remove any existing handlers to avoid duplicates, then add our handler
-    toggleEl.off('click.javis').on('click.javis', function(e) {
-      e.preventDefault();
-      e.stopPropagation();
+    var $sidebar = $('.sidebar-left');
+    if (!$sidebar.length) {
+      return;
+    }
 
-      var sidebarEl = $('.sidebar');
-      sidebarEl.toggleClass('open');
-
-      console.log('JAVIS: Sidebar toggled, open:', sidebarEl.hasClass('open'));
-
-      // Save preference if user is logged in
-      if (typeof app !== 'undefined' && app.user && app.user.uid) {
-        require(['api'], function(api) {
-          api.put('/users/' + app.user.uid + '/settings', {
-            settings: {
-              openSidebars: sidebarEl.hasClass('open') ? 'on' : 'off',
-            },
-          }).catch(function(err) {
-            console.warn('JAVIS: Could not save sidebar preference', err);
-          });
-        });
+    // Check if user has a saved preference (via config.theme.openSidebars)
+    // If they've explicitly closed the sidebar before, respect that
+    var hasUserPreference = typeof config !== 'undefined' &&
+                           config.theme &&
+                           typeof config.theme.openSidebars !== 'undefined';
+
+    // If sidebar is not already open and user hasn't explicitly closed it, expand it
+    if (!$sidebar.hasClass('open')) {
+      // If no user preference set, auto-expand (first-time visitors)
+      // If user preference is 'on', also expand
+      if (!hasUserPreference || config.theme.openSidebars === 'on' || config.theme.openSidebars === true) {
+        $sidebar.addClass('open');
+        $(window).trigger('action:sidebar.toggle');
+        console.log('JAVIS: Auto-expanded sidebar (Reddit-style default)');
       }
-
-      $(window).trigger('action:sidebar.toggle');
-    });
-
-    console.log('JAVIS: Sidebar toggle initialized');
+    }
   }
 
   /**

package/templates/partials/categories/item.tpl

@@ -0,0 +1,67 @@
+<li component="categories/category" data-cid="{./cid}" class="category-card w-100 py-3 py-lg-4 gap-lg-0 gap-2 d-flex flex-column flex-lg-row align-items-start category-{./cid} {./unread-class}">
+	<meta itemprop="name" content="{./name}">
+
+	<div class="d-flex col-lg-7 gap-2 gap-lg-3">
+		<div class="flex-shrink-0">
+		{buildCategoryIcon(@value, "48px", "rounded-1 category-icon-enhanced")}
+		</div>
+		<div class="flex-grow-1 d-flex flex-wrap gap-1 me-0 me-lg-2">
+			<h2 class="title text-break fs-5 fw-semibold m-0 tracking-tight w-100">
+				<!-- IMPORT partials/categories/link.tpl -->
+			</h2>
+			{{{ if ./descriptionParsed }}}
+			<div class="description text-muted text-sm w-100">
+				{./descriptionParsed}
+			</div>
+			{{{ end }}}
+
+			<!-- Activity Badge Row -->
+			<div class="category-activity-row d-flex align-items-center gap-2 w-100 mt-1">
+				{{{ each ./posts }}}
+				{{{ if @first }}}
+				<span class="activity-badge" title="Last activity">
+					<i class="fa fa-clock-o"></i>
+					<span class="timeago" title="{./timestampISO}"></span>
+				</span>
+				{{{ end }}}
+				{{{ end }}}
+			</div>
+
+			{{{ if !config.hideSubCategories }}}
+			{{{ if ./children.length }}}
+			<div class="subcategory-pills d-flex flex-wrap gap-2 mt-2 w-100">
+				{{{ each ./children }}}
+				{{{ if !./isSection }}}
+				<a href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" class="subcategory-pill" style="--pill-color: {./bgColor};">
+					<span class="pill-icon" style="background-color: {./bgColor};">
+						<i class="{./icon}"></i>
+					</span>
+					<span class="pill-name">{./name}</span>
+				</a>
+				{{{ end }}}
+				{{{ end }}}
+			</div>
+			{{{ end }}}
+			{{{ end }}}
+		</div>
+	</div>
+	{{{ if !./link }}}
+	<div class="d-flex col-lg-5 col-12 align-content-stretch">
+		<div class="meta stats-minimal d-none d-lg-flex col-4 gap-3 pe-3 text-muted align-items-center justify-content-end">
+			<div class="stat-item text-center">
+				<span class="stat-number" title="{./totalTopicCount}">{humanReadableNumber(./totalTopicCount, 0)}</span>
+				<span class="stat-label">topics</span>
+			</div>
+			<div class="stat-item text-center">
+				<span class="stat-number" title="{./totalPostCount}">{humanReadableNumber(./totalPostCount, 0)}</span>
+				<span class="stat-label">posts</span>
+			</div>
+		</div>
+		{{{ if !config.hideCategoryLastPost }}}
+		<div component="topic/teaser" class="teaser col-lg-8 col-12 {{{ if !config.theme.mobileTopicTeasers }}}d-none d-lg-block{{{ end }}}">
+			<!-- IMPORT partials/categories/lastpost.tpl -->
+		</div>
+		{{{ end }}}
+	</div>
+	{{{ end }}}
+</li>

package/templates/partials/categories/lastpost.tpl

@@ -0,0 +1,30 @@
+<div class="lastpost teaser-enhanced lh-sm h-100" style="--teaser-color: {./bgColor};">
+	{{{ each ./posts }}}
+	{{{ if @first }}}
+	<div component="category/posts" class="d-flex flex-column h-100 gap-2">
+		<div class="teaser-header d-flex align-items-center gap-2">
+			<a class="text-decoration-none avatar-tooltip" title="{./user.displayname}" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "24px", true)}</a>
+			<div class="teaser-meta">
+				<span class="teaser-user">{./user.displayname}</span>
+				<a class="permalink timeago teaser-time" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" title="{./timestampISO}" aria-label="[[global:lastpost]]"></a>
+			</div>
+		</div>
+		<div class="teaser-content-wrapper position-relative flex-fill">
+			<div class="teaser-content text-break line-clamp-2">
+				{./content}
+			</div>
+			<a class="teaser-read-more" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">Read more →</a>
+		</div>
+	</div>
+	{{{ end }}}
+	{{{ end }}}
+
+	{{{ if !./posts.length }}}
+	<div component="category/posts" class="ps-2 empty-category-state">
+		<div class="d-flex flex-column align-items-start gap-1">
+			<span class="empty-icon"><i class="fa fa-inbox"></i></span>
+			<span class="empty-text">Be the first to post</span>
+		</div>
+	</div>
+	{{{ end }}}
+</div>

package/templates/partials/categories/link.tpl

@@ -0,0 +1,5 @@
+{{{ if ./isSection }}}
+{./name}
+{{{ else }}}
+<a class="text-reset" href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" itemprop="url">{../name}</a>
+{{{ end }}}

package/templates/partials/header/brand.tpl

@@ -1,11 +1,64 @@
 {{{ if widgets.brand-header.length }}}
 <div class="container-lg px-md-4 brand-container">
 	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+		<!-- Search widget area (left/center) -->
 		<div data-widget-area="brand-header" class="flex-fill gap-3 p-2 align-self-center">
 			{{{each widgets.brand-header}}}
 			{{./html}}
 			{{{end}}}
 		</div>
+
+		<!-- Right side: Notifications -->
+		<div class="header-right-actions d-flex align-items-center gap-2 ms-auto">
+			{{{ if config.loggedIn }}}
+			<!-- Notifications dropdown (logged-in users) -->
+			<div class="dropdown" component="notifications">
+				<a data-bs-toggle="dropdown" href="#" role="button" class="nav-link d-flex align-items-center position-relative p-2 rounded-circle" aria-haspopup="true" aria-expanded="false" aria-label="[[global:header.notifications]]" style="width: 40px; height: 40px; justify-content: center;">
+					<span class="position-relative">
+						<i component="notifications/icon" class="fa fa-fw fa-lg {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}}" style="color: #6b7280;"></i>
+						<span component="notifications/count" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger {{{ if !unreadCount.notification }}}hidden{{{ end }}}" style="font-size: 10px; min-width: 18px;">{unreadCount.notification}</span>
+					</span>
+				</a>
+				<ul class="notifications-dropdown dropdown-menu dropdown-menu-end p-1 shadow" role="menu" style="min-width: 320px;">
+					<li>
+						<div component="notifications/list" class="list-container notification-list overscroll-behavior-contain pe-1 ff-base ghost-scrollbar" style="max-height: 400px; overflow-y: auto;">
+							<div class="mb-2 p-1">
+								<div class="d-flex gap-1 justify-content-between">
+									<div class="d-flex gap-2 flex-grow-1 placeholder-wave">
+										<div class="placeholder rounded-circle" style="width: 32px; height: 32px;"></div>
+										<div class="flex-grow-1">
+											<div class="d-flex flex-column">
+												<div class="text-sm">
+													<span class="placeholder placeholder-sm col-4"></span>
+													<span class="placeholder placeholder-sm col-6"></span>
+													<span class="placeholder placeholder-sm col-7"></span>
+												</div>
+												<div class="text-xs">
+													<div class="placeholder placeholder-xs col-6"></div>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</li>
+					<li class="dropdown-divider"></li>
+					<li>
+						<div class="d-flex justify-content-center gap-1 flex-wrap p-1">
+							<a role="button" href="#" class="btn btn-sm btn-light mark-all-read flex-fill text-nowrap text-truncate"><i class="fa fa-check-double"></i> [[notifications:mark-all-read]]</a>
+							<a class="btn btn-sm btn-primary flex-fill text-nowrap text-truncate" href="{relative_path}/notifications"><i class="fa fa-list"></i> [[notifications:see-all]]</a>
+						</div>
+					</li>
+				</ul>
+			</div>
+			{{{ else }}}
+			<!-- Notification icon for guests (redirects to login) -->
+			<a href="{relative_path}/login" class="nav-link d-flex align-items-center position-relative p-2 rounded-circle guest-notification-btn" aria-label="[[global:header.notifications]]" title="Sign in to view notifications" style="width: 40px; height: 40px; justify-content: center;">
+				<i class="fa fa-fw fa-lg fa-bell-o" style="color: #6b7280;"></i>
+			</a>
+			{{{ end }}}
+		</div>
 	</div>
 </div>
 {{{ end }}}