diff options
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> |