diff options
Diffstat (limited to 'web/source/settings')
| -rw-r--r-- | web/source/settings/admin/reports/detail.jsx | 33 | ||||
| -rw-r--r-- | web/source/settings/components/fake-profile.jsx | 26 | ||||
| -rw-r--r-- | web/source/settings/components/fake-toot.jsx | 27 | ||||
| -rw-r--r-- | web/source/settings/style.css | 49 |
4 files changed, 70 insertions, 65 deletions
diff --git a/web/source/settings/admin/reports/detail.jsx b/web/source/settings/admin/reports/detail.jsx index 0fd7802bc..e9c40cb13 100644 --- a/web/source/settings/admin/reports/detail.jsx +++ b/web/source/settings/admin/reports/detail.jsx @@ -140,13 +140,18 @@ function ReportedToot({ toot }) { const account = toot.account; return ( - <div className="toot expanded"> - <div className="contentgrid"> - <span className="avatar"> - <img src={account.avatar} alt="" /> - </span> - <span className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</span> - <span className="username">@{account.username}</span> + <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"> <div className="text"> <div className="content"> {toot.spoiler_text?.length > 0 @@ -158,15 +163,11 @@ function ReportedToot({ toot }) { {toot.media_attachments?.length > 0 && <TootMedia media={toot.media_attachments} sensitive={toot.sensitive} /> } - </div> - <div className="toot-info"> - <a - href={toot.url} - target="_blank" - rel="noreferrer" - >{new Date(toot.created_at).toLocaleString()}</a> - </div> - </div> + </section> + <aside className="info"> + <time datetime={toot.created_at}>{new Date(toot.created_at).toLocaleString()}</time> + </aside> + </article> ); } diff --git a/web/source/settings/components/fake-profile.jsx b/web/source/settings/components/fake-profile.jsx index 0c407e6fb..5f00cd6d8 100644 --- a/web/source/settings/components/fake-profile.jsx +++ b/web/source/settings/components/fake-profile.jsx @@ -24,17 +24,23 @@ 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="headerimage"> - <img className="headerpreview" src={header} alt={header ? `header image for ${username}` : "None set"} /> - </div> - <div className="basic"> - <div id="profile-basic-filler2"></div> - <span className="avatar"><img className="avatarpreview" src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} /></span> - <div className="displayname">{display_name.trim().length > 0 ? display_name : username}</div> - <div className="usernamecontainer"> - <div className="username"><span>@{username}</span></div> + <div className="header"> + <div className="header-image"> + <img src={header} alt={header ? `header image for ${username}` : "None set"} /> + </div> + <div className="basic-info" aria-hidden="true"> + <a className="avatar" href="{{.account.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 != "user") && - <div className={`role ${role}`}>{role}</div> + <div className={`role ${role}`}> + <span className="sr-only">Role: </span>{role} + </div> } </div> </div> diff --git a/web/source/settings/components/fake-toot.jsx b/web/source/settings/components/fake-toot.jsx index f1b0759cf..b71831a95 100644 --- a/web/source/settings/components/fake-toot.jsx +++ b/web/source/settings/components/fake-toot.jsx @@ -31,19 +31,22 @@ module.exports = function FakeToot({ children }) { } } = query.useVerifyCredentialsQuery(); return ( - <div className="toot expanded"> - <div className="contentgrid"> - <span className="avatar"> - <img src={account.avatar} alt="" /> - </span> - <span className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</span> - <span className="username">@{account.username}</span> + <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"> <div className="text"> - <div className="content"> - {children} - </div> + {children} </div> - </div> - </div> + </section> + </article> ); };
\ No newline at end of file diff --git a/web/source/settings/style.css b/web/source/settings/style.css index 07a4d05e2..3a3c14924 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -16,11 +16,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ -/* Fork-Awesome 'fa-fw' fixed icon width - keep in sync with https://github.com/ForkAwesome/Fork-Awesome/blob/a99579ae3e735ee70e51ed62dfcee3172b5b2db7/css/fork-awesome.css#L50 -*/ -$fa-fw: 1.28571429em; - body { grid-template-rows: auto 1fr; } @@ -30,10 +25,6 @@ body { width: 100%; } -section { - grid-column: 2; -} - header { justify-content: start; @@ -51,19 +42,26 @@ header { } } -main section { - box-shadow: none; - border-radius: none; - border: none; -} - #root { - display: grid; - grid-template-columns: 1fr minmax(auto, 60rem) 1fr; - grid-template-columns: 1fr min(92%, 60rem) 1fr; box-sizing: border-box; + display: flex; + justify-content: center; + flex-wrap: wrap; + margin: 0 1rem; + gap: 1rem; + + section.oauth { + max-width: 92%; + width: 60rem; + } section.with-sidebar { + flex-grow: 100; + flex-basis: 40rem; + background: $bg-accent; + padding: 2rem; + border-radius: $br; + & > div, & > form { border-left: 0.2rem solid $border-accent; padding-left: 0.4rem; @@ -97,13 +95,13 @@ main section { } .sidebar { - margin: 0 1rem; + flex-grow: 1; + flex-basis: 20rem; align-self: start; justify-self: end; background: $bg; display: flex; flex-direction: column; - min-width: 12rem; .account-card { grid-template-columns: auto 1fr auto; @@ -240,10 +238,6 @@ nav.menu-tree { text-transform: capitalize; } -section { - margin-bottom: 1rem; -} - input, select, textarea { box-sizing: border-box; } @@ -406,9 +400,10 @@ section.with-sidebar > div, section.with-sidebar > form { gap: 1rem; .profile { - .basic { - margin-bottom: 0.5rem; - /* margin-top: 0; */ + padding: 0; + + .header { + border: 0.1rem solid $gray1; } } |