Skip to content

Commit

Permalink
feat(LastGrades): improve responsive, cute badges animation
Browse files Browse the repository at this point in the history
  • Loading branch information
Truiteseche committed Mar 3, 2024
1 parent 29a6cbc commit f2cd8a8
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 11 deletions.
4 changes: 2 additions & 2 deletions src/components/app/Dashboard/Dashboard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import {
WindowHeader,
WindowContent
} from "../../generic/Window";
import LastGrades from "./lastGrades";

import "./Dashboard.css";
import LastGrades from "./lastGrades";

export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLoggedIn, useUserData, sortGrades }) {
const navigate = useNavigate();
Expand Down Expand Up @@ -66,7 +66,7 @@ export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLo
</Window>
</WindowsLayout>

<Window WIP={true}>
<Window WIP={true} growthFactor={1.5}>
<WindowHeader onClick={() => navigate("../homeworks")}>
<h2>Cahier de texte</h2>
</WindowHeader>
Expand Down
23 changes: 19 additions & 4 deletions src/components/app/Dashboard/LastGrades.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@
}

.last-grades .last-grades-container {
padding-block: 20px;
/* padding-block: 20px; */
height: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
list-style-type: none;
gap: 20px;
/* gap: 20px; */
}

.last-grades .last-grade-container {
Expand All @@ -25,7 +25,7 @@
height: 2px;
background-color: rgba(var(--text-color-alt), .5);
left: 50%;
transform: translate(-50%, 10px);
transform: translate(-50%, -1px);
}

.last-grades .last-grade-wrapper {
Expand All @@ -39,6 +39,7 @@
align-items: center;
gap: 20px;
transition: .1s;
outline: none;
}
.last-grades .last-grade-wrapper:is(:hover, :focus-visible) {
background: rgba(var(--background-color-0), .2);
Expand All @@ -53,18 +54,24 @@
/* padding: 6px 22px; */
padding: 6px 0;
width: 72px;
min-width: 55px;
text-align: center;
border-radius: 10px;
}

.last-grades .last-grade-name {
flex-basis: auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

}

.last-grades .badges-container {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
min-width: 20px;

display: flex;
flex-flow: row nowrap;
Expand All @@ -78,6 +85,8 @@

.last-grades .last-grade-date {
flex-basis: auto;
flex-shrink: 0;
white-space: nowrap;
color: rgb(var(--text-color-alt));
}

Expand All @@ -94,5 +103,11 @@

.last-grades .last-grades-container {
height: auto;
padding-block: 5px;
}

.last-grades .last-grade-wrapper {
padding: 20px 15px;
gap: 10px;
}
}
3 changes: 1 addition & 2 deletions src/components/app/Dashboard/LastGrades.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ export default function LastGrades({ activeAccount, className = "", ...props })

const { useUserData } = useContext(AppContext)
const lastGrades = useUserData().get("lastGrades");
console.log("window match media:", window.matchMedia("(max-width: 1850px)").matches)

return (<Window className={`last-grades ${className}`}>
<WindowHeader onClick={() => navigate("../grades")}>
Expand All @@ -31,7 +30,7 @@ export default function LastGrades({ activeAccount, className = "", ...props })
{lastGrades !== undefined && lastGrades.length > 0
? lastGrades.map((el) => <li key={el.id} className="last-grade-container">
<Link to={`/app/${activeAccount}/grades#` + el.id} className="last-grade-wrapper">
<span className="last-grade-value"><Grade grade={{ value: el.value ?? "N/A" }} /></span>
<span className="last-grade-value"><Grade grade={{ value: el.value ?? "N/A", scale: el.scale }} /></span>
<span className="last-grade-name">{el.subjectName}</span>
<span className="badges-container">
{el.badges.includes("star") && <BadgeStarInfo />}
Expand Down
6 changes: 3 additions & 3 deletions src/components/app/Grades/Grade.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ export default function Grade({ grade, className = "", ...props }) {
const newClassList = [...oldClassList];
const MAX_TIME_DIFFERENCE = 3 * 1000 * 60 * 60 * 24; // 3 jours en ms
let isNewGrade = (Date.now() - (grade.entryDate ?? grade.date)) <= MAX_TIME_DIFFERENCE;
if (isNewGrade && grade.isReal) {
if (isNewGrade && (grade.isReal ?? true)) {
newClassList.push("new-grade");
}

Expand Down Expand Up @@ -140,7 +140,7 @@ export default function Grade({ grade, className = "", ...props }) {
replace: grade.id === undefined ? "" : true,
id: grade.id ?? "",
ref: gradeRef,
className: `grade${((grade.isSignificant ?? true) && grade.isReal) ? "" : " not-significant"}${(grade.upTheStreak ?? false) ? " streak-grade" : ""}${((grade.upTheStreak ?? false) === "maybe") ? " maybe-streak" : ""}${(grade.id ?? false) ? " selectable" : ""}${(grade.isReal ?? true) ? "" : " sim-grade"} ${className} ${classList.join(" ")}`,
className: `grade${((grade.isSignificant ?? true) && (grade.isReal ?? true)) ? "" : " not-significant"}${(grade.upTheStreak ?? false) ? " streak-grade" : ""}${((grade.upTheStreak ?? false) === "maybe") ? " maybe-streak" : ""}${(grade.id ?? false) ? " selectable" : ""}${(grade.isReal ?? true) ? "" : " sim-grade"} ${className} ${classList.join(" ")}`,
...props
},
<span className="grade-container">
Expand All @@ -149,7 +149,7 @@ export default function Grade({ grade, className = "", ...props }) {
{isGradeScaleEnabled.get() || ((grade.scale ?? 20) != 20 && <sub>/{grade.scale}</sub>)}
{(grade.coef ?? 1) !== 1 && <sup>({grade.coef ?? 1})</sup>}
</span>}
{grade.isReal === false && <CloseButton className="delete-grade-button" onClick={() => {deleteFakeGrade(grade.id, grade.subjectKey, grade.periodKey)}}/>}
{(grade.isReal ?? true) === false && <CloseButton className="delete-grade-button" onClick={() => {deleteFakeGrade(grade.id, grade.subjectKey, grade.periodKey)}}/>}
</span>
)
)
Expand Down
28 changes: 28 additions & 0 deletions src/components/generic/badges/BadgeInfo.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,34 @@
align-items: center;
}

.badge-container {
outline: none;
transition: .1s;
}

.badge-container:hover {
transform: translate(0, -4px) scale(1.15);
}

.badge-container:has(.fill-FFE600):hover {
filter: drop-shadow(0 0 6px #FFE600);
}
.badge-container:has(.fill-09D504):hover {
filter: drop-shadow(0 0 6px #09D504);
}
.badge-container:has(.fill-03A981):hover {
filter: drop-shadow(0 0 6px #03A981);
}
.badge-container:has(.fill-61FF5E):hover {
filter: drop-shadow(0 0 6px #61FF5E);
}
.badge-container:has(.fill-AFB5C7):hover {
filter: drop-shadow(0 0 6px #AFB5C7);
}
.badge-container:has(.fill-FF9900):hover {
filter: drop-shadow(0 0 6px #FF9900);
}

.badge {
height: 20px;
}
Expand Down

0 comments on commit f2cd8a8

Please sign in to comment.