ui: Public Collections UI Nitpicks (#2287)

- Removes share link from the dialogue footer
- Removes stickied collection navigation, replaces with improved
viewport-based scaling!
- Adds a max-width for the collection description in the logged in view.
- Moves the markdown editor buttons to below the editor
- Controls are now In-line with how we handle dialogue options
elsewhere, fixes a minor responsive design issue.
- Minor copy changes

---------

Co-authored-by: emma <[email protected]>
Co-authored-by: sua yoo <[email protected]>

Author: 3 people

frontend/src/components/ui/markdown-editor.ts

@@ -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);
     }
@@ -56,7 +64,8 @@ export class MarkdownEditor extends BtrixElement {
     }
 
     .cm-line:only-child {
-      min-height: 8em;
+      height: 100%;
+      min-height: 20em;
     }
   `;
 
@@ -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">

frontend/src/features/collections/collection-replay-dialog.ts

@@ -25,14 +25,14 @@ export class CollectionStartPageDialog extends BtrixElement {
     { label: string; icon: NonNullable<SlIcon["name"]>; detail: string }
   > = {
     [HomeView.Pages]: {
-      label: msg("Default"),
+      label: msg("List of Pages"),
       icon: "list-ul",
       detail: `${msg("ReplayWeb.Page default view")}`,
     },
     [HomeView.URL]: {
-      label: msg("Page"),
-      icon: "file-earmark",
-      detail: msg("Load a single page URL"),
+      label: msg("Start Page"),
+      icon: "file-earmark-richtext",
+      detail: msg("Show a single URL snapshot"),
     },
   };
 
@@ -188,7 +188,7 @@ export class CollectionStartPageDialog extends BtrixElement {
       <form @submit=${this.onSubmit}>
         <sl-select
           name="homeView"
-          label=${msg("Select View")}
+          label=${msg("Select Initial View")}
           value=${this.homeView}
           hoist
           ?disabled=${!this.replayLoaded}

frontend/src/features/collections/collections-grid.ts

@@ -63,11 +63,11 @@ export class CollectionsGrid extends BtrixElement {
                 href=${this.navigate.isPublicPage
                   ? `/${RouteNamespace.PublicOrgs}/${this.slug}/collections/${collection.id}`
                   : `/${RouteNamespace.PrivateOrgs}/${this.slug}/collections/view/${collection.id}`}
-                class="group block h-full rounded-lg transition-all hover:scale-[102%]"
+                class="group block h-full rounded-lg"
                 @click=${this.navigate.link}
               >
                 <div
-                  class="relative mb-4 rounded-lg shadow-md shadow-stone-600/10 ring-1 ring-stone-600/10 transition-shadow group-hover:shadow-sm"
+                  class="relative mb-4 rounded-lg shadow-md shadow-stone-600/10 ring-1 ring-stone-600/10 transition group-hover:shadow-stone-800/20 group-hover:ring-stone-800/20"
                 >
                   <btrix-collection-thumbnail
                     src=${ifDefined(

frontend/src/features/collections/share-collection.ts

@@ -252,11 +252,7 @@ export class ShareCollection extends BtrixElement {
 
           <sl-tab-panel name=${Tab.Link}>
             <div class="px-4 pb-4">
-              ${when(
-                showSettings && this.collection,
-                this.renderSettings,
-                this.renderShareLink,
-              )}
+              ${when(showSettings && this.collection, this.renderSettings)}
             </div>
           </sl-tab-panel>
 
@@ -266,7 +262,6 @@ export class ShareCollection extends BtrixElement {
         </sl-tab-group>
 
         <div slot="footer">
-          ${when(showSettings, this.renderShareLink)}
           <sl-button size="small" @click=${() => (this.showDialog = false)}>
             ${msg("Done")}
           </sl-button>
@@ -287,6 +282,10 @@ export class ShareCollection extends BtrixElement {
             );
           }}
         ></btrix-select-collection-access>
+        ${when(
+          this.collection?.access != CollectionAccess.Private,
+          this.renderShareLink,
+        )}
         ${when(
           this.org &&
             !this.org.enablePublicProfile &&
@@ -389,7 +388,7 @@ export class ShareCollection extends BtrixElement {
             >
               ${isSelected
                 ? html`<sl-icon
-                    class="size-10 text-white drop-shadow-md"
+                    class="size-10 stroke-black/50 text-white drop-shadow-md [paint-order:stroke]"
                     name="check-lg"
                   ></sl-icon>`
                 : nothing}
@@ -410,7 +409,7 @@ export class ShareCollection extends BtrixElement {
 
   private readonly renderShareLink = () => {
     return html`
-      <div class="text-left">
+      <div class="mt-4 text-left">
         <div class="form-label">${msg("Link to Share")}</div>
         <btrix-copy-field
           class="mb-3"

frontend/src/features/qa/page-list/helpers/iconFor.ts

@@ -15,12 +15,12 @@ export const iconFor = cached(
       case "severe":
         return html`<sl-icon
           name="exclamation-triangle-fill"
-          class=${clsx("text-red-600", baseClasses, classList)}
+          class=${clsx("text-red-500", baseClasses, classList)}
         ></sl-icon>`;
       case "moderate":
         return html`<sl-icon
           name="dash-square-fill"
-          class=${clsx("text-yellow-600", baseClasses, classList)}
+          class=${clsx("text-yellow-500", baseClasses, classList)}
         ></sl-icon>`;
       case "good":
         return html`<sl-icon
@@ -37,7 +37,7 @@ export const iconFor = cached(
       case "rejected":
         return html`<sl-icon
           name="hand-thumbs-down-fill"
-          class=${clsx("text-red-600", baseClasses, classList)}
+          class=${clsx("text-red-500", baseClasses, classList)}
         ></sl-icon>`;
       case "commentOnly":
         // Comment icons are rendered separately

frontend/src/features/qa/page-list/helpers/severity.ts

@@ -29,9 +29,9 @@ export const textColorFromSeverity = cached((severity: Severity) => {
     case "good":
       return tw`text-green-600`;
     case "moderate":
-      return tw`text-yellow-600`;
+      return tw`text-yellow-500`;
     case "severe":
-      return tw`text-red-600`;
+      return tw`text-red-500`;
     default:
       return "";
   }

frontend/src/layouts/page.ts

@@ -39,7 +39,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)}

frontend/src/pages/collections/collection.ts

@@ -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) {
@@ -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>