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