tea/browsertrix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix pagination buttons having no horizontal padding (#2743)

Browse Source
This commit is contained in:
Emma Segal-Grossman 2025-07-16 21:23:07 -04:00 committed by GitHub
parent 3af94ca03d
commit 74aec5dfa3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 4 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/ui/navigation/navigation-button.ts
View File

@ -39,14 +39,11 @@ export class NavigationButton extends TailwindElement {
@property({ type: Boolean }) @property({ type: Boolean })
disabled = false; disabled = false;
@property({ type: Boolean })
icon = false;
@property({ type: String, reflect: true }) @property({ type: String, reflect: true })
role: ARIAMixin["role"] = null; role: ARIAMixin["role"] = null;
@property({ type: String }) @property({ type: String })
size: "small" | "medium" | "large" = "medium"; size: "x-small" | "small" | "medium" | "large" = "medium";
@property({ type: String }) @property({ type: String })
align: "left" | "center" | "right" = "left"; align: "left" | "center" | "right" = "left";
@ -82,10 +79,9 @@ export class NavigationButton extends TailwindElement {
part="button" part="button"
class=${clsx([ class=${clsx([
tw`flex w-full cursor-pointer items-center gap-2 rounded font-medium leading-[16px] transition hover:transition-none focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50`, tw`flex w-full cursor-pointer items-center gap-2 rounded font-medium leading-[16px] transition hover:transition-none focus-visible:outline focus-visible:outline-3 focus-visible:outline-offset-1 disabled:cursor-not-allowed disabled:bg-transparent disabled:opacity-50`,
this.icon ? tw`min-h-6 min-w-6` : tw``,
{ {
small: this.icon ? tw`min-h-6 p-0` : tw`min-h-6 px-2 py-0`, "x-small": tw`min-size-6 px-1 py-0`,
small: tw`min-h-6 px-2 py-0`,
medium: tw`p-2`, medium: tw`p-2`,
large: tw`px-2 py-4`, large: tw`px-2 py-4`,
}[this.size], }[this.size],

3
frontend/src/components/ui/pagination.ts
View File

@ -370,9 +370,8 @@ export class Pagination extends LitElement {
const isCurrent = page === this._page; const isCurrent = page === this._page;
return html`<li aria-current=${ifDefined(isCurrent ? "page" : undefined)}> return html`<li aria-current=${ifDefined(isCurrent ? "page" : undefined)}>
<btrix-navigation-button <btrix-navigation-button
icon
.active=${isCurrent} .active=${isCurrent}
.size=${"small"} .size=${"x-small"}
.align=${"center"} .align=${"center"}
@click=${() => this.onPageChange(page)} @click=${() => this.onPageChange(page)}
aria-disabled=${isCurrent} aria-disabled=${isCurrent}