@okjavis/nodebb-theme-javis 3.0.9 → 4.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okjavis/nodebb-theme-javis",
-  "version": "3.0.9",
+  "version": "4.0.2",
   "description": "Modern, premium NodeBB theme for JAVIS Community - Extends Harmony with custom styling",
   "main": "theme.js",
   "scripts": {

package/scss/_composer.scss

@@ -406,6 +406,7 @@ html.composing .composer .formatting-bar {
   margin: 0 !important;
   flex-shrink: 0 !important;
   gap: $jv-space-3 !important;
+  overflow: visible !important; // Allow dropdowns to show
 }
 
 html.composing .composer .formatting-group {
@@ -413,8 +414,7 @@ html.composing .composer .formatting-group {
   align-items: center !important;
   gap: 2px !important;
   flex-wrap: nowrap !important;
-  overflow-x: auto !important;
-  overflow-y: visible !important; // Allow badges to overflow vertically
+  overflow: visible !important; // Allow dropdowns to show
   padding-top: 8px !important; // Space for badges that overflow upward
 
   li {
@@ -456,6 +456,22 @@ html.composing .composer .formatting-group {
         line-height: 16px !important;
       }
     }
+
+    // Dropdown containers (like Heading dropdown)
+    &.dropdown,
+    &.bottom-sheet {
+      overflow: visible !important;
+      position: relative !important;
+
+      .dropdown-menu {
+        position: absolute !important;
+        top: 100% !important;
+        left: 0 !important;
+        min-width: 150px !important;
+        z-index: 9999 !important;
+        margin-top: 2px !important;
+      }
+    }
   }
 
   .spacer {

package/scss/_feed.scss

@@ -315,7 +315,7 @@
 .feed li[component="post"].posts-list-item {
   background: $jv-surface !important;
   border: 1px solid $jv-border-subtle !important;
-  border-radius: $jv-radius-sm !important;
+  border-radius: $jv-radius-lg !important; // Match composer and widgets (16px)
   margin-bottom: $jv-space-2 !important;
   box-shadow: $jv-shadow-sm !important;
   overflow: hidden !important;
@@ -657,7 +657,7 @@
   // Action bar - now a direct child of the post card
   .feed-action-bar {
     background: $jv-surface !important;
-    border-radius: 0 0 $jv-radius-sm $jv-radius-sm; // Match card's bottom corners
+    border-radius: 0 0 $jv-radius-lg $jv-radius-lg; // Match card's bottom corners (16px)
 
     .btn-link {
       display: inline-flex;

package/scss/_forms.scss

@@ -116,9 +116,15 @@ textarea {
 
     i {
       width: 16px;
+      flex-shrink: 0;
       color: $jv-text-muted;
     }
 
+    // Hide bookmark option from dropdown menu
+    &[component="post/bookmark"] {
+      display: none !important;
+    }
+
     &:hover {
       background: rgba(0, 81, 255, 0.06);
       color: $jv-primary;

package/templates/feed.tpl

@@ -94,14 +94,13 @@
 					{{{ end }}}
 
 					<!-- 3. ACTION BAR (third - separated from content) -->
+					<!-- Order: Likes, Comments, Share -->
 					<div class="feed-action-bar d-flex justify-content-between px-3 py-2 border-top">
-						<a href="{config.relative_path}/post/{{{ if ./topic.teaserPid }}}{./topic.teaserPid}{{{ else }}}{./pid}{{{ end }}}" class="btn btn-link btn-sm text-body {{{ if !./isMainPost }}}invisible{{{ end }}}"><i class="fa-fw fa-regular fa-message text-muted"></i> {humanReadableNumber(./topic.postcount)}</a>
-
-						<a href="#" data-pid="{./pid}" data-action="bookmark" data-bookmarked="{./bookmarked}" data-bookmarks="{./bookmarks}" class="btn btn-link btn-sm text-body"><i class="fa-fw fa-bookmark {{{ if ./bookmarked }}}fa text-primary{{{ else }}}fa-regular text-muted{{{ end }}}"></i> <span component="bookmark-count">{humanReadableNumber(./bookmarks)}</span></a>
-
 						<a href="#" data-pid="{./pid}" data-action="upvote" data-upvoted="{./upvoted}" data-upvotes="{./upvotes}" class="btn btn-link btn-sm text-body"><i class="fa-fw fa-heart {{{ if ./upvoted }}}fa text-danger{{{ else }}}fa-regular text-muted{{{ end }}}"></i> <span component="upvote-count">{humanReadableNumber(./upvotes)}</span></a>
 
-						<a href="#" data-pid="{./pid}" data-is-main="{./isMainPost}" data-tid="{./tid}" data-action="reply" class="btn btn-link btn-sm text-body"><i class="fa-fw fa fa-reply text-muted"></i> [[topic:reply]]</a>
+						<a href="{config.relative_path}/post/{{{ if ./topic.teaserPid }}}{./topic.teaserPid}{{{ else }}}{./pid}{{{ end }}}" class="btn btn-link btn-sm text-body {{{ if !./isMainPost }}}invisible{{{ end }}}"><i class="fa-fw fa-regular fa-message text-muted"></i> {humanReadableNumber(./topic.postcount)}</a>
+
+						<a href="#" data-pid="{./pid}" component="share/linkedin" class="btn btn-link btn-sm text-body"><i class="fa-fw fa-brands fa-linkedin text-muted"></i> [[topic:share]]</a>
 					</div>
 				</li>
 				{{{ end }}}
@@ -121,3 +120,11 @@
 	{{widgets.footer.html}}
 	{{{end}}}
 </div>
+
+<script>
+$(document).ready(function() {
+	require(['share'], function(share) {
+		share.addShareHandlers('{title}');
+	});
+});
+</script>

package/templates/partials/account/sidebar-left.tpl

@@ -0,0 +1,122 @@
+<div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
+	<div class="sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem;z-index: 1;">
+		<a href="{config.relative_path}/user/{userslug}" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold {{{ if template.account/profile }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[global:about]]</div>
+		</a>
+
+		<a href="{config.relative_path}/user/{userslug}/posts"class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/posts }}}active{{{ end }}}
+			{{{ if template.account/best }}}active{{{ end }}}
+			{{{ if template.account/controversial }}}active{{{ end }}}
+			{{{ if template.account/upvoted }}}active{{{ end }}}
+			{{{ if template.account/downvoted }}}active{{{ end }}}
+			{{{ if template.account/bookmarks }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[global:posts]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.posts}">{humanReadableNumber(counts.posts)}</span>
+		</a>
+
+		<a href="{config.relative_path}/user/{userslug}/topics" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/topics }}}active{{{ end }}}
+			{{{ if template.account/watched }}}active{{{ end }}}
+			{{{ if template.account/ignored }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[global:topics]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.topics}">{humanReadableNumber(counts.topics)}</span>
+		</a>
+
+		<a href="{config.relative_path}/user/{userslug}/shares" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/shares }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[user:shares]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.shares}">{humanReadableNumber(counts.shares)}</span>
+		</a>
+
+		<a href="{config.relative_path}/user/{userslug}/groups" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/groups }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[global:header.groups]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.groups}">{humanReadableNumber(counts.groups)}</span>
+		</a>
+
+		<a href="{config.relative_path}/user/{userslug}/followers" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/followers }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[user:followers]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.followers}">{humanReadableNumber(counts.followers)}</span>
+		</a>
+
+		<a href="{config.relative_path}/user/{userslug}/following" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/following }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[user:following]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.following}">{humanReadableNumber(counts.following)}</span>
+		</a>
+
+		{{{ if canEdit }}}
+		<a href="{config.relative_path}/user/{userslug}/categories" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/categories }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[user:watched-categories]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span>
+		</a>
+		{{{ if isSelf }}}
+		<a href="{config.relative_path}/user/{userslug}/tags" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/tags }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[user:watched-tags]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.tagsWatched}">{counts.tagsWatched}</span>
+		</a>
+		{{{ end }}}
+
+		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/blocks }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[user:blocked-users]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.blocks}">{humanReadableNumber(counts.blocks)}</span>
+		</a>
+
+		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
+			{{{ if template.account/uploads }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[global:uploads]]</div>
+			<span class="flex-shrink-0 text-xs" title="{counts.uploaded}">{humanReadableNumber(counts.uploaded)}</span>
+		</a>
+		{{{ end }}}
+
+		{{{ if remoteUrl }}}
+		<hr class="w-100 my-2"/>
+
+		<a href="{remoteUrl}" target="_self" component="account/view-remote" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start">
+			<i class="flex-shrink-0 fa-solid fa-globe"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:view-remote]]</div>
+		</a>
+		{{{ end }}}
+
+
+		{{{ if (loggedIn && (!isSelf && !banned)) }}}
+		<hr class="w-100 my-2"/>
+
+		<a href="#" component="account/flag" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{if flagId }}}hidden{{{end}}}">
+			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:flag-profile]]</div>
+		</a>
+		<a href="#" component="account/already-flagged" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{if !flagId }}}hidden{{{end}}}" data-flag-id="{flagId}">
+			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:profile-flagged]]</div>
+		</a>
+		<a href="#" component="account/block" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{ if isBlocked }}}hidden{{{ end }}}">
+			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:block-user]]</div>
+		</a>
+		<a href="#" component="account/unblock" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{ if !isBlocked }}}hidden{{{ end }}}">
+			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
+			<div class="flex-grow-1 text-nowrap">[[user:unblock-user]]</div>
+		</a>
+		{{{ end }}}
+
+		{{{ if canEdit }}}
+		<hr class="w-100 my-2"/>
+		<a href="{config.relative_path}/user/{userslug}/edit" class="btn btn-ghost btn-sm ff-secondary text-xs text-start
+		{{{ if template.account/edit }}}active{{{ end }}}">
+			<div class="flex-grow-1">[[user:edit-profile]]</div>
+		</a>
+		{{{ end }}}
+
+		{{{ each profile_links }}}
+		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn btn-ghost btn-sm ff-secondary text-xs text-start plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
+			<div class="flex-grow-1">{./name}</div>
+		</a>
+		{{{end}}}
+	</div>
+</div>