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

Increase app max width (#1484)

Browse Source 
Increases max width of entire app

---------

Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>
This commit is contained in:
sua yoo 2024-01-23 10:41:25 -08:00 committed by GitHub
parent 1f55edbe68
commit 534f5ff2c7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
const DEFAULT_PANEL_ID = "default-panel"; const DEFAULT_PANEL_ID = "default-panel";
// Match witch tailwind 4xl max width // Match witch tailwind 4xl max width
// https://tailwindcss.com/docs/max-width // https://tailwindcss.com/docs/max-width
const SCREEN_LG = 896; const SCREEN_LG_PX = 896;
/** /**
* Tab list * Tab list
@ -93,12 +93,12 @@ export class TabList extends LitElement {
grid-gap: 1rem; grid-gap: 1rem;
} }
@media only screen and (min-width: ${SCREEN_LG}px) { @media only screen and (min-width: ${SCREEN_LG_PX}px) {
.container { .container {
grid-template-areas: grid-template-areas:
". header" ". header"
"menu main"; "menu main";
grid-template-columns: auto minmax(auto, 896px); grid-template-columns: auto minmax(auto, 70rem);
} }
} }
@ -106,7 +106,7 @@ export class TabList extends LitElement {
grid-area: menu; grid-area: menu;
} }
@media only screen and (min-width: ${SCREEN_LG}px) { @media only screen and (min-width: ${SCREEN_LG_PX}px) {
.navWrapper { .navWrapper {
overflow: initial; overflow: initial;
} }
@ -141,7 +141,7 @@ export class TabList extends LitElement {
margin-left: var(--track-width); margin-left: var(--track-width);
} }
@media only screen and (min-width: ${SCREEN_LG}px) { @media only screen and (min-width: ${SCREEN_LG_PX}px) {
.tablist { .tablist {
display: block; display: block;
} }
@ -166,7 +166,7 @@ export class TabList extends LitElement {
background-color: var(--sl-color-blue-500); background-color: var(--sl-color-blue-500);
} }
@media only screen and (min-width: ${SCREEN_LG}px) { @media only screen and (min-width: ${SCREEN_LG_PX}px) {
.tablist, .tablist,
.show-indicator .track, .show-indicator .track,
.show-indicator .indicator { .show-indicator .indicator {

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

@ -212,6 +212,7 @@ export class CollectionItemsDialog extends TailwindElement {
render() { render() {
return html` <btrix-dialog return html` <btrix-dialog
?open=${this.open} ?open=${this.open}
style="--width: var(--btrix-screen-desktop); --body-spacing: 0;"
@sl-show=${() => (this.isReady = true)} @sl-show=${() => (this.isReady = true)}
@sl-after-hide=${() => this.reset()} @sl-after-hide=${() => this.reset()}
> >

8
frontend/src/index.ts
View File

@ -247,7 +247,7 @@ export class App extends LiteElement {
return html` return html`
<div class="border-b"> <div class="border-b">
<nav <nav
class="max-w-screen-lg mx-auto pl-3 box-border h-12 flex items-center justify-between" class="max-w-screen-desktop mx-auto pl-3 box-border h-12 flex items-center justify-between"
> >
<div> <div>
<a <a
@ -448,7 +448,7 @@ export class App extends LiteElement {
private renderFooter() { private renderFooter() {
return html` return html`
<footer <footer
class="w-full max-w-screen-lg mx-auto p-3 box-border flex flex-col gap-4 md:flex-row justify-between" class="w-full max-w-screen-desktop mx-auto p-3 box-border flex flex-col gap-4 md:flex-row justify-between"
> >
<!-- <div> --> <!-- <div> -->
<!-- TODO re-enable when translations are added --> <!-- TODO re-enable when translations are added -->
@ -608,7 +608,7 @@ export class App extends LiteElement {
case "accountSettings": case "accountSettings":
return html`<btrix-account-settings return html`<btrix-account-settings
class="w-full max-w-screen-lg mx-auto p-2 md:py-8 box-border" class="w-full max-w-screen-desktop mx-auto p-2 md:py-8 box-border"
@update-user-info=${(e: CustomEvent) => { @update-user-info=${(e: CustomEvent) => {
e.stopPropagation(); e.stopPropagation();
this.updateUserInfo(); this.updateUserInfo();
@ -621,7 +621,7 @@ export class App extends LiteElement {
if (this.appState.userInfo) { if (this.appState.userInfo) {
if (this.appState.userInfo.isAdmin) { if (this.appState.userInfo.isAdmin) {
return html`<btrix-users-invite return html`<btrix-users-invite
class="w-full max-w-screen-lg mx-auto p-2 md:py-8 box-border" class="w-full max-w-screen-desktop mx-auto p-2 md:py-8 box-border"
.authState="${this.authService.authState}" .authState="${this.authService.authState}"
.userInfo="${this.appState.userInfo}" .userInfo="${this.appState.userInfo}"
></btrix-users-invite>`; ></btrix-users-invite>`;

2
frontend/src/pages/crawls.ts
View File

@ -99,7 +99,7 @@ export class Crawls extends LiteElement {
render() { render() {
return html` <div return html` <div
class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border" class="w-full max-w-screen-desktop mx-auto px-3 py-4 box-border"
> >
${this.crawlId ${this.crawlId
? // Render loading indicator while preparing to redirect ? // Render loading indicator while preparing to redirect

4
frontend/src/pages/home.ts
View File

@ -89,13 +89,13 @@ export class Home extends LiteElement {
return html` return html`
<div class="bg-white"> <div class="bg-white">
<header <header
class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8" class="w-full max-w-screen-desktop mx-auto px-3 py-4 box-border md:py-8"
> >
<h1 class="text-xl font-medium">${title}</h1> <h1 class="text-xl font-medium">${title}</h1>
</header> </header>
<hr /> <hr />
</div> </div>
<main class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border"> <main class="w-full max-w-screen-desktop mx-auto px-3 py-4 box-border">
${content} ${content}
</main> </main>
`; `;

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

@ -282,7 +282,7 @@ export class Org extends LiteElement {
${this.renderOrgNavBar()} ${this.renderOrgNavBar()}
<main> <main>
<div <div
class="w-full max-w-screen-lg mx-auto px-3 box-border py-7" class="w-full max-w-screen-desktop mx-auto px-3 box-border py-7"
aria-labelledby="${this.orgTab}-tab" aria-labelledby="${this.orgTab}-tab"
> >
${tabPanelContent} ${tabPanelContent}
@ -299,7 +299,7 @@ export class Org extends LiteElement {
? "bg-slate-100 border-b py-5" ? "bg-slate-100 border-b py-5"
: ""}" : ""}"
> >
<div class="w-full max-w-screen-lg mx-auto px-3 box-border"> <div class="w-full max-w-screen-desktop mx-auto px-3 box-border">
<sl-alert <sl-alert
variant="warning" variant="warning"
closable closable
@ -325,7 +325,7 @@ export class Org extends LiteElement {
? "bg-slate-100 border-b py-5" ? "bg-slate-100 border-b py-5"
: ""}" : ""}"
> >
<div class="w-full max-w-screen-lg mx-auto px-3 box-border"> <div class="w-full max-w-screen-desktop mx-auto px-3 box-border">
<sl-alert <sl-alert
variant="warning" variant="warning"
closable closable
@ -350,7 +350,7 @@ export class Org extends LiteElement {
private renderOrgNavBar() { private renderOrgNavBar() {
return html` return html`
<div class="w-full max-w-screen-lg mx-auto px-3 box-border"> <div class="w-full max-w-screen-desktop mx-auto px-3 box-border">
<nav class="-ml-3 flex items-end overflow-x-auto"> <nav class="-ml-3 flex items-end overflow-x-auto">
${this.renderNavTab({ ${this.renderNavTab({
tabName: "home", tabName: "home",

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

@ -1237,7 +1237,7 @@ export class WorkflowDetail extends LiteElement {
<btrix-dialog <btrix-dialog
.label=${msg("Crawl Queue Editor")} .label=${msg("Crawl Queue Editor")}
.open=${this.openDialogName === "exclusions"} .open=${this.openDialogName === "exclusions"}
style=${`--width: var(--btrix-screen-lg)`} style=${`--width: var(--btrix-screen-desktop)`}
@sl-request-close=${() => (this.openDialogName = undefined)} @sl-request-close=${() => (this.openDialogName = undefined)}
@sl-show=${this.showDialog} @sl-show=${this.showDialog}
@sl-after-hide=${() => (this.isDialogVisible = false)} @sl-after-hide=${() => (this.isDialogVisible = false)}

4
frontend/src/pages/orgs.ts
View File

@ -29,13 +29,13 @@ export class Orgs extends LiteElement {
return html` return html`
<div class="bg-white"> <div class="bg-white">
<header <header
class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border md:py-8" class="w-full max-w-screen-desktop mx-auto px-3 py-4 box-border md:py-8"
> >
<h1 class="text-xl font-medium">${msg("Organizations")}</h1> <h1 class="text-xl font-medium">${msg("Organizations")}</h1>
</header> </header>
<hr /> <hr />
</div> </div>
<main class="w-full max-w-screen-lg mx-auto px-3 py-4 box-border"> <main class="w-full max-w-screen-desktop mx-auto px-3 py-4 box-border">
${this.orgList ${this.orgList
? this.renderOrgs() ? this.renderOrgs()
: html` : html`

2
frontend/src/theme.css
View File

@ -24,7 +24,7 @@
--font-size-base: 1rem; --font-size-base: 1rem;
/* Custom screen widths */ /* Custom screen widths */
--btrix-screen-lg: 1124px; /* Should match tailwind.config.screens.lg */ --btrix-screen-desktop: 82.5rem; /* Should match tailwind.config.screens.desktop */
/* /*
* Shoelace Theme Tokens * Shoelace Theme Tokens

2
frontend/tailwind.config.js
View File

@ -106,7 +106,7 @@ function makeTheme() {
"4/3": "4 / 3", // For Browsertrix watch/replay "4/3": "4 / 3", // For Browsertrix watch/replay
}, },
screens: { screens: {
lg: "1124px", // Should match --btrix-screen-lg desktop: "82.5rem",
// Override default of: // Override default of:
// => @media (min-width: 1024px) { ... } // => @media (min-width: 1024px) { ... }
}, },