Skip to content

Commit

Permalink
feat(Strengths): add weaknesses
Browse files Browse the repository at this point in the history
  • Loading branch information
@Truiteseche
Truiteseche committed Oct 12, 2024
1 parent f3f051d commit 5312761
Show file tree
Hide file tree
Showing 7 changed files with 152 additions and 17 deletions.
4 changes: 4 additions & 0 deletions public/images/reverse.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,10 @@
--background-color-strength-li-2: 0, 134, 118;
--background-color-strength-li-3: 0, 109, 96;

--background-color-weakness-li-1: 157,0, 138;
--background-color-weakness-li-2: 134, 0, 118;
--background-color-weakness-li-3: 109, 0, 96;

--background-color-canarman-main: 38, 59, 64;

--border-color-0: 0, 110, 138;
Expand Down Expand Up @@ -138,6 +142,10 @@
--background-color-strength-li-2: 27, 155, 22;
--background-color-strength-li-3: 17, 123, 21;

--background-color-weakness-li-1: 186, 36, 22;
--background-color-weakness-li-2: 155, 27, 22;
--background-color-weakness-li-3: 123, 17, 21;

--border-color-0: 75, 72, 217;
--border-color-1: 109, 106, 251;
--border-color-contrast: 120, 120, 165;
Expand Down Expand Up @@ -218,6 +226,10 @@
--background-color-strength-li-2: 27, 155, 22;
--background-color-strength-li-3: 17, 123, 21;

--background-color-weakness-li-1: 186, 36, 22;
--background-color-weakness-li-2: 155, 27, 22;
--background-color-weakness-li-3: 123, 17, 21;

