nodebb-theme-harmony 1.0.0-beta.91 → 1.0.0-beta.92

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 (37) hide show
  1. package/package.json +1 -1
  2. package/scss/common.scss +6 -1
  3. package/scss/modules/topics-list.scss +7 -148
  4. package/templates/account/categories.tpl +6 -6
  5. package/templates/account/topics.tpl +2 -2
  6. package/templates/categories.tpl +1 -4
  7. package/templates/chats.tpl +3 -3
  8. package/templates/flags/detail.tpl +2 -2
  9. package/templates/groups/details.tpl +1 -1
  10. package/templates/login.tpl +2 -2
  11. package/templates/notifications.tpl +4 -4
  12. package/templates/partials/account/category-item.tpl +4 -4
  13. package/templates/partials/account/header.tpl +3 -3
  14. package/templates/partials/account/sidebar-left.tpl +27 -27
  15. package/templates/partials/categories/item.tpl +25 -28
  16. package/templates/partials/categories/lastpost.tpl +7 -7
  17. package/templates/partials/category/filter-dropdown-content.tpl +4 -4
  18. package/templates/partials/category/sort.tpl +20 -5
  19. package/templates/partials/category/subcategory.tpl +1 -2
  20. package/templates/partials/category/watch.tpl +18 -9
  21. package/templates/partials/chats/message-window.tpl +2 -2
  22. package/templates/partials/chats/recent_room.tpl +1 -1
  23. package/templates/partials/flags/filters.tpl +2 -2
  24. package/templates/partials/groups/list.tpl +2 -2
  25. package/templates/partials/groups/sidebar-left.tpl +9 -9
  26. package/templates/partials/search-results.tpl +0 -3
  27. package/templates/partials/sidebar/user-menu.tpl +13 -13
  28. package/templates/partials/tags/filter-dropdown-content.tpl +6 -3
  29. package/templates/partials/topic/navigator.tpl +1 -1
  30. package/templates/partials/topic/sort.tpl +6 -6
  31. package/templates/partials/topic/watch.tpl +21 -12
  32. package/templates/partials/topic-filters.tpl +2 -2
  33. package/templates/partials/topic-terms.tpl +2 -2
  34. package/templates/partials/topics_list.tpl +78 -82
  35. package/templates/partials/users/filter-dropdown-content.tpl +4 -4
  36. package/templates/register.tpl +2 -2
  37. package/templates/search.tpl +2 -2
package/templates/partials/category/filter-dropdown-content.tpl CHANGED
@@ -14,15 +14,15 @@
14
14
  <ul component="category/list" class="dropdown-menu p-1 text-sm category-dropdown-menu" role="menu">
15
15
  <li role="presentation" class="category" data-cid="all">
16
16
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{{{ if allCategoriesUrl }}}{config.relative_path}/{allCategoriesUrl}{{{ else }}}#{{{ end }}}">
17
- <div class="flex-1">[[unread:all_categories]]</div>
18
- <i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
17
+ <div class="flex-grow-1">[[unread:all_categories]]</div>
18
+ <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i>
19
19
  </a>
20
20
  </li>
21
21
  {{{each categoryItems}}}
22
22
  <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
23
23
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
24
24
  {../level}
25
- <span component="category-markup" class="flex-1" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
25
+ <span component="category-markup" class="flex-grow-1" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
26
26
  <div class="category-item d-inline-flex align-items-center gap-1">
27
27
  {{{ if ./icon }}}
28
28
  {buildCategoryIcon(@value, "24px", "rounded-circle")}
@@ -30,7 +30,7 @@
30
30
  {./name}
31
31
  </div>
32
32
  </span>
33
- <i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
33
+ <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
34
34
  </a>
35
35
  </li>
36
36
  {{{end}}}
package/templates/partials/category/sort.tpl CHANGED
@@ -5,10 +5,25 @@
5
5
  </button>
6
6
 
7
7
  <ul class="dropdown-menu p-1 text-sm">
