@okjavis/nodebb-theme-javis 1.0.1 → 1.1.0

package/scss/_sidebar.scss

@@ -0,0 +1,539 @@
+// ===========================================================
+// SIDEBAR SYSTEM – Widget Styles
+// Modern, clean sidebar with card-based widgets
+// ===========================================================
+
+// ===========================================================
+// LEFT SIDEBAR (Main Navigation)
+// ===========================================================
+.sidebar {
+  background: $jv-surface;
+  border-right: 1px solid $jv-border-subtle;
+
+  // Sidebar navigation links
+  .nav-link {
+    display: flex;
+    align-items: center;
+    gap: $jv-space-4;
+    padding: $jv-space-4 $jv-space-6;
+    color: $jv-text-muted;
+    font-size: $jv-font-size-sm;
+    font-weight: 500;
+    border-radius: $jv-radius-sm;
+    transition: all 0.15s ease;
+    margin: 2px 0;
+
+    i {
+      width: 18px;
+      text-align: center;
+      font-size: 14px;
+    }
+
+    &:hover {
+      background: rgba(0, 81, 255, 0.06);
+      color: $jv-primary;
+    }
+
+    &.active {
+      background: $jv-primary-soft;
+      color: $jv-primary;
+      font-weight: 600;
+    }
+  }
+
+  // Sidebar section headers
+  .sidebar-header {
+    font-size: $jv-font-size-xs;
+    font-weight: 600;
+    color: $jv-text-soft;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: $jv-space-6 $jv-space-6 $jv-space-2;
+    margin-top: $jv-space-4;
+  }
+
+  // Category list in sidebar
+  .category-list-container {
+    padding: $jv-space-2 0;
+
+    .category-item {
+      display: flex;
+      align-items: center;
+      gap: $jv-space-4;
+      padding: $jv-space-4 $jv-space-6;
+      color: $jv-text-main;
+      font-size: $jv-font-size-sm;
+      border-radius: $jv-radius-sm;
+      transition: background-color 0.15s ease;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.03);
+      }
+
+      .category-icon {
+        width: 24px;
+        height: 24px;
+        border-radius: $jv-radius-xs;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+// ===========================================================
+// WIDGET CONTAINER (General)
+// ===========================================================
+.widget-area,
+div[data-widget-area] {
+  display: flex;
+  flex-direction: column;
+  gap: $jv-space-6;
+}
+
+// Individual widget card
+.widget {
+  background: $jv-surface;
+  border: 1px solid $jv-border-subtle;
+  border-radius: $jv-radius-lg;
+  padding: $jv-space-8;
+  transition: box-shadow 0.15s ease;
+
+  &:hover {
+    box-shadow: $jv-shadow-soft;
+  }
+}
+
+// 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 0.15s ease, background 0.15s ease;
+
+    &:hover {
+      border-color: rgba(0,0,0,0.12);
+      background: rgba(0,0,0,0.03);
+    }
+
+    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: box-shadow 0.15s ease, border 0.15s ease;
+
+    &:hover {
+      border-color: rgba(0,0,0,0.08);
+      box-shadow: $jv-shadow-soft;
+    }
+
+    // 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
+// ===========================================================
+.online-users,
+.online-now {
+  .user-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid $jv-surface;
+    transition: transform 0.15s ease;
+
+    &:hover {
+      transform: scale(1.1);
+      z-index: 10;
+    }
+  }
+
+  .avatar-stack {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+
+    .user-avatar {
+      margin-left: -8px;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+}
+
+// ===========================================================
+// CATEGORIES WIDGET
+// ===========================================================
+.categories-widget {
+  .category-item {
+    display: flex;
+    align-items: center;
+    gap: $jv-space-4;
+    padding: $jv-space-4 0;
+    border-bottom: 1px solid $jv-border-subtle;
+    transition: background-color 0.15s ease;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: rgba(0, 0, 0, 0.02);
+      margin: 0 (-$jv-space-4);
+      padding-left: $jv-space-4;
+      padding-right: $jv-space-4;
+      border-radius: $jv-radius-sm;
+    }
+
+    .category-icon {
+      width: 24px;
+      height: 24px;
+      border-radius: $jv-radius-xs;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+
+    .category-name {
+      flex: 1;
+      font-size: $jv-font-size-sm;
+      font-weight: 500;
+      color: $jv-text-main;
+    }
+
+    .category-count {
+      font-size: $jv-font-size-xs;
+      color: $jv-text-soft;
+      background: rgba(0, 0, 0, 0.05);
+      padding: 2px 6px;
+      border-radius: $jv-radius-pill;
+    }
+  }
+}
+
+// ===========================================================
+// STATS WIDGET
+// ===========================================================
+.stats-widget {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: $jv-space-6;
+
+  .stat-item {
+    text-align: center;
+    padding: $jv-space-4;
+    background: rgba(0, 0, 0, 0.02);
+    border-radius: $jv-radius-sm;
+
+    .stat-value {
+      font-size: $jv-font-size-xl;
+      font-weight: 700;
+      color: $jv-text-main;
+      line-height: 1;
+    }
+
+    .stat-label {
+      font-size: $jv-font-size-xs;
+      color: $jv-text-muted;
+      margin-top: $jv-space-2;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+  }
+}
+
+// ===========================================================
+// INFO WIDGET
+// ===========================================================
+.info-widget {
+  font-size: $jv-font-size-sm;
+  color: $jv-text-muted;
+  line-height: $jv-line-height-base;
+
+  p {
+    margin-bottom: $jv-space-4;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: $jv-primary;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// ===========================================================
+// USER CARD WIDGET (in left sidebar)
+// ===========================================================
+.user-card-widget {
+  .user-header {
+    display: flex;
+    align-items: center;
+    gap: $jv-space-4;
+    margin-bottom: $jv-space-6;
+
+    .user-avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      object-fit: cover;
+    }
+
+    .user-info {
+      flex: 1;
+
+      .user-name {
+        font-size: $jv-font-size-base;
+        font-weight: 600;
+        color: $jv-text-main;
+      }
+
+      .user-title {
+        font-size: $jv-font-size-xs;
+        color: $jv-text-muted;
+      }
+    }
+  }
+
+  .user-stats {
+    display: flex;
+    justify-content: space-around;
+    padding: $jv-space-4 0;
+    border-top: 1px solid $jv-border-subtle;
+    border-bottom: 1px solid $jv-border-subtle;
+    margin-bottom: $jv-space-6;
+
+    .stat {
+      text-align: center;
+
+      .value {
+        font-size: $jv-font-size-lg;
+        font-weight: 600;
+        color: $jv-text-main;
+      }
+
+      .label {
+        font-size: $jv-font-size-xs;
+        color: $jv-text-muted;
+      }
+    }
+  }
+
+  .user-actions {
+    display: flex;
+    flex-direction: column;
+    gap: $jv-space-2;
+
+    .btn {
+      width: 100%;
+    }
+  }
+}
+
+// ===========================================================
+// SUGGESTED TOPICS WIDGET
+// ===========================================================
+.suggested-topics {
+  .topic-item {
+    display: flex;
+    gap: $jv-space-4;
+    padding: $jv-space-4 0;
+    border-bottom: 1px solid $jv-border-subtle;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .topic-thumb {
+      width: 48px;
+      height: 48px;
+      border-radius: $jv-radius-sm;
+      object-fit: cover;
+      flex-shrink: 0;
+    }
+
+    .topic-info {
+      flex: 1;
+      min-width: 0;
+
+      .topic-title {
+        font-size: $jv-font-size-sm;
+        font-weight: 500;
+        color: $jv-text-main;
+        line-height: $jv-line-height-tight;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+
+        &:hover {
+          color: $jv-primary;
+        }
+      }
+
+      .topic-meta {
+        font-size: $jv-font-size-xs;
+        color: $jv-text-soft;
+        margin-top: $jv-space-2;
+      }
+    }
+  }
+}
+
+// ===========================================================
+// RESPONSIVE SIDEBAR
+// ===========================================================
+@media (max-width: 992px) {
+  .sidebar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    z-index: 1050;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
+
+    &.open {
+      transform: translateX(0);
+    }
+  }
+
+  .sidebar-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 1040;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s ease, visibility 0.3s ease;
+
+    &.show {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}

package/scss/_variables.scss

@@ -0,0 +1,54 @@
+// ============================================
+// JAVIS Design System – Tokens
+// ============================================
+
+// Brand Colors
+$jv-primary: #0051ff;
+$jv-primary-hover: #0044dd;
+$jv-primary-soft: rgba(0, 81, 255, 0.12);
+
+// Neutrals
+$jv-bg: #f5f6f8;              // app background
+$jv-surface: #ffffff;         // cards, panels
+$jv-border-subtle: rgba(0,0,0,0.06);
+$jv-border-strong: rgba(0,0,0,0.12);
+
+// Text
+$jv-text-main: #111111;
+$jv-text-muted: #6b7280;
+$jv-text-soft: #9ca3af;
+
+// Radii
+$jv-radius-xs: 4px;
+$jv-radius-sm: 8px;
+$jv-radius-md: 12px;
+$jv-radius-lg: 16px;
+$jv-radius-pill: 999px;
+
+// Shadows
+$jv-shadow-soft: 0 2px 8px rgba(0,0,0,0.04);
+$jv-shadow-card: 0 4px 10px rgba(0,0,0,0.05);
+$jv-shadow-button: 0 4px 12px rgba(0, 81, 255, 0.25);
+$jv-shadow-button-hover: 0 6px 16px rgba(0, 81, 255, 0.35);
+
+// Spacing (8pt-ish scale)
+$jv-space-2: 4px;
+$jv-space-4: 8px;
+$jv-space-6: 12px;
+$jv-space-8: 16px;
+$jv-space-10: 20px;
+$jv-space-12: 24px;
+
+// Typography
+$jv-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
+$jv-font-size-base: 15px;
+$jv-font-size-sm: 13px;
+$jv-font-size-xs: 12px;
+$jv-font-size-lg: 18px;
+$jv-font-size-xl: 22px;
+$jv-font-size-xxl: 32px;
+
+// Line Heights
+$jv-line-height-base: 1.52;
+$jv-line-height-tight: 1.4;
+$jv-line-height-relaxed: 1.6;

package/scss/overrides.scss

@@ -0,0 +1,39 @@
+// ============================================
+// JAVIS Theme - Bootstrap Variable Overrides
+// This file is imported BEFORE Bootstrap variables
+// Use it to customize Bootstrap's defaults
+// ============================================
+
+// Import Harmony's overrides first (inherits their Bootstrap customizations)
+@import "nodebb-theme-harmony/scss/overrides";
+
+// JAVIS Brand Colors
+$primary: #0051ff;
+$link-color: #0051ff;
+
+// Typography
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
+
+// Body
+$body-bg: #f5f6f8;
+$body-color: #111111;
+
+// Borders
+$border-radius: 8px;
+$border-radius-sm: 4px;
+$border-radius-lg: 12px;
+$border-radius-pill: 999px;
+
+// Buttons
+$btn-border-radius: 999px;
+$btn-border-radius-sm: 999px;
+$btn-border-radius-lg: 999px;
+
+// Cards
+$card-border-radius: 16px;
+$card-border-color: rgba(0, 0, 0, 0.05);
+
+// Inputs
+$input-border-radius: 999px;
+$input-focus-border-color: #0051ff;
+$input-focus-box-shadow: 0 0 0 3px rgba(0, 81, 255, 0.12);

package/static/lib/theme.js

@@ -10,8 +10,45 @@
   $(document).ready(function() {
     console.log('JAVIS Community Theme initialized');
 
-    // Add any custom client-side interactions here
-    // Example: smooth scrolling, animations, custom widgets, etc.
+    // Ensure sidebar toggle works (reinitialize if Harmony's handler isn't loaded)
+    initSidebarToggle();
   });
 
+  function initSidebarToggle() {
+    // Check if the toggle element exists
+    var toggleEl = $('[component="sidebar/toggle"]');
+    if (!toggleEl.length) {
+      console.log('JAVIS: Sidebar toggle element not found');
+      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 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);
+          });
+        });
+      }
+
+      $(window).trigger('action:sidebar.toggle');
+    });
+
+    console.log('JAVIS: Sidebar toggle initialized');
+  }
+
 })();

package/templates/partials/posts_list_item.tpl

@@ -1,12 +1,8 @@
-{{{
+<!--
     JAVIS Community Theme - Post List Item
-
-    This template overrides Harmony's posts_list_item.tpl
+    Overrides Harmony's posts_list_item.tpl
     Used on: Recent, Popular, Unread pages (feed view)
-
-    To customize: Edit the HTML structure below
-    Original: https://github.com/NodeBB/nodebb-theme-harmony/blob/master/templates/partials/posts_list_item.tpl
-}}}
+-->
 <li component="post" class="posts-list-item {{{ if ./deleted }}} deleted{{{ else }}}{{{ if ./topic.deleted }}} deleted{{{ end }}}{{{ end }}}{{{ if ./topic.scheduled }}} scheduled{{{ end }}}" data-pid="{./pid}" data-uid="{./uid}">
 
     <a class="topic-title fw-semibold fs-5 mb-2 text-reset text-break d-block" href="{config.relative_path}/post/{encodeURIComponent(./pid)}">