nodebb-theme-harmony 1.0.0-beta.64 → 1.0.0-beta.65

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 (13) hide show
  1. package/package.json +1 -1
  2. package/scss/flags.scss +5 -0
  3. package/scss/harmony.scss +1 -0
  4. package/scss/modules/topic-navigator.scss +7 -53
  5. package/scss/topic.scss +1 -0
  6. package/templates/flags/detail.tpl +157 -189
  7. package/templates/flags/list.tpl +0 -2
  8. package/templates/partials/mobile-footer.tpl +1 -1
  9. package/templates/partials/sidebar-left.tpl +1 -1
  10. package/templates/partials/sidebar-right.tpl +1 -3
  11. package/templates/partials/topic/navigator.tpl +22 -17
  12. package/templates/partials/userFilter-placeholders.tpl +5 -0
  13. package/templates/topic.tpl +19 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "nodebb-theme-harmony",
3
- "version": "1.0.0-beta.64",
3
+ "version": "1.0.0-beta.65",
4
4
  "nbbpm": {
5
5
  "compatibility": "^3.0.0"
6
6
  },
package/scss/flags.scss ADDED
@@ -0,0 +1,5 @@
1
+ .page-flags {
2
+ [component="flag/history"] {
3
+ max-height: 30rem;
4
+ }
5
+ }
package/scss/harmony.scss CHANGED
@@ -9,6 +9,7 @@
9
9
  @import "status";
10
10
  @import "account";
11
11
  @import "groups";
12
+ @import "flags";
12
13
  @import "modals";
13
14
 
14
15
  @import "modules/breadcrumbs";
