diff options
Diffstat (limited to 'packages/web/src')
| -rw-r--r-- | packages/web/src/components/Share.tsx | 40 | ||||
| -rw-r--r-- | packages/web/src/components/share.module.css | 120 |
2 files changed, 70 insertions, 90 deletions
diff --git a/packages/web/src/components/Share.tsx b/packages/web/src/components/Share.tsx index 40daa1e5a..d210911e2 100644 --- a/packages/web/src/components/Share.tsx +++ b/packages/web/src/components/Share.tsx @@ -203,7 +203,7 @@ function stripEnclosingTag(text: string): string { function getStatusText(status: [Status, string?]): string { switch (status[0]) { case "connected": - return "Connected" + return "Connected, waiting for messages..." case "connecting": return "Connecting..." case "disconnected": @@ -688,31 +688,6 @@ export default function Share(props: { <div class={styles.header}> <div data-section="title"> <h1>{store.info?.title}</h1> - <div> - <div data-section="date"> - {data().created ? ( - <span - title={DateTime.fromMillis( - data().created || 0, - ).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)} - > - {DateTime.fromMillis(data().created || 0).toLocaleString( - DateTime.DATE_MED, - )} - </span> - ) : ( - <span data-element-label data-placeholder> - Started at — - </span> - )} - </div> - <p data-section="status"> - <span data-status={connectionStatus()[0]}>●</span> - <span data-element-label> - {getStatusText(connectionStatus())} - </span> - </p> - </div> </div> <div data-section="row"> <ul data-section="stats"> @@ -786,7 +761,7 @@ export default function Share(props: { ).toLocaleString(DateTime.DATETIME_FULL_WITH_SECONDS)} > {DateTime.fromMillis(data().created || 0).toLocaleString( - DateTime.DATE_MED, + DateTime.DATETIME_MED )} </span> ) : ( @@ -1789,6 +1764,17 @@ export default function Share(props: { </For> )} </For> + <div data-section="part" data-part-type="connection-status"> + <div data-section="decoration"> + <span data-status={connectionStatus()[0]}></span> + <div></div> + </div> + <div data-section="content"> + <span> + {getStatusText(connectionStatus())} + </span> + </div> + </div> </div> </Show> </div> diff --git a/packages/web/src/components/share.module.css b/packages/web/src/components/share.module.css index e16cc4111..505906dee 100644 --- a/packages/web/src/components/share.module.css +++ b/packages/web/src/components/share.module.css @@ -55,56 +55,21 @@ } [data-section="title"] { - display: flex; - align-items: center; - justify-content: space-between; - gap: 3rem; - - & > div { - flex: 0 0 auto; - display: flex; - flex-direction: column; - gap: 0.5rem; - align-items: flex-end; - [data-section="date"] { - span { - font-size: 0.875rem; - color: var(--sl-color-text-secondary); - - &[data-placeholder] { - color: var(--sl-color-text-dimmed); - } - } - } - - p[data-section="status"] { - flex: 0 0 auto; - display: flex; - gap: 0.375rem; - font-size: 0.75rem; + h1 { + font-size: 1.75rem; + font-weight: 500; + line-height: 1.25; + letter-spacing: -0.05em; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; - span:first-child { - color: var(--sl-color-divider); - - &[data-status="connected"] { - color: var(--sl-color-green); - } - &[data-status="connecting"] { - color: var(--sl-color-orange); - } - &[data-status="disconnected"] { - color: var(--sl-color-divider); - } - &[data-status="reconnecting"] { - color: var(--sl-color-orange); - } - &[data-status="error"] { - color: var(--sl-color-red); - } - } + @media (max-width: 30rem) { + font-size: 1.25rem; + -webkit-line-clamp: 3; } - } } @@ -114,22 +79,6 @@ gap: 0.375rem; } - h1 { - font-size: 1.75rem; - font-weight: 500; - line-height: 1.25; - letter-spacing: -0.05em; - display: -webkit-box; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - overflow: hidden; - - @media (max-width: 30rem) { - font-size: 1.25rem; - -webkit-line-clamp: 3; - } - } - [data-section="stats"] { list-style-type: none; padding: 0; @@ -169,6 +118,13 @@ } } } + + [data-section="time"] { + span { + color: var(--sl-color-text-dimmed); + font-size: 0.875rem; + } + } } .parts { @@ -347,6 +303,44 @@ } } } + [data-part-type="connection-status"] { + & > [data-section="decoration"] { + span:first-child { + flex: 0 0 auto; + display: block; + margin: 1px; + width: 16px; + height: 16px; + border-radius: 50%; + background-color: var(--sl-color-divider); + + &[data-status="connected"] { + background-color: var(--sl-color-green); + } + &[data-status="connecting"] { + background-color: var(--sl-color-orange); + } + &[data-status="disconnected"] { + background-color: var(--sl-color-divider); + } + &[data-status="reconnecting"] { + background-color: var(--sl-color-orange); + } + &[data-status="error"] { + background-color: var(--sl-color-red); + } + } + } + + & > [data-section="content"] { + span { + display: block; + line-height: 18px; + font-size: 0.875rem; + color: var(--sl-color-text-dimmed); + } + } + } } .message-text { |