diff options
Diffstat (limited to 'web/source/settings')
| -rw-r--r-- | web/source/settings/components/profile.tsx | 8 | ||||
| -rw-r--r-- | web/source/settings/style.css | 23 | ||||
| -rw-r--r-- | web/source/settings/views/user/profile.tsx | 44 |
3 files changed, 47 insertions, 28 deletions
diff --git a/web/source/settings/components/profile.tsx b/web/source/settings/components/profile.tsx index 4a5157378..24cb3c4c2 100644 --- a/web/source/settings/components/profile.tsx +++ b/web/source/settings/components/profile.tsx @@ -27,9 +27,11 @@ export default function FakeProfile({ avatar, header, display_name, username, ro <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> + <div className="avatar-image-wrapper"> + <a href={avatar}> + <img className="avatar" src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} /> + </a> + </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> diff --git a/web/source/settings/style.css b/web/source/settings/style.css index cdae6b972..f9c098ace 100644 --- a/web/source/settings/style.css +++ b/web/source/settings/style.css @@ -400,12 +400,13 @@ section.with-sidebar > form { width: 24rem; } } - - .file-input-with-image-description { - display: flex; - flex-direction: column; - justify-content: space-around; - } +} + +.file-input-with-image-description { + display: flex; + flex-direction: column; + justify-content: space-around; + gap: 0.5rem; } /* @@ -422,11 +423,13 @@ section.with-sidebar > form { } .user-profile { + .profile { + max-width: 42rem; + } + .overview { - display: grid; - max-width: 60rem; - grid-template-columns: 70% 30%; - grid-template-rows: auto; + display: flex; + flex-direction: column; gap: 1rem; .files { diff --git a/web/source/settings/views/user/profile.tsx b/web/source/settings/views/user/profile.tsx index 17827ce9e..f4088b353 100644 --- a/web/source/settings/views/user/profile.tsx +++ b/web/source/settings/views/user/profile.tsx @@ -93,7 +93,9 @@ function UserProfileForm({ data: profile }) { const form = { avatar: useFileInput("avatar", { withPreview: true }), + avatarDescription: useTextInput("avatar_description", { source: profile }), header: useFileInput("header", { withPreview: true }), + headerDescription: useTextInput("header_description", { source: profile }), displayName: useTextInput("display_name", { source: profile }), note: useTextInput("note", { source: profile, valueSelector: (p) => p.source?.note }), bot: useBoolInput("bot", { source: profile }), @@ -131,21 +133,33 @@ function UserProfileForm({ data: profile }) { username={profile.username} role={profile.role} /> - <div className="files"> - <div> - <FileInput - label="Header" - field={form.header} - accept="image/*" - /> - </div> - <div> - <FileInput - label="Avatar" - field={form.avatar} - accept="image/*" - /> - </div> + + <div className="file-input-with-image-description"> + <FileInput + label="Header" + field={form.header} + accept="image/png, image/jpeg, image/webp, image/gif" + /> + <TextInput + field={form.headerDescription} + label="Header image description" + placeholder="A green field with pink flowers." + autoCapitalize="sentences" + /> + </div> + + <div className="file-input-with-image-description"> + <FileInput + label="Avatar (1:1 images look best)" + field={form.avatar} + accept="image/png, image/jpeg, image/webp, image/gif" + /> + <TextInput + field={form.avatarDescription} + label="Avatar image description" + placeholder="A cute drawing of a smiling sloth." + autoCapitalize="sentences" + /> </div> <div className="theme"> |