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";
// Match witch tailwind 4xl max width
// https://tailwindcss.com/docs/max-width
const SCREEN_LG = 896;
const SCREEN_LG_PX = 896;
/**
* Tab list
@ -93,12 +93,12 @@ export class TabList extends LitElement {
grid-gap: 1rem;
}
@media only screen and (min-width: ${SCREEN_LG}px) {
@media only screen and (min-width: ${SCREEN_LG_PX}px) {
.container {
grid-template-areas:
". header"
"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;
}
@media only screen and (min-width: ${SCREEN_LG}px) {
@media only screen and (min-width: ${SCREEN_LG_PX}px) {
.navWrapper {
overflow: initial;
}
@ -141,7 +141,7 @@ export class TabList extends LitElement {
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 {
display: block;
}
@ -166,7 +166,7 @@ export class TabList extends LitElement {
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,
.show-indicator .track,
.show-indicator .indicator {

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

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

8
frontend/src/index.ts
View File

@ -247,7 +247,7 @@ export class App extends LiteElement {
return html`
<div class="border-b">
<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>
<a
@ -448,7 +448,7 @@ export class App extends LiteElement {
private renderFooter() {
return html`
<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> -->
<!-- TODO re-enable when translations are added -->
@ -608,7 +608,7 @@ export class App extends LiteElement {
case "accountSettings":
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) => {
e.stopPropagation();
this.updateUserInfo();
@ -621,7 +621,7 @@ export class App extends LiteElement {
if (this.appState.userInfo) {
if (this.appState.userInfo.isAdmin) {
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}"
.userInfo="${this.appState.userInfo}"
></btrix-users-invite>`;

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

@ -99,7 +99,7 @@ export class Crawls extends LiteElement {
render() {
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
? // 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`
<div class="bg-white">
<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>
</header>
<hr />
</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}
</main>
`;

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

@ -282,7 +282,7 @@ export class Org extends LiteElement {
${this.renderOrgNavBar()}
<main>
<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"
>
${tabPanelContent}
@ -299,7 +299,7 @@ export class Org extends LiteElement {
? "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
variant="warning"
closable
@ -325,7 +325,7 @@ export class Org extends LiteElement {
? "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
variant="warning"
closable
@ -350,7 +350,7 @@ export class Org extends LiteElement {
private renderOrgNavBar() {
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">
${this.renderNavTab({
tabName: "home",

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

@ -1237,7 +1237,7 @@ export class WorkflowDetail extends LiteElement {
<btrix-dialog
.label=${msg("Crawl Queue Editor")}
.open=${this.openDialogName === "exclusions"}
style=${`--width: var(--btrix-screen-lg)`}
style=${`--width: var(--btrix-screen-desktop)`}
@sl-request-close=${() => (this.openDialogName = undefined)}
@sl-show=${this.showDialog}
@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`
<div class="bg-white">
<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>
</header>
<hr />
</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.renderOrgs()
: html`

2
frontend/src/theme.css
View File

@ -24,7 +24,7 @@
--font-size-base: 1rem;
/* 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

2
frontend/tailwind.config.js
View File

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