package/scss/modules/topic-navigator.scss CHANGED
@@ -1,59 +1,13 @@
1
- body:not(.page-topic) [component="topic/navigator"] {
2
- display: none!important;
3
- }
4
-
5
- [component="topic/navigator"] {
6
- max-height: calc(200px + (2rem * 4));
7
- user-select: none;
8
-
9
- .track {
10
- width: 2px;
11
- background-color: mix($dark, $light, 10%);
12
-
13
- .handle {
1
+ .topic .pagination-block {
2
+ min-width: 150px;
3
+ .scroller-container {
4
+ height: 300px;
5
+ border-left: 2px solid $border-color;
6
+ .scroller-thumb {
14
7
  cursor: grab;
15
- transition: $transition-base;
16
-
17
- &:active {
18
- transition: none;
8
+ &.active {
19
9
  cursor: grabbing;
20
10
  }
21
-
22
- .meta {
23
- top: -8px;
24
- left: calc($spacer + 8px);
25
- font-size: 13px;
26
- }
27
- }
28
-
29
- .knob {
30
- width: 16px;
31
- height: 16px;
32
- background-color: $link-color;
33
- margin-left: 1px;
34
- }
35
-
36
- .unread {
37
- width: 2px;
38
- height: 0; // initial
39
- bottom: 0;
40
- background: $primary;
41
- transition: $transition-base;
42
-
43
- .meta {
44
- left: calc($spacer + 8px);
45
- font-size: 13px;
46
- }
47
11
  }
48
12
  }
49
- }
50
-
51
- .sidebar.open {
52
- [component="topic/navigator"] {
53
- align-self: flex-start;
54
- }
55
-
56
- [component="topic/navigator"].d-sm-flex.mt-auto + .mt-auto {
57
- margin-top: 0 !important;
58
- }
59
13
  }
package/scss/topic.scss CHANGED
@@ -19,6 +19,7 @@
19
19
  .topic {
20
20
  .posts {
21
21
  max-width: 960px;
22
+ width: 960px;
22
23
  // fixes code blocks pushing content out on mobile
23
24
  @include media-breakpoint-down(md) {
24
25
  max-width: calc(100vw - $grid-gutter-width);
package/templates/flags/detail.tpl CHANGED
@@ -1,209 +1,177 @@
1
- <!-- THIS FILE IS STILL PERSONA -->
2
-
3
1
  <!-- IMPORT partials/breadcrumbs.tpl -->
4
2
 
5
- <div class="row">
6
- <div class="col-12">
7
- <h2 class="h4">
8
- {target_readable}
9
- <small><span class="text-muted timeago" title="{datetimeISO}"></span></small>
10
- </h2>
11
-
12
- <hr />
13
-
14
- {{{ if type_bool.post }}}
15
- <div class="d-flex">
16
- <div class="flex-shrink-0">
17
- <a href="{config.relative_path}/user/{target.user.userslug}">{buildAvatar(target.user, "64px", true, "media-object")}</a>
18
- </div>
19
- <div class="flex-grow-1 ms-3">
20
- <h4 class="media-heading"><a href="{config.relative_path}/user/{target.user.userslug}">{target.user.username}</a></h4>
21
- {target.content}
3
+ <div class="d-flex flex-column flex-md-row">
4
+ <div class="d-flex flex-column gap-3 flex-0 border-end-md text-sm mb-3 pe-4" style="flex-basis: 240px !important;">
5
+ <div class="d-grid gap-1">
6
+ <a class="btn btn-ghost border btn-sm justify-content-start" href="{config.relative_path}/{type_path}/{targetId}">
7
+ <i class="fa fa-fw fa-external-link text-primary"></i>
8
+ [[flags:go-to-target]]
9
+ </a>
10
+
11
+ {{{ if target.uid }}}
12
+ <div class="btn-group dropend" data-uid="{target.uid}">
13
+ <button type="button" class="btn btn-ghost border btn-sm justify-content-start dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
14
+ <i class="fa fa-fw fa-street-view text-primary"></i>
15
+ [[flags:flagged-user]]
16
+ </button>
17
+ <ul class="dropdown-menu">
18
+ <li><a class="dropdown-item" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>
19
+ {{{ if !config.disableChat }}}
20
+ <li><a class="dropdown-item" href="#" data-action="chat">[[flags:start-new-chat]]</a></li>
21
+ {{{ end }}}
22
+ <li class="dropdown-divider"></li>
23
+ {{{ if privileges.ban }}}
24
+ <li class="{{{ if target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="ban">[[user:ban_account]]</a></li>
25
+ <li class="{{{ if !target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="unban">[[user:unban_account]]</a></li>
26
+ {{{ end }}}
27
+ {{{ if privileges.mute}}}
28
+ <li class="{{{ if target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="mute">[[user:mute_account]]</a></li>
29
+ <li class="{{{ if !target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="unmute">[[user:unmute_account]]</a></li>
30
+ {{{ end }}}
31
+ {{{ if privileges.admin:users }}}
32
+ <li><a class="dropdown-item" href="#" data-action="delete-account">[[user:delete_account_as_admin]]</a></li>
33
+ <li><a class="dropdown-item" href="#" data-action="delete-content">[[user:delete_content]]</a></li>
34
+ <li><a class="dropdown-item" href="#" data-action="delete-all">[[user:delete_all]]</a></li>
35
+ {{{ end }}}
36
+ </ul>
22
37
  </div>
38
+ {{{ end }}}
39
+
40
+ <a class="btn btn-ghost border btn-sm justify-content-start" href="#" data-action="assign">
41
+ <i class="fa fa-fw fa-id-card-o text-primary"></i>
42
+ [[flags:assign-to-me]]
43
+ </a>
44
+
45
+ {{{ if type_bool.post }}}
46
+ {{{ if !target.deleted}}}
47
+ <a class="d-flex gap-2 align-items-center btn btn-sm btn-outline-danger border border-secondary-subtle text-start" href="#" data-action="delete-post"><i class="fa fa-fw fa-trash"></i> [[flags:delete-post]]</a>
48
+ {{{ else }}}
49
+ <a class="d-flex gap-2 align-items-center btn btn-sm btn-danger border border-secondary-subtle text-start" href="#" data-action="purge-post"><i class="fa fa-fw fa-trash"></i> [[flags:purge-post]]</a>
50
+ <a class="d-flex gap-2 align-items-center btn btn-sm btn-outline-success border border-secondary-subtle text-start" href="#" data-action="restore-post"><i class="fa fa-fw fa-reply"></i><i class="fa fa-trash"></i> [[flags:restore-post]]</a>
51
+ {{{ end }}}
52
+ {{{ end }}}
23
53
  </div>
24
- {{{ end }}}
25
54
 
26
- {{{ if type_bool.user }}}
27
- <div class="d-flex">
28
- <div class="flex-shrink-0">
29
- <a href="{config.relative_path}/user/{target.userslug}">{buildAvatar(target, "64px", true, "media-object")}</a>
55
+ <form class="d-flex flex-column gap-3" id="attributes">
56
+ <div>
57
+ <label class="text-muted fw-semibold" for="state">[[flags:state]]</label>
58
+ <select class="form-select form-select-sm" id="state" name="state" disabled>
59
+ <option value="open">[[flags:state-open]]</option>
60
+ <option value="wip">[[flags:state-wip]]</option>
61
+ <option value="resolved">[[flags:state-resolved]]</option>
62
+ <option value="rejected">[[flags:state-rejected]]</option>
63
+ </select>
64
+ </div>
65
+ <div>
66
+ <label class="text-muted fw-semibold" for="assignee">[[flags:assignee]]</label>
67
+ <select class="form-control form-control-sm" id="assignee" name="assignee" disabled>
68
+ <option value="">[[flags:no-assignee]]</option>
69
+ {{{each assignees}}}
70
+ <option value="{../uid}">{../username}</option>
71
+ {{{end}}}
72
+ </select>
73
+ </div>
74
+ <div class="d-grid">
75
+ <button type="button" class="btn btn-primary" data-action="update">[[flags:update]]</button>
30
76
  </div>
31
- <div class="flex-grow-1 ms-3">
32
- <h4 class="media-heading"><a href="{config.relative_path}/user/{target.userslug}">{target.username}</a></h4>
33
- <p class="lead">
34
- <a href="{config.relative_path}/uid/{target.uid}">[[flags:user-view]]</a> |
35
- <a href="{config.relative_path}/uid/{target.uid}/edit">[[flags:user-edit]]</a>
36
- </p>
77
+ </form>
78
+
79
+ <div class="overflow-auto" component="flag/history">
80
+ <h2 class="h6 fw-bold">[[flags:history]]</h2>
81
+ {{{ if !history.length }}}
82
+ <div class="alert alert-success text-center">[[flags:no-history]]</div>
83
+ {{{ end }}}
84
+ {{{ each history }}}
85
+ <div class="d-flex flex-column gap-1">
86
+ <div class="d-flex gap-2">
87
+ <a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true)}</a>
88
+ <a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
89
+ <span class="timeago text-muted" title="{./datetimeISO}"></span>
90
+ </div>
91
+ <div>
92
+ <ul class="list-unstyled">
93
+ {{{ each ./fields }}}
94
+ <li>
95
+ [[flags:{@key}]]{{{ if @value }}} &rarr; <span class="fw-semibold">{@value}</span>{{{ end }}}
96
+ </li>
97
+ {{{ end }}}
98
+ {{{ each ./meta }}}
99
+ <li>
100
+ {{./key}}{{{ if ./value }}} &rarr; <span class="fw-semibold">{./value}</span>{{{ end }}}
101
+ </li>
102
+ {{{ end }}}
103
+ </ul>
104
+ </div>
37
105
  </div>
106
+ {{{ end }}}
38
107
  </div>
39
- {{{ end }}}
40
-
41
- {{{ if type_bool.empty }}}
42
- <div class="alert alert-warning" role="alert">[[flags:target-purged]]</div>
43
- {{{ end }}}
44
-
45
- <hr />
46
-
47
- <div class="row">
48
- <div class="col-sm-6">
49
- <form role="form" id="attributes">
50
- <div class="mb-3">
51
- <h2 class="h4">[[flags:reports]]</h2>
52
- <ul class="list-group" component="flag/reports">
53
- {{{ each reports }}}
54
- <li class="list-group-item">
55
- <a href="{config.relative_path}/user/{./reporter.userslug}">{buildAvatar(./reporter, "24px", true)}</a>
56
- &ndash; <span class="timeago" title="{./timestampISO}"></span>
57
- <blockquote><em>{./value}</em></blockquote>
58
- </li>
59
- {{{ end }}}
60
- </ul>
61
- </div>
62
- <div class="mb-3">
63
- <h2 class="h4" for="state">[[flags:state]]</h2>
64
- <select class="form-select" id="state" name="state" disabled>
65
- <option value="open">[[flags:state-open]]</option>
66
- <option value="wip">[[flags:state-wip]]</option>
67
- <option value="resolved">[[flags:state-resolved]]</option>
68
- <option value="rejected">[[flags:state-rejected]]</option>
69
- </select>
70
- </div>
71
- <div class="mb-3">
72
- <h2 class="h4" for="assignee">[[flags:assignee]]</h2>
73
- <select class="form-control" id="assignee" name="assignee" disabled>
74
- <option value="">[[flags:no-assignee]]</option>
75
- {{{each assignees}}}
76
- <option value="{../uid}">{../username}</option>
77
- {{{end}}}
78
- </select>
79
- </div>
80
- <div class="d-grid">
81
- <button type="button" class="btn btn-primary" data-action="update">[[flags:update]]</button>
82
- </div>
83
- </form>
84
-
85
- <hr />
108
+ </div>
109
+ <div class="flex-1 ps-md-2 ps-lg-5" style="min-width:0;">
110
+ <div class="d-flex flex-column gap-4">
111
+ <h2 class="h6 fw-bold">
112
+ {target_readable}
113
+ </h2>
114
+ <div component="flag/content" class="d-flex flex-column gap-1 pb-3 border-bottom">
115
+ {{{ if type_bool.post }}}
116
+ <div class="d-flex gap-2">
117
+ <a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(target.user, "16px", true)}</a>
118
+ <a href="{config.relative_path}/user/{./user.userslug}">{target.user.username}</a>
119
+ <span class="timeago text-muted" title="{target.timestampISO}"></span>
120
+ </div>
121
+ <blockquote>{target.content}</blockquote>
122
+ {{{ end }}}
86
123
 
87
- <form role="form">
88
- <div class="mb-3">
89
- <h2 class="h4" for="note">[[flags:notes]]</h2>
90
- <textarea id="note" class="form-control"></textarea>
91
- <div class="d-grid">
92
- <button type="button" class="btn btn-block btn-primary" data-action="appendNote">[[flags:add-note]]</button>
93
- </div>
94
- </div>
95
- </form>
124
+ {{{ if type_bool.user }}}
125
+ <div class="d-flex gap-2">
126
+ <a href="{config.relative_path}/user/{./target.userslug}">{buildAvatar(target, "16px", true)}</a>
127
+ <a href="{config.relative_path}/user/{./target.userslug}">{target.username}</a>
128
+ </div>
129
+ <blockquote>{{{ if target.aboutme }}}{target.aboutme}{{{ else }}}<em>[[flags:target-aboutme-empty]]</em>{{{ end }}}</blockquote>
130
+ {{{ end }}}
96
131
 
97
- <div component="flag/notes">
98
- {{{ if !notes.length }}}
99
- <div class="alert alert-success text-center">[[flags:no-notes]]</div>
100
- {{{ end }}}
101
- {{{ each notes }}}
102
- <div class="d-flex mb-3">
103
- <div class="flex-shrink-0">
104
- <a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "32px", true, "media-object")}</a>
105
- </div>
106
- <div class="flex-grow-1 mx-3">
107
- <h2 class="h5">
108
- <a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
109
- <small><span class="timeago" title="{./datetimeISO}"></span></small>
110
- </h4>
111
- {./content}
112
- </div>
113
- <div class="flex-shrink-0">
114
- <a href="#" class="btn btn-sm btn-link" data-action="prepare-edit"><i class="fa fa-pencil"></i></a>
115
- <a href="#" class="btn btn-sm btn-link" data-action="delete-note"><i class="fa fa-trash text-danger"></i></a>
132
+ {{{ if type_bool.empty }}}
133
+ <div class="alert alert-warning" role="alert">[[flags:target-purged]]</div>
134
+ {{{ end }}}
135
+ </div>
136
+ <div class="flag/reports" class="pb-4 border-bottom">
137
+ <h2 class="h6 fw-bold">[[flags:reports]]</h2>
138
+ <ul class="list-unstyled mt-4">
139
+ {{{ each reports }}}
140
+ <li class="d-flex flex-column gap-1" component="flag/report" data-timestamp="{./timestamp}">
141
+ <div class="d-flex gap-2">
142
+ <a href="{config.relative_path}/user/{./reporter.userslug}">{buildAvatar(./reporter, "16px", true)}</a>
143
+ <a href="{config.relative_path}/user/{./reporter.userslug}">{./reporter.username}</a>
144
+ <span class="timeago text-muted" title="{./timestampISO}"></span>
116
145
  </div>
117
- </div>
146
+ <p>{./value}</p>
147
+ </li>
118
148
  {{{ end }}}
119
- </div>
149
+ </ul>
120
150
  </div>
121
- <div class="col-sm-6">
122
- <h2 class="h4">[[flags:quick-actions]]</h2>
123
-
124
- <div class="d-grid gap-1">
125
- <a class="btn btn-light" href="{config.relative_path}/{type_path}/{targetId}">
126
- <i class="fa fa-external-link"></i>
127
- [[flags:go-to-target]]
128
- </a>
129
-
130
- <a class="btn btn-light" href="#" data-action="assign">
131
- <i class="fa fa-id-card-o"></i>
132
- [[flags:assign-to-me]]
133
- </a>
134
-
135
- {{{ if type_bool.post }}}
136
- {{{ if !target.deleted}}}
137
- <a class="btn btn-outline-danger" href="#" data-action="delete-post"><i class="fa fa-trash"></i> [[flags:delete-post]]</a>
138
- {{{ else }}}
139
- <a class="btn btn-danger" href="#" data-action="purge-post"><i class="fa fa-trash"></i> [[flags:purge-post]]</a>
140
- <a class="btn btn-outline-success" href="#" data-action="restore-post"><i class="fa fa-reply"></i><i class="fa fa-trash"></i> [[flags:restore-post]]</a>
141
- {{{ end }}}
142
- {{{ end }}}
143
-
144
- {{{ if target.uid }}}
145
- <div class="btn-group" data-uid="{target.uid}">
146
- <button type="button" class="btn btn-light dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
147
- <i class="fa fa-street-view"></i>
148
- [[flags:flagged-user]]
149
- </button>
150
- <ul class="dropdown-menu">
151
- <li><a class="dropdown-item" href="{config.relative_path}/uid/{target.uid}">[[flags:view-profile]]</a></li>
152
- {{{ if !config.disableChat }}}
153
- <li><a class="dropdown-item" href="#" data-action="chat">[[flags:start-new-chat]]</a></li>
154
- {{{ end }}}
155
- <li class="dropdown-divider"></li>
156
- {{{ if privileges.ban }}}
157
- <li class="{{{ if target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="ban">[[user:ban_account]]</a></li>
158
- <li class="{{{ if !target.user.banned }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="unban">[[user:unban_account]]</a></li>
159
- {{{ end }}}
160
- {{{ if privileges.mute}}}
161
- <li class="{{{ if target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="mute">[[user:mute_account]]</a></li>
162
- <li class="{{{ if !target.user.muted }}}hidden{{{ end }}}"><a class="dropdown-item" href="#" data-action="unmute">[[user:unmute_account]]</a></li>
163
- {{{ end }}}
164
- {{{ if privileges.admin:users }}}
165
- <li><a class="dropdown-item" href="#" data-action="delete-account">[[user:delete_account_as_admin]]</a></li>
166
- <li><a class="dropdown-item" href="#" data-action="delete-content">[[user:delete_content]]</a></li>
167
- <li><a class="dropdown-item" href="#" data-action="delete-all">[[user:delete_all]]</a></li>
168
- {{{ end }}}
169
- </ul>
170
- </div>
171
- {{{ end }}}
151
+ <div class="pb-4 border-bottom">
152
+ <div class="d-flex align-items-center">
153
+ <h2 class="h6 fw-bold me-auto mb-0">[[flags:notes]]</h2>
154
+ <button class="btn btn-ghost border" data-action="addEditNote">[[flags:add-note]]</button>
172
155
  </div>
173
-
174
- <hr />
175
-
176
- <h2 class="h4">[[flags:history]]</h2>
177
- <div component="flag/history">
178
- {{{ if !history.length }}}
179
- <div class="alert alert-success text-center">[[flags:no-history]]</div>
156
+ <ul component="flag/notes" class="list-unstyled mt-4">
157
+ {{{ if !notes.length }}}
158
+ <em>[[flags:no-notes]]</em>
180
159
  {{{ end }}}
181
- {{{ each history }}}
182
- <div class="d-flex">
183
- <div class="flex-shrink-0">
184
- <a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "32px", true, "media-object")}</a>
185
- </div>
186
- <div class="flex-grow-1 ms-3">
187
- <h4 class="media-heading">
188
- <a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
189
- <small><span class="timeago" title="{./datetimeISO}"></span></small>
190
- </h4>
191
- <ul>
192
- {{{ each ./fields }}}
193
- <li>
194
- <span class="badge bg-primary">[[flags:{@key}]]</span>{{{ if @value }}} &rarr; <span class="badge bg-light text-dark">{@value}</span>{{{ end }}}
195
- </li>
196
- {{{ end }}}
197
- {{{ each ./meta }}}
198
- <li>
199
- <span class="badge bg-{{./labelClass}}">{{./key}}</span>{{{ if ./value }}} &rarr; <span class="badge bg-light text-dark">{{ ./value }}</span>{{{ end }}}
200
- </li>
201
- {{{ end }}}
202
- </ul>
160
+ {{{ each notes }}}
161
+ <li class="d-flex flex-column gap-1" component="flag/note" data-datetime="{./datetime}" data-index="{@index}">
162
+ <div class="d-flex gap-2 align-items-center">
163
+ <a href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(./user, "16px", true)}</a>
164
+ <a href="{config.relative_path}/user/{./user.userslug}">{./user.username}</a>
165
+ <span class="timeago text-muted" title="{./datetimeISO}"></span>
166
+ <div class=" ms-auto flex-shrink-0">
167
+ <a href="#" class="btn btn-sm btn-link" data-action="addEditNote"><i class="fa fa-pencil"></i></a>
168
+ <a href="#" class="btn btn-sm btn-link" data-action="delete-note"><i class="fa fa-trash text-danger"></i></a>
169
+ </div>
203
170
  </div>
