Skip to content

Commit

Permalink
Update "About" layout (#2290)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SuaYoo
SuaYoo authored Jan 8, 2025
1 parent c6b39ff commit 0a9de57
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 81 deletions.
17 changes: 15 additions & 2 deletions frontend/src/components/ui/markdown-editor.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,14 @@ export class MarkdownEditor extends BtrixElement {
--ink-block-padding: var(--sl-input-spacing-small);
}
.ink-mde-textarea {
flex-grow: 1;
}
.ink-mde {
height: 100%;
}
.ink-mde {
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
}
Expand Down Expand Up @@ -56,7 +64,8 @@ export class MarkdownEditor extends BtrixElement {
}
.cm-line:only-child {
min-height: 8em;
height: 100%;
min-height: 20em;
}
`;

Expand Down Expand Up @@ -111,7 +120,11 @@ export class MarkdownEditor extends BtrixElement {
render() {
const isInvalid = this.maxlength && this.value.length > this.maxlength;
return html`
<fieldset ?data-invalid=${isInvalid} ?data-user-invalid=${isInvalid}>
<fieldset
?data-invalid=${isInvalid}
?data-user-invalid=${isInvalid}
class="flex h-full flex-col"
>
${this.label && html`<label class="form-label">${this.label}</label>`}
<textarea id="editor-textarea"></textarea>
<div class="helpText flex items-baseline justify-between">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/layouts/page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ export function page(
></btrix-document-title>
<div
class="mx-auto box-border flex min-h-full w-full max-w-screen-desktop flex-1 flex-col gap-3 p-3 lg:px-10"
class="mx-auto box-border flex min-h-full w-full max-w-screen-desktop flex-1 flex-col gap-3 p-3 lg:px-10 lg:pb-10"
>
${header.breadcrumbs ? html` ${pageNav(header.breadcrumbs)} ` : nothing}
${pageHeader(header)}
Expand Down
5 changes: 3 additions & 2 deletions frontend/src/pages/collections/collection.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,6 +206,7 @@ export class Collection extends BtrixElement {
`;
}

// TODO Consolidate with collection-detail.ts
private renderAbout(collection: PublicCollection) {
const dateRange = () => {
if (!collection.dateEarliest || !collection.dateLatest) {
Expand Down Expand Up @@ -243,13 +244,13 @@ export class Collection extends BtrixElement {
return html`
<div class="flex flex-1 flex-col gap-10 lg:flex-row">
<section
class="flex-1 py-3 leading-relaxed lg:rounded-lg lg:border lg:p-6"
class="w-full max-w-4xl py-3 leading-relaxed lg:rounded-lg lg:border lg:p-6"
>
<btrix-markdown-viewer
value=${collection.description}
></btrix-markdown-viewer>
</section>
<section class="min-w-60 lg:-mt-8">
<section class="flex-1 lg:-mt-8">
<btrix-section-heading>
<h3>${msg("Metadata")}</h3>
</btrix-section-heading>
Expand Down
204 changes: 128 additions & 76 deletions frontend/src/pages/org/collection-detail.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { localized, msg, str } from "@lit/localize";
import clsx from "clsx";
import { html, nothing, type PropertyValues, type TemplateResult } from "lit";
import { customElement, property, query, state } from "lit/decorators.js";
import { choose } from "lit/directives/choose.js";
Expand All @@ -25,6 +26,7 @@ import type { ArchivedItem, Crawl, Upload } from "@/types/crawler";
import type { CrawlState } from "@/types/crawlState";
import { pluralOf } from "@/utils/pluralize";
import { formatRwpTimestamp } from "@/utils/replay";
import { tw } from "@/utils/tailwind";

const ABORT_REASON_THROTTLE = "throttled";
const INITIAL_ITEMS_PAGE_SIZE = 20;
Expand Down Expand Up @@ -149,7 +151,7 @@ export class CollectionDetail extends BtrixElement {
<div class="mt-3 rounded-lg border px-4 py-2">
${this.renderInfoBar()}
</div>
<div class="flex items-center justify-between p-3">
<div class="flex items-center justify-between py-3">
${this.renderTabs()}
${when(this.isCrawler, () =>
choose(this.collectionTab, [
Expand All @@ -173,23 +175,6 @@ export class CollectionDetail extends BtrixElement {
</sl-tooltip>
`,
],
[
Tab.About,
() =>
when(
!this.isEditingDescription,
() => html`
<sl-button
size="small"
@click=${() => (this.isEditingDescription = true)}
?disabled=${!this.collection}
>
<sl-icon name="pencil" slot="prefix"></sl-icon>
${msg("Edit")}
</sl-button>
`,
),
],
[
Tab.Items,
() => html`
Expand All @@ -212,7 +197,7 @@ export class CollectionDetail extends BtrixElement {
Tab.Items,
() => guard([this.archivedItems], this.renderArchivedItems),
],
[Tab.About, () => this.renderDescription()],
[Tab.About, () => this.renderAbout()],
])}
<btrix-dialog
Expand Down Expand Up @@ -526,66 +511,133 @@ export class CollectionDetail extends BtrixElement {
`;
}

private renderDescription() {
// TODO Consolidate with collection.ts
private renderAbout() {
const dateRange = (collection: Collection) => {
if (!collection.dateEarliest || !collection.dateLatest) {
return msg("n/a");
}
const format: Intl.DateTimeFormatOptions = {
month: "long",
year: "numeric",
};
const dateEarliest = this.localize.date(collection.dateEarliest, format);
const dateLatest = this.localize.date(collection.dateLatest, format);

if (dateEarliest === dateLatest) return dateLatest;

return msg(str`${dateEarliest} to ${dateLatest}`, {
desc: "Date range formatted to show full month name and year",
});
};
const skeleton = html`<sl-skeleton class="w-24"></sl-skeleton>`;

const metadata = html`
<btrix-desc-list>
<btrix-desc-list-item label=${msg("Collection Period")}>
<span class="font-sans"
>${this.collection ? dateRange(this.collection) : skeleton}</span
>
</btrix-desc-list-item>
</btrix-desc-list>
`;

return html`
<section>
${when(
this.collection,
(collection) =>
this.isEditingDescription
? html`
<div class="flex justify-center leading-relaxed">
<div class="w-full md:max-w-[783px]">
<btrix-markdown-editor
initialValue=${collection.description || ""}
placeholder=${msg("Tell viewers about this collection")}
maxlength=${4000}
></btrix-markdown-editor>
<div
class="flex-column mt-4 flex justify-between border-t pt-4"
>
<sl-button
size="small"
@click=${() => (this.isEditingDescription = false)}
>
${msg("Cancel")}
</sl-button>
<sl-button
variant="primary"
size="small"
@click=${() => void this.saveDescription()}
?disabled=${!this.collection}
>
${msg("Update Description")}
</sl-button>
</div>
</div>
</div>
`
: html`
<div
class="flex justify-center rounded-lg border leading-relaxed"
>
${collection.description
? html`
<div
class="min-h-full w-full px-8 py-12 md:max-w-[783px]"
>
<div class="flex flex-1 flex-col gap-10 lg:flex-row">
<section class="flex w-full max-w-4xl flex-col leading-relaxed">
<header class="mb-3 flex min-h-8 items-end justify-between">
<h2 class="text-base font-semibold leading-none">
${msg("Description")}
</h2>
${when(
this.collection?.description && !this.isEditingDescription,
() => html`
<sl-button
size="small"
@click=${() => (this.isEditingDescription = true)}
>
<sl-icon name="pencil" slot="prefix"></sl-icon>
${msg("Edit Description")}
</sl-button>
`,
)}
</header>
${when(
this.collection,
(collection) =>
this.isEditingDescription
? this.renderDescriptionForm()
: html`
<div
class=${clsx(
tw`flex-1 rounded-lg border p-3 lg:p-6`,
!collection.description &&
tw`flex flex-col items-center justify-center`,
)}
>
${collection.description
? html`
<btrix-markdown-viewer
value=${collection.description}
></btrix-markdown-viewer>
</div>
`
: html`
<p class="py-10 text-center text-neutral-500">
${msg("No description provided.")}
</p>
`}
</div>
`,
this.renderSpinner,
)}
</section>
`
: html`
<div class="text-center text-neutral-500">
<p class="mb-3">
${msg("No description provided.")}
</p>
<sl-button
size="small"
@click=${() =>
(this.isEditingDescription = true)}
?disabled=${!this.collection}
>
<sl-icon name="pencil" slot="prefix"></sl-icon>
${msg("Add Description")}
</sl-button>
</div>
`}
</div>
`,
this.renderSpinner,
)}
</section>
<section class="flex-1">
<btrix-section-heading>
<h2>${msg("Metadata")}</h2>
</btrix-section-heading>
<div class="mt-5">${metadata}</div>
</section>
</div>
`;
}

private renderDescriptionForm() {
if (!this.collection) return;

return html`
<btrix-markdown-editor
class="flex-1"
initialValue=${this.collection.description || ""}
placeholder=${msg("Tell viewers about this collection")}
maxlength=${4000}
></btrix-markdown-editor>
<div class="flex-column mt-4 flex justify-between border-t pt-4">
<sl-button
size="small"
@click=${() => (this.isEditingDescription = false)}
>
${msg("Cancel")}
</sl-button>
<sl-button
variant="primary"
size="small"
@click=${() => void this.saveDescription()}
?disabled=${!this.collection}
>
${msg("Update Description")}
</sl-button>
</div>
`;
}

Expand Down Expand Up @@ -742,7 +794,7 @@ export class CollectionDetail extends BtrixElement {

private readonly renderSpinner = () => html`
<div
class="flex items-center justify-center rounded-lg border py-24 text-3xl"
class="flex min-h-full items-center justify-center rounded-lg border py-24 text-3xl"
>
<sl-spinner></sl-spinner>
</div>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/pages/org/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -585,6 +585,7 @@ export class Org extends BtrixElement {

if (params.collectionId) {
return html`<btrix-collection-detail
class="flex min-h-screen flex-1 flex-col pb-7"
collectionId=${params.collectionId}
collectionTab=${ifDefined(
params.collectionTab as CollectionTab | undefined,
Expand Down

0 comments on commit 0a9de57

Please sign in to comment.