nodebb-theme-persona 13.3.31 → 13.3.33

package/templates/groups/details.tpl

@@ -1,77 +1,77 @@
-<div component="groups/container" class="groups details row">
-	<div component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
-		<!-- IF group.isOwner -->
-		<div class="controls">
-			<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>
-			<span class="resize"><i class="fa fa-fw fa-4x fa-arrows"></i></span>
-			<span class="remove"><i class="fa fa-fw fa-4x fa-times"></i></span>
-		</div>
-		<div class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
-		<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
-		<!-- ENDIF group.isOwner -->
-	</div>
-
-	<div class="col-12">
-		<!-- IMPORT partials/breadcrumbs.tpl -->
-	</div>
-
-	<div class="col-lg-4 col-12">
-		<div class="card mb-3">
-			<div class="card-header">
-				<span class="fs-5">
-					<i class="fa fa-list-ul"></i> [[groups:details.title]]
-					<!-- IF group.private --><span class="badge bg-info text-dark">[[groups:details.private]]</span><!-- ENDIF group.private -->
-					<!-- IF group.hidden --><span class="badge bg-info text-dark">[[groups:details.hidden]]</span>&nbsp;<!-- ENDIF group.hidden -->
-				</span>
-			</div>
-			<div class="card-body">
-				<h2>{group.displayName}</h2>
-				<p>{group.descriptionParsed}</p>
-				<!-- IF isAdmin -->
-				<div class="float-end">
-					<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-info"><i class="fa fa-gear"></i> [[user:edit]]</a>
-				</div>
-				<!-- ENDIF isAdmin -->
-				<!-- IF loggedIn -->
-				<div class="float-end">
-					{function.membershipBtn, group}&nbsp;
-				</div>
-				<!-- ENDIF loggedIn -->
-			</div>
-		</div>
-
-		<div class="card mb-3">
-			<div class="card-header">
-				<span class="fs-5">
-					<i class="fa fa-users"></i> [[groups:details.members]]
-				</span>
-			</div>
-			<div class="card-body">
-				<!-- IMPORT partials/groups/memberlist.tpl -->
-			</div>
-		</div>
-
-		<!-- IF group.isOwner -->
-		<!-- IMPORT partials/groups/admin.tpl -->
-		<!-- ENDIF group.isOwner -->
-
-		<div data-widget-area="left">
-			{{{each widgets.left}}}
-			{{widgets.left.html}}
-			{{{end}}}
-		</div>
-	</div>
-	<div class="col-lg-8 col-12">
-		<div class="col-lg-11">
-			<!-- IF !posts.length -->
-			<div class="alert alert-info">[[groups:details.has-no-posts]]</div>
-			<!-- ENDIF !posts.length -->
-			<!-- IMPORT partials/posts_list.tpl -->
-		</div>
-		<div data-widget-area="right">
-			{{{each widgets.right}}}
-			{{widgets.right.html}}
-			{{{end}}}
-		</div>
-	</div>
-</div>
+<div component="groups/container" class="groups details row">
+	<div component="groups/cover" style="background-image: url({group.cover:url}); background-position: {group.cover:position};">
+		<!-- IF group.isOwner -->
+		<div class="controls">
+			<span class="upload"><i class="fa fa-fw fa-4x fa-upload"></i></span>
+			<span class="resize"><i class="fa fa-fw fa-4x fa-arrows"></i></span>
+			<span class="remove"><i class="fa fa-fw fa-4x fa-times"></i></span>
+		</div>
+		<div class="save">[[groups:cover-save]] <i class="fa fa-fw fa-floppy-o"></i></div>
+		<div class="indicator">[[groups:cover-saving]] <i class="fa fa-fw fa-refresh fa-spin"></i></div>
+		<!-- ENDIF group.isOwner -->
+	</div>
+
+	<div class="col-12">
+		<!-- IMPORT partials/breadcrumbs.tpl -->
+	</div>
+
+	<div class="col-lg-4 col-12">
+		<div class="card mb-3">
+			<div class="card-header">
+				<span class="fs-5">
+					<i class="fa fa-list-ul"></i> [[groups:details.title]]
+					<!-- IF group.private --><span class="badge bg-info text-dark">[[groups:details.private]]</span><!-- ENDIF group.private -->
+					<!-- IF group.hidden --><span class="badge bg-info text-dark">[[groups:details.hidden]]</span>&nbsp;<!-- ENDIF group.hidden -->
+				</span>
+			</div>
+			<div class="card-body">
+				<h2>{group.displayName}</h2>
+				<p>{group.descriptionParsed}</p>
+				<!-- IF isAdmin -->
+				<div class="float-end">
+					<a href="{config.relative_path}/admin/manage/groups/{group.nameEncoded}" target="_blank" class="btn btn-info"><i class="fa fa-gear"></i> [[user:edit]]</a>
+				</div>
+				<!-- ENDIF isAdmin -->
+				<!-- IF loggedIn -->
+				<div class="float-end">
+					{function.membershipBtn, group}&nbsp;
+				</div>
+				<!-- ENDIF loggedIn -->
+			</div>
+		</div>
+
+		<div class="card mb-3">
+			<div class="card-header">
+				<span class="fs-5">
+					<i class="fa fa-users"></i> [[groups:details.members]]
+				</span>
+			</div>
+			<div class="card-body">
+				<!-- IMPORT partials/groups/memberlist.tpl -->
+			</div>
+		</div>
+
+		<!-- IF group.isOwner -->
+		<!-- IMPORT partials/groups/admin.tpl -->
+		<!-- ENDIF group.isOwner -->
+
+		<div data-widget-area="left">
+			{{{each widgets.left}}}
+			{{widgets.left.html}}
+			{{{end}}}
+		</div>
+	</div>
+	<div class="col-lg-8 col-12">
+		<div class="col-lg-11">
+			<!-- IF !posts.length -->
+			<div class="alert alert-info">[[groups:details.has-no-posts]]</div>
+			<!-- ENDIF !posts.length -->
+			<!-- IMPORT partials/posts_list.tpl -->
+		</div>
+		<div data-widget-area="right">
+			{{{each widgets.right}}}
+			{{widgets.right.html}}
+			{{{end}}}
+		</div>
+	</div>
+</div>

