nodebb-theme-harmony 1.0.0-beta.10 → 1.0.0-beta.11
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 +1 -1
- package/public/harmony.js +15 -0
- package/scss/topic.scss +11 -0
- package/templates/partials/mobile-footer.tpl +70 -65
- package/templates/partials/sidebar/notifications.tpl +1 -1
- package/templates/partials/topic/navigation-post.tpl +5 -9
- package/templates/partials/topic/navigator-mobile.tpl +43 -0
- package/templates/partials/topic/quickreply.tpl +1 -1
- package/templates/partials/topic-list-bar.tpl +3 -3
- package/templates/topic.tpl +1 -1
package/package.json
CHANGED
package/public/harmony.js
CHANGED
|
@@ -5,6 +5,7 @@ $(document).ready(function () {
|
|
|
5
5
|
setupMobileMenu();
|
|
6
6
|
setupSearch();
|
|
7
7
|
setupDrafts();
|
|
8
|
+
handleMobileNavigator();
|
|
8
9
|
|
|
9
10
|
$('[component="skinSwitcher"]').on('click', '.dropdown-item', function () {
|
|
10
11
|
const skin = $(this).attr('data-value');
|
|
@@ -103,6 +104,7 @@ $(document).ready(function () {
|
|
|
103
104
|
updateBadgeCount();
|
|
104
105
|
});
|
|
105
106
|
}
|
|
107
|
+
|
|
106
108
|
function setupNProgress() {
|
|
107
109
|
require(['nprogress'], function (NProgress) {
|
|
108
110
|
window.nprogress = NProgress;
|
|
@@ -117,4 +119,17 @@ $(document).ready(function () {
|
|
|
117
119
|
}
|
|
118
120
|
});
|
|
119
121
|
}
|
|
122
|
+
|
|
123
|
+
function handleMobileNavigator() {
|
|
124
|
+
const paginationBlockEl = $('.pagination-block');
|
|
125
|
+
require(['hooks'], function (hooks) {
|
|
126
|
+
hooks.on('action:ajaxify.end', function () {
|
|
127
|
+
paginationBlockEl.find('.dropdown-menu.show').removeClass('show');
|
|
128
|
+
});
|
|
129
|
+
hooks.on('filter:navigator.scroll', function (hookData) {
|
|
130
|
+
paginationBlockEl.find('.dropdown-menu.show').removeClass('show');
|
|
131
|
+
return hookData;
|
|
132
|
+
});
|
|
133
|
+
});
|
|
134
|
+
}
|
|
120
135
|
});
|
package/scss/topic.scss
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
.pagination-block { display: none; }
|
|
2
|
+
|
|
1
3
|
.page-topic {
|
|
2
4
|
[component="topic/title"] {
|
|
3
5
|
font-size: 28px;
|
|
@@ -106,6 +108,15 @@
|
|
|
106
108
|
}
|
|
107
109
|
}
|
|
108
110
|
}
|
|
111
|
+
|
|
112
|
+
.pagination-block {
|
|
113
|
+
display: block;
|
|
114
|
+
transition: opacity 250ms ease-in;
|
|
115
|
+
opacity: 0;
|
|
116
|
+
&.ready {
|
|
117
|
+
opacity: 1;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
109
120
|
}
|
|
110
121
|
|
|
111
122
|
@include media-breakpoint-up(sm) {
|
|
@@ -1,73 +1,78 @@
|
|
|
1
|
-
<div class="
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
{{{
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
1
|
+
<div class="d-flex flex-column d-md-none fixed-bottom ff-secondary gap-1 align-items-center">
|
|
2
|
+
|
|
3
|
+
<!-- IMPORT partials/topic/navigator-mobile.tpl -->
|
|
4
|
+
|
|
5
|
+
<div class="bottombar p-2 text-dark bg-light d-flex justify-content-between align-items-center w-100">
|
|
6
|
+
<div class="">
|
|
7
|
+
<a href="#" role="button" class="nav-link nav-btn d-flex justify-content-between align-items-center position-relative" data-bs-toggle="dropdown">
|
|
8
|
+
<span class="position-relative">
|
|
9
|
+
<i class="fa fa-fw fa-lg fa-bars"></i>
|
|
10
|
+
<span component="unread/count" data-unread-url="{unreadCount.unreadUrl}" class="position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.mobileUnread }}}hidden{{{ end }}}">{unreadCount.mobileUnread}</span>
|
|
11
|
+
</span>
|
|
12
|
+
</a>
|
|
13
|
+
<ul class="navigation-dropdown dropdown-menu">
|
|
14
|
+
{{{ each navigation }}}
|
|
15
|
+
<!-- IF function.displayMenuItem, @index -->
|
|
16
|
+
<li class="nav-item {./class}{{{ if ./dropdown }}} dropend{{{ end }}}" title="{./title}">
|
|
17
|
+
<a class="nav-link nav-btn navigation-link px-3 py-2 {{{ if navigation.dropdown }}}dropdown-toggle{{{ end }}}"
|
|
18
|
+
{{{ if ./dropdown }}} href="#" role="button" data-bs-toggle="collapse" data-bs-target="#collapse-target-{@index}" onclick="event.stopPropagation();" {{{ else }}} href="{./route}"{{{ end }}} {{{ if ./id }}}id="{./id}"{{{ end }}}{{{ if ./targetBlank }}} target="_blank"{{{ end }}}>
|
|
19
|
+
<span class="d-inline-flex justify-content-between align-items-center w-100">
|
|
20
|
+
<span class="text-nowrap truncate-open">
|
|
21
|
+
{{{ if ./iconClass }}}
|
|
22
|
+
<i class="fa fa-fw {./iconClass}" data-content="{./content}"></i>
|
|
23
|
+
{{{ end }}}
|
|
24
|
+
{{{ if navigation.text }}}
|
|
25
|
+
<span class="nav-text visible-open px-2 fw-semibold">{navigation.text}</span>
|
|
26
|
+
{{{ end }}}
|
|
27
|
+
</span>
|
|
28
|
+
<span component="navigation/count" class="visible-open badge rounded-1 bg-primary {{{ if !./content }}}hidden{{{ end }}}">{./content}</span>
|
|
23
29
|
</span>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
</
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
</ul>
|
|
38
|
-
</div>
|
|
30
|
+
</a>
|
|
31
|
+
{{{ if navigation.dropdown }}}
|
|
32
|
+
<div class="ps-3">
|
|
33
|
+
<ul id="collapse-target-{@index}" class="collapse list-unstyled ps-3">
|
|
34
|
+
{navigation.dropdownContent}
|
|
35
|
+
</ul>
|
|
36
|
+
</div>
|
|
37
|
+
{{{ end }}}
|
|
38
|
+
</li>
|
|
39
|
+
<!-- ENDIF function.displayMenuItem -->
|
|
40
|
+
{{{end}}}
|
|
41
|
+
</ul>
|
|
42
|
+
</div>
|
|
39
43
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
<div class="">
|
|
45
|
+
{{{ if config.loggedIn }}}
|
|
46
|
+
<ul id="logged-in-menu" class="list-unstyled d-flex align-items-center w-100 gap-3 mb-0">
|
|
47
|
+
{{{ if config.searchEnabled }}}
|
|
48
|
+
<li component="sidebar/search" class="nav-item m-0 search">
|
|
49
|
+
<!-- IMPORT partials/sidebar/search-mobile.tpl -->
|
|
50
|
+
</li>
|
|
51
|
+
{{{ end }}}
|
|
48
52
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
53
|
+
<li component="notifications" class="nav-item m-0 notifications">
|
|
54
|
+
<!-- IMPORT partials/sidebar/notifications.tpl -->
|
|
55
|
+
</li>
|
|
52
56
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
57
|
+
{{{ if canChat }}}
|
|
58
|
+
<li class="nav-item m-0 chats">
|
|
59
|
+
<!-- IMPORT partials/sidebar/chats.tpl -->
|
|
60
|
+
</li>
|
|
61
|
+
{{{ end }}}
|
|
58
62
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
63
|
+
<li component="sidebar/drafts" class="nav-item m-0 drafts">
|
|
64
|
+
<!-- IMPORT partials/sidebar/drafts.tpl -->
|
|
65
|
+
</li>
|
|
62
66
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
67
|
+
<li id="user_label" class="nav-item m-0 py-2 usermenu">
|
|
68
|
+
<!-- IMPORT partials/sidebar/user-menu.tpl -->
|
|
69
|
+
</li>
|
|
70
|
+
</ul>
|
|
71
|
+
{{{ else }}}
|
|
72
|
+
<ul id="logged-out-menu" class="list-unstyled d-flex w-100 gap-3 mb-0 logged-out-menu">
|
|
73
|
+
<!-- IMPORT partials/sidebar/logged-out-menu.tpl -->
|
|
74
|
+
</ul>
|
|
75
|
+
{{{ end }}}
|
|
76
|
+
</div>
|
|
72
77
|
</div>
|
|
73
78
|
</div>
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<i component="notifications/icon" class="fa fa-fw {{{ if unreadCount.notification}}}fa-bell{{{ else }}}fa-bell-o{{{ end }}} unread-count" data-content="{unreadCount.notification}"></i>
|
|
5
5
|
<span component="notifications/count" class="visible-closed position-absolute top-0 start-100 translate-middle badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
|
|
6
6
|
</span>
|
|
7
|
-
<span class="nav-text small visible-open fw-semibold">[[global:header.notifications]]</span>
|
|
7
|
+
<span class="nav-text small visible-open fw-semibold truncate-text">[[global:header.notifications]]</span>
|
|
8
8
|
</span>
|
|
9
9
|
<span component="notifications/count" class="visible-open badge rounded-1 bg-primary {{{ if !unreadCount.notification }}}hidden{{{ end }}}">{unreadCount.notification}</span>
|
|
10
10
|
</a>
|
|
@@ -1,14 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
<a href="<!-- IF post.user.userslug -->{config.relative_path}/user/{post.user.userslug}<!-- ELSE -->#<!-- ENDIF post.user.userslug -->">
|
|
6
|
-
{buildAvatar(post.user, "24px", true, "", "user/picture")} {post.user.username}
|
|
1
|
+
<div class="d-flex gap-2 mb-2 justify-content-between align-items-center flex-nowrap">
|
|
2
|
+
<div class="icon text-truncate">
|
|
3
|
+
<a href="{{{ if post.user.userslug }}}{config.relative_path}/user/{post.user.userslug}{{{else }}}#{{{ end }}}">
|
|
4
|
+
{buildAvatar(post.user, "24px", true)} {post.user.username}
|
|
7
5
|
</a>
|
|
8
6
|
</div>
|
|
9
|
-
<
|
|
10
|
-
<span class="timeago" title="{post.timestampISO}"></span>
|
|
11
|
-
</small>
|
|
7
|
+
<span class="timeago text-nowrap text-sm" title="{post.timestampISO}"></span>
|
|
12
8
|
</div>
|
|
13
9
|
|
|
14
10
|
<div>{post.content}</div>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<div class="d-flex justify-content-end w-100">
|
|
2
|
+
<div class="pagination-block text-bg-light m-2 rounded-1 border border-gray-300" style="height:50px;">
|
|
3
|
+
<div class="position-relative">
|
|
4
|
+
<div class="progress-bar rounded-1 bg-info d-block position-absolute" style="height:50px;"></div>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="wrapper d-flex align-items-center h-100" style="padding: 5px 0px;">
|
|
7
|
+
<i class="fa fa-2x fa-angle-double-up pointer fa-fw pagetop" style="z-index: 1;"></i>
|
|
8
|
+
|
|
9
|
+
<a href="#" class="text-reset dropdown-toggle d-inline-block px-3 text-decoration-none" data-bs-toggle="dropdown">
|
|
10
|
+
<span class="pagination-text position-relative fw-bold"></span>
|
|
11
|
+
</a>
|
|
12
|
+
|
|
13
|
+
<i class="fa fa-2x fa-angle-double-down pointer fa-fw pagebottom" style="z-index: 1;"></i>
|
|
14
|
+
<ul class="dropdown-menu p-0" role="menu" style="width: 100%;">
|
|
15
|
+
<li class="p-3">
|
|
16
|
+
<div class="row">
|
|
17
|
+
<div class="col-8 post-content overflow-hidden mb-3" style="height: 350px;"></div>
|
|
18
|
+
<div class="col-4 text-end">
|
|
19
|
+
<div class="scroller-content">
|
|
20
|
+
<span class="pointer pagetop">[[topic:first-post]] <i class="fa fa-angle-double-up"></i></span>
|
|
21
|
+
<div class="scroller-container border-gray-200" style="height: 300px; border-right: 3px solid; margin-right: 5.5px;">
|
|
22
|
+
<div class="scroller-thumb position-relative" style="height: 40px;right: -6px; padding-right: 15px; margin-right: -15px;">
|
|
23
|
+
<span class="thumb-text fw-bold user-select-none position-relative" style="top: -15px; padding-right: 10px;"></span>
|
|
24
|
+
<div class="rounded-2 scroller-thumb-icon bg-primary d-inline-block position-relative" style="width: 9px; height:40px;"></div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
27
|
+
<span class="pointer pagebottom">[[topic:last-post]] <i class="fa fa-angle-double-down"></i></span>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="row">
|
|
32
|
+
<div class="col-6">
|
|
33
|
+
<button id="myNextPostBtn" class="btn btn-outline-secondary form-control text-truncate" disabled>[[topic:go-to-my-next-post]]</button>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="col-6">
|
|
36
|
+
<input type="number" class="form-control" id="indexInput" placeholder="[[global:pagination.enter_index]]">
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</li>
|
|
40
|
+
</ul>
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
</div>
|
|
16
16
|
<div>
|
|
17
17
|
<div class="d-flex justify-content-end gap-2">
|
|
18
|
+
<button type="submit" component="topic/quickreply/expand" class="btn btn-sm btn-outline" formmethod="get"><i class="fa fa-expand"></i></button>
|
|
18
19
|
<button type="submit" component="topic/quickreply/button" class="btn btn-sm btn-primary">[[topic:post-quick-reply]]</button>
|
|
19
|
-
<button type="submit" component="topic/quickreply/expand" class="btn btn-sm btn-primary" formmethod="get"><i class="fa fa-expand"></i></button>
|
|
20
20
|
</div>
|
|
21
21
|
</div>
|
|
22
22
|
</form>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<nav class="topic-list-header {{{ if config.stickyToolbar }}} sticky-tools{{{ end }}} navbar navbar-expand p-0 border-0 rounded">
|
|
2
|
-
<div class="card card-header flex-row p-2 border rounded ff-secondary w-100">
|
|
2
|
+
<div class="card card-header flex-row p-2 gap-1 border rounded ff-secondary w-100">
|
|
3
3
|
<ul class="navbar-nav me-auto gap-2 align-items-center">
|
|
4
4
|
{{{ if template.category }}}
|
|
5
5
|
<!-- IMPORT partials/category/watch.tpl -->
|
|
@@ -27,11 +27,11 @@
|
|
|
27
27
|
{{{ end }}}
|
|
28
28
|
|
|
29
29
|
<a href="{config.relative_path}{{{ if template.category }}}{url}{{{ else }}}/{selectedFilter.url}{querystring}{{{ end }}}" class="d-inline-block text-decoration-none">
|
|
30
|
-
<div class="alert alert-warning h-100 m-0 px-2 py-1
|
|
30
|
+
<div class="d-md-block alert alert-warning h-100 m-0 px-2 py-1 line-clamp-2 text-sm text-break hide" id="new-topics-alert">There is a new post. Click here to reload.</div>
|
|
31
31
|
</a>
|
|
32
32
|
</ul>
|
|
33
33
|
|
|
34
|
-
<div class="d-flex gap-1 align-items-
|
|
34
|
+
<div class="d-flex gap-1 align-items-center">
|
|
35
35
|
{{{ if template.category }}}
|
|
36
36
|
{{{ if privileges.topics:create }}}
|
|
37
37
|
<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary btn-sm text-nowrap" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
|
package/templates/topic.tpl
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
</h2>
|
|
12
12
|
|
|
13
13
|
<div class="topic-info d-flex gap-2 align-items-center flex-wrap {{{ if config.centerHeaderElements }}}justify-content-center{{{ end }}}">
|
|
14
|
-
<span component="topic/labels" class="d-flex gap-2
|
|
14
|
+
<span component="topic/labels" class="d-flex gap-2">
|
|
15
15
|
<span component="topic/scheduled" class="badge badge border border-gray-300 text-primary {{{ if !scheduled }}}hidden{{{ end }}}">
|
|
16
16
|
<i class="fa fa-clock-o"></i>
|
|
17
17
|
[[topic:scheduled]]
|