8
- <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><span class="flex-1">[[topic:newest_to_oldest]]</span><i class="fa fa-fw text-muted"></i></a></li>
9
- <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><span class="flex-1">[[topic:oldest_to_newest]]</span><i class="fa fa-fw text-muted"></i></a></li>
10
- <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_posts" data-sort="most_posts"><span class="flex-1">[[topic:most_posts]]</span><i class="fa fa-fw text-muted"></i></a></li>
11
- <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_votes" data-sort="most_votes"><span class="flex-1">[[topic:most_votes]]</span><i class="fa fa-fw text-muted"></i></a></li>
12
- <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_views" data-sort="most_views"><span class="flex-1">[[topic:most_views]]</span><i class="fa fa-fw text-muted"></i></a></li>
8
+ <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest">
9
+ <span class="flex-grow-1">[[topic:newest_to_oldest]]</span>
10
+ <i class="flex-shrink-0 fa fa-fw text-muted"></i>
11
+ </a></li>
12
+ <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest">
13
+ <span class="flex-grow-1">[[topic:oldest_to_newest]]</span>
14
+ <i class="flex-shrink-0 fa fa-fw text-muted"></i>
15
+ </a></li>
16
+ <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_posts" data-sort="most_posts">
17
+ <span class="flex-grow-1">[[topic:most_posts]]</span>
18
+ <i class="flex-shrink-0 fa fa-fw text-muted"></i>
19
+ </a></li>
20
+ <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_votes" data-sort="most_votes">
21
+ <span class="flex-grow-1">[[topic:most_votes]]</span>
22
+ <i class="flex-shrink-0 fa fa-fw text-muted"></i>
23
+ </a></li>
24
+ <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_views" data-sort="most_views">
25
+ <span class="flex-grow-1">[[topic:most_views]]</span>
26
+ <i class="flex-shrink-0 fa fa-fw text-muted"></i>
27
+ </a></li>
13
28
  </ul>
14
29
  </div>
package/templates/partials/category/subcategory.tpl CHANGED
@@ -6,11 +6,10 @@
6
6
  <h3 class="fs-6 fw-semibold">[[category:subcategories]]</h3>
7
7
  {{{ end }}}
8
8
 
9
- <ul component="category/subcategory/container" class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
9
+ <ul component="category/subcategory/container" class="categories-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
10
10
  <hr class="text-muted"/>
11
11
  {{{each children}}}
12
12
  <!-- IMPORT partials/categories/item.tpl -->
13
- <hr class="text-muted"/>
14
13
  {{{end}}}
15
14
  </ul>
16
15
  {{{ if hasMoreSubCategories}}}
package/templates/partials/category/watch.tpl CHANGED
@@ -11,31 +11,40 @@
11
11
  <ul class="dropdown-menu p-1 text-sm {{{ if template.account/categories }}}dropdown-menu-end{{{ end }}}">
12
12
  <li>
13
13
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/watching" data-state="watching">
14
- <div class="flex-1 d-flex flex-column">
15
- <span class="d-flex align-items-center gap-2"><i class="fa fa-fw text-muted fa-inbox"></i><span class="flex-1 fw-semibold">[[category:watching]]</span></span>
14
+ <div class="flex-grow-1 d-flex flex-column">
15
+ <span class="d-flex align-items-center gap-2">
16
+ <i class="flex-shrink-0 fa fa-fw text-muted fa-inbox"></i>
17
+ <span class="flex-grow-1 fw-semibold">[[category:watching]]</span>
18
+ </span>
16
19
  <div class="help-text text-muted text-xs">[[category:watching.description]]</div>
17
20
  </div>
18
- <span><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i></span>
21
+ <span class="flex-shrink-0"><i component="category/watching/check" class="fa fa-fw {{{ if ./isWatched }}}fa-check{{{ end }}}"></i></span>
19
22
  </a>
20
23
  </li>
21
24
 
22
25
  <li>
23
26
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/notwatching" data-state="notwatching">
24
- <div class="flex-1 d-flex flex-column">
25
- <span class="d-flex align-items-center gap-2"><i class="fa fa-fw text-muted fa-clock-o"></i><span class="flex-1 fw-semibold">[[category:not-watching]]</span></span>
27
+ <div class="flex-grow-1 d-flex flex-column">
28
+ <span class="d-flex align-items-center gap-2">
29
+ <i class="flex-shrink-0 fa fa-fw text-muted fa-clock-o"></i>
30
+ <span class="flex-grow-1 fw-semibold">[[category:not-watching]]</span>
31
+ </span>
26
32
  <div class="help-text text-muted text-xs">[[category:not-watching.description]]</div>