package/templates/groups/list.tpl

@@ -1,48 +1,48 @@
-<!-- IMPORT partials/breadcrumbs.tpl -->
-<div data-widget-area="header">
-	{{{each widgets.header}}}
-	{{widgets.header.html}}
-	{{{end}}}
-</div>
-<div class="groups list">
-	<div class="row justify-content-between">
-		<div class="col-lg-6">
-			<!-- IF allowGroupCreation -->
-			<button class="btn btn-primary" data-action="new"><i class="fa fa-plus"></i> [[groups:new-group]]</button>
-			<!-- ENDIF allowGroupCreation -->
-		</div>
-		<div class="col-lg-6">
-			<div class="row justify-content-end">
-				<div class="col-5 col-md-6">
-					<select class="form-select" id="search-sort">
-						<option value="alpha">[[groups:details.group-name]]</option>
-						<option value="count">[[groups:details.member-count]]</option>
-						<option value="date">[[groups:details.creation-date]]</option>
-					</select>
-				</div>
-				<div class="col-7 col-md-6">
-					<div class="input-group">
-						<input type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" id="search-text">
-						<button id="search-button" class="btn btn-primary">
-							<i class="fa fa-search"></i>
-						</button>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-
-	<hr />
-
-	<div component="groups/container" class="row" id="groups-list" data-nextstart={nextStart}>
-		<!-- IF groups.length -->
-		<!-- IMPORT partials/groups/list.tpl -->
-		<!-- ELSE -->
-		<div class="col-12">
-			<div class="alert alert-warning">
-			[[groups:no-groups-found]]
-			</div>
-		</div>
-		<!-- ENDIF groups.length -->
-	</div>
-</div>
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div data-widget-area="header">
+	{{{each widgets.header}}}
+	{{widgets.header.html}}
+	{{{end}}}
+</div>
+<div class="groups list">
+	<div class="row justify-content-between">
+		<div class="col-lg-6">
+			<!-- IF allowGroupCreation -->
+			<button class="btn btn-primary" data-action="new"><i class="fa fa-plus"></i> [[groups:new-group]]</button>
+			<!-- ENDIF allowGroupCreation -->
+		</div>
+		<div class="col-lg-6">
+			<div class="row justify-content-end">
+				<div class="col-5 col-md-6">
+					<select class="form-select" id="search-sort">
+						<option value="alpha">[[groups:details.group-name]]</option>
+						<option value="count">[[groups:details.member-count]]</option>
+						<option value="date">[[groups:details.creation-date]]</option>
+					</select>
+				</div>
+				<div class="col-7 col-md-6">
+					<div class="input-group">
+						<input type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" id="search-text">
+						<button id="search-button" class="btn btn-primary">
+							<i class="fa fa-search"></i>
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<hr />
+
+	<div component="groups/container" class="row" id="groups-list" data-nextstart={nextStart}>
+		<!-- IF groups.length -->
+		<!-- IMPORT partials/groups/list.tpl -->
+		<!-- ELSE -->
+		<div class="col-12">
+			<div class="alert alert-warning">
+			[[groups:no-groups-found]]
+			</div>
+		</div>
+		<!-- ENDIF groups.length -->
+	</div>
+</div>

