nodebb-theme-harmony 1.2.13 → 1.2.15

package/library.js

@@ -186,3 +186,8 @@ library.filterMiddlewareRenderHeader = async function (hookData) {
 	return hookData;
 };
 
+library.filterTeasersConfigureStripTags = function (hookData) {
+	// teasers have a stretched-link to go to last post, the anchors in them are not clickable
+	hookData.tags.push('a');
+	return hookData;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.2.13",
+  "version": "1.2.15",
   "nbbpm": {
     "compatibility": "^3.5.0"
   },

package/plugin.json

@@ -8,7 +8,8 @@
 		{ "hook": "filter:settings.get", "method": "getAdminSettings"},
 		{ "hook": "filter:user.saveSettings", "method": "saveUserSettings" },
 		{ "hook": "filter:user.profileMenu", "method": "addProfileItem" },
-		{ "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" }
+		{ "hook": "filter:middleware.renderHeader", "method": "filterMiddlewareRenderHeader" },
+		{ "hook": "filter:teasers.configureStripTags", "method": "filterTeasersConfigureStripTags"}
 	],
 	"scripts": [
 		"public/harmony.js"

package/scss/common.scss

@@ -119,4 +119,11 @@ body:not(.page-user) {
 		max-height: 500px;
 		width: auto;
 	}
+}
+
+[component="chat/message/body"],
+[component="post/content"],
+[component="topic/teaser"] .post-content,
+[component="category/posts"] .post-content {
+	a { text-decoration: underline;}
 }

package/templates/partials/categories/lastpost.tpl

@@ -4,9 +4,7 @@
 	<div component="category/posts" class="ps-2 text-xs d-flex flex-column h-100 gap-1">
 		<div class="text-nowrap text-truncate">
 			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "18px", true, "avatar-tooltip")}</a>
-			<a class="permalink text-muted" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}">
-				<span class="timeago text-xs" title="{../timestampISO}"></span>
-			</a>
+			<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" title="{./timestampISO}" aria-label="[[global:lastpost]]"></a>
 		</div>
 		<div class="post-content text-xs text-break line-clamp-sm-2 lh-sm position-relative flex-fill">
 			<a class="stretched-link" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" aria-label="[[global:lastpost]]"></a>

package/templates/partials/header/brand.tpl

@@ -3,8 +3,8 @@
 	<div class="col-12 d-flex border-bottom pb-3 {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
 		<div component="brand/wrapper" class="d-flex align-items-center gap-3 p-2 rounded-1 align-content-stretch ">
 			{{{ if brand:logo }}}
-			<a component="brand/anchor" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}">
-				<img component="brand/logo" alt="{brand:logo:alt}" class="{brand:logo:display}" src="{brand:logo}?{config.cache-buster}" />
+			<a component="brand/anchor" href="{{{ if brand:logo:url }}}{brand:logo:url}{{{ else }}}{relative_path}/{{{ end }}}" title="[[global:header.brand-logo]]">
+				<img component="brand/logo" alt="{{{ if brand:logo:alt }}}{brand:logo:alt}{{{ else }}}[[global:header.brand-logo]]{{{ end }}}" class="{brand:logo:display}" src="{brand:logo}?{config.cache-buster}" />
 			</a>
 			{{{ end }}}
 

package/templates/partials/paginator.tpl

@@ -1,6 +1,6 @@
 <div component="pagination" class="pagination-container mt-3{{{ if !pagination.pages.length }}} hidden{{{ end }}}">
 	<ul class="pagination pagination-sm gap-1 hidden-xs hidden-sm justify-content-center">
-		<li class="page-item previous float-start{{{ if !pagination.prev.active }}} disabled{{{ end }}}">
+		<li class="page-item previous {{{ if !pagination.prev.active }}} disabled{{{ end }}}">
 			<a class="page-link rounded fw-secondary px-3" href="?{pagination.prev.qs}" data-page="{pagination.prev.page}"><i class="fa fa-chevron-left"></i> </a>
 		</li>
 
@@ -16,7 +16,7 @@
 			{{{ end }}}
 		{{{end}}}
 
-		<li class="page-item next float-end {{{ if !pagination.next.active }}} disabled{{{ end }}}">
+		<li class="page-item next {{{ if !pagination.next.active }}} disabled{{{ end }}}">
 			<a class="page-link rounded fw-secondary px-3" href="?{pagination.next.qs}" data-page="{pagination.next.page}"> <i class="fa fa-chevron-right"></i></a>
 		</li>
 	</ul>

package/templates/partials/post_bar.tpl

@@ -1,7 +1,7 @@
 <div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}}">
 	<nav class="d-flex flex-nowrap my-2 p-0 border-0 rounded topic-main-buttons">
 		<div class="d-flex flex-row p-2 text-bg-light border rounded w-100 align-items-center">
