mirrors
/
gotosocial
mirror of
1
Fork 0
Code Issues Releases Activity

[chore] Fix report username wrapping (#1464) 

* fix report username wrapping

* move report status to separate line on portrait orientation
This commit is contained in:
f0x52 2023-02-09 09:26:35 +01:00 committed by GitHub
parent 27e95fd123
commit 65b19411a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -60,7 +60,7 @@ function ReportDetailForm({ data: report }) {
return ( return (
<div className="report detail"> <div className="report detail">
<div> <div className="usernames">
<Username user={from} /> reported <Username user={target} /> <Username user={from} /> reported <Username user={target} />
</div> </div>

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

@ -89,7 +89,7 @@ function ReportEntry({ report }) {
<Link to={`${baseUrl}/${report.id}`}> <Link to={`${baseUrl}/${report.id}`}>
<a className={`report entry${report.action_taken ? " resolved" : ""}`}> <a className={`report entry${report.action_taken ? " resolved" : ""}`}>
<div className="byline"> <div className="byline">
<div className="users"> <div className="usernames">
<Username user={from} link={false} /> reported <Username user={target} link={false} /> <Username user={from} link={false} /> reported <Username user={target} link={false} />
</div> </div>
<h3 className="status"> <h3 className="status">

4
web/source/settings/admin/reports/username.jsx
View File

@ -36,7 +36,7 @@ module.exports = function Username({ user, link = true }) {
? { fa: "fa-home", info: "Local user" } ? { fa: "fa-home", info: "Local user" }
: { fa: "fa-external-link-square", info: "Remote user" }; : { fa: "fa-external-link-square", info: "Remote user" };
let Element = "span"; let Element = "div";
let href = null; let href = null;
if (link) { if (link) {
@ -46,7 +46,7 @@ module.exports = function Username({ user, link = true }) {
return ( return (
<Element className={className} href={href} target="_blank" rel="noreferrer" > <Element className={className} href={href} target="_blank" rel="noreferrer" >
@{user.account.acct} <span className="acct">@{user.account.acct}</span>
<i className={`fa fa-fw ${icon.fa}`} aria-hidden="true" title={icon.info} /> <i className={`fa fa-fw ${icon.fa}`} aria-hidden="true" title={icon.info} />
<span className="sr-only">{icon.info}</span> <span className="sr-only">{icon.info}</span>
</Element> </Element>

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

@ -828,9 +828,14 @@ button.with-padding {
border: none; border: none;
border-left: 0.3rem solid $border-accent; border-left: 0.3rem solid $border-accent;
.usernames {
line-height: 2rem;
}
.byline { .byline {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
gap: 0.5rem;
.status { .status {
color: $border-accent; color: $border-accent;
@ -904,14 +909,20 @@ button.with-padding {
} }
.user { .user {
line-height: 1.3rem;
display: inline-block;
background: $fg-accent; background: $fg-accent;
color: $bg; color: $bg;
border-radius: $br; border-radius: $br;
padding: 0.1rem 0.2rem; padding: 0.15rem 0.15rem;
margin: 0 0.1rem; margin: 0 0.1rem;
font-weight: bold; font-weight: bold;
text-decoration: none; text-decoration: none;
.acct {
word-break: break-all;
}
&.suspended { &.suspended {
background: $bg-accent; background: $bg-accent;
color: $fg; color: $fg;
@ -924,6 +935,16 @@ button.with-padding {
} }
} }
@media screen and (orientation: portrait) {
.reports .report .byline {
grid-template-columns: 1fr;
.status {
grid-row: 1;
}
}
}
[role="button"] { [role="button"] {
cursor: pointer; cursor: pointer;
} }