nodebb-theme-harmony 1.2.80 → 1.2.82

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nodebb-theme-harmony",
3
- "version": "1.2.80",
3
+ "version": "1.2.82",
4
4
  "nbbpm": {
5
5
  "compatibility": "^3.7.0"
6
6
  },
package/scss/harmony.scss CHANGED
@@ -15,7 +15,6 @@
15
15
  @import "modules/breadcrumbs";
16
16
  @import "modules/tags";
17
17
  @import "modules/user-menu";
18
- @import "modules/bottom-sheet";
19
18
  @import "modules/topic-navigator";
20
19
  @import "modules/topics-list";
21
20
  @import "modules/cover";
@@ -1,7 +1,7 @@
1
1
  ul.topics-list, ul.categories-list {
2
2
  li {
3
3
  &.deleted {
4
- .meta, .topic-thumbs { display: none!important; }
4
+ .meta, .topic-thumbs { visibility: hidden!important; }
5
5
  opacity: 0.65;
6
6
  }
7
7
 
package/scss/topic.scss CHANGED
@@ -9,11 +9,6 @@ body.template-topic {
9
9
  }
10
10
 
11
11
  .posts {
12
- // fixes code blocks pushing content out on mobile
13
- @include media-breakpoint-down(md) {
14
- max-width: calc(100vw - $grid-gutter-width);
15
- }
16
-
17
12
  &.timeline {
18
13
  @include timeline-style;
19
14
  }
@@ -27,10 +22,6 @@ body.template-topic {
27
22
  }
28
23
  }
29
24
 
30
- > [component="post"] > [component="post/footer"] {
31
- margin-left: calc($spacer * 2.5);
32
- }
33
-
34
25
  [component="post"] {
35
26
  &.selected .post-container {
36
27
  background-color: mix($body-bg, $body-color, 90%);
@@ -101,6 +92,7 @@ body.template-topic {
101
92
  &:last-of-type {
102
93
  padding-bottom: 0;
103
94
  .post-footer {
95
+ padding-bottom: 0!important;
104
96
  border-bottom: none !important;
105
97
  }
106
98
  }
@@ -113,7 +105,7 @@ body.template-topic {
113
105
  }
114
106
  }
115
107
 
116
- @include media-breakpoint-up(sm) {
108
+ @include media-breakpoint-up(lg) {
117
109
  body.template-topic {
118
110
  .topic .posts {
119
111
  [component="post"] {
@@ -129,7 +121,7 @@ body.template-topic {
129
121
  opacity: 1;
130
122
  }
131
123
  &:hover {
132
- > .post-footer > [component="post/actions"] {
124
+ > div > .post-container > [component="post/footer"] > div > [component="post/actions"] {
133
125
  opacity: 1;
134
126
  }
135
127
  }
@@ -12,112 +12,114 @@
12
12
  <span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
13
13
  </a>
14
14
  </div>
15
- <div class="post-container d-flex flex-grow-1 flex-column w-100" style="min-width:0;">
16
- <div class="d-flex align-items-center gap-1 flex-wrap w-100 post-header mt-1" itemprop="author" itemscope itemtype="https://schema.org/Person">
17
- <meta itemprop="name" content="{./user.username}">
18
- {{{ if ./user.userslug }}}<meta itemprop="url" content="{config.relative_path}/user/{./user.userslug}">{{{ end }}}
19
-
20
- <div class="bg-body d-sm-none">
21
- <a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
22
- {buildAvatar(posts.user, "20px", true, "", "user/picture")}
23
- <span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
24
- </a>
25
- </div>
26
-
27
- <a class="fw-bold text-nowrap" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
28
-
29
- {{{ each posts.user.selectedGroups }}}
30
- {{{ if posts.user.selectedGroups.slug }}}
31
- <!-- IMPORT partials/groups/badge.tpl -->
32
- {{{ end }}}
33
- {{{ end }}}
34
-
35
- {{{ if posts.user.banned }}}
36
- <span class="badge bg-danger rounded-1">[[user:banned]]</span>
37
- {{{ end }}}
38
-
39
- <div class="d-flex gap-1 align-items-center">
40
- <span class="text-muted">{generateWroteReplied(@value, config.timeagoCutoff)}</span>
15
+ <div class="post-container d-flex gap-2 flex-grow-1 flex-column w-100" style="min-width:0;">
16
+ <div class="d-flex align-items-start justify-content-between gap-1 flex-nowrap w-100 post-header" itemprop="author" itemscope itemtype="https://schema.org/Person">
17
+ <div class="d-flex gap-1 flex-wrap align-items-center">
18
+ <meta itemprop="name" content="{./user.username}">
19
+ {{{ if ./user.userslug }}}<meta itemprop="url" content="{config.relative_path}/user/{./user.userslug}">{{{ end }}}
20
+
21
+ <div class="bg-body d-sm-none">
22
+ <a class="d-inline-block position-relative text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
23
+ {buildAvatar(posts.user, "20px", true, "", "user/picture")}
24
+ <span component="user/status" class="position-absolute translate-middle-y border border-white border-2 rounded-circle status {posts.user.status}"><span class="visually-hidden">[[global:{posts.user.status}]]</span></span>
25
+ </a>
26
+ </div>
27
+
28
+ <a class="fw-bold text-nowrap" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}" data-username="{posts.user.username}" data-uid="{posts.user.uid}">{posts.user.displayname}</a>
29
+
30
+ {{{ each posts.user.selectedGroups }}}
31
+ {{{ if posts.user.selectedGroups.slug }}}
32
+ <!-- IMPORT partials/groups/badge.tpl -->
33
+ {{{ end }}}
34
+ {{{ end }}}
41
35
 
42
- <i component="post/edit-indicator" class="fa fa-edit text-muted{{{ if privileges.posts:history }}} pointer{{{ end }}} edit-icon {{{ if !posts.editor.username }}}hidden{{{ end }}}" title="[[global:edited-timestamp, {isoTimeToLocaleString(./editedISO, config.userLang)}]]"></i>
43
- <span data-editor="{posts.editor.userslug}" component="post/editor" class="visually-hidden">[[global:last-edited-by, {posts.editor.username}]] <span class="timeago" title="{isoTimeToLocaleString(posts.editedISO, config.userLang)}"></span></span>
44
- </div>
36
+ {{{ if posts.user.banned }}}
37
+ <span class="badge bg-danger rounded-1">[[user:banned]]</span>
38
+ {{{ end }}}
45
39
 
46
- {{{ if posts.user.custom_profile_info.length }}}
47
- <div>
48
- <span>
49
- &#124;
50
- {{{ each posts.user.custom_profile_info }}}
51
- {posts.user.custom_profile_info.content}
52
- {{{ end }}}
53
- </span>
40
+ <div class="d-flex gap-1 align-items-center">
41
+ <span class="text-muted">{generateWroteReplied(@value, config.timeagoCutoff)}</span>
42
+
43
+ <i component="post/edit-indicator" class="fa fa-edit text-muted{{{ if privileges.posts:history }}} pointer{{{ end }}} edit-icon {{{ if !posts.editor.username }}}hidden{{{ end }}}" title="[[global:edited-timestamp, {isoTimeToLocaleString(./editedISO, config.userLang)}]]"></i>
44
+ <span data-editor="{posts.editor.userslug}" component="post/editor" class="visually-hidden">[[global:last-edited-by, {posts.editor.username}]] <span class="timeago" title="{isoTimeToLocaleString(posts.editedISO, config.userLang)}"></span></span>
45
+ </div>
46
+
47
+ {{{ if posts.user.custom_profile_info.length }}}
48
+ <div>
49
+ <span>
50
+ &#124;
51
+ {{{ each posts.user.custom_profile_info }}}
52
+ {posts.user.custom_profile_info.content}
53
+ {{{ end }}}
54
+ </span>
55
+ </div>
56
+ {{{ end }}}
54
57
  </div>
55
- {{{ end }}}
56
- <div class="d-flex align-items-center gap-1 flex-grow-1 justify-content-end">
58
+ <div class="d-flex align-items-center gap-1 justify-content-end">
57
59
  <span class="bookmarked opacity-0 text-primary"><i class="fa fa-bookmark-o"></i></span>
58
60
  <a href="{config.relative_path}/post/{./pid}" class="post-index text-muted d-none d-md-inline">#{increment(./index, "1")}</a>
59
61
  </div>
60
62
  </div>
61
63
 
62
- <div class="content mt-2 text-break" component="post/content" itemprop="text">
64
+ <div class="content text-break" component="post/content" itemprop="text">
63
65
  {posts.content}
64
66
  </div>
65
- </div>
66
- </div>
67
67
 
68
- <div component="post/footer" class="post-footer border-bottom pb-2">
69
- {{{ if posts.user.signature }}}
70
- <div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{posts.user.signature}</div>
71
- {{{ end }}}
68
+ <div component="post/footer" class="post-footer border-bottom pb-2">
69
+ {{{ if posts.user.signature }}}
70
+ <div component="post/signature" data-uid="{posts.user.uid}" class="text-xs text-muted mt-2">{posts.user.signature}</div>
71
+ {{{ end }}}
72
72
 
73
- <div class="d-flex">
74
- {{{ if !hideReplies }}}
75
- <a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center mt-2 btn btn-ghost ff-secondary border rounded-1 p-1 text-muted text-decoration-none text-xs {{{ if (!./replies || shouldHideReplyContainer(@value)) }}}hidden{{{ end }}}">
76
- <span component="post/reply-count/avatars" class="d-flex gap-1 {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
77
- {{{each posts.replies.users}}}
78
- <span>{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}</span>
79
- {{{end}}}
80
- {{{ if posts.replies.hasMore}}}
81
- <span style="height: 20px; line-height: 20px;"><i class="fa fa-ellipsis"></i></span>
73
+ <div class="d-flex flex-wrap {{{ if (hideReplies || !posts.replies.count) }}}justify-content-end{{{ else }}}justify-content-between{{{ end }}}">
74
+ {{{ if !hideReplies }}}
75
+ <a component="post/reply-count" data-target-component="post/replies/container" href="#" class="d-flex gap-2 align-items-center btn btn-ghost ff-secondary border rounded-1 p-1 text-muted text-decoration-none text-xs {{{ if (!./replies || shouldHideReplyContainer(@value)) }}}hidden{{{ end }}}">
76
+ <span component="post/reply-count/avatars" class="d-flex gap-1 {{{ if posts.replies.hasMore }}}hasMore{{{ end }}}">
77
+ {{{each posts.replies.users}}}
78
+ <span>{buildAvatar(posts.replies.users, "20px", true, "avatar-tooltip")}</span>
79
+ {{{end}}}
80
+ {{{ if posts.replies.hasMore}}}
81
+ <span style="height: 20px; line-height: 20px;"><i class="fa fa-ellipsis"></i></span>
82
+ {{{ end }}}
83
+ </span>
84
+
85
+ <span class="ms-2 replies-count fw-semibold text-nowrap" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
86
+ <span class="ms-2 replies-last hidden-xs fw-semibold">[[topic:last-reply-time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
87
+
88
+ <i class="fa fa-fw fa-chevron-down" component="post/replies/open"></i>
89
+ </a>
82
90
  {{{ end }}}
83
- </span>
84
-
85
- <span class="ms-2 replies-count fw-semibold" component="post/reply-count/text" data-replies="{posts.replies.count}">{posts.replies.text}</span>
86
- <span class="ms-2 replies-last hidden-xs fw-semibold">[[topic:last-reply-time]] <span class="timeago" title="{posts.replies.timestampISO}"></span></span>
87
-
88
- <i class="fa fa-fw fa-chevron-down" component="post/replies/open"></i>
89
- </a>
90
- {{{ end }}}
91
- </div>
92
-
93
- <div component="post/replies/container" class="my-2 col-11 border rounded-1 p-3 hidden-empty"></div>
94
-
95
- <div component="post/actions" class="d-flex justify-content-end gap-1 post-tools">
96
- <!-- IMPORT partials/topic/reactions.tpl -->
97
- <a component="post/reply" href="#" class="btn btn-ghost btn-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:reply]]"><i class="fa fa-fw fa-reply text-primary"></i></a>
98
- <a component="post/quote" href="#" class="btn btn-ghost btn-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:quote]]"><i class="fa fa-fw fa-quote-right text-primary"></i></a>
99
-
100
- {{{ if !reputation:disabled }}}
101
- <div class="d-flex votes align-items-center">
102
- <a component="post/upvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.upvoted }}} upvoted{{{ end }}}" title="[[topic:upvote-post]]">
103
- <i class="fa fa-fw fa-chevron-up text-primary"></i>
104
- </a>
91
+ <div component="post/actions" class="d-flex flex-grow-1 justify-content-end gap-1 post-tools">
92
+ <!-- IMPORT partials/topic/reactions.tpl -->
93
+ <a component="post/reply" href="#" class="btn btn-ghost btn-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:reply]]"><i class="fa fa-fw fa-reply text-primary"></i></a>
94
+ <a component="post/quote" href="#" class="btn btn-ghost btn-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:quote]]"><i class="fa fa-fw fa-quote-right text-primary"></i></a>
95
+
96
+ {{{ if !reputation:disabled }}}
97
+ <div class="d-flex votes align-items-center">
98
+ <a component="post/upvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.upvoted }}} upvoted{{{ end }}}" title="[[topic:upvote-post]]">
99
+ <i class="fa fa-fw fa-chevron-up text-primary"></i>
100
+ </a>
101
+
102
+ <meta itemprop="upvoteCount" content="{posts.upvotes}">
103
+ <meta itemprop="downvoteCount" content="{posts.downvotes}">
104
+ <a href="#" class="px-2 mx-1 btn btn-ghost btn-sm" component="post/vote-count" data-votes="{posts.votes}" title="[[global:voters]]">{posts.votes}</a>
105
+
106
+ {{{ if !downvote:disabled }}}
107
+ <a component="post/downvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.downvoted }}} downvoted{{{ end }}}" title="[[topic:downvote-post]]">
108
+ <i class="fa fa-fw fa-chevron-down text-primary"></i>
109
+ </a>
110
+ {{{ end }}}
111
+ </div>
112
+ {{{ end }}}
105
113
 
106
- <meta itemprop="upvoteCount" content="{posts.upvotes}">
107
- <meta itemprop="downvoteCount" content="{posts.downvotes}">
108
- <a href="#" class="px-2 mx-1 btn btn-ghost btn-sm" component="post/vote-count" data-votes="{posts.votes}" title="[[global:voters]]">{posts.votes}</a>
114
+ <!-- IMPORT partials/topic/post-menu.tpl -->
115
+ </div>
116
+ </div>
109
117
 
110
- {{{ if !downvote:disabled }}}
111
- <a component="post/downvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.downvoted }}} downvoted{{{ end }}}" title="[[topic:downvote-post]]">
112
- <i class="fa fa-fw fa-chevron-down text-primary"></i>
113
- </a>
114
- {{{ end }}}
118
+ <div component="post/replies/container" class="my-2 col-11 border rounded-1 p-3 hidden-empty"></div>
115
119
  </div>
116
- {{{ end }}}
117
-
118
- <!-- IMPORT partials/topic/post-menu.tpl -->
119
120
  </div>
120
121
  </div>
122
+
121
123
  {{{ if (!./index && widgets.mainpost-footer.length) }}}
122
124
  <div data-widget-area="mainpost-footer">
123
125
  {{{ each widgets.mainpost-footer }}}
@@ -1,52 +0,0 @@
1
- .bottom-sheet {
2
- @include media-breakpoint-down(md) {
3
- .dropdown-menu {
4
- display: block;
5
- visibility: hidden;
6
-
7
- position: fixed!important;
8
- inset: auto 0 0 0!important;
9
-
10
- margin: 0 -1px -1px -1px;
11
- padding: $spacer * 0.25 !important;
12
- max-height: 60%;
13
-
14
- box-shadow: 0 2px 6px rgba(0,0,0,0.35);
15
- overflow: auto;
16
- -webkit-overflow-scrolling: touch;
17
- transform: translate3d(0, 350px, 0);
18
- transition: transform 0.3s, visibility 0s 0.3s;
19
- z-index: $zindex-popover;
20
- padding: 5px 0 10px;
21
-
22
- border-radius: 0;
23
- border: 0px;
24
- border-top: 1px solid $border-color;
25
-
26
- > li {
27
- > a, .dropdown-item {
28
- padding: 10px 20px;
29
- overflow: hidden;
30
- text-overflow: ellipsis;
31
- white-space: nowrap;
32
- }
33
-
34
- &.divider {
35
- padding: 0;
36
- }
37
- }
38
- }
39
-
40
- .dropdown-menu.show {
41
- transform: none!important;
42
- visibility: visible;
43
- transition-delay: 0s;
44
- top: auto;
45
- width: auto;
46
- }
47
-
48
- .dropdown-backdrop {
49
- background-color: rgba(0, 0, 0, .3);
50
- }
51
- }
52
- }