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

design: 마이페이지 수강중인 강의 카드 호버 효과 추가

Browse Source
This commit is contained in:
jhynsoo 2024-08-14 16:57:08 +09:00
parent a01f63fbe9
commit 7cb645f8fc
2 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -23,9 +23,30 @@
font-weight: 400;
color: var(--text-color);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 20px;
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 {
@ -40,4 +61,13 @@
object-fit: contain;
stroke: var(--text-color-secondary);
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);
}
}