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

feat: enhance layout and styling of content rows and header

Browse Source 
- Updated content card width from 140/180px to 200/280px for improved visibility
- Changed image class to use 'object-contain' and added background color for better aesthetics
- Introduced a gradient background for the header with dynamic styles based on scroll position
- Added new CSS classes for header gradient effects and improved backdrop filter for a modern look

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Dorian
2026-02-02 22:46:45 +00:00
parent b5c6901372
commit ea03167da8
2 changed files with 37 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ContentRow.vue
View File

@@ -25,13 +25,13 @@
<div
v-for="content in contents"
:key="content.id"
class="content-card flex-shrink-0 w-[140px] md:w-[180px]"
class="content-card flex-shrink-0 w-[200px] md:w-[280px]"
@click="$emit('content-click', content)"
>
<img
:src="content.thumbnail"
:alt="content.title"
class="w-full aspect-[2/3] object-cover rounded-lg"
class="w-full aspect-[2/3] object-contain rounded-lg bg-neutral-900"
loading="lazy"
/>
<div class="mt-2">

40
src/views/Browse.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="browse-view">
<!-- Header / Navigation -->
<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 header-gradient"
:class="{
'bg-white/10 dark:bg-black/20 backdrop-blur-xl shadow-2xl border-b border-white/10': scrolled,
'bg-transparent': !scrolled
'header-scrolled': scrolled,
'header-top': !scrolled
}">
<div class="container mx-auto px-8 py-4">
<div class="mx-auto px-8 py-4" style="max-width: 75%;">
<div class="flex items-center justify-between">
<!-- Logo -->
<div class="flex items-center gap-8">
@@ -45,7 +45,7 @@
<img
:src="featuredContent?.backdrop || 'https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=1920'"
alt="Featured content"
class="w-full h-full object-cover"
class="w-full h-full object-cover object-center"
/>
<div class="absolute inset-0 hero-gradient"></div>
</div>
@@ -187,4 +187,34 @@ onUnmounted(() => {
.browse-view {
min-height: 100vh;
}
.header-gradient {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, rgba(0,0,0,0.5) 75%, transparent 100%);
}
.header-top {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.7) 50%,
rgba(0, 0, 0, 0.4) 75%,
rgba(0, 0, 0, 0) 100%
);
}
.header-scrolled {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.8) 0%,
rgba(0, 0, 0, 0.8) 50%,
rgba(0, 0, 0, 0.5) 75%,
rgba(0, 0, 0, 0) 100%
);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
</style>