204
- </div>
171
+ <p>{./content}</p>
172
+ </li>
205
173
  {{{ end }}}
206
- </div>
174
+ </ul>
207
175
  </div>
208
176
  </div>
209
177
  </div>
package/templates/flags/list.tpl CHANGED
@@ -1,5 +1,3 @@
1
- <!-- THIS FILE IS STILL PERSONA -->
2
-
3
1
  <!-- IMPORT partials/breadcrumbs.tpl -->
4
2
 
5
3
  <div class="d-flex flex-column gap-3">
package/templates/partials/mobile-footer.tpl CHANGED
@@ -1,4 +1,4 @@
1
- <div component="bottombar" class="bottombar d-flex flex-column d-md-none fixed-bottom ff-secondary gap-1 align-items-center">
1
+ <div component="bottombar" class="bottombar d-flex flex-column d-lg-none fixed-bottom ff-secondary gap-1 align-items-center">
2
2
 
3
3
  <!-- IMPORT partials/topic/navigator-mobile.tpl -->
4
4
 
package/templates/partials/sidebar-left.tpl CHANGED
@@ -1,4 +1,4 @@
1
- <nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-md-flex flex-column justify-content-between sticky-top ff-secondary">
1
+ <nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-left start-0 border-end vh-100 d-none d-lg-flex flex-column justify-content-between sticky-top ff-secondary">
2
2
  <ul id="main-nav" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
