diff --git a/frontend/src/components/ui/details.ts b/frontend/src/components/ui/details.ts index 30cb80bf..22a2340c 100644 --- a/frontend/src/components/ui/details.ts +++ b/frontend/src/components/ui/details.ts @@ -29,6 +29,8 @@ export class Details extends LitElement { // postcss-lit-disable-next-line static styles = css` :host { + --margin-bottom: var(--sl-spacing-2x-small); + --border-bottom: 1px solid var(--sl-panel-border-color); display: block; } @@ -46,8 +48,8 @@ export class Details extends LitElement { } details[aria-disabled="false"] summary { - border-bottom: 1px solid var(--sl-panel-border-color); - margin-bottom: var(--sl-spacing-x-small); + border-bottom: var(--border-bottom); + margin-bottom: var(--margin-bottom); cursor: pointer; user-select: none; } diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts index 3bbda3fe..8dfc4fc4 100644 --- a/frontend/src/features/browser-profiles/select-browser-profile.ts +++ b/frontend/src/features/browser-profiles/select-browser-profile.ts @@ -1,6 +1,6 @@ import { localized, msg } from "@lit/localize"; import { type SlSelect } from "@shoelace-style/shoelace"; -import { html } from "lit"; +import { html, nothing } from "lit"; import { customElement, property, state } from "lit/decorators.js"; import orderBy from "lodash/fp/orderBy"; @@ -77,7 +77,7 @@ export class SelectBrowserProfile extends LiteElement {
+ + ${msg("Last updated")} + + + + ${msg("Check Profile")} + + +
+ ` + : nothing} ${this.browserProfiles?.length ? this.renderSelectedProfileInfo() : ""} @@ -96,42 +122,19 @@ export class SelectBrowserProfile extends LiteElement { } private renderSelectedProfileInfo() { - if (!this.selectedProfile) return; + if (!this.selectedProfile?.description) return; - return html` -
- ${this.selectedProfile.description - ? html`${this.selectedProfile.description}` - : ""} - - ${msg("Last edited:")} - - - + +
+ ${msg("Description")} +
+ +
${this.selectedProfile.description}
- ${msg("Check profile")} - -
-
- `; + + `; } private renderNoProfiles() { @@ -188,7 +191,7 @@ export class SelectBrowserProfile extends LiteElement { try { const data = await this.getProfiles(); - this.browserProfiles = orderBy(["name", "created"])(["asc", "desc"])( + this.browserProfiles = orderBy(["name", "modified"])(["asc", "desc"])( data, ) as Profile[]; diff --git a/frontend/src/pages/org/browser-profiles-detail.ts b/frontend/src/pages/org/browser-profiles-detail.ts index 7d34ea03..a4e8775b 100644 --- a/frontend/src/pages/org/browser-profiles-detail.ts +++ b/frontend/src/pages/org/browser-profiles-detail.ts @@ -264,16 +264,18 @@ export class BrowserProfilesDetail extends BtrixElement { `, )} -
- ${this.profile + +
${this.profile ? this.profile.description || html`
- ${msg("No description added.")} +  ${msg("No description added.")}
` - : nothing} -
+ : nothing}