package/templates/groups/members.tpl

@@ -1,6 +1,6 @@
-<!-- IMPORT partials/breadcrumbs.tpl -->
-<div class="users">
-	<!-- IMPORT partials/users_list.tpl -->
-
-	<!-- IMPORT partials/paginator.tpl -->
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div class="users">
+	<!-- IMPORT partials/users_list.tpl -->
+
+	<!-- IMPORT partials/paginator.tpl -->
 </div>

package/templates/header.tpl

@@ -1,47 +1,47 @@
-<!DOCTYPE html>
-<html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
-<head>
-	<title>{browserTitle}</title>
-	{{{each metaTags}}}{function.buildMetaTag}{{{end}}}
-	<link rel="stylesheet" type="text/css" href="{relative_path}/assets/client{{{if bootswatchSkin}}}-{bootswatchSkin}{{{end}}}{{{ if (languageDirection=="rtl") }}}-rtl{{{ end }}}.css?{config.cache-buster}" />
-	{{{each linkTags}}}{function.buildLinkTag}{{{end}}}
-
-	<script>
-		var config = JSON.parse('{{configJSON}}');
-		var app = {
-			user: JSON.parse('{{userJSON}}')
-		};
-
-		document.documentElement.style.setProperty('--panel-offset', `${localStorage.getItem('panelOffset') || 0}px`);
-	</script>
-
-	{{{if useCustomHTML}}}
-	{{customHTML}}
-	{{{end}}}
-	{{{if useCustomCSS}}}
-	<style>{{customCSS}}</style>
-	{{{end}}}
-</head>
-
-<body class="{bodyClass} skin-{{{if bootswatchSkin}}}{bootswatchSkin}{{{else}}}noskin{{{end}}}">
-	<nav id="menu" class="slideout-menu hidden">
-		<!-- IMPORT partials/slideout-menu.tpl -->
-	</nav>
-	<nav id="chats-menu" class="slideout-menu hidden">
-		<!-- IMPORT partials/chats-menu.tpl -->
-	</nav>
-
-	<main id="panel" class="slideout-panel">
-		<nav class="navbar sticky-top navbar-expand-lg bg-light header border-bottom py-0" id="header-menu" component="navbar">
-			<div class="container justify-content-start flex-nowrap">
-				<!-- IMPORT partials/menu.tpl -->
-			</div>
-		</nav>
-		<script>
-			const rect = document.getElementById('header-menu').getBoundingClientRect();
-			const offset = Math.max(0, rect.bottom);
-			document.documentElement.style.setProperty('--panel-offset', offset + `px`);
-		</script>
-		<div class="container pt-3" id="content">
-		<!-- IMPORT partials/noscript/warning.tpl -->
-		<!-- IMPORT partials/noscript/message.tpl -->
+<!DOCTYPE html>
+<html lang="{function.localeToHTML, userLang, defaultLang}" {{{if languageDirection}}}data-dir="{languageDirection}" style="direction: {languageDirection};"{{{end}}}>
+<head>
+	<title>{browserTitle}</title>
+	{{{each metaTags}}}{function.buildMetaTag}{{{end}}}
+	<link rel="stylesheet" type="text/css" href="{relative_path}/assets/client{{{if bootswatchSkin}}}-{bootswatchSkin}{{{end}}}{{{ if (languageDirection=="rtl") }}}-rtl{{{ end }}}.css?{config.cache-buster}" />
+	{{{each linkTags}}}{function.buildLinkTag}{{{end}}}
+
+	<script>
+		var config = JSON.parse('{{configJSON}}');
+		var app = {
+			user: JSON.parse('{{userJSON}}')
+		};
+
+		document.documentElement.style.setProperty('--panel-offset', `${localStorage.getItem('panelOffset') || 0}px`);
+	</script>
+
+	{{{if useCustomHTML}}}
+	{{customHTML}}
+	{{{end}}}
+	{{{if useCustomCSS}}}
+	<style>{{customCSS}}</style>
+	{{{end}}}
+</head>
+
+<body class="{bodyClass} skin-{{{if bootswatchSkin}}}{bootswatchSkin}{{{else}}}noskin{{{end}}}">
+	<nav id="menu" class="slideout-menu hidden">
+		<!-- IMPORT partials/slideout-menu.tpl -->
+	</nav>
+	<nav id="chats-menu" class="slideout-menu hidden">
+		<!-- IMPORT partials/chats-menu.tpl -->
+	</nav>
+
+	<main id="panel" class="slideout-panel">
+		<nav class="navbar sticky-top navbar-expand-lg bg-light header border-bottom py-0" id="header-menu" component="navbar">
+			<div class="container justify-content-start flex-nowrap">
+				<!-- IMPORT partials/menu.tpl -->
+			</div>
+		</nav>
+		<script>
+			const rect = document.getElementById('header-menu').getBoundingClientRect();
+			const offset = Math.max(0, rect.bottom);
+			document.documentElement.style.setProperty('--panel-offset', offset + `px`);
+		</script>
+		<div class="container pt-3" id="content">
+		<!-- IMPORT partials/noscript/warning.tpl -->
+		<!-- IMPORT partials/noscript/message.tpl -->

