lfg2025/indee-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: keep Films rows as horizontal scroll with responsive card sizes

Browse Source 
Cards now scale to match the Algos grid proportions at each breakpoint
(1/3, 1/4, 1/5, 1/6 of viewport) while remaining in a horizontally
scrolling flex row with nav buttons on desktop.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-13 23:02:27 +00:00
parent db266e40a8
commit 169e03d72d
2 changed files with 23 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docker-compose.yml
View File

@@ -20,7 +20,7 @@ services:
context: .
dockerfile: Dockerfile
args:
CACHEBUST: "29"
CACHEBUST: "30"
VITE_USE_MOCK_DATA: "false"
VITE_CONTENT_ORIGIN: ${FRONTEND_URL}
VITE_INDEEHUB_API_URL: /api

43
src/components/ContentRow.vue
View File

@@ -5,11 +5,11 @@
</h2>
<div class="relative group">
<!-- Scroll Left Button (mobile only — desktop uses grid) -->
<!-- Scroll Left Button -->
<button
v-if="canScrollLeft"
@click="scrollLeft"
class="scroll-nav-button md:hidden flex items-center justify-center absolute left-0 top-0 bottom-0 z-10 w-12 transition-all"
class="scroll-nav-button hidden md:flex items-center justify-center absolute left-0 top-0 bottom-0 z-10 w-12 transition-all"
>
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
@@ -54,11 +54,11 @@
</div>
</div>
<!-- Scroll Right Button (mobile only — desktop uses grid) -->
<!-- Scroll Right Button -->
<button
v-if="canScrollRight"
@click="scrollRight"
class="scroll-nav-button md:hidden flex items-center justify-center absolute right-0 top-0 bottom-0 z-10 w-12 transition-all"
class="scroll-nav-button hidden md:flex items-center justify-center absolute right-0 top-0 bottom-0 z-10 w-12 transition-all"
>
<svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
@@ -130,8 +130,8 @@ onUnmounted(() => {
<style scoped>
/* ── Content Slider ──
Mobile: horizontal scroll (flex row)
Desktop: responsive grid matching the Algos tab layout */
Horizontal scroll at all breakpoints.
Card widths scale responsively to match the Algos grid proportions. */
.content-slider {
display: flex;
gap: 1rem;
@@ -146,42 +146,43 @@ onUnmounted(() => {
display: none;
}
/* Mobile: fixed-width cards for horizontal scrolling */
/* Mobile: compact cards */
.content-slider > .content-card {
flex-shrink: 0;
width: 160px;
}
/* Desktop: switch to responsive grid */
/* md: card width ≈ 1/3 of viewport (matches grid-cols-3) */
@media (min-width: 768px) {
.content-slider {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
overflow: visible;
}
.content-slider > .content-card {
width: auto;
width: calc((100vw - 4rem - 3rem) / 3);
}
}
/* lg: card width ≈ 1/4 of viewport (matches grid-cols-4) */
@media (min-width: 1024px) {
.content-slider {
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
}
@media (min-width: 1280px) {
.content-slider {
grid-template-columns: repeat(5, 1fr);
.content-slider > .content-card {
width: calc((100vw - 4rem - 6rem) / 4);
}
}
/* xl: card width ≈ 1/5 of viewport (matches grid-cols-5) */
@media (min-width: 1280px) {
.content-slider > .content-card {
width: calc((100vw - 4rem - 8rem) / 5);
}
}
/* 2xl: card width ≈ 1/6 of viewport (matches grid-cols-6) */
@media (min-width: 1536px) {
.content-slider {
grid-template-columns: repeat(6, 1fr);
.content-slider > .content-card {
width: calc((100vw - 4rem - 10rem) / 6);
}
}