nodebb-theme-harmony 2.0.1 → 2.0.2

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.
Files changed (144) hide show
  1. package/.eslintrc +3 -3
  2. package/README.md +22 -22
  3. package/lib/controllers.js +29 -29
  4. package/library.js +183 -183
  5. package/package.json +48 -48
  6. package/plugin.json +24 -24
  7. package/public/.eslintrc +3 -3
  8. package/public/admin.js +15 -15
  9. package/public/harmony.js +287 -287
  10. package/public/settings.js +31 -31
  11. package/renovate.json +6 -6
  12. package/scss/account.scss +27 -27
  13. package/scss/category.scss +3 -3
  14. package/scss/chats.scss +11 -11
  15. package/scss/common.scss +122 -122
  16. package/scss/fonts.scss +19 -19
  17. package/scss/groups.scss +22 -22
  18. package/scss/harmony.scss +24 -24
  19. package/scss/header.scss +15 -15
  20. package/scss/mixins.scss +183 -183
  21. package/scss/modals.scss +6 -6
  22. package/scss/modules/breadcrumbs.scss +15 -15
  23. package/scss/modules/cover.scss +102 -102
  24. package/scss/modules/filters.scss +7 -7
  25. package/scss/modules/nprogress.scss +80 -80
  26. package/scss/modules/paginator.scss +23 -23
  27. package/scss/modules/tags.scss +5 -5
  28. package/scss/modules/topic-navigator.scss +52 -52
  29. package/scss/modules/topics-list.scss +40 -40
  30. package/scss/modules/user-menu.scss +10 -10
  31. package/scss/overrides.scss +65 -65
  32. package/scss/sidebar.scss +188 -188
  33. package/scss/skins.scss +58 -58
  34. package/scss/status.scss +24 -24
  35. package/scss/topic.scss +130 -130
  36. package/templates/account/blocks.tpl +51 -51
  37. package/templates/account/categories.tpl +63 -63
  38. package/templates/account/consent.tpl +73 -73
  39. package/templates/account/edit/password.tpl +34 -34
  40. package/templates/account/edit/username.tpl +29 -29
  41. package/templates/account/edit.tpl +137 -137
  42. package/templates/account/followers.tpl +14 -14
  43. package/templates/account/following.tpl +15 -15
  44. package/templates/account/groups.tpl +15 -15
  45. package/templates/account/info.tpl +270 -270
  46. package/templates/account/posts.tpl +35 -35
  47. package/templates/account/profile.tpl +92 -92
  48. package/templates/account/sessions.tpl +8 -8
  49. package/templates/account/settings.tpl +236 -236
  50. package/templates/account/shares.tpl +19 -19
  51. package/templates/account/tags.tpl +12 -12
  52. package/templates/account/theme.tpl +63 -63
  53. package/templates/account/topics.tpl +44 -44
  54. package/templates/account/uploads.tpl +37 -37
  55. package/templates/admin/plugins/harmony.tpl +57 -57
  56. package/templates/categories.tpl +29 -29
  57. package/templates/category.tpl +72 -72
  58. package/templates/footer.tpl +17 -17
  59. package/templates/groups/details.tpl +86 -86
  60. package/templates/groups/list.tpl +58 -58
  61. package/templates/groups/members.tpl +9 -9
  62. package/templates/header.tpl +45 -45
  63. package/templates/notifications.tpl +32 -32
  64. package/templates/partials/account/admin-menu.tpl +36 -36
  65. package/templates/partials/account/category-item.tpl +22 -22
  66. package/templates/partials/account/footer.tpl +2 -2
  67. package/templates/partials/account/header.tpl +98 -98
  68. package/templates/partials/account/session-list.tpl +18 -18
  69. package/templates/partials/account/sidebar-left.tpl +116 -116
  70. package/templates/partials/breadcrumbs-json-ld.tpl +15 -15
  71. package/templates/partials/breadcrumbs.tpl +12 -12
  72. package/templates/partials/buttons/newTopic.tpl +22 -22
  73. package/templates/partials/categories/item.tpl +56 -56
  74. package/templates/partials/categories/lastpost.tpl +24 -24
  75. package/templates/partials/categories/link.tpl +4 -4
  76. package/templates/partials/category/subcategory.tpl +18 -18
  77. package/templates/partials/category/tags.tpl +3 -3
  78. package/templates/partials/cookie-consent.tpl +6 -6
  79. package/templates/partials/groups/admin.tpl +95 -95
  80. package/templates/partials/groups/invited.tpl +32 -32
  81. package/templates/partials/groups/list.tpl +15 -15
  82. package/templates/partials/groups/memberlist.tpl +46 -46
  83. package/templates/partials/groups/pending.tpl +29 -29
  84. package/templates/partials/groups/sidebar-left.tpl +27 -27
  85. package/templates/partials/header/brand.tpl +27 -27
  86. package/templates/partials/mobile-footer.tpl +95 -95
  87. package/templates/partials/notifications_list.tpl +44 -44
  88. package/templates/partials/paginator.tpl +46 -46
  89. package/templates/partials/post_bar.tpl +27 -27
  90. package/templates/partials/posts_list.tpl +7 -7
  91. package/templates/partials/posts_list_item.tpl +19 -19
  92. package/templates/partials/quick-search-results.tpl +46 -46
  93. package/templates/partials/search-filters.tpl +183 -183
  94. package/templates/partials/search-results.tpl +54 -54
  95. package/templates/partials/sidebar/chats.tpl +45 -45
  96. package/templates/partials/sidebar/drafts.tpl +63 -63
  97. package/templates/partials/sidebar/logged-in-menu.tpl +22 -22
  98. package/templates/partials/sidebar/logged-out-menu.tpl +44 -44
  99. package/templates/partials/sidebar/notifications.tpl +49 -49
  100. package/templates/partials/sidebar/search-mobile.tpl +28 -28
  101. package/templates/partials/sidebar/search.tpl +30 -30
  102. package/templates/partials/sidebar/user-menu.tpl +103 -103
  103. package/templates/partials/sidebar-left.tpl +39 -39
  104. package/templates/partials/sidebar-right.tpl +16 -16
  105. package/templates/partials/skin-switcher.tpl +50 -50
  106. package/templates/partials/tags_list.tpl +7 -7
  107. package/templates/partials/toast.tpl +19 -19
  108. package/templates/partials/topic/event.tpl +12 -12
  109. package/templates/partials/topic/navigation-post.tpl +9 -9
  110. package/templates/partials/topic/navigator-mobile.tpl +61 -61
  111. package/templates/partials/topic/navigator.tpl +26 -26
  112. package/templates/partials/topic/necro-post.tpl +5 -5
  113. package/templates/partials/topic/post-menu-list.tpl +156 -156
  114. package/templates/partials/topic/post-menu.tpl +4 -4
  115. package/templates/partials/topic/post-placeholder.tpl +14 -14
  116. package/templates/partials/topic/post.tpl +146 -146
  117. package/templates/partials/topic/quickreply.tpl +28 -28
  118. package/templates/partials/topic/reply-button.tpl +26 -26
  119. package/templates/partials/topic/selection-tooltip.tpl +2 -2
  120. package/templates/partials/topic/sort.tpl +27 -27
  121. package/templates/partials/topic/stats.tpl +14 -14
  122. package/templates/partials/topic/thumbs.tpl +4 -4
  123. package/templates/partials/topic/tools.tpl +8 -8
  124. package/templates/partials/topic/topic-menu-list.tpl +73 -73
  125. package/templates/partials/topic/watch.tpl +59 -59
  126. package/templates/partials/topic-filters.tpl +15 -15
  127. package/templates/partials/topic-list-bar.tpl +54 -54
  128. package/templates/partials/topic-terms.tpl +15 -15
  129. package/templates/partials/topics_list.tpl +131 -131
  130. package/templates/partials/users/item.tpl +39 -39
  131. package/templates/partials/users_list.tpl +4 -4
  132. package/templates/partials/users_list_menu.tpl +14 -14
  133. package/templates/popular.tpl +34 -34
  134. package/templates/post-queue.tpl +211 -211
  135. package/templates/recent.tpl +42 -42
  136. package/templates/search.tpl +46 -46
  137. package/templates/tag.tpl +34 -34
  138. package/templates/tags.tpl +49 -49
  139. package/templates/top.tpl +34 -34
  140. package/templates/topic.tpl +123 -123
  141. package/templates/unread.tpl +31 -31
  142. package/templates/users.tpl +39 -39
  143. package/templates/world.tpl +66 -66
  144. package/theme.json +6 -6
