SuperSeriousBusiness/GoToSocial
1
1
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial synced 2025-06-05 21:59:39 +02:00
Code Issues Projects Releases Wiki Activity

[chore] Refactor HTML templates and CSS (#2480)

Browse Source 
* [chore] Refactor HTML templates and CSS

* eslint

* ignore "Local"

* rss tests

* fiddle with OG just a tiny bit

* dick around with polls a bit more so SR stops saying "clickable"

* remove break

* oh lord

* don't lazy load avatar

* fix ogmeta tests

* clean up some cruft

* catch remaining calls to c.HTML

* fix error rendering + stack overflow in tag

* allow templating attributes

* fix indent

* set aria-hidden on status complementary content, since it's already present in the label anyway

* tidy up templating calls a little

* try to make styling a bit more consistent + readable

* fix up some remaining CSS issues

* fix up reports
This commit is contained in:
tobi
2023-12-27 11:23:52 +01:00
committed by GitHub
parent 97a1fd9a29
commit 0ff52b71f2
77 changed files with 3262 additions and 1736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
web/source/settings/components/fake-profile.jsx
View File

@@ -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>

33
web/source/settings/components/fake-toot.jsx
View File

@@ -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>