diff options
| author |  f0x52 <f0x@cthu.lu> | 2023-05-11 17:46:32 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2023-05-11 17:46:32 +0200 |
| commit | 9cc9ffc5a7edd5bcd4e51bd6b32dfdba5082dd24 (patch) | |
| tree | 55851a745af76564d9e7cb60aae81eb13e53c69e /web/source/settings/components | |
| parent | feat: initial tracing support (#1623) (diff) | |
| download | gotosocial-9cc9ffc5a7edd5bcd4e51bd6b32dfdba5082dd24.tar.xz | |
[frontend] Profiles with fields & more (#1764)
* redesign status template
* separate index page styling
* redesign profile template
* fix header styling/wrapping
* remove old spoiler js
* fix status cw button wrapping
* fix status info variables
* profile responsiveness, accessibility tweaks
* fix variable use, mobile
* remove duplicate id's
* rss icon, fix indent
* fix toot border-radius
* fix toot spacing
* emojify and html profile fields
* refactor (sensitive) media rendering
* plaintext profile fields
* bundle plyr icon svg
* only pause video when switching photoswipe slides
* yarn upgrade
* profile fields formatting
* replace uglifyify with @browserify updated fork
* fix profile field templating (yet again)
* fix React classes
* testrig: add testing profile field for admin user
* fix sensitive media interactions
* Revert "testrig: add testing profile field for admin user"
This reverts commit 80490c183e6639ce5b57fcfca6772d8f96df8706.
* settings interface wrapping
* fix reported toot styling
* add role to profile sr-only text
* comment fallback rule
* remove currently unused image description lacking indicator
Diffstat (limited to 'web/source/settings/components')
| -rw-r--r-- | web/source/settings/components/fake-profile.jsx | 26 | ||||
| -rw-r--r-- | web/source/settings/components/fake-toot.jsx | 27 |
2 files changed, 31 insertions, 22 deletions
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 |