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: . context: .
dockerfile: Dockerfile dockerfile: Dockerfile
args: args:
CACHEBUST: "29" CACHEBUST: "30"
VITE_USE_MOCK_DATA: "false" VITE_USE_MOCK_DATA: "false"
VITE_CONTENT_ORIGIN: ${FRONTEND_URL} VITE_CONTENT_ORIGIN: ${FRONTEND_URL}
VITE_INDEEHUB_API_URL: /api VITE_INDEEHUB_API_URL: /api

37
src/components/ContentRow.vue
View File

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