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/admin/reports/detail.jsx    | 42 ++++++++----
 web/source/settings/admin/reports/index.jsx     |  2 +-
 web/source/settings/components/fake-profile.jsx | 29 ++++----
 web/source/settings/components/fake-toot.jsx    | 33 +++++----
 web/source/settings/style.css                   | 89 +++++++++++++++++++------
 5 files changed, 135 insertions(+), 60 deletions(-)

(limited to 'web/source/settings')

diff --git a/web/source/settings/admin/reports/detail.jsx b/web/source/settings/admin/reports/detail.jsx
index d686b92bd..70d576080 100644
--- a/web/source/settings/admin/reports/detail.jsx
+++ b/web/source/settings/admin/reports/detail.jsx
@@ -140,18 +140,23 @@ function ReportedToot({ toot }) {
 	const account = toot.account;
 
 	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">
 					<div className="content">
 						{toot.spoiler_text?.length > 0
@@ -164,8 +169,17 @@ function ReportedToot({ toot }) {
 					<TootMedia media={toot.media_attachments} sensitive={toot.sensitive} />
 				}
 			</section>
-			<aside className="info">
-				<time dateTime={toot.created_at}>{new Date(toot.created_at).toLocaleString()}</time>
+			<aside className="status-info">
+				<dl class="status-stats">
+					<div class="stats-grouping">
+						<div class="stats-item published-at text-cutoff">
+							<dt class="sr-only">Published</dt>
+							<dd>
+								<time dateTime={toot.created_at}>{new Date(toot.created_at).toLocaleString()}</time>
+							</dd>
+						</div>
+					</div>
+				</dl>
 			</aside>
 		</article>
 	);
diff --git a/web/source/settings/admin/reports/index.jsx b/web/source/settings/admin/reports/index.jsx
index 5ffbfd3a0..58fca998d 100644
--- a/web/source/settings/admin/reports/index.jsx
+++ b/web/source/settings/admin/reports/index.jsx
@@ -83,7 +83,7 @@ function ReportEntry({ report }) {
 					<div className="usernames">
 						<Username user={from} link={false} /> reported <Username user={target} link={false} />
 					</div>
-					<h3 className="status">
+					<h3 className="report-status">
 						{report.action_taken ? "Resolved" : "Open"}
 					</h3>
 				</div>
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>
diff --git a/web/source/settings/style.css b/web/source/settings/style.css
index 524f5e4ab..13642dd0c 100644
--- a/web/source/settings/style.css
+++ b/web/source/settings/style.css
@@ -20,26 +20,14 @@ body {
 	grid-template-rows: auto 1fr;
 }
 
-.content {
+.page-content {
 	grid-column: 1 / span 3; /* stretch entire width, to fit panel + sidebar nav */
 	width: 100%;
 }
 
-header {
-	justify-content: start;
-
-	a {
-		margin: 1.5rem;
-		gap: 1rem;
-
-		h1 {
-			font-size: 1.5rem;
-		}
-
-		img {
-			height: 3rem;
-		}
-	}
+/* Don't inherit orange dot from base.css. */
+ul li::before {
+	content: initial;
 }
 
 #root {
@@ -1007,7 +995,7 @@ button.with-padding {
 			grid-template-columns: 1fr auto;
 			gap: 0.5rem;
 
-			.status {
+			.report-status {
 				color: $border-accent;
 			}
 		}
@@ -1029,7 +1017,7 @@ button.with-padding {
 			color: $fg-reduced;
 			border-left: 0.4rem solid $bg;
 
-			.byline .status {
+			.byline .report-status {
 				color: $fg-reduced;
 			}
 			
@@ -1141,11 +1129,62 @@ button.with-padding {
 	}
 }
 
+.instance-rules {
+	list-style-position: inside;
+	margin: 0;
+	padding: 0;
+
+	a.rule {
+		display: grid;
+		grid-template-columns: 1fr auto;
+		align-items: center;
+		color: $fg;
+		text-decoration: none;
+		background: $status-bg;
+		padding: 1rem;
+		margin: 0.5rem 0;
+		border-radius: $br;
+		line-height: 2rem;
+		position: relative;
+
+		&:hover {
+			color: $fg-accent;
+
+			.edit-icon {
+				display: inline;
+			}
+		}
+
+		.edit-icon {
+			display: none;
+			font-size: 1rem;
+			line-height: 1.5rem;
+		}
+
+		li {
+			font-size: 1.75rem;
+			padding: 0;
+			margin: 0;
+
+			h2 {
+				margin: 0;
+				margin-top: 0 !important;
+				display: inline-block;
+				font-size: 1.5rem;
+			}
+		}
+
+		span {
+			color: $fg-reduced;
+		}
+	}
+}
+
 @media screen and (orientation: portrait) {
 	.reports .report .byline {
 		grid-template-columns: 1fr;
 
-		.status {
+		.report-status {
 			grid-row: 1;
 		}
 	}
@@ -1162,4 +1201,14 @@ button.with-padding {
 	to {
 		opacity: 0;
 	}
-}
\ No newline at end of file
+}
+
+@media (prefers-reduced-motion) {
+	.fa-spin {
+		animation: none;
+	}
+}
+
+.monospace {
+	font-family: monospace;
+}
-- 
cgit v1.2.3