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

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

@ -9,6 +9,7 @@ export default function ClassCard({ img, path, children }) {
to={path}
className={styles.card}
>
<div className={styles.thumbnail}>
{img ? (
<img
src={`${STATIC_URL}${img}`}
@ -16,11 +17,10 @@ export default function ClassCard({ img, path, children }) {
className={styles.thumbnail}
/>
) : (
<div className={styles.thumbnail}>
<CompassIcon />
</div>
)}
<div>{children}</div>
</div>
<div className={styles.title}>{children}</div>
</Link>
);
}

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

@ -7,9 +7,26 @@
font-weight: 400;
color: var(--text-color);
min-width: 0;
border-radius: 20px;
white-space: nowrap;
box-sizing: border-box;
& > .title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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 {
@ -24,4 +41,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);
}
}

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

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

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

@ -23,9 +23,30 @@
font-weight: 400;
color: var(--text-color);
min-width: 0;
border-radius: 20px;
white-space: nowrap;
box-sizing: border-box;
& > .title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
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);
}
}