package/scss/mixins.scss CHANGED
@@ -1,184 +1,184 @@
1
- @mixin topic-avatars() {
2
- .icon .avatar, .timeline-badge {
3
- z-index: 1;
4
-
5
- line-height: calc(var(--avatar-size) - 4px);
6
- }
7
-
8
- [component="user/locality"] {
9
- transform: translate(-75%, -100%);
10
- z-index: 2;
11
- background-color: $body-bg;
12
- font-size: .5rem;
13
- }
14
-
15
- [component="user/status"] {
16
- transform: translate(-80%, -100%);
17
- z-index: 2;
18
- }
19
-
20
- @include media-breakpoint-up(sm) {
21
- [component="user/status"] {
22
- padding: 5px;
23
- }
24
-
25
- [component="user/locality"] {
26
- font-size: .75rem;
27
- }
28
- }
29
- }
30
-
31
- @mixin timeline-style() {
32
- > [component="post"], .timeline-event, > [component="post/placeholder"] {
33
- position: relative; // for absolutely positioned pseudo-element, below
34
- border: 0;
35
- margin-left: 1.5rem;
36
- transition: border-color 1s ease-out;
37
-
38
- &:first-child {
39
- &:before {
40
- content: '';
41
- position: absolute;
42
- top: 0;
43
- height: 16px;
44
- width: 16px;
45
- background-color: $border-color;
46
- border-radius: 100%;
47
- transform: translate(calc(-50% - .5px), -100%);
48
- transition: background-color 1s ease-out;
49
- }
50
-
51
- &.highlight:before {
52
- background-color: $primary;
53
- }
54
- }
55
-
56
- &:last-child {
57
- padding-bottom: 2rem;
58
-
59
- &:after {
60
- content: '';
61
- position: absolute;
62
- bottom: 0;
63
- height: 16px;
64
- width: 16px;
65
- background-color: $border-color;
66
- border-radius: 100%;
67
- transform: translate(calc(-50% - .5px), 100%);
68
- transition: background-color 1s ease-out;
69
- }
70
-
71
- &.highlight:after {
72
- background-color: $primary;
73
- }
74
- }
75
-
76
- > div:first-of-type {
77
- margin-left: -1.5rem;
78
- }
79
-
80
- &.highlight {
81
- .bookmarked {
82
- opacity: 1 !important;
83
- }
84
- }
85
-
86
- @include topic-avatars();
87
- }
88
-
89
- [component="topic/event"], [component="topic/necro-post"] {
90
- &.timeline-event {
91
- text-align: left;
92
- justify-content: left;
93
- font-size: 1em;
94
-
95
- .timeline-badge {
96
- display: flex;
97
- align-items: center;
98
- justify-content: center;
99
- flex-shrink: 0;
100
-
101
- width: 20px;
102
- height: 20px;
103
- padding: 0;
104
- margin-right: 1rem;
105
- color: $gray-500;
106
- background-color: $body-bg;
107
- }
108
-
109
- .timeline-text {
110
- line-height: 32px;
111
- text-transform: initial;
112
- }
113
- }
114
- }
115
-
116
- @include media-breakpoint-down(sm) {
117
- > [component="post"], .timeline-event {
118
- &:first-child:before, &:last-child:after {
119
- display: none;
120
- }
121
- }
122
-
123
- [component="post"] {
124
- margin-left: initial;
125
- > div:not(.content) {
126
- margin-left: 0;
127
- }
128
- }
129
-
130
- [component="post"]:last-child:after {
131
- display: none;
132
- }
133
-
134
-
135
- [component="topic/event"], [component="topic/necro-post"] {
136
- &.timeline-event {
137
- .timeline-text {
138
- line-height: 16px;
139
- font-size: 0.75rem;
140
- }
141
- }
142
- }
143
- }
144
-
145
- @include media-breakpoint-up(sm) {
146
- > [component="post"], .timeline-event, > [component="post/placeholder"] {
147
- border-left: 2px solid $border-color;
148
-
149
- &.highlight {
150
- border-left: 2px solid $primary;
151
- }
152
- }
153
-
154
- .timeline-event {
155
- margin-left: 1.5rem;
156
-
157
- [component="topic/event/delete"] {
158
- visibility: hidden;
159
- }
160
-
161
- &:hover {
162
- [component="topic/event/delete"] {
163
- visibility: visible;
164
-
165
- &:hover {
166
- color: $danger;
167
- }
168
- }
169
- }
170
- }
171
-
172
- [component="topic/event"], [component="topic/necro-post"] {
173
- &.timeline-event .timeline-badge {
174
- width: 24px;
175
- height: 24px;
176
- padding: 0;
177
- margin-left: -0.75rem;
178
- margin-right: 1.25rem;
179
- border: 2px solid $border-color;
180
- border-radius: 50%;
181
- }
182
- }
183
- }
1
+ @mixin topic-avatars() {
2
+ .icon .avatar, .timeline-badge {
3
+ z-index: 1;
4
+
5
+ line-height: calc(var(--avatar-size) - 4px);
6
+ }
7
+
8
+ [component="user/locality"] {
9
+ transform: translate(-75%, -100%);
10
+ z-index: 2;
11
+ background-color: $body-bg;
12
+ font-size: .5rem;
13
+ }
14
+
15
+ [component="user/status"] {
16
+ transform: translate(-80%, -100%);
17
+ z-index: 2;
18
+ }
19
+
20
+ @include media-breakpoint-up(sm) {
21
+ [component="user/status"] {
22
+ padding: 5px;
23
+ }
24
+
25
+ [component="user/locality"] {
26
+ font-size: .75rem;
27
+ }
28
+ }
29
+ }
30
+
31
+ @mixin timeline-style() {
32
+ > [component="post"], .timeline-event, > [component="post/placeholder"] {
33
+ position: relative; // for absolutely positioned pseudo-element, below
34
+ border: 0;
35
+ margin-left: 1.5rem;
36
+ transition: border-color 1s ease-out;
37
+
38
+ &:first-child {
39
+ &:before {
40
+ content: '';
41
+ position: absolute;
42
+ top: 0;
43
+ height: 16px;
44
+ width: 16px;
45
+ background-color: $border-color;
46
+ border-radius: 100%;
47
+ transform: translate(calc(-50% - .5px), -100%);
48
+ transition: background-color 1s ease-out;
49
+ }
50
+
51
+ &.highlight:before {
52
+ background-color: $primary;
53
+ }
54
+ }
55
+
56
+ &:last-child {
57
+ padding-bottom: 2rem;
58
+
59
+ &:after {
60
+ content: '';
61
+ position: absolute;
62
+ bottom: 0;
63
+ height: 16px;
64
+ width: 16px;
65
+ background-color: $border-color;
66
+ border-radius: 100%;
67
+ transform: translate(calc(-50% - .5px), 100%);
68
+ transition: background-color 1s ease-out;
69
+ }
70
+
71
+ &.highlight:after {
72
+ background-color: $primary;
73
+ }
74
+ }
75
+
76
+ > div:first-of-type {
77
+ margin-left: -1.5rem;
78
+ }
79
+
80
+ &.highlight {
81
+ .bookmarked {
82
+ opacity: 1 !important;
83
+ }
84
+ }
85
+
86
+ @include topic-avatars();
87
+ }
88
+
89
+ [component="topic/event"], [component="topic/necro-post"] {
90
+ &.timeline-event {
91
+ text-align: left;
92
+ justify-content: left;
93
+ font-size: 1em;
94
+
95
+ .timeline-badge {
96
+ display: flex;
97
+ align-items: center;
98
+ justify-content: center;
99
+ flex-shrink: 0;
100
+
101
+ width: 20px;
102
+ height: 20px;
103
+ padding: 0;
104
+ margin-right: 1rem;
105
+ color: $gray-500;
106
+ background-color: $body-bg;
107
+ }
108
+
109
+ .timeline-text {
110
+ line-height: 32px;
111
+ text-transform: initial;
112
+ }
113
+ }
114
+ }
115
+
116
+ @include media-breakpoint-down(sm) {
117
+ > [component="post"], .timeline-event {
118
+ &:first-child:before, &:last-child:after {
119
+ display: none;
120
+ }
121
+ }
122
+
123
+ [component="post"] {
124
+ margin-left: initial;
125
+ > div:not(.content) {
126
+ margin-left: 0;
127
+ }
128
+ }
129
+
130
+ [component="post"]:last-child:after {
131
+ display: none;
132
+ }
133
+
134
+
135
+ [component="topic/event"], [component="topic/necro-post"] {
136
+ &.timeline-event {
137
+ .timeline-text {
138
+ line-height: 16px;
139
+ font-size: 0.75rem;
140
+ }
141
+ }
142
+ }
143
+ }
144
+
145
+ @include media-breakpoint-up(sm) {
146
+ > [component="post"], .timeline-event, > [component="post/placeholder"] {
147
+ border-left: 2px solid $border-color;
148
+
149
+ &.highlight {
150
+ border-left: 2px solid $primary;
151
+ }
152
+ }
153
+
154
+ .timeline-event {
155
+ margin-left: 1.5rem;
156
+
157
+ [component="topic/event/delete"] {
158
+ visibility: hidden;
159
+ }
160
+
161
+ &:hover {
162
+ [component="topic/event/delete"] {
163
+ visibility: visible;
164
+
165
+ &:hover {
166
+ color: $danger;
167
+ }
168
+ }
169
+ }
170
+ }
171
+
172
+ [component="topic/event"], [component="topic/necro-post"] {
173
+ &.timeline-event .timeline-badge {
174
+ width: 24px;
175
+ height: 24px;
176
+ padding: 0;
177
+ margin-left: -0.75rem;
178
+ margin-right: 1.25rem;
179
+ border: 2px solid $border-color;
180
+ border-radius: 50%;
181
+ }
182
+ }
183
+ }
184
184
  }
package/scss/modals.scss CHANGED
@@ -1,6 +1,6 @@
1
- .tool-modal {
2
- @include media-breakpoint-up(md) {
3
- bottom: $spacer * 3;
4
- right: $spacer * 4;
5
- }
6
- }
1
+ .tool-modal {
2
+ @include media-breakpoint-up(md) {
3
+ bottom: $spacer * 3;
4
+ right: $spacer * 4;
5
+ }
6
+ }
@@ -1,16 +1,16 @@
1
- .breadcrumb .breadcrumb-item {
2
- font-family: $font-family-secondary;
3
-
4
- &::before {
5
- font-family: $font-family-sans-serif;
6
- font-weight: $font-weight-semibold;
7
- font-size: $small-font-size;
8
- line-height: $h4-font-size;
9
- }
10
-
11
- a, span {
12
- color: $body-color;
13
- font-size: $small-font-size;
14
- line-height: 16px;
15
- }
1
+ .breadcrumb .breadcrumb-item {
2
+ font-family: $font-family-secondary;
3
+
4
+ &::before {
5
+ font-family: $font-family-sans-serif;
6
+ font-weight: $font-weight-semibold;
7
+ font-size: $small-font-size;
8
+ line-height: $h4-font-size;
9
+ }
10
+
11
+ a, span {
12
+ color: $body-color;
13
+ font-size: $small-font-size;
14
+ line-height: 16px;
15
+ }
16
16
  }
@@ -1,103 +1,103 @@
1
- // used in group and account pages
2
- .cover {
3
- background-size: cover;
4
- background-repeat: no-repeat;
5
- height: 200px;
6
- position: absolute;
7
- background-origin: content-box;
8
- width: 100%;
9
- top: var(--panel-offset);
10
- left: auto;
11
- right: 0px;
12
-
13
- &:hover .controls, .controls:focus-within {
14
- opacity: 1;
15
- }
16
-
17
- .controls {
18
- height: 200px;
19
- line-height: 200px;
20
- opacity: 0;
21
- @include transition(opacity .15s linear);
22
- cursor: pointer;
23
- pointer-events: none;
24
-
25
- > * {
26
- pointer-events: all;
27
- }
28
- }
29
-
30
- &.active {
31
- &:hover {
32
- cursor: move;
33
- }
34
-
35
- .controls {
36
- > * {
37
- display: none;
38
- }
39
- }
40
-
41
- .save {
42
- display: inline-block;
43
- }
44
- }
45
-
46
- &.saving {
47
- .save {
48
- display: none;
49
- }
50
-
51
- .indicator {
52
- display: inline-block;
53
- }
54
- }
55
-
56
- .save, .indicator {
57
- display: inline-block;
58
- position: absolute;
59
- top: 1em;
60
- right: 2em;
61
- opacity: 1;
62
- padding: 0.5em;
63
- font-weight: bold;
64
-
65
- &:hover {
66
- cursor: pointer;
67
- }
68
- }
69
-
70
- .save {
71
- display: none;
72
- }
73
-
74
- .indicator {
75
- display: none;
76
- }
77
- }
78
-
79
- .cover > .container {
80
- height: 200px;
81
- position: relative;
82
- pointer-events: none;
83
- .save {
84
- pointer-events: all;
85
- }
86
- .controls {
87
- pointer-events: none;
88
- > * {
89
- pointer-events: all;
90
- }
91
- }
92
- }
93
-
94
- @include media-breakpoint-up(md) {
95
- .cover, .cover > .container {
96
- height: 300px;
97
-
98
- .controls {
99
- height: 300px;
100
- line-height: 300px;
101
- }
102
- }
1
+ // used in group and account pages
2
+ .cover {
3
+ background-size: cover;
4
+ background-repeat: no-repeat;
5
+ height: 200px;
6
+ position: absolute;
7
+ background-origin: content-box;
8
+ width: 100%;
9
+ top: var(--panel-offset);
10
+ left: auto;
11
+ right: 0px;
12
+
13
+ &:hover .controls, .controls:focus-within {
14
+ opacity: 1;
15
+ }
16
+
17
+ .controls {
18
+ height: 200px;
19
+ line-height: 200px;
20
+ opacity: 0;
21
+ @include transition(opacity .15s linear);
22
+ cursor: pointer;
23
+ pointer-events: none;
24
+
25
+ > * {
26
+ pointer-events: all;
27
+ }
28
+ }
29
+
30
+ &.active {
31
+ &:hover {
32
+ cursor: move;
33
+ }
34
+
35
+ .controls {
36
+ > * {
37
+ display: none;
38
+ }
39
+ }
40
+
41
+ .save {
42
+ display: inline-block;
43
+ }
44
+ }
45
+
46
+ &.saving {
47
+ .save {
48
+ display: none;
49
+ }
50
+
51
+ .indicator {
52
+ display: inline-block;
53
+ }
54
+ }
55
+
56
+ .save, .indicator {
57
+ display: inline-block;
58
+ position: absolute;
59
+ top: 1em;
60
+ right: 2em;
61
+ opacity: 1;
62
+ padding: 0.5em;
63
+ font-weight: bold;
64
+
65
+ &:hover {
66
+ cursor: pointer;
67
+ }
68
+ }
69
+
70
+ .save {
71
+ display: none;
72
+ }
73
+
74
+ .indicator {
75
+ display: none;
76
+ }
77
+ }
78
+
79
+ .cover > .container {
80
+ height: 200px;
81
+ position: relative;
82
+ pointer-events: none;
83
+ .save {
84
+ pointer-events: all;
85
+ }
86
+ .controls {
87
+ pointer-events: none;
88
+ > * {
89
+ pointer-events: all;
90
+ }
91
+ }
92
+ }
93
+
94
+ @include media-breakpoint-up(md) {
95
+ .cover, .cover > .container {
96
+ height: 300px;
97
+
98
+ .controls {
99
+ height: 300px;
100
+ line-height: 300px;
101
+ }
102
+ }
103
103
  }
@@ -1,8 +1,8 @@
1
- [component="search/filters"], [component="flags/filters"] {
2
- .filter-btn {
3
- border-color: $gray-300!important;
4
- &.active-filter {
5
- border-color: $primary!important;
6
- }
7
- }
1
+ [component="search/filters"], [component="flags/filters"] {
2
+ .filter-btn {
3
+ border-color: $gray-300!important;
4
+ &.active-filter {
5
+ border-color: $primary!important;
6
+ }
7
+ }
8
8
  }