mirror of
https://github.com/jeffvli/feishin.git
synced 2026-05-07 04:20:12 +02:00
redesign feature carousel to be more compact
This commit is contained in:
jeffvli
@@ -1,29 +1,29 @@
|
||||
.carousel-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin-bottom: var(--theme-spacing-xl);
|
||||
margin-bottom: var(--theme-spacing-md);
|
||||
container-type: inline-size;
|
||||
overflow: hidden;
|
||||
border-radius: var(--theme-radius-lg);
|
||||
border-radius: var(--theme-radius-md);
|
||||
}
|
||||
|
||||
.carousel {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--items-per-row, 1), 1fr);
|
||||
gap: var(--theme-spacing-md);
|
||||
gap: var(--theme-spacing-sm);
|
||||
width: 100%;
|
||||
min-height: 400px;
|
||||
padding: 0 var(--theme-spacing-xl);
|
||||
min-height: 280px;
|
||||
padding: 0 var(--theme-spacing-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 440px;
|
||||
min-height: 280px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--theme-radius-lg);
|
||||
border-radius: var(--theme-radius-md);
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
@@ -44,13 +44,13 @@
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--theme-spacing-md);
|
||||
gap: var(--theme-spacing-xs);
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 440px;
|
||||
padding: var(--theme-spacing-xl);
|
||||
min-height: 280px;
|
||||
padding: var(--theme-spacing-md);
|
||||
}
|
||||
|
||||
.title-section {
|
||||
@@ -59,9 +59,9 @@
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
min-height: 60px;
|
||||
max-height: 60px;
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
max-height: 40px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@@ -72,9 +72,9 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
min-height: 250px;
|
||||
max-height: 250px;
|
||||
height: 160px;
|
||||
min-height: 160px;
|
||||
max-height: 160px;
|
||||
}
|
||||
|
||||
.play-button-overlay {
|
||||
@@ -100,9 +100,9 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
min-height: 100px;
|
||||
max-height: 100px;
|
||||
height: 60px;
|
||||
min-height: 60px;
|
||||
max-height: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@@ -122,10 +122,10 @@
|
||||
.album-image-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
max-width: 120px;
|
||||
overflow: hidden;
|
||||
border-radius: var(--theme-radius-lg);
|
||||
filter: drop-shadow(0 10px 30px rgb(0 0 0 / 50%)) drop-shadow(0 4px 12px rgb(0 0 0 / 40%));
|
||||
border-radius: var(--theme-radius-md);
|
||||
filter: drop-shadow(0 6px 20px rgb(0 0 0 / 50%)) drop-shadow(0 2px 8px rgb(0 0 0 / 40%));
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -139,7 +139,7 @@
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
background-color: rgb(0 0 0 / 0%);
|
||||
border-radius: var(--theme-radius-lg);
|
||||
border-radius: var(--theme-radius-md);
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
@@ -151,7 +151,7 @@
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
border-radius: var(--theme-radius-lg);
|
||||
border-radius: var(--theme-radius-md);
|
||||
}
|
||||
|
||||
.carousel-item:hover .album-image-container,
|
||||
@@ -171,14 +171,14 @@
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: var(--theme-spacing-xs);
|
||||
margin-bottom: 0;
|
||||
color: white;
|
||||
text-shadow: 0 0 10px rgb(0 0 0 / 50%);
|
||||
text-shadow: 0 0 8px rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.artist {
|
||||
color: white;
|
||||
text-shadow: 0 0 10px rgb(0 0 0 / 50%);
|
||||
text-shadow: 0 0 8px rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
.nav-arrow-left,
|
||||
@@ -214,11 +214,111 @@
|
||||
|
||||
@container (min-width: $mantine-breakpoint-xs) {
|
||||
.carousel-item {
|
||||
min-height: 480px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 480px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 45px;
|
||||
min-height: 45px;
|
||||
max-height: 45px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 180px;
|
||||
min-height: 180px;
|
||||
max-height: 180px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 65px;
|
||||
min-height: 65px;
|
||||
max-height: 65px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-sm) {
|
||||
.carousel {
|
||||
gap: var(--theme-spacing-md);
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 320px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 50px;
|
||||
min-height: 50px;
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 200px;
|
||||
min-height: 200px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 70px;
|
||||
min-height: 70px;
|
||||
max-height: 70px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-md) {
|
||||
.carousel-item {
|
||||
min-height: 340px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 340px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 55px;
|
||||
min-height: 55px;
|
||||
max-height: 55px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 220px;
|
||||
min-height: 220px;
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 75px;
|
||||
min-height: 75px;
|
||||
max-height: 75px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-xl) {
|
||||
.carousel-item {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
@@ -228,9 +328,9 @@
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 300px;
|
||||
min-height: 300px;
|
||||
max-height: 300px;
|
||||
height: 240px;
|
||||
min-height: 240px;
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
@@ -239,107 +339,7 @@
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-sm) {
|
||||
.carousel {
|
||||
gap: var(--theme-spacing-lg);
|
||||
}
|
||||
|
||||
.carousel-item {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 70px;
|
||||
min-height: 70px;
|
||||
max-height: 70px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 280px;
|
||||
min-height: 280px;
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 110px;
|
||||
min-height: 110px;
|
||||
max-height: 110px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-md) {
|
||||
.carousel-item {
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 550px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 80px;
|
||||
min-height: 80px;
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 320px;
|
||||
min-height: 320px;
|
||||
max-height: 320px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 120px;
|
||||
min-height: 120px;
|
||||
max-height: 120px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 220px;
|
||||
}
|
||||
}
|
||||
|
||||
@container (min-width: $mantine-breakpoint-xl) {
|
||||
.carousel-item {
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.content {
|
||||
min-height: 600px;
|
||||
}
|
||||
|
||||
.title-section {
|
||||
height: 90px;
|
||||
min-height: 90px;
|
||||
max-height: 90px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
height: 360px;
|
||||
min-height: 360px;
|
||||
max-height: 360px;
|
||||
}
|
||||
|
||||
.metadata-section {
|
||||
height: 130px;
|
||||
min-height: 130px;
|
||||
max-height: 130px;
|
||||
}
|
||||
|
||||
.album-image-container {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,25 +23,9 @@ import { Album, LibraryItem } from '/@/shared/types/domain-types';
|
||||
import { Play } from '/@/shared/types/types';
|
||||
|
||||
const containerVariants = {
|
||||
animate: (custom: { isNext: boolean }) => ({
|
||||
transition: {
|
||||
delayChildren: 0.1,
|
||||
staggerChildren: 0.3,
|
||||
staggerDirection: custom.isNext ? 1 : -1,
|
||||
},
|
||||
}),
|
||||
exit: (custom: { isNext: boolean }) => ({
|
||||
transition: {
|
||||
staggerChildren: 0.3,
|
||||
staggerDirection: custom.isNext ? 1 : -1,
|
||||
},
|
||||
}),
|
||||
initial: (custom: { isNext: boolean }) => ({
|
||||
transition: {
|
||||
staggerChildren: 0.3,
|
||||
staggerDirection: custom.isNext ? -1 : 1,
|
||||
},
|
||||
}),
|
||||
animate: {},
|
||||
exit: {},
|
||||
initial: {},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
@@ -49,23 +33,22 @@ const itemVariants = {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
transition: {
|
||||
duration: 0.4,
|
||||
duration: 0.2,
|
||||
ease: 'easeOut' as const,
|
||||
},
|
||||
y: 0,
|
||||
},
|
||||
exit: {
|
||||
opacity: 0,
|
||||
scale: 0.8,
|
||||
transition: {
|
||||
duration: 0.3,
|
||||
ease: 'easeIn' as const,
|
||||
},
|
||||
y: -20,
|
||||
y: 0,
|
||||
},
|
||||
initial: {
|
||||
opacity: 0,
|
||||
y: 20,
|
||||
y: 0,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -122,7 +105,7 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
|
||||
>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.titleSection}>
|
||||
<TextTitle className={styles.title} fw={800} lineClamp={2} order={3}>
|
||||
<TextTitle className={styles.title} fw={700} lineClamp={2} order={4}>
|
||||
{album.name}
|
||||
</TextTitle>
|
||||
</div>
|
||||
@@ -143,25 +126,25 @@ const CarouselItem = ({ album }: CarouselItemProps) => {
|
||||
{album.albumArtists.slice(0, 1).map((artist) => (
|
||||
<Text
|
||||
className={styles.artist}
|
||||
fw={600}
|
||||
fw={500}
|
||||
key={`artist-${artist.id}`}
|
||||
size="xl"
|
||||
size="md"
|
||||
>
|
||||
{artist.name}
|
||||
</Text>
|
||||
))}
|
||||
<Group gap="sm" justify="center" wrap="wrap">
|
||||
<Group gap="xs" justify="center" wrap="wrap">
|
||||
{album.genres?.slice(0, 2).map((genre) => (
|
||||
<Badge
|
||||
key={`genre-${genre.id}`}
|
||||
size="lg"
|
||||
size="sm"
|
||||
variant="transparent"
|
||||
>
|
||||
{genre.name}
|
||||
</Badge>
|
||||
))}
|
||||
{album.releaseYear && (
|
||||
<Badge size="lg" variant="transparent">
|
||||
<Badge size="sm" variant="transparent">
|
||||
{album.releaseYear}
|
||||
</Badge>
|
||||
)}
|
||||
@@ -245,7 +228,6 @@ export const FeatureCarousel = ({ data, onNearEnd }: FeatureCarouselProps) => {
|
||||
<motion.div
|
||||
animate="animate"
|
||||
className={styles.carousel}
|
||||
custom={directionRef.current}
|
||||
exit="exit"
|
||||
initial="initial"
|
||||
key={`carousel-${startIndex}`}
|
||||
|
||||
Reference in New Issue
Block a user