27
33
  </div>
28
- <span><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i></span>
34
+ <span class="flex-shrink-0"><i component="category/notwatching/check" class="fa fa-fw {{{ if ./isNotWatched }}}fa-check{{{ end }}}"></i></span>
29
35
  </a>
30
36
  </li>
31
37
 
32
38
  <li>
33
39
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="category/ignoring" data-state="ignoring">
34
- <div class="flex-1 d-flex flex-column">
35
- <span class="d-flex align-items-center gap-2"><i class="fa fa-fw text-muted fa-eye-slash"></i><span class="flex-1 fw-semibold">[[category:ignoring]]</span></span>
40
+ <div class="flex-grow-1 d-flex flex-column">
41
+ <span class="d-flex align-items-center gap-2">
42
+ <i class="flex-shrink-0 fa fa-fw text-muted fa-eye-slash"></i>
43
+ <span class="flex-grow-1 fw-semibold">[[category:ignoring]]</span>
44
+ </span>
36
45
  <div class="help-text text-muted text-xs">[[category:ignoring.description]]</div>
37
46
  </div>
38
- <span><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i></span>
47
+ <span class="flex-shrink-0"><i component="category/ignoring/check" class="fa fa-fw {{{ if ./isIgnored }}}fa-check{{{ end }}}"></i></span>
39
48
  </a>
40
49
  </li>
41
50
  </ul>
package/templates/partials/chats/message-window.tpl CHANGED
@@ -7,8 +7,8 @@
7
7
  {{{ if roomId }}}
8
8
  <div component="chat/messages" class="expanded-chat d-flex flex-column h-100" data-roomid="{roomId}">
9
9
  <div component="chat/header" class="d-flex align-items-center px-md-3 gap-3">
10
- <a href="#" data-action="close" role="button" class="d-flex d-md-none btn btn-outline align-text-top"><i class="fa fa-chevron-left"></i></a>
11
- <h5 class="members flex-1 fw-semibold tracking-tight mb-0">
10
+ <a href="#" data-action="close" role="button" class="flex-shrink-0 d-flex d-md-none btn btn-outline align-text-top"><i class="fa fa-chevron-left"></i></a>
11
+ <h5 class="members flex-grow-1 fw-semibold tracking-tight mb-0">
12
12
  {./chatWithMessage}
13
13
  </h5>
14
14
 
package/templates/partials/chats/recent_room.tpl CHANGED
@@ -43,4 +43,4 @@
43
43
  </div>
44
44
  </div>
45
45
  </div>
46
- <hr class="text-muted opacity-25 my-1" />
46
+ <hr class="my-1" />
package/templates/partials/flags/filters.tpl CHANGED
@@ -32,7 +32,7 @@
32
32
  <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
33
33
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
34
34
  {../level}
35
- <span component="category-markup" class="flex-1" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
35
+ <span component="category-markup" class="flex-grow-1" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
36
36
  <div class="category-item d-inline-flex align-items-center gap-1">
37
37
  {{{ if ./icon }}}
38
38
  {buildCategoryIcon(@value, "24px", "rounded-circle")}
@@ -40,7 +40,7 @@
40
40
  {./name}
41
41
  </div>
42
42
  </span>
43
- <i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
43
+ <i component="category/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
44
44
  </a>
45
45
  </li>
46
46
  {{{end}}}
package/templates/partials/groups/list.tpl CHANGED
@@ -5,8 +5,8 @@
5
5
  <a href="{config.relative_path}/groups/{./slug}" class="d-block h-100 text-reset text-decoration-none">
6
6
  <div class="card-body d-flex flex-column gap-1 border border-top-0 rounded-bottom h-100">
7
7
  <div class="d-flex">
8
- <div class="flex-1 fs-6 fw-semibold">{./displayName}</div>
9
- <div class="text-sm"><i class="text-muted fa-solid fa-user"></i> {./memberCount}</div>
8
+ <div class="flex-grow-1 fs-6 fw-semibold">{./displayName}</div>
9
+ <div class="flex-shrink-0 text-sm"><i class="text-muted fa-solid fa-user"></i> {./memberCount}</div>
10
10
  </div>
