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

Archived item nav button quickfix (#1543)

Browse Source 
Navigation buttons weren't being laid out properly and were overflowing
in unintentional ways, this fixes that, and then also updates navigation
buttons & puts them into use everywhere elements service the purpose of
navigation buttons were used instead!


<img width="452" alt="Screenshot 2024-02-24 at 10 37 41 PM"
src="https://github.com/webrecorder/browsertrix-cloud/assets/5727389/a77ed1be-3f95-4e03-a4d8-e3740229621e">
<img width="519" alt="Screenshot 2024-02-24 at 10 38 06 PM"
src="https://github.com/webrecorder/browsertrix-cloud/assets/5727389/684bc9a4-bec2-4258-b264-662dc441e75f">
<img width="273" alt="Screenshot 2024-02-24 at 10 38 20 PM"
src="https://github.com/webrecorder/browsertrix-cloud/assets/5727389/863d9d9a-121e-4682-8c12-eaf94ae69c7c">
<img width="410" alt="Screenshot 2024-02-24 at 10 38 25 PM"
src="https://github.com/webrecorder/browsertrix-cloud/assets/5727389/b321375c-d063-4c00-b876-36a592c85a35">
<img width="200" alt="Screenshot 2024-02-24 at 10 38 37 PM"
src="https://github.com/webrecorder/browsertrix-cloud/assets/5727389/62bbb5d1-d4f3-4ba3-8cd5-035242424f3a">
This commit is contained in:
Emma Segal-Grossman 2024-02-25 02:04:53 -05:00 committed by GitHub
parent ae59617e02
commit f6e82d9335
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 122 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,6 +38,12 @@ export class Button extends TailwindElement {
@property({ type: String, reflect: true })
role: ARIAMixin["role"] = "tab";
@property({ type: String })
size: "small" | "medium" | "large" = "medium";
@property({ type: String })
align: "left" | "center" | "right" = "left";
protected willUpdate(changedProperties: PropertyValueMap<this>) {
if (changedProperties.has("active")) {
this.ariaSelected = this.active ? "true" : null;
@ -60,10 +66,20 @@ export class Button extends TailwindElement {
return html`<${tag}
type=${this.type === "submit" ? "submit" : "button"}
class=${[
tw`flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-4 font-medium outline-primary-600 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`h-6`,
tw`flex w-full cursor-pointer items-center gap-2 rounded font-medium leading-[16px] outline-primary-600 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`,
medium: tw`p-2`,
large: tw`px-2 py-4`,
}[this.size],
{
left: "justify-start",
center: "justify-center",
right: "justify-end",
}[this.align],
this.active
? tw`bg-blue-100 text-blue-600 shadow-sm shadow-blue-900/40 hover:bg-blue-100`
? tw`bg-blue-100 text-blue-600 shadow-sm shadow-blue-900/20 hover:bg-blue-100`
: tw`text-neutral-600 hover:bg-blue-50`,
]
.filter(Boolean)

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

@ -298,13 +298,14 @@ export class Pagination extends LitElement {
private readonly renderPageButton = (page: number) => {
const isCurrent = page === this.page;
return html`<li aria-current=${ifDefined(isCurrent ? "page" : undefined)}>
<btrix-button
<btrix-navigation-button
icon
variant=${isCurrent ? "primary" : "neutral"}
?raised=${isCurrent}
.active=${isCurrent}
.size=${"small"}
.align=${"center"}
@click=${() => this.onPageChange(page)}
aria-disabled=${isCurrent}
>${page}</btrix-button
>${page}</btrix-navigation-button
>
</li>`;
};

4
frontend/src/components/ui/tab-list.ts
View File

@ -133,6 +133,7 @@ export class TabList extends LitElement {
margin: 0;
list-style: none;
padding: 0;
gap: 0.5rem;
}
.show-indicator .tablist {
@ -141,7 +142,7 @@ export class TabList extends LitElement {
@media only screen and (min-width: ${TWO_COL_SCREEN_MIN_CSS}) {
.tablist {
display: block;
flex-direction: column;
}
}
@ -165,7 +166,6 @@ export class TabList extends LitElement {
}
@media only screen and (min-width: ${TWO_COL_SCREEN_MIN_CSS}) {
.tablist,
.show-indicator .track,
.show-indicator .indicator {
display: block;

8
frontend/src/features/collections/collection-items-dialog.ts
View File

@ -274,10 +274,10 @@ export class CollectionItemsDialog extends TailwindElement {
const { icon, label } = this.tabLabels[tab];
return html`
<btrix-button
<btrix-navigation-button
@click=${() => (this.activeTab = tab)}
variant=${isSelected ? "primary" : "neutral"}
?raised=${isSelected}
.active=${isSelected}
size="small"
aria-selected="${isSelected}"
role="tab"
aria-controls="tabPanel-${tab}"
@ -286,7 +286,7 @@ export class CollectionItemsDialog extends TailwindElement {
>
<sl-icon name=${icon}></sl-icon>
<span>${label}</span>
</btrix-button>
</btrix-navigation-button>
`;
};

128
frontend/src/pages/org/archived-item-detail.ts
View File

@ -260,8 +260,14 @@ export class CrawlDetail extends LiteElement {
<div class="mb-4">${this.renderHeader()}</div>
<main>
<section class="grid grid-cols-14 gap-6">
<div class="col-span-14 md:col-span-3">${this.renderNav()}</div>
<section class="grid gap-6 md:grid-cols-14">
<div class="col-span-14 grid border-b md:col-span-3 md:border-b-0 ">
<div
class="-mx-3 box-border flex overflow-x-auto px-3 md:mx-0 md:block md:px-0"
>
${this.renderNav()}
</div>
</div>
<div class="col-span-14 md:col-span-11">${sectionContent}</div>
</section>
</main>
@ -317,83 +323,79 @@ export class CrawlDetail extends LiteElement {
const isActive = section === this.sectionName;
const baseUrl = window.location.pathname.split("#")[0];
return html`
<li class="relative grow" role="menuitem" aria-selected="${isActive}">
<a
class="${isActive
? "text-blue-600 bg-blue-100 shadow-sm shadow-blue-800/20"
: "text-neutral-600 hover:bg-blue-50"} flex h-full flex-col items-center gap-2 rounded-md p-2 font-semibold md:flex-row"
href=${`${baseUrl}${window.location.search}#${section}`}
@click=${() => (this.sectionName = section)}
>
<sl-icon
class="h-4 w-4 shrink-0"
name=${icon}
aria-hidden="true"
library=${iconLibrary}
></sl-icon>
${label}
</a>
</li>
<btrix-navigation-button
class="whitespace-nowrap md:whitespace-normal"
.active=${isActive}
href=${`${baseUrl}${window.location.search}#${section}`}
@click=${() => {
this.sectionName = section;
}}
><sl-icon
class="h-4 w-4 shrink-0"
name=${icon}
aria-hidden="true"
library=${iconLibrary}
></sl-icon>
${label}</btrix-navigation-button
>
`;
};
return html`
<nav class="sticky top-0 border-b pb-4 md:mt-10 md:border-b-0">
<ul
class="flex flex-row gap-2 text-center md:flex-col md:text-start"
role="menu"
>
${renderNavItem({
section: "overview",
iconLibrary: "default",
icon: "info-circle-fill",
label: msg("Overview"),
})}
${renderNavItem({
section: "replay",
iconLibrary: "app",
icon: "link-replay",
label: msg("Replay"),
})}
${renderNavItem({
section: "files",
iconLibrary: "default",
icon: "folder-fill",
label: msg("Files"),
})}
${when(
this.itemType === "crawl",
() => html`
${renderNavItem({
section: "logs",
iconLibrary: "default",
icon: "terminal-fill",
label: msg("Error Logs"),
})}
${renderNavItem({
section: "config",
iconLibrary: "default",
icon: "file-code-fill",
label: msg("Crawl Settings"),
})}
`,
)}
</ul>
<nav
class="sticky top-0 flex flex-row gap-2 pb-4 text-center md:mt-10 md:flex-col md:text-start"
role="menu"
>
${renderNavItem({
section: "overview",
iconLibrary: "default",
icon: "info-circle-fill",
label: msg("Overview"),
})}
${renderNavItem({
section: "replay",
iconLibrary: "app",
icon: "link-replay",
label: msg("Replay"),
})}
${renderNavItem({
section: "files",
iconLibrary: "default",
icon: "folder-fill",
label: msg("Files"),
})}
${when(
this.itemType === "crawl",
() => html`
${renderNavItem({
section: "logs",
iconLibrary: "default",
icon: "terminal-fill",
label: msg("Error Logs"),
})}
${renderNavItem({
section: "config",
iconLibrary: "default",
icon: "file-code-fill",
label: msg("Crawl Settings"),
})}
`,
)}
</nav>
`;
}
private renderHeader() {
return html`
<header class="mb-3 items-center gap-2 border-b pb-3 md:flex">
<header class="mb-3 flex flex-wrap items-center gap-2 border-b pb-3">
<h1
class="mb-2 grid min-w-0 flex-1 truncate text-xl font-semibold leading-7 md:mb-0"
class="grid min-w-0 flex-auto truncate text-xl font-semibold leading-7"
>
${this.renderName()}
</h1>
<div
class="${this.isActive
? "justify-between"
: "justify-end"} grid grid-flow-col gap-2"
: "justify-end ml-auto"} grid grid-flow-col gap-2"
>
${this.isActive
? html`

16
frontend/src/pages/org/archived-item-qa.ts
View File

@ -119,21 +119,21 @@ export class ArchivedItemQA extends TailwindElement {
</header>
<section class="main outline">
<nav>
<btrix-button
<btrix-navigation-button
id="screenshot-tab"
href=${`${crawlBaseUrl}/review/screenshots`}
variant=${this.tab === "screenshots" ? "primary" : "neutral"}
?raised=${this.tab === "screenshots"}
.active=${this.tab === "screenshots"}
size="small"
@click=${this.navigate.link}
>${msg("Screenshots")}</btrix-button
>${msg("Screenshots")}</btrix-navigation-button
>
<btrix-button
<btrix-navigation-button
id="replay-tab"
href=${`${crawlBaseUrl}/review/replay`}
variant=${this.tab === "replay" ? "primary" : "neutral"}
?raised=${this.tab === "replay"}
.active=${this.tab === "replay"}
size="small"
@click=${this.navigate.link}
>${msg("Replay")}</btrix-button
>${msg("Replay")}</btrix-navigation-button
>
</nav>
<div role="region" aria-labelledby="${this.tab}-tab">

10
frontend/src/pages/org/archived-items.ts
View File

@ -195,7 +195,7 @@ export class CrawlsList extends LiteElement {
return html`
<main>
<header class="contents">
<div class="mb-3 flex justify-between gap-2 border-b pb-3">
<div class="mb-3 flex flex-wrap justify-between gap-2 border-b pb-3">
<h1 class="mb-2 text-xl font-semibold leading-8 md:mb-0">
${msg("Archived Items")}
</h1>
@ -222,18 +222,18 @@ export class CrawlsList extends LiteElement {
<div class="mb-3 flex gap-2">
${listTypes.map(({ label, itemType, icon }) => {
const isSelected = itemType === this.itemType;
return html` <btrix-button
variant=${isSelected ? "primary" : "neutral"}
?raised=${isSelected}
return html` <btrix-navigation-button
.active=${isSelected}
aria-selected="${isSelected}"
href=${`${this.orgBasePath}/items${
itemType ? `/${itemType}` : ""
}`}
@click=${this.navLink}
size="small"
>
${icon ? html`<sl-icon name=${icon}></sl-icon>` : ""}
<span>${label}</span>
</btrix-button>`;
</btrix-navigation-button>`;
})}
</div>
<div

7
frontend/src/pages/org/collection-detail.ts
View File

@ -383,9 +383,8 @@ export class CollectionDetail extends LiteElement {
${TABS.map((tabName) => {
const isSelected = tabName === this.collectionTab;
return html`
<btrix-button
variant=${isSelected ? "primary" : "neutral"}
?raised=${isSelected}
<btrix-navigation-button
.active=${isSelected}
aria-selected="${isSelected}"
href=${`${this.orgBasePath}/collections/view/${this.collectionId}/${tabName}`}
@click=${this.navLink}
@ -394,7 +393,7 @@ export class CollectionDetail extends LiteElement {
name=${this.tabLabels[tabName].icon.name}
library=${this.tabLabels[tabName].icon.library}
></sl-icon>
${this.tabLabels[tabName].text}</btrix-button
${this.tabLabels[tabName].text}</btrix-navigation-button
>
`;
})}

6
frontend/src/pages/org/index.ts
View File

@ -365,8 +365,10 @@ export class Org extends LiteElement {
private renderOrgNavBar() {
return html`
<div class="mx-auto box-border w-full max-w-screen-desktop px-3">
<nav class="-ml-3 flex items-end overflow-x-auto">
<div
class="mx-auto box-border w-full max-w-screen-desktop overflow-x-hidden"
>
<nav class="-mx-3 flex items-end overflow-x-auto px-3">
${this.renderNavTab({
tabName: "home",
label: msg("Overview"),

8
frontend/src/pages/org/settings.ts
View File

@ -159,17 +159,15 @@ export class OrgSettings extends LiteElement {
private renderTab(name: Tab, path: string) {
const isActive = name === this.activePanel;
return html`
<a
<btrix-navigation-button
slot="nav"
href=${`${this.orgBasePath}/${path}`}
class="${isActive
? "text-blue-600 bg-blue-50 shadow-sm shadow-blue-800/20"
: "text-neutral-600 hover:bg-neutral-50"} mb-2 block rounded-sm p-2 font-medium transition-all"
.active=${isActive}
@click=${this.navLink}
aria-selected=${isActive}
>
${this.tabLabels[name]}
</a>
</btrix-navigation-button>
`;
}

13
frontend/src/pages/org/workflow-detail.ts
View File

@ -530,17 +530,12 @@ export class WorkflowDetail extends LiteElement {
private renderTab(tabName: Tab, { disabled = false } = {}) {
const isActive = tabName === this.activePanel;
let className = "text-neutral-600 hover:bg-neutral-50";
if (isActive) {
className = "text-blue-600 bg-blue-50 shadow-sm shadow-blue-800/20";
} else if (disabled) {
className = "text-neutral-300 cursor-not-allowed";
}
return html`
<a
<btrix-navigation-button
slot="nav"
href=${`${window.location.pathname}#${tabName}`}
class="${className} mb-2 block rounded-sm p-2 font-medium transition-all"
.active=${isActive}
.disabled=${disabled}
aria-selected=${isActive}
aria-disabled=${disabled}
@click=${(e: MouseEvent) => {
@ -548,7 +543,7 @@ export class WorkflowDetail extends LiteElement {
}}
>
${this.tabLabels[tabName]}
</a>
</btrix-navigation-button>
`;
}