nodebb-theme-harmony 2.0.0-pre.42 → 2.0.0-pre.44

package/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.0-pre.42",
+  "version": "2.0.0-pre.43",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "nodebb-theme-harmony",
-      "version": "2.0.0-pre.42",
+      "version": "2.0.0-pre.43",
       "license": "MIT",
       "dependencies": {
         "@fontsource/inter": "5.0.15",
@@ -53,9 +53,9 @@
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.18.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.18.0.tgz",
-      "integrity": "sha512-fTxvnS1sRMu3+JjXwJG0j/i4RT9u4qJ+lqS/yCGap4lH4zZGzQ7tu+xZqQmcMZq5OBZDL4QRxQzRjkWcGt8IVw==",
+      "version": "0.19.0",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.19.0.tgz",
+      "integrity": "sha512-zdHg2FPIFNKPdcHWtiNT+jEFCHYVplAXRDlQDyqy0zGx/q2parwh7brGJSiTxRk/TSMkbM//zt/f5CHgyTyaSQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -68,9 +68,9 @@
       }
     },
     "node_modules/@eslint/core": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.7.0.tgz",
-      "integrity": "sha512-xp5Jirz5DyPYlPiKat8jaq0EmYvDXKKpzTbxXMpT9eqlRJkRKIz9AGMdlvYjih+im+QlhWrpvVjl8IPC/lHlUw==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.9.0.tgz",
+      "integrity": "sha512-7ATR9F0e4W85D/0w7cU0SNj7qkAexMG+bAHEZOjo9akvGuhHE2m7umzWzfnpa0XAg5Kxc1BWmtPMV67jJ+9VUg==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -78,9 +78,9 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.1.0.tgz",
-      "integrity": "sha512-4Bfj15dVJdoy3RfZmmo86RK1Fwzn6SstsvK9JS+BaVKqC6QQQQyXekNaC+g+LKNgkQ+2VhGAzm6hO40AhMR3zQ==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.2.0.tgz",
+      "integrity": "sha512-grOjVNN8P3hjJn/eIETF1wwd12DdnwFDoyceUJLYYdkpbwq3nLi+4fqrTAONx7XDALqlL220wC/RHSC/QTI/0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -102,9 +102,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.14.0.tgz",
-      "integrity": "sha512-pFoEtFWCPyDOl+C6Ift+wC7Ro89otjigCf5vcuWqWgqNSQbRrpjSvdeE6ofLz4dHmyxD5f7gIdGT4+p36L6Twg==",
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.15.0.tgz",
+      "integrity": "sha512-tMTqrY+EzbXmKJR5ToI8lxu7jaN5EdmrBFJpQk5JmSlyLsx6o4t27r883K5xsLuCYCpfKBCGswMSWXsM+jB7lg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -122,9 +122,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.0.tgz",
-      "integrity": "sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==",
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.3.tgz",
+      "integrity": "sha512-2b/g5hRmpbb1o4GnTZax9N9m0FXzz9OV42ZzI4rDDMDuHUqigAiQCEWChBWCY4ztAGVRjoWT19v0yMmc5/L5kA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
@@ -196,9 +196,9 @@
       }
     },
     "node_modules/@humanwhocodes/retry": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.0.tgz",
-      "integrity": "sha512-xnRgu9DxZbkWak/te3fcytNyp8MTbuiZIaueg2rgEvBuN55n04nwLYLU9TX/VVlusc9L2ZNXi99nUFNkHXtr5g==",
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.1.tgz",
+      "integrity": "sha512-c7hNEllBlenFTHBky65mhq8WD2kbN9Q6gk0bTk8lSBvc554jpXSkST1iePudpt7+A/AQvuHs9EMqjHDXMY1lrA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -504,10 +504,11 @@
       "license": "MIT"
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.5.tgz",
+      "integrity": "sha512-ZVJrKKYunU38/76t0RMOulHOnUcbU9GbpWKAOZ0mhjr7CX6FVrH+4FrAapSOekrgFQ3f/8gwMEuIft0aKq6Hug==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -715,27 +716,27 @@
       }
     },
     "node_modules/eslint": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.14.0.tgz",