11
11
  <div class="text-sm">{./description}</div>
12
12
  </div>
package/templates/partials/groups/sidebar-left.tpl CHANGED
@@ -1,26 +1,26 @@
1
- <div class="flex-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
1
+ <div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
2
2
  <div class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem; z-index: 1;">
3
3
  <button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
4
- <div class="flex-1">[[global:posts]]</div>
4
+ <div class="flex-grow-1">[[global:posts]]</div>
5
5
  </button>
6
6
  <button data-bs-toggle="tab" data-bs-target="#groups-members" class="btn-ghost fw-semibold">
7
- <div class="flex-1">[[groups:members]]</div>
8
- <span class="text-xs human-readable-number" title="{group.memberCount}">{group.memberCount}</span>
7
+ <div class="flex-grow-1">[[groups:members]]</div>
8
+ <span class="flex-shrink-0 text-xs human-readable-number" title="{group.memberCount}">{group.memberCount}</span>
9
9
  </button>
10
10
 
11
11
  {{{ if group.isOwner }}}
12
12
  <button data-bs-toggle="tab" data-bs-target="#groups-pending" class="btn-ghost fw-semibold">
13
- <div class="flex-1">[[groups:details.pending]]</div>
14
- <span class="text-xs human-readable-number" title="{group.pending.length}">{group.group.pending.length}</span>
13
+ <div class="flex-grow-1">[[groups:details.pending]]</div>
14
+ <span class="flex-shrink-0 text-xs human-readable-number" title="{group.pending.length}">{group.group.pending.length}</span>
15
15
  </button>
16
16
 
17
17
  <button data-bs-toggle="tab" data-bs-target="#groups-invited" class="btn-ghost fw-semibold">
18
- <div class="flex-1">[[groups:details.invited]]</div>
19
- <span class="text-xs human-readable-number" title="{group.invited.length}">{group.group.invited.length}</span>
18
+ <div class="flex-grow-1">[[groups:details.invited]]</div>
19
+ <span class="flex-shrink-0 text-xs human-readable-number" title="{group.invited.length}">{group.group.invited.length}</span>
20
20
  </button>
21
21
 
22
22
  <button data-bs-toggle="tab" data-bs-target="#groups-admin" class="btn-ghost fw-semibold">
23
- <div class="flex-1">[[global:header.admin]]</div>
23
+ <div class="flex-grow-1">[[global:header.admin]]</div>
24
24
  </button>
25
25
  {{{ end }}}
26
26
  </div>
package/templates/partials/search-results.tpl CHANGED
@@ -44,9 +44,6 @@
44
44
  {{{ if categories.length }}}
45
45
  <ul class="categories list-unstyled">
46
46
  {{{each categories}}}
47
- {{{ if !@first }}}
48
- <hr class="text-muted opacity-25"/>
49
- {{{ end }}}
50
47
  <!-- IMPORT partials/categories/item.tpl -->
51
48
  {{{end}}}
52
49
  </ul>
package/templates/partials/sidebar/user-menu.tpl CHANGED
@@ -5,7 +5,7 @@
5
5
  <ul id="user-control-list" component="header/usercontrol" class="overscroll-behavior-contain user-dropdown dropdown-menu shadow p-1 text-sm ff-base" aria-labelledby="user_dropdown">
6
6
  <li>
7
7
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" component="header/profilelink" href="{relative_path}/user/{user.userslug}">
8
- <span component="user/status" class="badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span>
8
+ <span component="user/status" class="flex-shrink-0 badge border border-white border-2 rounded-circle status {user.status}"><span class="visually-hidden">[[global:{user.status}]]</span></span>
9
9
  <span class="fw-semibold" component="header/username">{user.username}</span>
10
10
  </a>
11
11
  </li>
@@ -13,30 +13,30 @@
13
13
  <li><h6 class="dropdown-header text-xs">[[global:status]]</h6></li>
14
14
  <li>
15
15
  <a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.online }}}selected{{{ end }}}" data-status="online">