package/templates/modules/taskbar.tpl

@@ -1,3 +1,3 @@
-<div id="taskbar" component="taskbar" class="taskbar fixed-bottom">
-	<div class="navbar-inner"><ul class="nav navbar-nav"></ul></div>
+<div id="taskbar" component="taskbar" class="taskbar fixed-bottom">
+	<div class="navbar-inner"><ul class="nav navbar-nav"></ul></div>
 </div>

package/templates/modules/usercard.tpl

@@ -1,37 +1,37 @@
-<div class="persona-usercard">
-	<a href="{config.relative_path}/user/{userslug}">
-		<!-- IF picture -->
-		<div class="usercard-picture" style="background-image:url({picture})"></div>
-		<!-- ELSE -->
-		<div class="usercard-picture" style="background-color: {icon:bgColor};">{icon:text}</div>
-		<!-- ENDIF picture -->
-	</a>
-	<div class="usercard-body">
-		<a href="{config.relative_path}/user/{userslug}">
-			<span class="usercard-name"><!-- IF fullname -->{fullname}<!-- ELSE -->{username}<!-- ENDIF fullname --></span><br />
-			<span class="usercard-username"><!-- IF !banned -->@{username}<!-- ELSE -->[[user:banned]]<!-- ENDIF !banned --></span>
-			<!-- IF !banned -->
-			<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
-			<!-- ENDIF !banned -->
-		</a>
-
-		<div class="row usercard-info">
-			<div class="col-4">
-				<small>[[global:posts]]</small>
-				<span>{humanReadableNumber(postcount)}</span>
-			</div>
-			<div class="col-4">
-				<small>[[global:reputation]]</small>
-				<span>{humanReadableNumber(reputation)}</span>
-			</div>
-
-			<button class="btn-morph persona-fab <!-- IF banned --> hide<!-- ENDIF banned -->">
-				<span>
-					<span class="s1"></span>
-					<span class="s2"></span>
-					<span class="s3"></span>
-				</span>
-			</button>
-		</div>
-	</div>
+<div class="persona-usercard">
+	<a href="{config.relative_path}/user/{userslug}">
+		<!-- IF picture -->
+		<div class="usercard-picture" style="background-image:url({picture})"></div>
+		<!-- ELSE -->
+		<div class="usercard-picture" style="background-color: {icon:bgColor};">{icon:text}</div>
+		<!-- ENDIF picture -->
+	</a>
+	<div class="usercard-body">
+		<a href="{config.relative_path}/user/{userslug}">
+			<span class="usercard-name"><!-- IF fullname -->{fullname}<!-- ELSE -->{username}<!-- ENDIF fullname --></span><br />
+			<span class="usercard-username"><!-- IF !banned -->@{username}<!-- ELSE -->[[user:banned]]<!-- ENDIF !banned --></span>
+			<!-- IF !banned -->
+			<i component="user/status" class="fa fa-circle status {status}" title="[[global:{status}]]"></i>
+			<!-- ENDIF !banned -->
+		</a>
+
+		<div class="row usercard-info">
+			<div class="col-4">
+				<small>[[global:posts]]</small>
+				<span>{humanReadableNumber(postcount)}</span>
+			</div>
+			<div class="col-4">
+				<small>[[global:reputation]]</small>
+				<span>{humanReadableNumber(reputation)}</span>
+			</div>
+
+			<button class="btn-morph persona-fab <!-- IF banned --> hide<!-- ENDIF banned -->">
+				<span>
+					<span class="s1"></span>
+					<span class="s2"></span>
+					<span class="s3"></span>
+				</span>
+			</button>
+		</div>
+	</div>
 </div>