-      "integrity": "sha512-c2FHsVBr87lnUtjP4Yhvk4yEhKrQavGafRA/Se1ouse8PfbfC/Qh9Mxa00yWsZRlqeUB9raXip0aiiUZkgnr9g==",
+      "version": "9.15.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.15.0.tgz",
+      "integrity": "sha512-7CrWySmIibCgT1Os28lUU6upBshZ+GxybLOrmRzi08kS8MBuO8QA7pXEgYgY5W8vK3e74xv0lpjo9DbaGU9Rkw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.18.0",
-        "@eslint/core": "^0.7.0",
-        "@eslint/eslintrc": "^3.1.0",
-        "@eslint/js": "9.14.0",
-        "@eslint/plugin-kit": "^0.2.0",
+        "@eslint/config-array": "^0.19.0",
+        "@eslint/core": "^0.9.0",
+        "@eslint/eslintrc": "^3.2.0",
+        "@eslint/js": "9.15.0",
+        "@eslint/plugin-kit": "^0.2.3",
         "@humanfs/node": "^0.16.6",
         "@humanwhocodes/module-importer": "^1.0.1",
-        "@humanwhocodes/retry": "^0.4.0",
+        "@humanwhocodes/retry": "^0.4.1",
         "@types/estree": "^1.0.6",
         "@types/json-schema": "^7.0.15",
         "ajv": "^6.12.4",
         "chalk": "^4.0.0",
-        "cross-spawn": "^7.0.2",
+        "cross-spawn": "^7.0.5",
         "debug": "^4.3.2",
         "escape-string-regexp": "^4.0.0",
         "eslint-scope": "^8.2.0",
@@ -754,8 +755,7 @@
         "lodash.merge": "^4.6.2",
         "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
-        "optionator": "^0.9.3",
-        "text-table": "^0.2.0"
+        "optionator": "^0.9.3"
       },
       "bin": {
         "eslint": "bin/eslint.js"
@@ -1588,7 +1588,8 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "dev": true,
+      "license": "ISC"
     },
     "node_modules/js-yaml": {
       "version": "4.1.0",
@@ -1882,6 +1883,7 @@
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -2032,6 +2034,7 @@
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -2044,6 +2047,7 @@
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -2153,12 +2157,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/text-table": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-      "dev": true
-    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -2278,6 +2276,7 @@
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
       "dev": true,
+      "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
       },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.0-pre.42",
+  "version": "2.0.0-pre.44",
   "nbbpm": {
     "compatibility": "^3.7.0"
   },

package/scss/sidebar.scss

@@ -138,6 +138,9 @@
 }
 
 .bottombar-nav {
+	#user_dropdown .avatar {
+		margin: 2px 0; // fixes the avatar so its height is same as the icons on right sidebar
+	}
 	.nav-text {
 		font-size: 1rem;
 		color: $body-color;
@@ -154,36 +157,32 @@
 		line-height: 12px;
 	}
 
+	.dropdown-menu {
+		left: 0!important;
+		right: 0!important;
+		box-shadow: none!important;
+		border-left: 0;
+		border-right: 0;
+		border-radius: 0;
+		.list-container {
+			max-height: 60vh!important;
+			overflow-y: auto!important;
+		}
+	}
+
 	.navigation-dropdown, .user-dropdown {
 		> li {
 			> a, .dropdown-item {
 				padding: 10px 20px!important;
 			}
 		}
-		left: 0!important;
-		right: 0!important;
-		bottom: $spacer*0.5!important;
-		box-shadow: none!important;
+
 		max-height: 60vh!important;
 		overflow: auto!important;
 	}
+
 	.search-dropdown .quick-search-results {
 		max-height: 225px!important;
 		overflow-y: auto!important;
 	}
