Skip to content

Commit

Permalink
update layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@SuaYoo
SuaYoo committed Jan 8, 2025
1 parent c6b39ff commit bb6ae25
Show file tree
Hide file tree
Showing 2 changed files with 122 additions and 76 deletions.
197 changes: 121 additions & 76 deletions frontend/src/pages/org/collection-detail.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,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 +173,7 @@ 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.About, () => {}],
[
Tab.Items,
() => html`
Expand All @@ -212,7 +196,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 +510,127 @@ export class CollectionDetail extends BtrixElement {
`;
}

private renderDescription() {
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 metadata = html`
<btrix-desc-list>
<btrix-desc-list-item label=${msg("Collection Period")}>
<span class="font-sans"
>${this.collection
? dateRange(this.collection)
: html`<sl-skeleton></sl-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-2 flex min-h-8 items-end justify-between">
<h2 class="text-base font-semibold leading-6">
${msg("Description")}
</h2>
${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 Description")}
</sl-button>
`,
)}
</header>
${when(
this.collection,
(collection) =>
this.isEditingDescription
? this.renderDescriptionForm()
: html`
<div class="flex-1 py-3 lg:rounded-lg lg:border lg:p-6">
${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="py-10 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
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 +787,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 bb6ae25

Please sign in to comment.