calcazar/frontend-helper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feed browser: Desktop bento layout #3

Merged
calcazar merged 13 commits from feature/feed-browser-desktop-bento-layout into develop 2026-10-20 08:10:54 -06:00
Conversation 0 Commits 13 Files Changed 37
+17 -41
2 changed files with 17 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 961b25e84a - Show all commits
src/components/MinnectMedia.tsx
+13 -9
View File
@@ -66,16 +66,20 @@ export function MinnectMedia({ media, thumbnailUrl, question, who, pictureUrl, v
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13a1 1 0 0 0 1.5.86l10.5-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z" /></svg>
</button>
) : null}
{views !== null ? (
<span className="trend-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" />
</svg>
{views.toLocaleString("en-US")} {views === 1 ? "view" : "views"}
</span>
) : null}
{playable ? <span className="trend-kind">{isVideo ? "Video" : "Audio"}</span> : null}
</div>
{views !== null || playable ? (
<div className="trend-meta">
{views !== null ? (
<span className="trend-views">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12Z" /><circle cx="12" cy="12" r="3" />
</svg>
{views.toLocaleString("en-US")} {views === 1 ? "view" : "views"}
</span>
) : <span />}
{playable ? <span className="trend-kind">{isVideo ? "Video" : "Audio"}</span> : null}
</div>
) : null}
{isAudio ? (
<audio ref={audio} className="minnect-audio" controls preload="none" src={media.url} aria-label={`Play answer from ${who}`} />
) : null}
src/styles/trending.css
+4 -32
View File
@@ -78,39 +78,14 @@
.trend-play svg { width: 18px; height: 18px; margin-left: 2px; }
.trend-play:hover { transform: scale(1.1); background: color-mix(in srgb, var(--on-accent) calc(100% - 72%), transparent); }
.trend-play:focus-visible { outline: 2px solid var(--on-accent); outline-offset: 2px; }
.trend-views {
position: absolute;
left: 12px;
bottom: 10px;
z-index: 2;
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
color: var(--on-accent);
pointer-events: none;
}
.trend-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trend-views { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.trend-views svg { width: 15px; height: 15px; }
.trend-kind {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
font-size: 10.5px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--on-accent);
opacity: .85;
pointer-events: none;
}
.trend-kind { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
/* While a video plays its own controls take over the frame. */
.trend-media-playing .trend-scrim,
.trend-media-playing .trend-who,
.trend-media-playing .trend-play,
.trend-media-playing .trend-views,
.trend-media-playing .trend-kind { opacity: 0; visibility: hidden; }
.trend-media-playing .trend-play { opacity: 0; visibility: hidden; }
.trend-q {
margin: 0;
@@ -126,6 +101,3 @@
.minnect-audio { width: 100%; height: 36px; }
.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* A video keeps its native control bar, so the labels ride above it. */
.trend-media:has(video) .trend-views,
.trend-media:has(video) .trend-kind { bottom: 46px; }