@okjavis/nodebb-theme-javis 3.0.0 → 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/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/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 }}}

package/templates/partials/topics_list.tpl

@@ -69,37 +69,28 @@
 			</div>
 			{{{ end }}}
 
-			<!-- Content with optional thumbnail (side by side when image exists) -->
+			<!-- Thumbnail Preview (if exists) -->
 			{{{ if ./thumbs.length }}}
-			<div class="topic-media-row">
-				<div class="topic-media-text">
-					{{{ if ./teaser.content }}}
-					<div class="topic-teaser">
-						{./teaser.content}
-					</div>
-					{{{ end }}}
-				</div>
-				<a class="topic-thumbnail" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">
-					<img src="{./thumbs.0.url}" alt="" loading="lazy" />
-					{{{ if ./thumbs.1 }}}
-					<span class="thumb-count">+{subtract(./thumbs.length, 1)}</span>
-					{{{ end }}}
-				</a>
-			</div>
-			{{{ else }}}
-			<!-- Teaser/Preview Content (no image) -->
+			<a class="topic-thumbnail" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">
+				<img src="{./thumbs.0.url}" alt="" loading="lazy" />
+				{{{ if ./thumbs.1 }}}
+				<span class="thumb-count">+{subtract(./thumbs.length, 1)}</span>
+				{{{ end }}}
+			</a>
+			{{{ end }}}
+
+			<!-- Teaser/Preview Content -->
 			{{{ if ./teaser.content }}}
 			<div class="topic-teaser">
 				{./teaser.content}
 			</div>
 			{{{ end }}}
-			{{{ end }}}
 
 			<!-- Action Bar -->
 			<div class="topic-actions">
 				<a href="{config.relative_path}/topic/{./slug}" class="action-btn">
 					<i class="fa-regular fa-comment"></i>
-					<span>{humanReadableNumber(./postcount, 0)} {{{ if (./postcount == 1) }}}Comment{{{ else }}}Comments{{{ end }}}</span>
+					<span>{humanReadableNumber(./postcount, 0)} Comments</span>
 				</a>
 				<button class="action-btn share-btn" data-url="{config.relative_path}/topic/{./slug}">
 					<i class="fa fa-share"></i>

package/templates/category.tpl

@@ -1,95 +0,0 @@
-<!-- IMPORT partials/breadcrumbs-json-ld.tpl -->
-{{{ if config.theme.enableBreadcrumbs }}}
-<!-- IMPORT partials/breadcrumbs.tpl -->
-{{{ end }}}
-
-<div class="category-header d-flex flex-column gap-2">
-	<div class="d-flex gap-2 align-items-center mb-1 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
-		{buildCategoryIcon(@value, "40px", "rounded-1 flex-shrink-0")}
-		<h1 class="tracking-tight fs-2 fw-semibold mb-0">{./name}</h1>
-	</div>
-	{{{ if ./descriptionParsed }}}
-	<div class="description text-secondary text-sm w-100 {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}} line-clamp-4 clamp-fade-4">
-		{./descriptionParsed}
-	</div>
-	{{{ end }}}
-	<!-- ActivityPub handle - hidden by default, can show via tooltip -->
-	{{{ if ./handleFull }}}
-	<div class="activitypub-handle d-none">
-		<p class="text-secondary text-sm fst-italic mb-0">
-			[[category:handle.description, {handleFull}]]
-			<a href="#" class="link-secondary" data-action="copy" data-clipboard-text="{handleFull}"><i class="fa fa-fw fa-copy" aria-hidden="true"></i></a>
-		</p>
-	</div>
-	{{{ end }}}
-	<div class="d-flex flex-wrap gap-2 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
-		<span class="badge text-body border border-gray-300 stats text-xs">
-			<span title="{totalTopicCount}" class="fw-bold">{humanReadableNumber(totalTopicCount)}</span>
-			<span class="text-lowercase fw-normal">[[global:topics]]</span>
-		</span>
-		<span class="badge text-body border border-gray-300 stats text-xs">
-			<span title="{totalPostCount}" class="fw-bold">{humanReadableNumber(totalPostCount)}</span>
-			<span class="text-lowercase fw-normal">[[global:posts]]</span>
-		</span>
-		{{{ if !isNumber(cid) }}}
-		<a href="{./url}" class="badge text-body border border-gray-300 text-xs" data-ajaxify="false">
-			<span class="fw-normal">View Original</span>
-			<i class="fa fa-external-link"></i>
-		</a>
-		{{{ end }}}
-	</div>
-</div>
-
-{{{ if widgets.header.length }}}
-<div data-widget-area="header">
-	{{{ each widgets.header }}}
-	{{widgets.header.html}}
-	{{{ end }}}
-</div>
-{{{ end }}}
-
-
-<div class="row flex-fill mt-3">
-	<div class="category d-flex flex-column {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
-		<!-- IMPORT partials/category/subcategory.tpl -->
-		{{{ if (topics.length || privileges.topics:create) }}}
-		<!-- IMPORT partials/topic-list-bar.tpl -->
-		{{{ end }}}
-
-		{{{ if (./inbox && (./hasFollowers == false)) }}}
-		<div class="alert alert-warning mb-4" id="category-no-followers" data-bs-toggle="dropdown" data-bs-target='[component="topic/watch"] button' aria-hidden="true">
-			<i class="fa fa-triangle-exclamation pe-2"></i>
-			[[category:no-followers]]
-			<a href="#" class="stretched-link"></a>
-		</div>
-		{{{ end }}}
-
-		{{{ if (!topics.length && privileges.topics:create) }}}
-		<div class="alert alert-info" id="category-no-topics">
-			[[category:no-topics]]
-		</div>
-		{{{ end }}}
-
-		<!-- IMPORT partials/topics_list.tpl -->
-
-		{{{ if config.usePagination }}}
-		<!-- IMPORT partials/paginator.tpl -->
-		{{{ end }}}
-	</div>
-	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
-		{{{ each widgets.sidebar }}}
-		{{widgets.sidebar.html}}
-		{{{ end }}}
-	</div>
-</div>
-<div data-widget-area="footer">
-	{{{each widgets.footer}}}
-	{{widgets.footer.html}}
-	{{{end}}}
-</div>
-
-{{{ if !config.usePagination }}}
-<noscript>
-	<!-- IMPORT partials/paginator.tpl -->
-</noscript>
-{{{ end }}}