diff options
author | 2023-12-27 11:23:52 +0100 | |
---|---|---|
committer | 2023-12-27 11:23:52 +0100 | |
commit | 0ff52b71f2c0e970b1f0d43793c019bbed93e112 (patch) | |
tree | eff120472b4b6f837121536ada03f530d213b13e /web/source/settings/components | |
parent | [bugfix] :innocent: (#2476) (diff) | |
download | gotosocial-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.jsx | 29 | ||||
-rw-r--r-- | web/source/settings/components/fake-toot.jsx | 33 |
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> |