Remplacement des px par des rem pour certaines propriétés

charlenry · Mar 9, 2023 · 8eede4f · 8eede4f
1 parent 5ffcad9
commit 8eede4f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 32 deletions.
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
@@ -1,23 +1,21 @@
-import './Home.scss';
+import "./Home.scss";
 import React from "react";
 import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import useBrowserWidth from "../../service/useBrowserWidth";
 import useFetchService from "../../service/useFetchService";
 import UserInfosModel from "../../dataModels/UserInfosModel";
 import ActivityModel from "../../dataModels/ActivityModel";
-import AverageSessionsModel from '../../dataModels/AverageSessionsModel';
-import PerformanceModel from '../../dataModels/PerformanceModel';
+import AverageSessionsModel from "../../dataModels/AverageSessionsModel";
+import PerformanceModel from "../../dataModels/PerformanceModel";
 import Navbar from "../../components/Navbar/Navbar";
 import IconsBar from "../../components/IconsBar/IconsBar";
-import Message from '../../components/Message/Message';
-import Nutrients from '../../components/Nutrients/Nutrients';
-import TodayScore from '../../components/TodayScore/TodayScore';
-import Activity from '../../components/Activity/Activity';
-import AverageSessions from '../../components/AverageSessions/AverageSessions';
-import Performance from '../../components/Performance/Performance';
-
-
+import Message from "../../components/Message/Message";
+import Nutrients from "../../components/Nutrients/Nutrients";
+import TodayScore from "../../components/TodayScore/TodayScore";
+import Activity from "../../components/Activity/Activity";
+import AverageSessions from "../../components/AverageSessions/AverageSessions";
+import Performance from "../../components/Performance/Performance";
 
 const Home = (props) => {
   const { id } = useParams();
@@ -31,7 +29,9 @@ const Home = (props) => {
   const activityModel = new ActivityModel(activity.userActivity);
 
   const averageSessions = useFetchService(id, "averageSessions");
-  const averageSessionsModel = new AverageSessionsModel(averageSessions.userAverageSessions);
+  const averageSessionsModel = new AverageSessionsModel(
+    averageSessions.userAverageSessions
+  );
 
   const performance = useFetchService(id, "performance");
   const performanceModel = new PerformanceModel(performance.userPerformance);
@@ -40,21 +40,32 @@ const Home = (props) => {
 
   const browserWidth = useBrowserWidth();
   const [navbarWidth, setNavbarWidth] = useState();
+  const coeffDirecteur = (62.5 - 47.5) / (1440 - 1024);
 
   useEffect(() => {
-    if (browserWidth < 1457) {
-      setNavbarWidth(browserWidth - 20);
-    } else {
-      setNavbarWidth(1440);
+    // if (browserWidth < 1457) {
+    //   setNavbarWidth(browserWidth - 20);
+    // } else {
+    //   setNavbarWidth(1440);
+    // }
+
+    const html = document.querySelector("html");
+    let actualFontPercent = coeffDirecteur * browserWidth;
+
+    if (browserWidth < 1440) {
+      html.style.fontSize = `${actualFontPercent}%`;
+    } else if (browserWidth >= 1440) {
+      html.style.fontSize = "62.5%";
     }
-  }, [browserWidth])
+
+  }, [browserWidth]);
 
 
   return (
     <>
       <div className="center">
         <div className="container">
-          <Navbar id={infosModel.id} navbarWidth= {navbarWidth} />
+          <Navbar id={infosModel.id} navbarWidth={navbarWidth} />
           <IconsBar />
           <main className="main">
             <Message infosModel={infosModel} />
@@ -64,7 +75,7 @@ const Home = (props) => {
 
               <div className="wrapper-other-charts">
                 <AverageSessions averageSessionsModel={averageSessionsModel} />
-                <Performance performanceModel={performanceModel} /> 
+                <Performance performanceModel={performanceModel} />
                 <TodayScore infosModel={infosModel} />
               </div>
 

diff --git a/src/style/app.scss b/src/style/app.scss
@@ -46,7 +46,7 @@ body {
   width: 100%;
   height: 9.1rem;
   background-color: $black;
-  box-shadow: 0px 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0.4rem 0.4rem rgba(0, 0, 0, 0.25);
 }
 .icons-bar {
   grid-area: icons-bar;
@@ -109,7 +109,7 @@ body {
 .activity {
   // background-color: cyan;
   // border: 0.1rem solid cyan;
-  border-radius: 5px;
+  border-radius: 0.5rem;
   max-width: 83.5rem;
   max-height: 32rem;
   overflow: hidden;
@@ -118,7 +118,7 @@ body {
 .average {
   // background-color:blue;
   border: 0.1rem solid blue;
-  border-radius: 5px;
+  border-radius: 0.5rem;
   max-width: 25.8rem;
   max-height: 26.3rem;
   overflow: hidden;
@@ -127,7 +127,7 @@ body {
 .performance {
   background-color:brown;
   border: 0.1rem solid brown;
-  border-radius: 5px;
+  border-radius: 0.5rem;
   max-width: 25.8rem;
   max-height: 26.3rem;
   overflow: hidden;
@@ -136,16 +136,16 @@ body {
 .score {
   // background-color:burlywood;
   border: 0.1rem solid burlywood;
-  border-radius: 5px;
+  border-radius: 0.5rem;
   max-width: 25.8rem;
   max-height: 26.3rem;
   overflow: hidden;
   flex: 1;
 }
 .calories {
   background: $ligthGray;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.0212249);
-  border-radius: 5px;
+  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.0212249);
+  border-radius: 0.5rem;
   border: 0.1rem solid #FF0000;
   max-width: 25.8rem;
   max-height: 12.4rem;
@@ -154,8 +154,8 @@ body {
 }
 .proteins {
   background: $ligthGray;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.0212249);
-  border-radius: 5px;
+  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.0212249);
+  border-radius: 0.5rem;
   border: 0.1rem solid #4AB8FF;
   max-width: 25.8rem;
   max-height: 12.4rem;
@@ -164,8 +164,8 @@ body {
 }
 .carbs {
   background: $ligthGray;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.0212249);
-  border-radius: 5px;
+  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.0212249);
+  border-radius: 0.5rem;
   border: 0.1rem solid #FDCC0C;
   max-width: 25.8rem;
   max-height: 12.4rem;
@@ -174,8 +174,8 @@ body {
 }
 .fats {
   background: $ligthGray;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.0212249);
-  border-radius: 5px;
+  box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.0212249);
+  border-radius: 0.5rem;
   border: 0.1rem solid #FD5181;
   max-width: 25.8rem;
   max-height: 12.4rem;