16
- <span component="user/status" class="badge border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span>
17
- <span class="flex-1">[[global:online]]</span>
18
- <i class="fa-solid fa-check text-muted flex-grow-0"></i>
16
+ <span component="user/status" class="flex-shrink-0 badge border border-white border-2 rounded-circle status online"><span class="visually-hidden">[[global:online]]</span></span>
17
+ <span class="flex-grow-1">[[global:online]]</span>
18
+ <i class="fa-solid fa-check text-muted flex-shrink-0"></i>
19
19
  </a>
20
20
  </li>
21
21
  <li>
22
22
  <a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.away }}}selected{{{ end }}}" data-status="away">
23
- <span component="user/status" class="badge border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span>
24
- <span class="flex-1">[[global:away]]</span>
25
- <i class="fa-solid fa-check text-muted flex-grow-0"></i>
23
+ <span component="user/status" class="flex-shrink-0 badge border border-white border-2 rounded-circle status away"><span class="visually-hidden">[[global:away]]</span></span>
24
+ <span class="flex-grow-1">[[global:away]]</span>
25
+ <i class="fa-solid fa-check text-muted flex-shrink-0"></i>
26
26
  </a>
27
27
  </li>
28
28
  <li>
29
29
  <a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.dnd }}}selected{{{ end }}}" data-status="dnd">
30
- <span component="user/status" class="badge border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span>
31
- <span class="flex-1">[[global:dnd]]</span>
32
- <i class="fa-solid fa-check text-muted flex-grow-0"></i>
30
+ <span component="user/status" class="flex-shrink-0 badge border border-white border-2 rounded-circle status dnd"><span class="visually-hidden">[[global:dnd]]</span></span>
31
+ <span class="flex-grow-1">[[global:dnd]]</span>
32
+ <i class="fa-solid fa-check text-muted flex-shrink-0"></i>
33
33
  </a>
34
34
  </li>
35
35
  <li>
36
36
  <a href="#" class="dropdown-item rounded-1 user-status d-flex align-items-center gap-2 {{{ if user.offline }}}selected{{{ end }}}" data-status="offline">
37
- <span component="user/status" class="badge border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span>
38
- <span class="flex-1">[[global:invisible]]</span>
39
- <i class="fa-solid fa-check text-muted flex-grow-0"></i>
37
+ <span component="user/status" class="flex-shrink-0 badge border border-white border-2 rounded-circle status offline"><span class="visually-hidden">[[global:invisible]]</span></span>
38
+ <span class="flex-grow-1">[[global:invisible]]</span>
39
+ <i class="fa-solid fa-check text-muted flex-shrink-0"></i>
40
40
  </a>
41
41
  </li>
42
42
  <li role="presentation" class="dropdown-divider"></li>
package/templates/partials/tags/filter-dropdown-content.tpl CHANGED
@@ -14,17 +14,20 @@
14
14
  </div>
15
15
  <ul component="tag/filter/list" class="dropdown-menu p-1 text-sm overflow-auto" role="menu" style="max-height: 500px;">
16
16
  <li role="presentation" data-tag="">
17
- <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#"><span class="flex-1">[[tags:all-tags]]</span><i component="tag/select/icon" class="fa fa-fw fa-check {{{if selectedTag }}}invisible{{{ end }}}"></i></a>
17
+ <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
18
+ <span class="flex-grow-1">[[tags:all-tags]]</span>
19
+ <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{if selectedTag }}}invisible{{{ end }}}"></i>
20
+ </a>
18
21
  </li>
19
22
  {{{ each tagItems }}}
20
23
  <li role="presentation" data-tag="{./valueEscaped}">
21
24
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="#">
22
- <span component="tag-markup" class="flex-1">
25
+ <span component="tag-markup" class="flex-grow-1">
23
26
  <div class="d-inline-flex align-items-center gap-1">
24
27
  {./valueEscaped}
25
28
  </div>
26
29
  </span>
27
- <i component="tag/select/icon" class="fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
30
+ <i component="tag/select/icon" class="flex-shrink-0 fa fa-fw fa-check {{{ if !./selected }}}invisible{{{ end }}}"></i>
28
31
  </a>
