From 0ff52b71f2c0e970b1f0d43793c019bbed93e112 Mon Sep 17 00:00:00 2001
From: tobi <31960611+tsmethurst@users.noreply.github.com>
Date: Wed, 27 Dec 2023 11:23:52 +0100
Subject: [chore] Refactor HTML templates and CSS (#2480)

* [chore] Refactor HTML templates and CSS

* eslint

* ignore "Local"

* rss tests

* fiddle with OG just a tiny bit

* dick around with polls a bit more so SR stops saying "clickable"

* remove break

* oh lord

* don't lazy load avatar

* fix ogmeta tests

* clean up some cruft

* catch remaining calls to c.HTML

* fix error rendering + stack overflow in tag

* allow templating attributes

* fix indent

* set aria-hidden on status complementary content, since it's already present in the label anyway

* tidy up templating calls a little

* try to make styling a bit more consistent + readable

* fix up some remaining CSS issues

* fix up reports
---
 web/source/settings/components/fake-profile.jsx | 29 +++++++++++++++----------
 1 file changed, 17 insertions(+), 12 deletions(-)

(limited to 'web/source/settings/components/fake-profile.jsx')

diff --git a/web/source/settings/components/fake-profile.jsx b/web/source/settings/components/fake-profile.jsx
index d1f28f36c..6cb8d0187 100644
--- a/web/source/settings/components/fake-profile.jsx
+++ b/web/source/settings/components/fake-profile.jsx
@@ -22,24 +22,29 @@ const React = require("react");
 module.exports = function FakeProfile({ avatar, header, display_name, username, role }) {
 	return ( // Keep in sync with web/template/profile.tmpl
 		<div className="profile">
-			<div className="header">
-				<div className="header-image">
+			<div className="profile-header">
+				<div className="header-image-wrapper">
 					<img src={header} alt={header ? `header image for ${username}` : "None set"} />
 				</div>
 				<div className="basic-info" aria-hidden="true">
 					<a className="avatar" href={avatar}>
 						<img src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} />
 					</a>
-					<span className="displayname text-cutoff">
-						{display_name.trim().length > 0 ? display_name : username}
-						<span className="sr-only">.</span>
-					</span>
-					<span className="username text-cutoff">@{username}</span>
-					{(role && role.name != "user") &&
-						<div className={`role ${role.name}`}>
-							<span className="sr-only">Role: </span>{role.name}
-						</div>
-					}
+					<dl className="namerole">
+						<dt className="sr-only">Display name</dt>
+						<dd className="displayname text-cutoff">{display_name.trim().length > 0 ? display_name : username}</dd>
+						<dt className="sr-only">Username</dt>
+						<dd className="username text-cutoff">@{username}</dd>
+						<dt className="sr-only">Role</dt>
+						{
+							(role && role.name != "user") ?
+								<>
+									<dd className="sr-only">Role</dd>
+									<dt className={`role ${role.name}`}>{role.name}</dt>
+								</>
+								: null
+						}
+					</dl>
 				</div>
 			</div>
 		</div>
-- 
cgit v1.2.3

