@okjavis/nodebb-theme-javis 2.2.0 → 2.4.0

package/scss/_feed.scss

@@ -4,22 +4,193 @@
 // ===========================================================
 
 // ===========================================================
-// HIDE NEW TOPIC BUTTON AND ALL CATEGORIES ROW
+// HIDE CATEGORIES WIDGET ON FEED PAGE
+// The categories list widget is not relevant on the feed page
 // ===========================================================
-// Hide New Topic button
-// #new_topic,
-// .btn[href*="/compose"],
-// button[data-action="newTopic"],
-// a[href*="/compose"] {
-//   display: none !important;
-// }
+.feed {
+  // Hide categories list directly - simple and reliable
+  ul.categories-list {
+    display: none !important;
+  }
+
+  // Also hide any widget title that precedes a categories list
+  // This targets the "All Categories" header
+  [data-widget-area="left"],
+  [data-widget-area="right"] {
+    // Hide the entire widget container that has categories
+    // Using adjacent sibling and general sibling selectors
+    .categories-list,
+    [component="categories/category"] {
+      display: none !important;
+    }
+  }
+}
+
+// ===========================================================
+// LINKEDIN-STYLE COMPOSER PROMPT CARD
+// ===========================================================
+.composer-prompt-card {
+  background: $jv-surface;
+  border: 1px solid $jv-border-subtle;
+  border-radius: $jv-radius-lg;
+  padding: $jv-space-4;
+  margin-bottom: $jv-space-4;
+  box-shadow: $jv-shadow-sm;
+  transition: box-shadow $jv-transition-fast, border-color $jv-transition-fast;
+
+  &:hover {
+    box-shadow: $jv-shadow-md;
+    border-color: $jv-border-strong;
+  }
+
+  // Guest variant
+  &.composer-prompt-guest {
+    .composer-prompt-input {
+      cursor: pointer;
+    }
+  }
+}
+
+.composer-prompt-inner {
+  display: flex;
+  align-items: center;
+  gap: $jv-space-3;
+}
+
+.composer-prompt-avatar {
+  flex-shrink: 0;
+
+  .avatar {
+    width: 48px !important;
+    height: 48px !important;
+    border-radius: 50% !important;
+    object-fit: cover;
+    border: 2px solid rgba(0, 0, 0, 0.05);
+  }
+
+  .avatar-placeholder {
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, $jv-primary-soft 0%, rgba(0, 81, 255, 0.2) 100%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: $jv-primary;
+    font-size: 18px;
+  }
+}
+
+.composer-prompt-input {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  padding: $jv-space-3 $jv-space-4;
+  background: $jv-bg;
+  border: 1px solid $jv-border-subtle;
+  border-radius: $jv-radius-pill;
+  cursor: pointer;
+  transition: all $jv-transition-fast;
+  text-decoration: none;
+  min-height: 48px;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.04);
+    border-color: $jv-border-strong;
+  }
+
+  &:focus {
+    outline: none;
+    border-color: $jv-primary;
+    box-shadow: $jv-focus-ring;
+  }
+
+  // Reset button styles
+  &.composer-prompt-input {
+    text-align: left;
+    font-family: inherit;
+    font-size: inherit;
+  }
+}
+
+.composer-prompt-placeholder {
+  color: $jv-text-muted;
+  font-size: $jv-font-size-base;
+  font-weight: 500;
+}
+
+.composer-prompt-actions {
+  display: flex;
+  gap: $jv-space-1;
+  flex-shrink: 0;
+}
+
+.composer-prompt-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: transparent;
+  border-radius: 50%;
+  color: $jv-text-muted;
+  cursor: pointer;
+  transition: all $jv-transition-fast;
+
+  &:hover {
+    background: $jv-hover-bg;
+    color: $jv-primary;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: $jv-focus-ring;
+  }
+
+  i {
+    font-size: 18px;
+  }
+}
 