--border-color-0: 109, 106, 251;
--border-color-1: 75, 72, 217;
--border-color-contrast: 100, 100, 180;
Expand Down
2 changes: 1 addition & 1 deletion src/components/LandingPage/LandingPage.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export default function LandingPage({ token, accountsList }) {
<div className="affiliation-disclaimer"> <InfoTypoIcon />Service open source non-affilié à Aplim</div>
<div className="text-center">
<h1>Découvrez <strong className="heading-emphasis">Ecole Directe Plus</strong></h1>
<p>EDP offre une expérience unique avec une interface moderne et intuitive, enrichie de fonctionnalités exclusives, le tout de façon gratuite, libre et open-source.</p>
<p>EDP augmente EcoleDirecte, avec une interface moderne et intuitive, enrichie de fonctionnalités exclusives, le tout de façon gratuite, libre et open-source.</p>
<Link to="/login" className="login-call-to-action">{isLoggedIn ? "Ouvrir l'app" : "Se connecter"}</Link>
</div>
<div className="fade-out-image">
Expand Down
108 changes: 101 additions & 7 deletions src/components/app/Grades/Strengths.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,89 @@
.strengths .strengths-info * {
pointer-events: auto;
}


.strengths .display-type-reverse-button {
background-color: transparent;
border: none;
border-radius: 8px;
position: absolute;
top: 50%;
left: 6px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
/* padding: 3px; */
height: 35px;
width: 35px;
cursor: pointer;
transition: .1s;
}
.strengths .display-type-reverse-button:is(:hover, :focus-visible) {
background-color: rgba(var(--text-color-main), .15);
}
.strengths .display-type-reverse-button:active {
background-color: rgba(var(--text-color-main), .10);
}

.strengths .display-type-reverse-button svg {
height: 22px;
}
.strengths .display-type-reverse-button svg path {
fill: rgba(var(--text-color-alt), .5);
transition: .1s;
}
.strengths .display-type-reverse-button:is(:hover, :focus-visible) svg path {
fill: rgba(var(--text-color-main));
}
.strengths .display-type-reverse-button:active svg path {
fill: rgba(var(--text-color-main), .5);
}


.strengths .strengths-info {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
pointer-events: auto;
}
.strengths .strengths-info .fill {

.strengths .strengths-info.info-strengths .fill {
fill: rgba(var(--background-color-strength-li-1), 0.8);
}
.strengths .strengths-info .stroke {
.strengths .strengths-info.info-strengths .stroke {
stroke: rgba(var(--background-color-strength-li-1), 0.8);
}
.strengths .strengths-info:is(:hover, :focus-within) .fill {
.strengths .strengths-info.info-strengths:is(:hover, :focus-within) .fill {
fill: rgb(var(--background-color-strength-li-3));
}
.strengths .strengths-info:is(:hover, :focus-within) .stroke {
.strengths .strengths-info.info-strengths:is(:hover, :focus-within) .stroke {
stroke: rgb(var(--background-color-strength-li-3));
}

.strengths .strengths-info.info-weaknesses .fill {
fill: rgba(var(--background-color-weakness-li-1), 0.8);
}
.strengths .strengths-info.info-weaknesses .stroke {
stroke: rgba(var(--background-color-weakness-li-1), 0.8);
}
.strengths .strengths-info.info-weaknesses:is(:hover, :focus-within) .fill {
fill: rgb(var(--background-color-weakness-li-3));
}
.strengths .strengths-info.info-weaknesses:is(:hover, :focus-within) .stroke {
stroke: rgb(var(--background-color-weakness-li-3));
}

ol.strengths-container {
height: 100%;
padding: 15px;
display: flex;
flex-flow: column nowrap;
justify-content: space-around;
gap: 10px;
perspective: 500px;
}

@container (max-height: 180px) {
Expand All @@ -47,13 +103,51 @@ ol.strengths-container {
border-radius: 50px;
box-shadow: var(--box-shadow-element);

/* animation: 0.5s unroll 0s forwards; */
transform: rotateX(-90deg);
visibility: hidden;
animation: .5s var(--timing-function-spring-effect) 0s unroll forwards;
animation-delay: calc(var(--order) * 75ms);
/* transform: rotateX(-90deg); */

cursor: pointer;
transition: all 0.1s, outline 0s;
}

.strengths-container li.strength-container:nth-child(1) { background-color: rgba(var(--background-color-strength-li-1), 0.8) }
.strengths-container li.strength-container:nth-child(2) { background-color: rgba(var(--background-color-strength-li-2), 0.8) }
.strengths-container li.strength-container:nth-child(3) { background-color: rgba(var(--background-color-strength-li-3), 0.8) }
.strengths-container.display-strengths li.strength-container {
animation: .5s var(--timing-function-spring-effect) 0s unroll-2 forwards;
animation-delay: calc(var(--order) * 75ms);
/* animation-delay: calc((3 - var(--order)) * 75ms); */
}

@keyframes unroll {
from {
transform: rotateX(-90deg);
visibility: visible;
}
to {
transform: rotateX(0deg);
visibility: visible;
}
}
@keyframes unroll-2 {
from {
transform: rotateX(90deg);
visibility: visible;
}
to {
transform: rotateX(0deg);
visibility: visible;
}
}

.strengths-container.display-strengths li.strength-container:nth-child(1) { background-color: rgba(var(--background-color-strength-li-1), 0.8) }
.strengths-container.display-strengths li.strength-container:nth-child(2) { background-color: rgba(var(--background-color-strength-li-2), 0.8) }
.strengths-container.display-strengths li.strength-container:nth-child(3) { background-color: rgba(var(--background-color-strength-li-3), 0.8) }

.strengths-container.display-weaknesses li.strength-container:nth-child(1) { background-color: rgba(var(--background-color-weakness-li-1), 0.8) }
.strengths-container.display-weaknesses li.strength-container:nth-child(2) { background-color: rgba(var(--background-color-weakness-li-2), 0.8) }
.strengths-container.display-weaknesses li.strength-container:nth-child(3) { background-color: rgba(var(--background-color-weakness-li-3), 0.8) }

.strengths-container li.strength-container:hover {
opacity: 0.8;
Expand Down
31 changes: 23 additions & 8 deletions src/components/app/Grades/Strengths.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,22 @@ import InfoButton from "../../generic/Informative/InfoButton";
import Grade from "./Grade";

import "./Strengths.css";
import ReverseIcon from "../../graphics/ReverseIcon";

export default function Strengths({ activeAccount, sortedGrades, selectedPeriod, className = "", ...props }) {
const [strengths, setStrengths] = useState([]);
const [weaknesses, setWeaknesses] = useState([]);
const [displayType, setDisplayType] = useState(0); // 0: strengths; 1: weaknesses
const { useUserSettings } = useContext(AppContext);
const settings = useUserSettings();


useEffect(() => {
function strengthsCalculation() {
if (sortedGrades && sortedGrades[selectedPeriod]) {
const STRENGTHS_NUMBER = 3;
const period = sortedGrades[selectedPeriod];
const STRENGTHS_NUMBER = 3;
const newStrengths = Array.from({ length: STRENGTHS_NUMBER }, () => undefined);
const newWeaknesses = Array.from({ length: STRENGTHS_NUMBER }, () => undefined);

for (let subjectKey in period.subjects) {
const subject = period.subjects[subjectKey];
Expand All @@ -37,6 +40,7 @@ export default function Strengths({ activeAccount, sortedGrades, selectedPeriod,
} else {
algebricDiff = 0;
}
// strengths
for (let i = 0; i < newStrengths.length; i++) {
const strength = newStrengths[i];
if (strength === undefined || (subject.average !== "N/A" && strength.subject.average === "N/A") || (subject.average !== "N/A" && strength.subject.average !== "N/A" && algebricDiff >= strength.algebricDiff)) {
Expand All @@ -45,8 +49,18 @@ export default function Strengths({ activeAccount, sortedGrades, selectedPeriod,
break;
}
}
// weaknesses
for (let i = 0; i < newWeaknesses.length; i++) {
const strength = newWeaknesses[i];
if (strength === undefined || (subject.average !== "N/A" && strength.subject.average === "N/A") || (subject.average !== "N/A" && strength.subject.average !== "N/A" && algebricDiff <= strength.algebricDiff)) {
newWeaknesses.splice(i, 0, { algebricDiff, subject })
newWeaknesses.splice(newWeaknesses.length - 1, 1);
break;
}
}
}
setStrengths(newStrengths);
setWeaknesses(newWeaknesses);
}
}

Expand All @@ -55,14 +69,15 @@ export default function Strengths({ activeAccount, sortedGrades, selectedPeriod,

return (<Window className={`strengths ${className}`} {...props}>
<WindowHeader>
<h2>Vos points forts</h2>
<InfoButton className="strengths-info">Calculés en fonction de la différence entre votre moyenne et celle de la classe</InfoButton>
<button disabled={!sortedGrades || !sortedGrades[selectedPeriod]} className="display-type-reverse-button" onClick={() => {setDisplayType((displayType+1) % 2)}} title={displayType === 0 ? "Basculer sur les points faibles" : "Basculer sur les points forts"} > <ReverseIcon /> </button>
<h2>{displayType === 0 ? "Vos points forts" : "Vos points faibles"}</h2>
<InfoButton className={"strengths-info " + (displayType === 0 ? "info-strengths" : "info-weaknesses")}>Calculés en fonction de la différence entre votre moyenne et celle de la classe</InfoButton>
</WindowHeader>
<WindowContent>
{sortedGrades && sortedGrades[selectedPeriod]
? <ol className="strengths-container">
? <ol className={"strengths-container " + (displayType === 0 ? "display-strengths" : "display-weaknesses")}>
{
strengths.map((strength, idx) => <li key={crypto.randomUUID()} className="strength-container">
(displayType === 0 ? strengths : weaknesses).map((strength, idx) => <li key={strength?.subject?.name || crypto.randomUUID()} style={{ "--order": idx }} className="strength-container">
<Link to={"#" + strength?.subject?.id} className="strength-wrapper">
<span className="subject-container">
<span className="subject-rank">{idx + 1}</span>
Expand All @@ -73,9 +88,9 @@ export default function Strengths({ activeAccount, sortedGrades, selectedPeriod,
</li>)
}
</ol>
: <ol className="strengths-container">
: <ol className="strengths-container display-strengths">
{
Array.from({ length: 3 }, (_, index) => <li key={crypto.randomUUID()} className="strength-container">
Array.from({ length: 3 }, (_, index) => <li key={crypto.randomUUID()} style={{ "--order": -69 /* skip the animation */ }} className="strength-container">
<div className="strength-wrapper">
<ContentLoader
animate={settings.get("displayMode") === "quality"}
Expand Down
2 changes: 1 addition & 1 deletion src/components/generic/Informative/InfoButton.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}

.info-button .info-icon :is(.fill, .stroke) {
transition: 0.2s;
transition: 0.1s;
}

.info-button .info-icon .fill {
Expand Down
10 changes: 10 additions & 0 deletions src/components/graphics/ReverseIcon.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@


import "./graphics.css"
export default function ReverseIcon ({ className="", id="", alt, ...props }) {
return (
<svg aria-label={alt} className={className} id={id} viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" {...props}>
<path className="fill-text-alt" d="M17.6,4.2l-4-3a1,1,0,0,0-1.05-.09A.977.977,0,0,0,12,2V4H1A1,1,0,0,0,1,6H12V8a.988.988,0,0,0,.55.89A.99.99,0,0,0,13.6,8.8l4-3a1,1,0,0,0,0-1.6Z"/>
<path className="fill-text-alt" d="M.4,12.2l4-3a1,1,0,0,1,1.05-.09A.977.977,0,0,1,6,10v2H17a1,1,0,0,1,0,2H6v2a.988.988,0,0,1-.55.89A.99.99,0,0,1,4.4,16.8l-4-3a1,1,0,0,1,0-1.6Z"/></svg>
)
}

0 comments on commit 5312761

Please sign in to comment.