From f2cd8a87da75edb2effad8e620603c9b09f1bf69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Truite=20S=C3=A9ch=C3=A9e?= Date: Sun, 3 Mar 2024 04:02:59 +0100 Subject: [PATCH] feat(LastGrades): improve responsive, cute badges animation --- src/components/app/Dashboard/Dashboard.jsx | 4 +-- src/components/app/Dashboard/LastGrades.css | 23 ++++++++++++++--- src/components/app/Dashboard/LastGrades.jsx | 3 +-- src/components/app/Grades/Grade.jsx | 6 ++--- src/components/generic/badges/BadgeInfo.css | 28 +++++++++++++++++++++ 5 files changed, 53 insertions(+), 11 deletions(-) diff --git a/src/components/app/Dashboard/Dashboard.jsx b/src/components/app/Dashboard/Dashboard.jsx index c5574f06..cb2a0190 100644 --- a/src/components/app/Dashboard/Dashboard.jsx +++ b/src/components/app/Dashboard/Dashboard.jsx @@ -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(); @@ -66,7 +66,7 @@ export default function Dashboard({ fetchUserGrades, grades, activeAccount, isLo - + navigate("../homeworks")}>

Cahier de texte

 diff --git a/src/components/app/Dashboard/LastGrades.css b/src/components/app/Dashboard/LastGrades.css index 69defa4c..769aa608 100644 --- a/src/components/app/Dashboard/LastGrades.css +++ b/src/components/app/Dashboard/LastGrades.css @@ -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 { @@ -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 { @@ -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); @@ -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; @@ -78,6 +85,8 @@ .last-grades .last-grade-date { flex-basis: auto; + flex-shrink: 0; + white-space: nowrap; color: rgb(var(--text-color-alt)); } @@ -94,5 +103,11 @@ .last-grades .last-grades-container { height: auto; + padding-block: 5px; + } + + .last-grades .last-grade-wrapper { + padding: 20px 15px; + gap: 10px; } } diff --git a/src/components/app/Dashboard/LastGrades.jsx b/src/components/app/Dashboard/LastGrades.jsx index 0ab3aed9..e09bded3 100644 --- a/src/components/app/Dashboard/LastGrades.jsx +++ b/src/components/app/Dashboard/LastGrades.jsx @@ -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 ( navigate("../grades")}> @@ -31,7 +30,7 @@ export default function LastGrades({ activeAccount, className = "", ...props }) {lastGrades !== undefined && lastGrades.length > 0 ? lastGrades.map((el) =>
  • - + {el.subjectName} {el.badges.includes("star") && } diff --git a/src/components/app/Grades/Grade.jsx b/src/components/app/Grades/Grade.jsx index 651201de..0de361ee 100644 --- a/src/components/app/Grades/Grade.jsx +++ b/src/components/app/Grades/Grade.jsx @@ -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"); } @@ -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 }, @@ -149,7 +149,7 @@ export default function Grade({ grade, className = "", ...props }) { {isGradeScaleEnabled.get() || ((grade.scale ?? 20) != 20 && /{grade.scale})} {(grade.coef ?? 1) !== 1 && ({grade.coef ?? 1})} } - {grade.isReal === false && {deleteFakeGrade(grade.id, grade.subjectKey, grade.periodKey)}}/>} + {(grade.isReal ?? true) === false && {deleteFakeGrade(grade.id, grade.subjectKey, grade.periodKey)}}/>} ) ) diff --git a/src/components/generic/badges/BadgeInfo.css b/src/components/generic/badges/BadgeInfo.css index cfeea9e6..519e0fba 100644 --- a/src/components/generic/badges/BadgeInfo.css +++ b/src/components/generic/badges/BadgeInfo.css @@ -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; }