29
32
  </li>
30
33
  {{{ end }}}
package/templates/partials/topic/navigator.tpl CHANGED
@@ -1,4 +1,4 @@
1
- <div class="pagination-block d-none d-lg-block flex-1 mb-2">
1
+ <div class="pagination-block d-none d-lg-block flex-grow-1 mb-2">
2
2
  <div class="ps-1 ps-md-0 d-inline-block sticky-top" style="top:6rem;z-index:1;">
3
3
  <div class="scroller-content d-flex gap-2 flex-column align-items-start">
4
4
  <div class="pointer pagetop btn-ghost-sm d-inline-flex" style="padding: 4px;"><i class="fa fa-chevron-up"></i></div>
package/templates/partials/topic/sort.tpl CHANGED
@@ -7,18 +7,18 @@
7
7
  </button>
8
8
  <ul class="dropdown-menu p-1 text-sm">
9
9
  <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="oldest_to_newest" data-sort="oldest_to_newest">
10
- <span class="flex-1">[[topic:oldest_to_newest]]</span>
11
- <i class="fa fa-fw"></i>
10
+ <span class="flex-grow-1">[[topic:oldest_to_newest]]</span>
11
+ <i class="flex-shrink-0 fa fa-fw"></i>
12
12
  </a>
13
13
  </li>
14
14
  <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="newest_to_oldest" data-sort="newest_to_oldest">
15
- <span class="flex-1">[[topic:newest_to_oldest]]</span>
16
- <i class="fa fa-fw"></i>
15
+ <span class="flex-grow-1">[[topic:newest_to_oldest]]</span>
16
+ <i class="flex-shrink-0 fa fa-fw"></i>
17
17
  </a>
18
18
  </li>
19
19
  <li><a class="dropdown-item rounded-1 d-flex align-items-center gap-2" href="#" class="most_votes" data-sort="most_votes">
20
- <span class="flex-1">[[topic:most_votes]]</span>
21
- <i class="fa fa-fw"></i>
20
+ <span class="flex-grow-1">[[topic:most_votes]]</span>
21
+ <i class="flex-shrink-0 fa fa-fw"></i>
22
22
  </a>
23
23
  </li>
24
24
  </ul>
package/templates/partials/topic/watch.tpl CHANGED
@@ -2,48 +2,57 @@
2
2
  <div class="btn-group bottom-sheet" component="topic/watch">
3
3
  <button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
4
4
  <span component="topic/following/menu" class="d-flex gap-2 align-items-center{{{ if !isFollowing }}} hidden{{{ end }}}">
5
- <i class="fa fa-fw fa-bell-o link-primary"></i>
5
+ <i class="flex-shrink-0 fa fa-fw fa-bell-o link-primary"></i>
6
6
  <span class="d-none d-md-inline fw-semibold">[[topic:watching]]</span>
7
7
  </span>
8
8
 
9
9
  <span component="topic/not-following/menu" class="d-flex gap-2 align-items-center{{{ if !isNotFollowing}}} hidden{{{ end }}}">
10
- <i class="fa fa-fw fa-bell-slash-o link-primary"></i>
10
+ <i class="flex-shrink-0 fa fa-fw fa-bell-slash-o link-primary"></i>
11
11
  <span class="d-none d-md-inline fw-semibold">[[topic:not-watching]]</span>
12
12
  </span>
13
13
 
14
14
  <span component="topic/ignoring/menu" class="d-flex gap-2 align-items-center{{{ if !isIgnoring }}} hidden{{{ end }}}">
15
- <i class="fa fa-fw fa-eye-slash link-primary"></i>
15
+ <i class="flex-shrink-0 fa fa-fw fa-eye-slash link-primary"></i>
16
16
  <span class="d-none d-md-inline fw-semibold">[[topic:ignoring]]</span>
17
17
  </span>
18
18
  </button>
19
19
  <ul class="dropdown-menu p-1 text-sm">
20
20
  <li>