-	.search-dropdown, .chats-dropdown, .notifications-dropdown, .drafts-dropdown {
-		left: 0 !important;
-		right: 0 !important;
-		box-shadow: none!important;
-
-		border-left: 0;
-		border-right: 0;
-		border-bottom: 0;
-		border-radius: 0;
-
-		.list-container {
-			max-height: 60vh!important;
-			overflow-y: auto!important;
-		}
-	}
 }

package/templates/account/edit.tpl

@@ -1,6 +1,6 @@
 <!-- IMPORT partials/account/header.tpl -->
 
-<div class="d-flex justify-content-between py-1 mb-3 align-items-center position-sticky top-0 bg-body">
+<div class="d-flex justify-content-between py-1 mb-3 align-items-center position-sticky top-0 bg-body z-1">
 	<h3 class="fw-semibold fs-5 mb-0">{{{ if isSelf }}}[[user:edit-profile]]{{{ else }}}[[pages:account/edit, {username}]]{{{ end }}}</h3>
 	<button id="submitBtn" class="btn btn-sm btn-primary">[[global:save-changes]]</button>
 </div>
@@ -12,18 +12,6 @@
 				<input class="form-control" type="text" id="fullname" name="fullname" placeholder="[[user:fullname]]" value="{fullname}">
 			</div>
 
-			{{{ if allowWebsite }}}
-			<div class="mb-3">
-				<label class="form-label fw-bold" for="website">[[user:website]]</label>
-				<input class="form-control" type="text" id="website" name="website" placeholder="http://..." value="{website}">
-			</div>
-			{{{ end }}}
-
-			<div class="mb-3">
-				<label class="form-label fw-bold" for="location">[[user:location]]</label>
-				<input class="form-control" type="text" id="location" name="location" placeholder="[[user:location]]" value="{location}">
-			</div>
-
 			<div class="mb-3">
 				<label class="form-label fw-bold" for="birthday">[[user:birthday]]</label>
 				<input class="form-control" type="date" id="birthday" name="birthday" value="{birthday}" placeholder="mm/dd/yyyy">
@@ -39,8 +27,13 @@
 				{{{ if (./type == "input-number") }}}
 				<input class="form-control" type="number" id="{./key}" name="{./key}" value="{./value}">
 				{{{ end }}}
-				{{{ if (./type == "select") }}}
-				<select class="form-select" id="{./key}" name="{./key}">
+
+				{{{ if (./type == "input-date") }}}
+				<input class="form-control" type="date" id="{./key}" name="{./key}" value="{./value}">
+				{{{ end }}}
+
+				{{{ if ((./type == "select") || (./type == "select-multi")) }}}
+				<select class="form-select" id="{./key}" name="{./key}" {{{ if (./type == "select-multi") }}} multiple{{{ end }}}>
 					{{{ each ./select-options}}}
 					<option value="{./value}" {{{ if ./selected }}}selected{{{ end }}}>{./value}</option>
 					{{{ end }}}

package/templates/account/profile.tpl

@@ -63,24 +63,6 @@
 		</div>
 		{{{ end }}}
 
-		{{{ if websiteName }}}
-		<div class="stat">
-			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100 gap-2">
-				<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-globe"></i> <span>[[user:website]]</span></span>
-				<a class="text-sm text-center text-break w-100 px-2 ff-secondary text-underline text-reset" href="{websiteLink}" rel="nofollow noreferrer me">{websiteName}</a>
-			</div>
-		</div>
-		{{{ end }}}
-
-		{{{ if location }}}
-		<div class="stat">
-			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100 gap-2">
-				<span class="stat-label text-xs fw-semibold"><i class="text-muted fa-solid fa-map-pin"></i> <span>[[user:location]]</span></span>
-				<span class="text-center text-break w-100 px-2 fs-6 ff-secondary">{location}</span>
-			</div>
-		</div>
-		{{{ end }}}
-
 		{{{ if age }}}
 		<div class="stat">
 			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100 gap-2">
