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

42
web/source/settings/admin/reports/detail.jsx
View File

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

2
web/source/settings/admin/reports/index.jsx
View File

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

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>

89
web/source/settings/style.css
View File

@@ -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;
}
}
}
@media (prefers-reduced-motion) {
.fa-spin {
animation: none;
}
}
.monospace {
font-family: monospace;
}