[bugfix/frontend] Fix photoswipe layout issues, keyboard shortcuts (#4010)

* fix photoswipe layout issues (chrome)

* aaaaaaaaaaaaaa

* wwwwwwwwwwww
This commit is contained in:
tobi 2025-04-14 15:12:21 +02:00 committed by GitHub
commit b510f3c539
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
18 changed files with 257 additions and 125 deletions

View file

@ -65,7 +65,8 @@ export default function HeaderPermsOverview() {
} = useGetHeaderAllowsQuery(NoArg, { skip: permType !== "allow" });
const itemToEntry = (perm: HeaderPermission) => {
const onClick = () => {
const onClick = (e) => {
e.preventDefault();
// When clicking on a header perm,
// go to the detail view for perm.
setLocation(`/${permType}s/${perm.id}`, {
@ -81,7 +82,12 @@ export default function HeaderPermsOverview() {
key={perm.id}
className="entry pseudolink"
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
}
}}
role="link"
tabIndex={0}
>

View file

@ -211,7 +211,8 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
const title = `${permTypeUpper} ${domain}`;
const onClick = () => {
const onClick = (e) => {
e.preventDefault();
// When clicking on a draft, direct
// to the detail view for that draft.
setLocation(linkTo, {
@ -228,7 +229,12 @@ function DraftListEntry({ permDraft, linkTo, backLocation }: DraftEntryProps) {
aria-label={title}
title={title}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
}
}}
role="link"
tabIndex={0}
>

View file

@ -186,7 +186,8 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro
return <ErrorC error={new Error("id was undefined")} />;
}
const onClick = () => {
const onClick = (e) => {
e.preventDefault();
// When clicking on a exclude, direct
// to the detail view for that exclude.
setLocation(linkTo, {
@ -203,7 +204,12 @@ function ExcludeListEntry({ permExclude, linkTo, backLocation }: ExcludeEntryPro
aria-label={`Exclude ${domain}`}
title={`Exclude ${domain}`}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
}
}}
role="link"
tabIndex={0}
>

View file

@ -71,7 +71,8 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
}, [exportResult]);
const importFileRef = useRef<HTMLInputElement>(null);
const importFileOnClick = () => {
const importFileOnClick = (e) => {
e.preventDefault();
importFileRef.current?.click();
};
@ -110,7 +111,12 @@ export default function ImportExportForm({ form, submitParse, parseResult }: Imp
className={`button with-icon${form.permType.value === undefined || form.permType.value.length === 0 ? " disabled" : ""}`}
tabIndex={0}
onClick={importFileOnClick}
onKeyDown={e => e.key === "Enter" && importFileOnClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
importFileOnClick(e);
}
}}
role="button"
>
<i className="fa fa-fw " aria-hidden="true" />

View file

@ -109,7 +109,8 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri
successfullyFetchedAtStr = new Date(successfullyFetchedAt).toDateString();
}
const onClick = () => {
const onClick = (e) => {
e.preventDefault();
// When clicking on a subscription, direct
// to the detail view for that subscription.
setLocation(linkTo, {
@ -126,7 +127,12 @@ export function SubscriptionListEntry({ permSub, linkTo, backLocation }: Subscri
aria-label={ariaLabel}
title={ariaLabel}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
}
}}
role="link"
tabIndex={0}
>

View file

@ -184,7 +184,8 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
const created = new Date(report.created_at).toLocaleString();
const title = `${status}. @${target.account.acct} was reported by @${from.account.acct} on ${created}. Reason: "${comment}"`;
const onClick = () => {
const onClick = (e) => {
e.preventDefault();
// When clicking on a report, direct
// to the detail view for that report.
setLocation(linkTo, {
@ -201,7 +202,12 @@ function ReportListEntry({ report, linkTo, backLocation }: ReportEntryProps) {
aria-label={title}
title={title}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
}
}}
role="link"
tabIndex={0}
>

View file

@ -139,7 +139,8 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr
const created = useCreated(app);
const redirectURIs = useRedirectURIs(app);
const onClick = () => {
const onClick = (e) => {
e.preventDefault();
// When clicking on an app, direct
// to the detail view for that app.
setLocation(linkTo, {
@ -156,7 +157,12 @@ function ApplicationListEntry({ app, linkTo, backLocation }: ApplicationListEntr
aria-label={`${app.name}`}
title={`${app.name}`}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
}
}}
role="link"
tabIndex={0}
>

View file

@ -174,7 +174,8 @@ function ReqsListEntry({ req, linkTo, backLocation }: ReqsListEntryProps) {
const ourContent = useContent(req.status);
const theirContent = useContent(req.reply);
const onClick = () => {
const onClick = (e) => {
e.preventDefault();
// When clicking on a request, direct
// to the detail view for that request.
setLocation(linkTo, {
@ -191,7 +192,12 @@ function ReqsListEntry({ req, linkTo, backLocation }: ReqsListEntryProps) {
aria-label={label}
title={label}
onClick={onClick}
onKeyDown={e => e.key === "Enter" && onClick()}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.preventDefault();
onClick(e);
}
}}
role="link"
tabIndex={0}
>