-// // Hide All categories row
-// .category-selector-container,
-// [component="category/dropdown"],
-// .d-flex.justify-content-between.py-2.mb-2 {
-//   display: none !important;
-// }
+// Feed options row (settings dropdown only)
+.feed-options-row {
+  margin-bottom: $jv-space-2 !important;
+  padding: $jv-space-2 0 !important;
+}
+
+// Mobile responsive
+@media (max-width: 576px) {
+  .composer-prompt-card {
+    padding: $jv-space-3;
+    border-radius: $jv-radius-md;
+  }
+
+  .composer-prompt-avatar {
+    .avatar,
+    .avatar-placeholder {
+      width: 40px !important;
+      height: 40px !important;
+    }
+
+    .avatar-placeholder {
+      font-size: 16px;
+    }
+  }
+
+  .composer-prompt-input {
+    padding: $jv-space-2 $jv-space-3;
+    min-height: 40px;
+  }
+
+  .composer-prompt-placeholder {
+    font-size: $jv-font-size-sm;
+  }
+
+  .composer-prompt-actions {
+    display: none; // Hide action buttons on mobile for cleaner UI
+  }
+}
 
 // ===========================================================
 // FEED CONTAINER
@@ -131,22 +302,18 @@
     .overflow-hidden {
       border-radius: $jv-radius-md $jv-radius-md 0 0 !important; // Match card radius
       max-height: 280px !important; // Reduced from 350px - more balanced ratio
+      background: rgba(0, 0, 0, 0.02); // Subtle background for letterboxing
 
       img {
         width: 100%;
         height: 280px; // Fixed height for consistency
-        object-fit: cover;
+        object-fit: contain; // Prevent stretching, maintain aspect ratio
       }
     }
 
-    // Additional thumbnails
+    // Hide additional thumbnails - only show main image in feed
     .position-absolute {
-      padding: $jv-space-4 !important;
-
-      img {
-        border: 2px solid $jv-surface;
-        box-shadow: $jv-shadow-soft;
-      }
+      display: none !important;
     }
   }
 }
@@ -314,6 +481,95 @@
       border-color: $jv-primary !important;
     }
   }
+
+  // ===========================================================
+  // FEED IMAGE CAROUSEL (matching topic page design)
+  // ===========================================================
+  .post-image-carousel {
+    border-radius: $jv-radius-md;
+    overflow: hidden;
+    margin: $jv-space-4 0;
+    background: rgba(0, 0, 0, 0.03);
+
+    .carousel-inner {
+      border-radius: $jv-radius-md;
+    }
+
+    .carousel-item {
+      // Fixed height container to prevent jumping
+      height: 400px;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        background: rgba(0, 0, 0, 0.02);
+      }
+    }
+
+    // Navigation arrows - matching topic page
+    .carousel-control-prev,
+    .carousel-control-next {
+      width: 48px;
+      height: 48px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      opacity: 0;
+      transition: opacity $jv-transition-fast;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.7);
+      }
+
+      .carousel-control-prev-icon,
+      .carousel-control-next-icon {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .carousel-control-prev {
+      left: $jv-space-3;
+    }
+
+    .carousel-control-next {
+      right: $jv-space-3;
+    }
+
+    &:hover {
+      .carousel-control-prev,
+      .carousel-control-next {
+        opacity: 1;
+      }
+    }
+
+    // Indicator dots - matching topic page
+    .carousel-indicators {
+      margin-bottom: $jv-space-3;
+      gap: $jv-space-2;
+
+      button {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.5);
+        border: none;
+        opacity: 1;
+        transition: background-color $jv-transition-fast, transform $jv-transition-fast;
+
+        &.active {
+          background: #fff;
+          transform: scale(1.2);
+        }
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.8);
+        }
+      }
+    }
+  }
 }
 
 // ===========================================================

package/scss/_sidebar.scss

@@ -504,7 +504,7 @@ div[data-widget-area="right"],
 
   // Sticky positioning - stays visible when scrolling
   position: sticky;
-  top: 48px; // Adjust based on your header height
+  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