fix(content): reduce media density on mobile
This commit is contained in:
@@ -109,10 +109,10 @@ export function ContentContent({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-2 md:grid-cols-3">
|
<div className="grid gap-2 md:grid-cols-3">
|
||||||
{embeddedVideos.map((link) => (
|
{embeddedVideos.map((link, index) => (
|
||||||
<Card
|
<Card
|
||||||
key={link}
|
key={link}
|
||||||
className="overflow-hidden rounded-sm border-border p-0"
|
className={`overflow-hidden rounded-sm border-border p-0 ${index > 0 ? "hidden md:block" : ""}`}
|
||||||
>
|
>
|
||||||
<YoutubeLiteEmbed link={link} title={t("youtubeEmbedTitle")} />
|
<YoutubeLiteEmbed link={link} title={t("youtubeEmbedTitle")} />
|
||||||
</Card>
|
</Card>
|
||||||
@@ -138,7 +138,7 @@ export function ContentContent({
|
|||||||
key={pdf.fileName}
|
key={pdf.fileName}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => openPdfModal(index)}
|
onClick={() => openPdfModal(index)}
|
||||||
className="cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
className={`cursor-pointer text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${index > 1 ? "hidden md:block" : ""}`}
|
||||||
aria-label={t("openPdf", { name: pdf.title })}
|
aria-label={t("openPdf", { name: pdf.title })}
|
||||||
>
|
>
|
||||||
<Card className="relative aspect-4/5 overflow-hidden rounded-sm border-border bg-muted/20 p-0 transition-colors hover:border-zinc-700">
|
<Card className="relative aspect-4/5 overflow-hidden rounded-sm border-border bg-muted/20 p-0 transition-colors hover:border-zinc-700">
|
||||||
@@ -174,15 +174,15 @@ export function ContentContent({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid gap-2 md:grid-cols-2">
|
<div className="grid gap-2 md:grid-cols-2">
|
||||||
{xVideos.map((video) => (
|
{xVideos.map((video, index) => (
|
||||||
<Card
|
<Card
|
||||||
key={video.src}
|
key={video.src}
|
||||||
className="relative aspect-video overflow-hidden rounded-sm border-border bg-black p-0"
|
className={`relative aspect-video overflow-hidden rounded-sm border-border bg-black p-0 ${index > 0 ? "hidden md:block" : ""}`}
|
||||||
>
|
>
|
||||||
<video
|
<video
|
||||||
controls
|
controls
|
||||||
playsInline
|
playsInline
|
||||||
preload="metadata"
|
preload={index === 0 ? "metadata" : "none"}
|
||||||
className="absolute inset-0 h-full w-full object-cover"
|
className="absolute inset-0 h-full w-full object-cover"
|
||||||
aria-label={t("xVideoTitle", { episode: video.episode })}
|
aria-label={t("xVideoTitle", { episode: video.episode })}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user