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

update layout

Browse Source
This commit is contained in:
sua yoo 2024-07-01 20:57:48 -07:00
parent e7028ce64a
commit 350fb06d36
No known key found for this signature in database
GPG Key ID: 5AD1B4C02D4F0567
2 changed files with 13 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/orgs-list.ts
View File

@ -1,5 +1,9 @@
import { localized, msg, str } from "@lit/localize"; import { localized, msg, str } from "@lit/localize";
import type { SlChangeEvent, SlInput } from "@shoelace-style/shoelace"; import type {
SlChangeEvent,
SlInput,
SlMenuItem,
} from "@shoelace-style/shoelace";
import { css, html, nothing } from "lit"; import { css, html, nothing } from "lit";
import { customElement, property, query, state } from "lit/decorators.js"; import { customElement, property, query, state } from "lit/decorators.js";
import { when } from "lit/directives/when.js"; import { when } from "lit/directives/when.js";
@ -20,7 +24,7 @@ import type { OrgData } from "@/utils/orgs";
export class OrgsList extends TailwindElement { export class OrgsList extends TailwindElement {
static styles = css` static styles = css`
btrix-table { btrix-table {
grid-template-columns: min-content [clickable-start] auto auto auto [clickable-end] min-content; grid-template-columns: min-content [clickable-start] 50ch auto auto [clickable-end] min-content;
} }
`; `;
@property({ type: Object }) @property({ type: Object })
@ -292,7 +296,7 @@ export class OrgsList extends TailwindElement {
</sl-tooltip> </sl-tooltip>
` `
: html` : html`
<sl-tooltip content=${msg("Under quota")}> <sl-tooltip content=${msg("No quotas exceeded")}>
<sl-icon class="text-base text-success" name="check-circle"> <sl-icon class="text-base text-success" name="check-circle">
</sl-icon> </sl-icon>
</sl-tooltip> </sl-tooltip>
@ -337,10 +341,12 @@ export class OrgsList extends TailwindElement {
</sl-menu-item> </sl-menu-item>
<sl-menu-item <sl-menu-item
style="--sl-color-neutral-700: var(--danger)" style="--sl-color-neutral-700: var(--danger)"
@click=${() => { @click=${(e: MouseEvent) => {
if ((e.target as SlMenuItem).disabled) return;
this.currOrg = org; this.currOrg = org;
void this.orgDeleteDialog?.show(); void this.orgDeleteDialog?.show();
}} }}
disabled
> >
<sl-icon slot="prefix" name="trash3"></sl-icon> <sl-icon slot="prefix" name="trash3"></sl-icon>
${msg("Delete Org")} ${msg("Delete Org")}

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

@ -138,8 +138,8 @@ export class Home extends LiteElement {
</form> </form>
</section> </section>
<div class="grid grid-cols-5 gap-8"> <div class="grid grid-cols-3 gap-6">
<div class="col-span-5 md:col-span-3"> <div class="col-span-3 md:col-span-2">
<section> <section>
<header <header
class="mb-3 flex items-center justify-between border-b pb-3" class="mb-3 flex items-center justify-between border-b pb-3"
@ -161,7 +161,7 @@ export class Home extends LiteElement {
></btrix-orgs-list> ></btrix-orgs-list>
</section> </section>
</div> </div>
<div class="col-span-5 md:col-span-2"> <div class="col-span-3 md:col-span-1">
<section class="p-3 md:rounded-lg md:border md:bg-white md:p-8"> <section class="p-3 md:rounded-lg md:border md:bg-white md:p-8">
<h2 class="mb-3 text-lg font-medium"> <h2 class="mb-3 text-lg font-medium">
${msg("Invite User to Org")} ${msg("Invite User to Org")}