3
3
  {{{ each navigation }}}
4
4
  {{{ if displayMenuItem(@root, @index) }}}
package/templates/partials/sidebar-right.tpl CHANGED
@@ -1,4 +1,4 @@
1
- <nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-md-flex flex-column sticky-top ff-secondary">
1
+ <nav class="{{{ if config.theme.openSidebars}}}open{{{ end }}} text-dark bg-light sidebar sidebar-right end-0 border-start vh-100 d-none d-lg-flex flex-column sticky-top ff-secondary">
2
2
  {{{ if config.loggedIn }}}
3
3
  <ul id="logged-in-menu" class="list-unstyled d-flex flex-column w-100 gap-2 mt-2">
4
4
  <!-- IMPORT partials/sidebar/logged-in-menu.tpl -->
@@ -9,8 +9,6 @@
9
9
  </ul>
10
10
  {{{ end }}}
11
11
 
12
- <!-- IMPORT partials/topic/navigator.tpl -->
13
-
14
12
  <div class="visible-open small text-secondary mt-auto" data-widget-area="sidebar-footer">
15
13
  {{{each widgets.sidebar-footer}}}
16
14
  {{./html}}
package/templates/partials/topic/navigator.tpl CHANGED
@@ -1,20 +1,25 @@
1
- <div class="d-sm-flex flex-column flex-grow-1 align-items-center mb-2 mx-2 mt-auto" component="topic/navigator">
2
- <a href="#" class="nav-link border-0 p-2" data-action="toTop"><i class="fa fa-fw fa-angles-up"></i></a>
3
- <a href="#" class="nav-link border-0 p-2" data-action="scrollUp"><i class="fa fa-fw fa-angle-up"></i></a>
4
- <div class="track d-inline-block flex-grow-1 position-relative">
5
- <div class="unread d-inline-block position-absolute">
6
- <div class="visible-open meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold">
7
- <a href="{url}"></a>
8
- </div>
9
- </div>
10
- <div class="handle d-inline-block position-absolute">
11
- <div class="knob d-inline-block rounded-circle translate-middle"></div>
12
- <div class="visible-open meta small position-absolute text-nowrap fw-semibold">
13
- <p class="index text-body mb-0"></p>
14
- <p class="timestamp text-secondary timeago mb-0"></p>
1
+ <div class="pagination-block d-none d-lg-block flex-1">
2
+ <div class="ps-1 ps-md-0 d-inline-block sticky-top" style="top:6rem;z-index:1;">
3
+ <div class="scroller-content d-flex gap-2 flex-column align-items-start">
4
+ <div class="pointer pagetop btn-ghost-sm d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-up"></i></div>
5
+ <div class="scroller-container position-relative" style="left: 10px;">
6
+ <div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px; left: -5px;">
7
+ <div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
8
+ <div>
9
+ <p class="small thumb-text d-none d-md-inline-block ff-secondary fw-semibold user-select-none mb-0"></p>
10
+ <p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0"></p>
11
+ </div>
12
+ </div>
13
+
14
+ <!-- TODO -->
15
+ <div class="unread d-inline-block position-relative hidden">
16
+ <div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold">
17
+ <a href="{url}"></a>
18
+ </div>
19
+ </div>
15
20
  </div>