package/templates/notifications.tpl

@@ -1,66 +1,66 @@
-
-<div class="notifications">
-
-	<!-- IMPORT partials/breadcrumbs.tpl -->
-	<div class="btn-toolbar justify-content-end" role="toolbar">
-		<div class="btn-group me-2">
-			<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-				{{{ if selectedFilter }}}{selectedFilter.name}{{{ end}}} <span class="caret"></span>
-			</button>
-			<ul class="dropdown-menu dropdown-menu-end" role="menu">
-				{{{ each filters }}}
-				{{{ if filters.separator }}}
-				<li role="separator" class="dropdown-divider"></li>
-				{{{ else }}}
-				<li role="presentation" class="category">
-					<a class="dropdown-item" role="menuitem" href="{config.relative_path}/notifications?filter={filters.filter}"><i class="fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i> {filters.name}</a>
-				</li>
-				{{{ end }}}
-				{{{ end }}}
-			</ul>
-		</div>
-
-		<div class="btn-group">
-			<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-				<i class="fa fa-eye"></i>
-				<span class="caret"></span>
-			</button>
-			<ul class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="dropdownMenu1">
-				<li role="presentation"><a class="dropdown-item" role="menuitem" href="#" component="notifications/mark_all">[[notifications:mark-all-read]]</a></li>
-			</ul>
-		</div>
-	</div>
-
-	<hr />
-
-	<div class="alert alert-info {{{ if notifications.length }}}hidden{{{ end }}}">
-		[[notifications:no-notifs]]
-	</div>
-
-	<ul class="notifications-list list-unstyled" data-nextstart="{nextStart}">
-	{{{each notifications}}}
-		<li data-nid="{notifications.nid}" class="{notifications.readClass} {{{ if !./read}}}text-bg-warning{{{ end }}} d-flex pointer border p-3 mb-2" component="notifications/item">
-			<div class="me-2">
-				{{{ if notifications.from }}}
-				{buildAvatar(notifications.user, "24px", true)}
-				{{{ else }}}
-				{{{ if notifications.image }}}
-				<img width="24" height="24" src="{notifications.image}" />
-				{{{ end }}}
-				{{{ end }}}
-			</div>
-			<div>
-				<p class="mb-1">
-					<a class="text-reset" component="notifications/item/link" href="{notifications.path}">{notifications.bodyShort}</a>
-				</p>
-				<p class="timestamp">
-					<span class="timeago small text-reset" title="{notifications.datetimeISO}"></span>
-				</p>
-			</div>
-		</li>
-	{{{end}}}
-	</ul>
-	<!-- IMPORT partials/paginator.tpl -->
-</div>
-
-
+
+<div class="notifications">
+
+	<!-- IMPORT partials/breadcrumbs.tpl -->
+	<div class="btn-toolbar justify-content-end" role="toolbar">
+		<div class="btn-group me-2">
+			<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				{{{ if selectedFilter }}}{selectedFilter.name}{{{ end}}} <span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu dropdown-menu-end" role="menu">
+				{{{ each filters }}}
+				{{{ if filters.separator }}}
+				<li role="separator" class="dropdown-divider"></li>
+				{{{ else }}}
+				<li role="presentation" class="category">
+					<a class="dropdown-item" role="menuitem" href="{config.relative_path}/notifications?filter={filters.filter}"><i class="fa fa-fw {{{ if filters.selected }}}fa-check{{{ end }}}"></i> {filters.name}</a>
+				</li>
+				{{{ end }}}
+				{{{ end }}}
+			</ul>
+		</div>
+
+		<div class="btn-group">
+			<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				<i class="fa fa-eye"></i>
+				<span class="caret"></span>
+			</button>
+			<ul class="dropdown-menu dropdown-menu-end" role="menu" aria-labelledby="dropdownMenu1">
+				<li role="presentation"><a class="dropdown-item" role="menuitem" href="#" component="notifications/mark_all">[[notifications:mark-all-read]]</a></li>
+			</ul>
+		</div>
+	</div>
+
+	<hr />
+
+	<div class="alert alert-info {{{ if notifications.length }}}hidden{{{ end }}}">
+		[[notifications:no-notifs]]
+	</div>
+
+	<ul class="notifications-list list-unstyled" data-nextstart="{nextStart}">
+	{{{each notifications}}}
+		<li data-nid="{notifications.nid}" class="{notifications.readClass} {{{ if !./read}}}text-bg-warning{{{ end }}} d-flex pointer border p-3 mb-2" component="notifications/item">
+			<div class="me-2">
+				{{{ if notifications.from }}}
+				{buildAvatar(notifications.user, "24px", true)}
+				{{{ else }}}
+				{{{ if notifications.image }}}
+				<img width="24" height="24" src="{notifications.image}" />
+				{{{ end }}}
+				{{{ end }}}
+			</div>
+			<div>
+				<p class="mb-1">
+					<a class="text-reset" component="notifications/item/link" href="{notifications.path}">{notifications.bodyShort}</a>
+				</p>
+				<p class="timestamp">
+					<span class="timeago small text-reset" title="{notifications.datetimeISO}"></span>
+				</p>
+			</div>
+		</li>
+	{{{end}}}
+	</ul>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+

