Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-19 18:13:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

web/timeline: use css grid for url previews and improve inline style

Browse source
This commit is contained in:
Tulir Asokan 2024-12-22 00:50:07 +02:00
parent cf857e459e
commit 74842707b3
3 changed files with 57 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/index.css
View file

@ -22,6 +22,7 @@
--border-color: #ccc;
--pill-background-color: #ccc;
--url-preview-background-color: #ddd;
--highlight-pill-background-color: #c00;
--highlight-pill-text-color: #fff;
--button-hover-color: rgba(0, 0, 0, .2);
@ -109,6 +110,7 @@
--border-color: #222;
--pill-background-color: #222;
--url-preview-background-color: #222;
--button-hover-color: rgba(255, 255, 255, .2);
--light-hover-color: rgba(255, 255, 255, .1);

54
web/src/ui/timeline/URLPreviews.css
View file

@ -7,41 +7,57 @@ div.url-previews {
> div.url-preview {
margin: 0.5rem 0;
border-radius: 0.5rem;
background-color: var(--pill-background-color);
border: 1px solid var(--border-color);
background-color: var(--url-preview-background-color);
border: 1px solid var(--url-preview-background-color);
display: grid;
grid-template:
"title" auto
"description" auto
"media" auto
/ 1fr;
div.title {
margin: 0.5rem 0.5rem 0 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
grid-area: title;
margin: 0.5rem 0.5rem 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-weight: bold;
}
div.description {
margin: 0 0.5rem 0.5rem 0.5rem;
grid-area: description;
margin: 0 0.5rem 0.5rem;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
color: var(--semisecondary-text-color);
}
> div.media-container {
border-radius: 0 0 0.5rem 0.5rem;
grid-area: media;
border-radius: 0 0 .5rem .5rem;
background-color: var(--background-color);
}
&.inline {
display: flex;
flex-direction: row;
min-width: 320px;
max-width: 320px;
grid-template:
"media title" auto
"media description" auto
/ auto auto;
width: 100%;
max-width: 20rem;
> div.media-container {
border-radius: none;
margin: 0.5rem;
> div.inline-media-wrapper {
grid-area: media;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background-color);
border-radius: .5rem 0 0 .5rem;
padding: .5rem;
}
}
}

46
web/src/ui/timeline/URLPreviews.tsx
View file

@ -46,39 +46,33 @@ const URLPreviews = ({ event, room }: {
let containerSize: ImageContainerSize | undefined
let inline = false
if (aspectRatio < 1.2) {
containerSize = { width: 70, height: 70 }
containerSize = { width: 80, height: 80 }
inline = true
}
const style = calculateMediaSize(p["og:image:width"], p["og:image:height"], containerSize)
const title = p["og:title"] ?? p["og:url"] ?? p.matched_url
const url = p["og:url"] ?? p.matched_url
const title = p["og:title"] ?? p["og:url"] ?? url
const mediaContainer = <div className="media-container" style={style.container}>
<img
loading="lazy"
style={style.media}
src={mediaURL}
alt=""
/>
</div>
return <div
key={url}
className={inline ? "url-preview inline" : "url-preview"}
style={inline ? {} : { width: style.container.width }}>
{mediaURL && inline && <div className="media-container" style={style.container}>
<img
loading="lazy"
style={style.media}
src={mediaURL}
alt={p["og:title"]}
title={p["og:title"]}
/>
</div>}
<div className="title-description">
<div className="title">
<a href={p.matched_url} title={title} target="_blank"><b>{title}</b></a>
</div>
<div className="description">{p["og:description"]}</div>
style={inline ? {} : { width: style.container.width }}
>
<div className="title">
<a href={url} title={title} target="_blank" rel="noreferrer noopener">{title}</a>
</div>
{mediaURL && !inline && <div className="media-container" style={style.container}>
<img
loading="lazy"
style={style.media}
src={mediaURL}
alt={p["og:title"]}
title={p["og:title"]}
/>
</div>}
<div className="description">{p["og:description"]}</div>
{mediaURL && (inline
? <div className="inline-media-wrapper">{mediaContainer}</div>
: mediaContainer)}
</div>
})}
</div>