@@ -96,9 +78,9 @@
 			<div class="align-items-center justify-content-center card card-header p-3 border-0 rounded-1 h-100 gap-2">
 				<span class="stat-label text-xs fw-semibold"><span><i class="text-muted {./icon}"></i> {./name}</span></span>
 				{{{ if (./type == "input-link") }}}
-				<a class="text-sm text-center text-break w-100 px-2 ff-secondary text-underline text-reset" href="{./value}" rel="nofollow noreferrer me">{./value}</a>
+				<a class="text-sm text-center text-break w-100 px-2 ff-secondary text-underline text-reset" href="{./value}" rel="nofollow noreferrer">{./linkValue}</a>
 				{{{ else }}}
-				<span class="text-center fs-6 ff-secondary">{./value}</span>
+				<span class="text-center {{{ if (./type == "input-number") }}}fs-2{{{else }}}fs-6{{{ end }}} ff-secondary">{./value}</span>
 				{{{ end }}}
 			</div>
 		</div>

package/templates/groups/list.tpl

@@ -42,7 +42,7 @@
 
 	<hr />
 
-	<div component="groups/container" class="row" id="groups-list" data-nextstart={nextStart}>
+	<div component="groups/container" class="row" id="groups-list">
 		{{{ if groups.length }}}
 		<!-- IMPORT partials/groups/list.tpl -->
 		{{{ else }}}
@@ -53,4 +53,6 @@
 		</div>
 		{{{ end }}}
 	</div>
+
+	<!-- IMPORT partials/paginator.tpl -->
 </div>

package/templates/partials/account/header.tpl

@@ -59,8 +59,8 @@
 			<div class="flex-shrink-0 d-flex gap-1 align-self-stretch align-self-md-start justify-content-end">
 				{{{ if loggedIn }}}
 				{{{ if !isSelf }}}
-				<a component="account/unfollow" href="#" class="btn btn-info flex-fill{{{ if !isFollowing }}} hide{{{ end }}}">[[user:unfollow]]</a>
-				<a component="account/follow" href="#" class="btn btn-primary flex-fill{{{ if isFollowing }}} hide{{{ end }}}">[[user:follow]]</a>
+				<a component="account/unfollow" href="#" class="btn btn-outline-warning flex-fill{{{ if (!isFollowing && !isFollowPending) }}} hide{{{ end }}}">[[user:{{{ if isFollowPending }}}cancel-follow{{{ else }}}unfollow{{{ end }}}]]</a>
+				<a component="account/follow" href="#" class="btn btn-primary flex-fill{{{ if (isFollowing || isFollowPending) }}} hide{{{ end }}}">[[user:follow]]</a>
 				{{{ end }}}
 				{{{ end }}}
 

package/templates/partials/groups/list.tpl

@@ -6,7 +6,7 @@
 			<div class="card-body d-flex flex-column gap-1 border border-top-0 rounded-bottom h-100">
 				<div class="d-flex">
 					<div class="flex-grow-1 fs-6 fw-semibold">{./displayName}</div>
-					<div class="flex-shrink-0 text-sm"><i class="text-muted fa-solid fa-user"></i> {./memberCount}</div>
+					<div class="flex-shrink-0 text-sm"><i class="text-muted fa-solid fa-user"></i> {formattedNumber(./memberCount)}</div>
 				</div>
 				<div class="text-sm">{./description}</div>
 			</div>

package/templates/partials/quick-search-results.tpl

@@ -1,7 +1,7 @@
 {{{ if multiplePages }}}
 <div class="show-more-container">
 	<div class="text-center d-block d-md-none">
-		<a href="{url}" class="btn btn-primary">
+		<a href="{url}" class="btn btn-sm btn-primary">
 			[[search:see-more-results, {matchCount}]]
 		</a>
 	</div>

package/templates/partials/tags_list.tpl

@@ -1,6 +1,8 @@
 {{{each tags}}}