package/templates/partials/account/category-item.tpl

@@ -1,23 +1,23 @@
-<li component="categories/category" data-cid="{../cid}" data-parent-cid="{../parentCid}" class="row clearfix">
-	<meta itemprop="name" content="{../name}">
-
-	<div class="content col-10 depth-{../depth}">
-		<div class="float-start">
-		{buildCategoryIcon(@value, "48px", "rounded-circle")}
-		</div>
-
-		<h2 class="title">
-			<!-- IMPORT partials/categories/link.tpl -->
-		</h2>
-		<div>
-			<!-- IF ../descriptionParsed -->
-			<div class="description text-muted">
-				{../descriptionParsed}
-			</div>
-			<!-- ENDIF ../descriptionParsed -->
-		</div>
-	</div>
-	<div class="col-2">
-	<!-- IMPORT partials/category/watch.tpl -->
-	</div>
-</li>
+<li component="categories/category" data-cid="{../cid}" data-parent-cid="{../parentCid}" class="row clearfix">
+	<meta itemprop="name" content="{../name}">
+
+	<div class="content col-10 depth-{../depth}">
+		<div class="float-start">
+		{buildCategoryIcon(@value, "48px", "rounded-circle")}
+		</div>
+
+		<h2 class="title">
+			<!-- IMPORT partials/categories/link.tpl -->
+		</h2>
+		<div>
+			<!-- IF ../descriptionParsed -->
+			<div class="description text-muted">
+				{../descriptionParsed}
+			</div>
+			<!-- ENDIF ../descriptionParsed -->
+		</div>
+	</div>
+	<div class="col-2">
+	<!-- IMPORT partials/category/watch.tpl -->
+	</div>
+</li>