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 +++++++++++++---------
 web/source/settings/components/fake-toot.jsx    | 33 +++++++++++++++----------
 2 files changed, 37 insertions(+), 25 deletions(-)

(limited to 'web/source/settings/components')

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>
diff --git a/web/source/settings/components/fake-toot.jsx b/web/source/settings/components/fake-toot.jsx
index 7c2e40454..08f806008 100644
--- a/web/source/settings/components/fake-toot.jsx
+++ b/web/source/settings/components/fake-toot.jsx
@@ -29,20 +29,27 @@ module.exports = function FakeToot({ children }) {
 	} } = query.useVerifyCredentialsQuery();
 
 	return (
-		<article className="toot expanded">
-			<section className="author">
-				<a>
-					<img className="avatar" src={account.avatar} alt="" />
-					<span className="displayname">
-						{account.display_name.trim().length > 0 ? account.display_name : account.username}
-						<span className="sr-only">.</span>
-					</span>
-					<span className="username">@{account.username}</span>
-				</a>
-			</section>
-			<section className="body">
+		<article className="status expanded">
+			<header className="status-header">
+				<address>
+					<a style={{margin: 0}}>
+						<img className="avatar" src={account.avatar} alt="" />
+						<dl className="author-strap">
+							<dt className="sr-only">Display name</dt>
+							<dd className="displayname text-cutoff">
+								{account.display_name.trim().length > 0 ? account.display_name : account.username}
+							</dd>
+							<dt className="sr-only">Username</dt>
+							<dd className="username text-cutoff">@{account.username}</dd>
+						</dl>
+					</a>
+				</address>
+			</header>
+			<section className="status-body">
 				<div className="text">
-					{children}
+					<div className="content">
+						{children}
+					</div>
 				</div>
 			</section>
 		</article>
-- 
cgit v1.2.3