Optimizing for larger screens

EmoruwaTolu · Apr 10, 2024 · fa56801 · fa56801
1 parent 09ab6db
commit fa56801
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 31 deletions.
diff --git a/prem-data/src/components/bar-chart/carousel-header.css b/prem-data/src/components/bar-chart/carousel-header.css
@@ -13,6 +13,7 @@
     padding: 0;
     cursor: pointer;
     transition: 0.3s;
+    font-size: 1em;
   }
 
   .selected {

diff --git a/prem-data/src/components/compare-page/compare-attr-list.js b/prem-data/src/components/compare-page/compare-attr-list.js
@@ -13,17 +13,17 @@ export const CompareAttrList = ({ options, onCheckboxChange }) => {
   };
 
 return (
-    <div>
+    <div className="attr-container">
       {options.map((option) => (
-        <div key={option}>
+        <div key={option} className="attrlist-label">
           <input
             type="checkbox"
             id={option}
             checked={checkedItems.includes(option)}
             onChange={() => handleCheckboxChange(option)}
             className="checkbox-input"
           />
-          <label htmlFor={option} className="attrlist-label">{option}</label>
+          <label style={{fontSize: '16px'}} htmlFor={option}>{option}</label>
         </div>
       ))}
     </div>

diff --git a/prem-data/src/components/compare-page/compare-percentiles.js b/prem-data/src/components/compare-page/compare-percentiles.js
@@ -16,7 +16,8 @@ function ComparePercentiles({player, setSeasonPlayer1, seasonPlayer1, setPercent
                 </div>
                 <div className="options-list">
                     {player.listOfSeasons.map((seasons, index) => (
-                        <div 
+                        <div
+                            style={{fontSize: '0.8em'}}
                             className={`season-option ${seasonPlayer1 === index ? 'selected-season' : ''}`}
                             onClick={() => {
                                 setSeasonPlayer1(index);

diff --git a/prem-data/src/components/compare-page/compare-player-section.css b/prem-data/src/components/compare-page/compare-player-section.css
@@ -254,10 +254,6 @@ input:checked + .slider:before {
     .select-menu{
         font-size: 0.8em;
     }
-    .season-option{
-        font-size: 0.8em;
-        color: red;
-    }
     .options-list{
         font-size: 1em;
     }
@@ -267,4 +263,7 @@ input:checked + .slider:before {
     .select{
         font-size: 1.2em;
     }
+    .season-option{
+        font-size: 16px;
+    }
 }
diff --git a/prem-data/src/components/taskbar/taskbar.js b/prem-data/src/components/taskbar/taskbar.js
@@ -6,7 +6,7 @@ function Taskbar() {
 
     return(
         <nav className="taskbar">
-            <Link to={`/`} className="logo">PL Database</Link>
+            <Link to={`/`} className="logo">Home</Link>
             <ul>
                 <li> <Link to={`/compare`}>Compare</Link></li>
                 <li> <Link to={`/quiz`}>Quiz</Link></li>

diff --git a/prem-data/src/pages/page-style.css b/prem-data/src/pages/page-style.css
@@ -306,7 +306,7 @@
 }
 @media screen and (min-width: 1441px) {
     .player-name{
-        font-size: 2em;
+        font-size: 1.8em;
     }
     .player-page-club{
         font-size: 1.2em;
@@ -319,7 +319,7 @@
         font-size: 1.2em;
     }
     .chart-container p{
-        font-size: 1em;
+        font-size: 0.8em;
     }
     .position-tabs button{
         font-size: 1.25em;

diff --git a/prem-data/src/pages/player-page.js b/prem-data/src/pages/player-page.js
@@ -51,24 +51,6 @@ function PlayerPage() {
             });
         // }
     }, [player]);
-  //   useEffect(() => {
-  //     if (player) {
-  //         async function fetchData() {
-  //             try {
-  //                 const response = await fetch(`/player/${player.playerName}`);
-  //                 const data = await response.json();
-  //                 setPlayerInfo(data);
-  //                 const linkedList = await arrayToCircularLinkedList(data);
-  //                 setSeason(linkedList.head);
-  //                 setSeasonLinkedList(linkedList);
-  //                 console.log(data[data.length - 1].name);
-  //             } catch (error) {
-  //                 console.error("Error fetching player data:", error);
-  //             }
-  //         }
-  //         fetchData();
-  //     }
-  // }, [player]);
 
     if (playerInfo.length === 0) {
         return <p>Loading player data...</p>;

diff --git a/prem-data/src/styles.css b/prem-data/src/styles.css
@@ -125,15 +125,15 @@
 }
 
 .player-card .player-info .player-name{
-    font-size: 1.25em;
+    font-size: 1.4em;
     font-weight: 700;
     margin: 0;
     display: flex;
     justify-content: center;
 }
 
 .player-card .player-info .club-name{
-    font-size: 0.6em;
+    font-size: 0.8em;
     display: flex;
     justify-content: right;
     margin: 0;