21
21
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/following">
22
- <div class="flex-1 d-flex flex-column">
23
- <span class="d-flex align-items-center gap-2"><i class="fa fa-fw fa-bell-o"></i><span class="flex-1 fw-semibold">[[topic:watching]]</span></span>
22
+ <div class="flex-grow-1 d-flex flex-column">
23
+ <span class="d-flex align-items-center gap-2">
24
+ <i class="flex-shrink-0 fa fa-fw fa-bell-o"></i>
25
+ <span class="flex-grow-1 fw-semibold">[[topic:watching]]</span>
26
+ </span>
24
27
  <div class="help-text text-muted text-xs">[[topic:watching.description]]</div>
25
28
  </div>
26
- <span><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
29
+ <span class="flex-shrink-0"><i component="topic/following/check" class="fa fa-fw {{{ if isFollowing }}}fa-check{{{ end }}}"></i></span>
27
30
  </a>
28
31
  </li>
29
32
 
30
33
  <li>
31
34
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/not-following">
32
- <div class="flex-1 d-flex flex-column">
33
- <span class="d-flex align-items-center gap-2"><i class="fa fa-fw fa-bell-slash-o"></i><span class="flex-1 fw-semibold">[[topic:not-watching]]</span></span>
35
+ <div class="flex-grow-1 d-flex flex-column">
36
+ <span class="d-flex align-items-center gap-2">
37
+ <i class="flex-shrink-0 fa fa-fw fa-bell-slash-o"></i>
38
+ <span class="flex-grow-1 fw-semibold">[[topic:not-watching]]</span>
39
+ </span>
34
40
  <div class="help-text text-muted text-xs">[[topic:not-watching.description]]</div>
35
41
  </div>
36
- <span><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i></span>
42
+ <span class="flex-shrink-0"><i component="topic/not-following/check" class="fa fa-fw {{{ if isNotFollowing }}}fa-check{{{ end }}}"></i></span>
37
43
  </a>
38
44
  </li>
39
45
 
40
46
  <li>
41
47
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2 p-2" href="#" component="topic/ignoring">
42
- <div class="flex-1 d-flex flex-column">
43
- <span class="d-flex align-items-center gap-2"><i class="fa fa-fw fa-eye-slash"></i><span class="flex-1 fw-semibold">[[topic:ignoring]]</span></span>
48
+ <div class="flex-grow-1 d-flex flex-column">
49
+ <span class="d-flex align-items-center gap-2">
50
+ <i class="flex-shrink-0 fa fa-fw fa-eye-slash"></i>
51
+ <span class="flex-grow-1 fw-semibold">[[topic:ignoring]]</span>
52
+ </span>
44
53
  <div class="help-text text-muted text-xs">[[topic:ignoring.description]]</div>
45
54
  </div>
46
- <span><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i></span>
55
+ <span class="flex-shrink-0"><i component="topic/ignoring/check" class="fa fa-fw {{{ if isIgnoring }}}fa-check{{{ end }}}"></i></span>
47
56
  </a>
48
57
  </li>
49
58
  </ul>
package/templates/partials/topic-filters.tpl CHANGED
@@ -7,8 +7,8 @@
7
7
  {{{each filters}}}
8
8
  <li role="presentation" class="category {{{if filters.selected}}}selected{{{end}}}">
9
9
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{config.relative_path}/{filters.url}">
10
- <div class="flex-1">{filters.name}</div>
11
- <i class="fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i>
10
+ <div class="flex-grow-1">{filters.name}</div>
11
+ <i class="flex-shrink-0 fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i>
12
12
  </a>
13
13
  </li>
14
14
  {{{end}}}
package/templates/partials/topic-terms.tpl CHANGED
@@ -7,8 +7,8 @@
7
7
  {{{each terms}}}
8
8
  <li role="presentation" class="category">
9
9
  <a class="dropdown-item rounded-1 d-flex align-items-center gap-2" role="menu-item" href="{config.relative_path}/{terms.url}">
10
- <div class="flex-1">{terms.name}</div>
11
- <i class="fa fa-fw {{{ if terms.selected }}}fa-check{{{ end }}}"></i>
10
+ <div class="flex-grow-1">{terms.name}</div>
11
+ <i class="flex-shrink-0 fa fa-fw {{{ if terms.selected }}}fa-check{{{ end }}}"></i>
12
12
  </a>
13
13
  </li>
14
14
  {{{end}}}