21
+ <div class="pointer pagebottom btn-ghost-sm d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-down"></i></div>
16
22
  </div>
17
23
  </div>
18
- <a href="#" class="nav-link border-0 p-2" data-action="scrollDown"><i class="fa fa-fw fa-angle-down"></i></a>
19
- <a href="#" class="nav-link border-0 p-2" data-action="toBottom"><i class="fa fa-fw fa-angles-down"></i></a>
20
- </div>
24
+ </div>
25
+
package/templates/partials/userFilter-placeholders.tpl ADDED
@@ -0,0 +1,5 @@
1
+ <div class="placeholder-wave w-100 d-flex gap-2">
2
+ <button class="btn btn-light btn-sm border placeholder col-3"></button>
3
+ <button class="btn btn-light btn-sm border placeholder col-4"></button>
4
+ <button class="btn btn-light btn-sm border placeholder col-3"></button>
5
+ </div>
package/templates/topic.tpl CHANGED
@@ -49,23 +49,27 @@
49
49
  <!-- IMPORT partials/topic/deleted-message.tpl -->
50
50
  {{{ end }}}
51
51
 
52
- <ul component="topic" class="posts timeline mt-sm-2 p-0 py-3" data-tid="{tid}" data-cid="{cid}">
53
- {{{each posts}}}
54
- <li component="post" class="pt-4 {{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
55
- <a component="post/anchor" data-index="{./index}" id="{increment(./index, "1")}"></a>
52
+ <div class="d-flex gap-0 gap-lg-5">
53
+ <ul component="topic" class="posts timeline mt-sm-2 p-0 py-3" style="min-width: 0;" data-tid="{tid}" data-cid="{cid}">
54
+ {{{each posts}}}
55
+ <li component="post" class="pt-4 {{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
56
+ <a component="post/anchor" data-index="{./index}" id="{increment(./index, "1")}"></a>
56
57
 
57
- <meta itemprop="datePublished" content="{./timestampISO}">
58
- <meta itemprop="dateModified" content="{./editedISO}">
58
+ <meta itemprop="datePublished" content="{./timestampISO}">
59
+ <meta itemprop="dateModified" content="{./editedISO}">
59
60
 
60
- <!-- IMPORT partials/topic/post.tpl -->
61
- </li>
62
- {{{ if (config.topicPostSort != "most_votes") }}}
63
- {{{ each ./events}}}
64
- <!-- IMPORT partials/topic/event.tpl -->
65
- {{{ end }}}
66
- {{{ end }}}
67
- {{{end}}}
68
- </ul>
61
+ <!-- IMPORT partials/topic/post.tpl -->
62
+ </li>
63
+ {{{ if (config.topicPostSort != "most_votes") }}}
64
+ {{{ each ./events}}}
65
+ <!-- IMPORT partials/topic/event.tpl -->
66
+ {{{ end }}}
67
+ {{{ end }}}
68
+ {{{end}}}
69
+ </ul>
70
+
71
+ <!-- IMPORT partials/topic/navigator.tpl -->
72
+ </div>
69
73
 
70
74
  {{{ if browsingUsers }}}
71
75
  <div class="visible-xs">