jhynsoo/edufocus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'fe/awesomeCard' into 'frontend'

Browse Source 
[Front-End] Fe/awesome card

See merge request s11-webmobile1-sub2/S11P12A701!205
This commit is contained in:
조현수 2024-08-14 16:59:08 +09:00
commit 277a8ee572
4 changed files with 82 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/ClassCard/ClassCard.jsx
View File

@ -9,18 +9,18 @@ export default function ClassCard({ img, path, children }) {
to={path} to={path}
className={styles.card} className={styles.card}
> >
{img ? ( <div className={styles.thumbnail}>
<img {img ? (
src={`${STATIC_URL}${img}`} <img
alt="강의 이미지" src={`${STATIC_URL}${img}`}
className={styles.thumbnail} alt="강의 이미지"
/> className={styles.thumbnail}
) : ( />
<div className={styles.thumbnail}> ) : (
<CompassIcon /> <CompassIcon />
</div> )}
)} </div>
<div>{children}</div> <div className={styles.title}>{children}</div>
</Link> </Link>
); );
} }

30
frontend/src/components/ClassCard/ClassCard.module.css
View File

@ -7,9 +7,26 @@
font-weight: 400; font-weight: 400;
color: var(--text-color); color: var(--text-color);
min-width: 0; min-width: 0;
overflow: hidden; border-radius: 20px;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box;
& > .title {
overflow: hidden;
text-overflow: ellipsis;
transition: font-weight 0.25s cubic-bezier(0, 0, 0.5, 1);
}
&:hover {
& > .thumbnail {
box-shadow: 2px 4px 8px #00000029;
scale: 1.05;
}
& > .title {
font-weight: 600;
}
}
} }
.thumbnail { .thumbnail {
@ -24,4 +41,13 @@
object-fit: contain; object-fit: contain;
stroke: var(--text-color-secondary); stroke: var(--text-color-secondary);
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
transition:
box-shadow 0.25s cubic-bezier(0, 0, 0.5, 1),
scale 0.25s cubic-bezier(0, 0, 0.5, 1),
rotate 0.25s cubic-bezier(0, 0, 0.5, 1);
& > img {
background-color: var(--background-secondary);
}
} }

22
frontend/src/pages/LearningLecturesPage/LearningLecturesPage.jsx
View File

@ -23,18 +23,18 @@ export default function LearningLecturesPage() {
to={`/lecture/${lecture.id}/class`} to={`/lecture/${lecture.id}/class`}
className={styles.card} className={styles.card}
> >
{lecture.image ? ( <div className={styles.thumbnail}>
<img {lecture.image ? (
src={`${STATIC_URL}${lecture.image}`} <img
alt={lecture.title} src={`${STATIC_URL}${lecture.image}`}
className={styles.thumbnail} alt={lecture.title}
/> className={styles.thumbnail}
) : ( />
<div className={styles.thumbnail}> ) : (
<CompassIcon /> <CompassIcon />
</div> )}
)} </div>
<div>{lecture.title}</div> <div className={styles.title}>{lecture.title}</div>
</Link> </Link>
)) ))
) : ( ) : (

34
frontend/src/pages/LearningLecturesPage/LearningLecturesPage.module.css
View File

@ -23,9 +23,30 @@
font-weight: 400; font-weight: 400;
color: var(--text-color); color: var(--text-color);
min-width: 0; min-width: 0;
overflow: hidden; border-radius: 20px;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box;
& > .title {
overflow: hidden;
text-overflow: ellipsis;
transition: font-weight 0.25s cubic-bezier(0, 0, 0.5, 1);
font-size: 16px;
line-height: 1.4;
font-weight: 400;
margin: 0;
}
&:hover {
& > .thumbnail {
box-shadow: 2px 4px 8px #00000029;
scale: 1.05;
}
& > .title {
font-weight: 600;
}
}
} }
.thumbnail { .thumbnail {
@ -40,4 +61,13 @@
object-fit: contain; object-fit: contain;
stroke: var(--text-color-secondary); stroke: var(--text-color-secondary);
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
transition:
box-shadow 0.25s cubic-bezier(0, 0, 0.5, 1),
scale 0.25s cubic-bezier(0, 0, 0.5, 1),
rotate 0.25s cubic-bezier(0, 0, 0.5, 1);
& > img {
background-color: var(--background-secondary);
}
} }