-<a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./valueEscaped}" class="btn btn-ghost ff-base d-flex flex-column gap-1 align-items-start justify-content-start text-truncate p-2">
-	<div class="fw-semibold text-nowrap tag-item w-100 text-start text-truncate">{./valueEscaped}</div>
-	<div class="text-xs text-muted text-nowrap tag-topic-count">[[global:x-topics, {txEscape(formattedNumber(./score))}]]</div>
-</a>
+<div>
+	<a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./valueEscaped}" class="btn btn-ghost ff-base d-flex flex-column gap-1 align-items-start justify-content-start text-truncate p-2">
+		<div class="fw-semibold text-nowrap tag-item w-100 text-start text-truncate">{./valueEscaped}</div>
+		<div class="text-xs text-muted text-nowrap tag-topic-count">[[global:x-topics, {txEscape(formattedNumber(./score))}]]</div>
+	</a>
+</div>
 {{{end}}}

package/templates/partials/users/item.tpl

@@ -1,37 +1,39 @@
-<a href="{config.relative_path}/user/{./userslug}" class="btn btn-ghost gap-2 ff-base d-flex align-items-start justify-content-start p-2 text-start">
-	{buildAvatar(@value, "48px", true, "flex-shrink-0")}
-	<div class="d-flex flex-column gap-1 text-truncate">
-		<div class="fw-semibold text-truncate" title="{./displayname}">{./displayname}</div>
-		<div class="text-xs text-muted text-truncate">@{./username}</div>
+<div>
+	<a href="{config.relative_path}/user/{./userslug}" class="btn btn-ghost gap-2 ff-base d-flex align-items-start justify-content-start p-2 text-start">
+		{buildAvatar(@value, "48px", true, "flex-shrink-0")}
+		<div class="d-flex flex-column gap-1 text-truncate">
+			<div class="fw-semibold text-truncate" title="{./displayname}">{./displayname}</div>
+			<div class="text-xs text-muted text-truncate">@{./username}</div>
 
-		{{{ if section_online }}}
-		<div class="text-xs text-muted text-truncate">
-			<span class="timeago" title="{./lastonlineISO}"></span>
-		</div>
-		{{{ end }}}
+			{{{ if section_online }}}
+			<div class="text-xs text-muted text-truncate">
+				<span class="timeago" title="{./lastonlineISO}"></span>
+			</div>
+			{{{ end }}}
 
-		{{{ if section_joindate }}}
-		<div class="text-xs text-muted text-truncate">
-			<span class="timeago" title="{./joindateISO}"></span>
-		</div>
-		{{{ end }}}
+			{{{ if section_joindate }}}
+			<div class="text-xs text-muted text-truncate">
+				<span class="timeago" title="{./joindateISO}"></span>
+			</div>
+			{{{ end }}}
 
-		{{{ if section_sort-reputation }}}
-		<div class="text-xs text-muted text-truncate">
-			<span>{formattedNumber(./reputation)}</span>
-		</div>
-		{{{ end }}}
+			{{{ if section_sort-reputation }}}
+			<div class="text-xs text-muted text-truncate">
+				<span>{formattedNumber(./reputation)}</span>
+			</div>
+			{{{ end }}}
 
-		{{{ if section_sort-posts }}}
-		<div class="text-xs text-muted text-truncate">
-			<span>{formattedNumber(./postcount)}</span>
-		</div>
-		{{{ end }}}
+			{{{ if section_sort-posts }}}
+			<div class="text-xs text-muted text-truncate">
+				<span>{formattedNumber(./postcount)}</span>
+			</div>
+			{{{ end }}}
 
-		{{{ if section_flagged }}}
-		<div class="text-xs text-muted text-truncate">
-			<span>{formattedNumber(./flags)}</span>
+			{{{ if section_flagged }}}
+			<div class="text-xs text-muted text-truncate">
+				<span>{formattedNumber(./flags)}</span>
+			</div>
+			{{{ end }}}
 		</div>
-		{{{ end }}}
-	</div>
-</a>
+	</a>
+</div>