mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-12-22 10:12:11 +00:00
[chore] Fix report username wrapping (#1464)
* fix report username wrapping * move report status to separate line on portrait orientation
This commit is contained in:
parent
27e95fd123
commit
65b19411a4
|
@ -60,7 +60,7 @@ function ReportDetailForm({ data: report }) {
|
|||
|
||||
return (
|
||||
<div className="report detail">
|
||||
<div>
|
||||
<div className="usernames">
|
||||
<Username user={from} /> reported <Username user={target} />
|
||||
</div>
|
||||
|
||||
|
|
|
@ -89,7 +89,7 @@ function ReportEntry({ report }) {
|
|||
<Link to={`${baseUrl}/${report.id}`}>
|
||||
<a className={`report entry${report.action_taken ? " resolved" : ""}`}>
|
||||
<div className="byline">
|
||||
<div className="users">
|
||||
<div className="usernames">
|
||||
<Username user={from} link={false} /> reported <Username user={target} link={false} />
|
||||
</div>
|
||||
<h3 className="status">
|
||||
|
|
|
@ -36,7 +36,7 @@ module.exports = function Username({ user, link = true }) {
|
|||
? { fa: "fa-home", info: "Local user" }
|
||||
: { fa: "fa-external-link-square", info: "Remote user" };
|
||||
|
||||
let Element = "span";
|
||||
let Element = "div";
|
||||
let href = null;
|
||||
|
||||
if (link) {
|
||||
|
@ -46,7 +46,7 @@ module.exports = function Username({ user, link = true }) {
|
|||
|
||||
return (
|
||||
<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} />
|
||||
<span className="sr-only">{icon.info}</span>
|
||||
</Element>
|
||||
|
|
|
@ -828,9 +828,14 @@ button.with-padding {
|
|||
border: none;
|
||||
border-left: 0.3rem solid $border-accent;
|
||||
|
||||
.usernames {
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.byline {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 0.5rem;
|
||||
|
||||
.status {
|
||||
color: $border-accent;
|
||||
|
@ -904,14 +909,20 @@ button.with-padding {
|
|||
}
|
||||
|
||||
.user {
|
||||
line-height: 1.3rem;
|
||||
display: inline-block;
|
||||
background: $fg-accent;
|
||||
color: $bg;
|
||||
border-radius: $br;
|
||||
padding: 0.1rem 0.2rem;
|
||||
padding: 0.15rem 0.15rem;
|
||||
margin: 0 0.1rem;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
|
||||
.acct {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
&.suspended {
|
||||
background: $bg-accent;
|
||||
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"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue