summaryrefslogtreecommitdiff
path: root/web/source/settings/components
diff options
context:
space:
mode:
authorLibravatar tobi <31960611+tsmethurst@users.noreply.github.com>2023-12-27 11:23:52 +0100
committerLibravatar GitHub <noreply@github.com>2023-12-27 11:23:52 +0100
commit0ff52b71f2c0e970b1f0d43793c019bbed93e112 (patch)
treeeff120472b4b6f837121536ada03f530d213b13e /web/source/settings/components
parent[bugfix] :innocent: (#2476) (diff)
downloadgotosocial-0ff52b71f2c0e970b1f0d43793c019bbed93e112.tar.xz
[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
Diffstat (limited to 'web/source/settings/components')
-rw-r--r--web/source/settings/components/fake-profile.jsx29
-rw-r--r--web/source/settings/components/fake-toot.jsx33
2 files changed, 37 insertions, 25 deletions
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>