removed old code, added data attribute for max year length, tried to use data attribute to properly size quarters

Author: charlieweinberger

site/src/pages/RoadmapPage/Planner.tsx

@@ -24,6 +24,7 @@ import { Button, Modal } from 'react-bootstrap';
 import trpc from '../../trpc';
 import spawnToast from '../../helpers/toastify';
 import { useIsLoggedIn } from '../../hooks/isLoggedIn';
+import { PlannerData, PlannerYearData } from '../../types/types';
 
 const Planner: FC = () => {
   const dispatch = useAppDispatch();
@@ -140,6 +141,12 @@ const Planner: FC = () => {
 
   const { unitCount, courseCount } = calculatePlannerOverviewStats();
 
+  const getMaxYearLen = (years: PlannerData) => {
+    return years.reduce((maxYearLen: number, year: PlannerYearData) => {
+      return year.quarters.length > maxYearLen ? year.quarters.length : maxYearLen;
+    }, 0);
+  };
+
   return (
     <div className="planner">
       <Modal
@@ -174,7 +181,7 @@ const Planner: FC = () => {
         saveRoadmap={saveRoadmap}
         missingPrerequisites={missingPrerequisites}
       />
-      <section className="years">
+      <section className="years" data-max-year-len={getMaxYearLen(currentPlanData)}>
         {currentPlanData.map((year, yearIndex) => {
           return <Year key={yearIndex} yearIndex={yearIndex} data={year} />;
         })}

site/src/pages/RoadmapPage/Year.scss

@@ -44,33 +44,32 @@
 .year-accordion-content {
   border-radius: var(--border-radius);
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: 20px;
   margin-block: 16px 4px;
 }
 
-@media only screen and (min-width: 1648px) {
-  .year-accordion-content-length-3 {
-    grid-template-columns: repeat(auto-fill, minmax(333px, 1fr));
-  }
+.years[data-max-year-len='1'] .year-accordion-content {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }
 
-@media only screen and (min-width: 1918px) {
-  .year-accordion-content-length-4 {
-    grid-template-columns: repeat(auto-fill, minmax(317px, 1fr));
-  }
+.years[data-max-year-len='2'] .year-accordion-content {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }
 
-@media only screen and (min-width: 1980px) {
-  .year-accordion-content-length-3 {
-    grid-template-columns: repeat(auto-fill, minmax(390px, 1fr));
-  }
+.years[data-max-year-len='3'] .year-accordion-content {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }
 
-@media only screen and (min-width: 2194px) {
-  .year-accordion-content-length-5 {
-    grid-template-columns: repeat(auto-fill, minmax(304px, 1fr));
-  }
+.years[data-max-year-len='4'] .year-accordion-content {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+.years[data-max-year-len='5'] .year-accordion-content {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+}
+
+.years[data-max-year-len='6'] .year-accordion-content {
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 }
 
 .year-accordion-title {

site/src/pages/RoadmapPage/Year.tsx

@@ -169,7 +169,7 @@ const Year: FC<YearProps> = ({ yearIndex, data }) => {
       {showContent && (
         <>
           <hr />
-          <div className={`year-accordion-content year-accordion-content-length-${data.quarters.length}`}>
+          <div className="year-accordion-content">
             {data.quarters.map((quarter, quarterIndex) => {
               return (
                 <Quarter

site/src/pages/RoadmapPage/index.scss

@@ -12,7 +12,6 @@
 
   .main-wrapper {
     width: 80%;
-    max-width: 1640px;
     height: 100%;
     overflow-y: auto;
   }