-			<ul class="d-flex list-unstyled me-auto mb-0 gap-2 align-items-center flex-wrap">
+			<div class="d-flex list-unstyled me-auto mb-0 gap-2 align-items-center flex-wrap">
 				{{{ if loggedIn }}}
 				<button component="topic/mark-unread" class="btn-ghost-sm ff-secondary d-flex gap-2 align-items-center">
 					<i class="fa fa-fw fa-inbox text-primary"></i>
@@ -22,7 +22,7 @@
 				<!-- IMPORT partials/topic/browsing-users.tpl -->
 				</div>
 				{{{ end }}}
-			</ul>
+			</div>
 			<!-- IMPORT partials/topic/reply-button.tpl -->
 		</div>
 	</nav>

package/templates/partials/sidebar/search-mobile.tpl

@@ -16,11 +16,11 @@
 			</div>
 
 			<div class="d-flex gap-1 input-container">
-				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
+				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" aria-label="[[search:type-to-search]]">
 
-				<div class="nav-link d-flex justify-content-center align-items-center advanced-search-link">
+				<a class="nav-link d-flex justify-content-center align-items-center advanced-search-link" href="{config.relative_path}/search" title="[[search:advanced-search]]">
 					<i class="fa fa-gears fa-fw text-muted"></i>
-				</div>
+				</a>
 			</div>
 
 			<button type="submit" class="btn btn-outline-secondary hide">[[global:search]]</button>

package/templates/partials/sidebar/search.tpl

@@ -8,11 +8,11 @@
 	<form component="search/form" id="search-form" class="d-flex justify-content-end align-items-center" role="search" method="GET">
 		<div component="search/fields" class="w-100" id="search-fields">
 			<div class="d-flex gap-1">
-				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="">
+				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" aria-label="[[search:type-to-search]]">
 
-				<div class="btn-ghost advanced-search-link">
+				<a class="btn-ghost advanced-search-link" href="{config.relative_path}/search" title="[[search:advanced-search]]">
 					<i class="fa fa-gears fa-fw text-muted"></i>
-				</div>
+				</a>
 			</div>
 
 			<div id="quick-search-container" class="quick-search-container d-block mt-2 hidden">

package/templates/partials/topic/navigator.tpl

@@ -14,7 +14,7 @@
 
 					<div class="unread d-inline-block position-absolute bottom-0">
 						<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold ms-2">
-							<a class="text-decoration-none" href="{url}"></a>
+							<a class="text-decoration-none" href="{url}" tabindex="-1" aria-disabled="true" aria-label="[[topic:unread-posts-link]]"></a>
 						</div>
 					</div>
 				</div>

package/templates/partials/topic-list-bar.tpl

@@ -1,7 +1,7 @@
 <div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} mb-3">
 	<nav class="topic-list-header d-flex flex-nowrap my-2 p-0 border-0 rounded">
 		<div class="d-flex flex-row p-2 text-bg-light gap-1 border rounded w-100 align-items-center">
-			<ul component="category/controls" class="d-flex list-unstyled me-auto mb-0 gap-2 align-items-start flex-wrap">
+			<div component="category/controls" class="d-flex me-auto mb-0 gap-2 align-items-start flex-wrap">
 				{{{ if template.category }}}
 				<!-- IMPORT partials/category/watch.tpl -->
 				<!-- IMPORT partials/tags/filter-dropdown-left.tpl -->
@@ -27,13 +27,13 @@
 				<!-- IMPORT partials/category/tools.tpl -->
 
 				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
-				<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item"><i class="fa fa-rss text-primary"></i></a>
+				<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
 				{{{ end }}}
 
 				<a href="{config.relative_path}{{{ if template.category }}}{url}{{{ else }}}/{selectedFilter.url}{querystring}{{{ end }}}" class="btn btn-secondary fw-semibold position-absolute top-100 translate-middle-x start-50 mt-1 hide" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" id="new-topics-alert">
 					<i class="fa fa-fw fa-arrow-up"></i> [[recent:load-new-posts]]
 				</a>
-			</ul>
+			</div>
 
 			<div class="d-flex gap-1 align-items-center">
 				{{{ if template.category }}}

package/templates/partials/topics_list.tpl

@@ -111,11 +111,10 @@
 					{{{ if ./teaser.pid }}}
 					<div class="ps-2">
 						<a href="{config.relative_path}/user/{./teaser.user.userslug}" class="text-decoration-none">{buildAvatar(./teaser.user, "18px", true, "avatar-tooltip not-responsive")}</a>
-						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}">
-						</a>
+						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}" aria-label="[[global:lastpost]]"></a>
 					</div>
 					<div class="post-content text-xs ps-2 line-clamp-sm-2 lh-sm text-break position-relative flex-fill">
-						<a class="stretched-link" href="{config.relative_path}/topic/{./slug}/{./teaser.index}"></a>
+						<a class="stretched-link" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" aria-label="[[global:lastpost]]"></a>
 						{./teaser.content}
 					</div>
 					{{{ end }}}