forked from Kieran/zap.stream
fix: show tags outside video tile
This commit is contained in:
parent
bd3d566c3f
commit
5026f6a008
@ -2,6 +2,17 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.video-tile-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.video-tile-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.video-tile.nsfw > div:nth-child(1) {
|
||||
filter: blur(3px);
|
||||
}
|
||||
@ -18,7 +29,7 @@
|
||||
.video-tile h3 {
|
||||
font-size: 20px;
|
||||
line-height: 25px;
|
||||
margin: 16px 0;
|
||||
margin: 16px 0 6px 0;
|
||||
word-break: break-all;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -44,16 +55,13 @@
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.video-tile .video-tags {
|
||||
.video-tags {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.video-tile .video-tags .pill {
|
||||
.video-tags .pill {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
@ -38,33 +38,35 @@ export function VideoTile({
|
||||
ev.pubkey,
|
||||
);
|
||||
return (
|
||||
<Link
|
||||
to={`/${link}`}
|
||||
className={`video-tile${contentWarning ? " nsfw" : ""}`}
|
||||
ref={ref}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
backgroundImage: `url(${
|
||||
inView ? ((image?.length ?? 0) > 0 ? image : ZapStream) : ""
|
||||
})`,
|
||||
}}
|
||||
<div className="video-tile-container">
|
||||
<Link
|
||||
to={`/${link}`}
|
||||
className={`video-tile${contentWarning ? " nsfw" : ""}`}
|
||||
ref={ref}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundImage: `url(${
|
||||
inView ? ((image?.length ?? 0) > 0 ? image : ZapStream) : ""
|
||||
})`,
|
||||
}}
|
||||
></div>
|
||||
<span className="pill-box">
|
||||
{showStatus && <StatePill state={status as StreamState} />}
|
||||
{viewers && (
|
||||
<span className="pill viewers">
|
||||
{formatSats(Number(viewers))} viewers
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<h3>{title}</h3>
|
||||
</Link>
|
||||
<div className="video-tile-info">
|
||||
<div className="video-tags">
|
||||
<Tags ev={ev} max={3} />
|
||||
</div>
|
||||
{showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}
|
||||
</div>
|
||||
<span className="pill-box">
|
||||
{showStatus && <StatePill state={status as StreamState} />}
|
||||
{viewers && (
|
||||
<span className="pill viewers">
|
||||
{formatSats(Number(viewers))} viewers
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<h3>{title}</h3>
|
||||
{showAuthor && <div>{inView && <Profile pubkey={host} />}</div>}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user