slider styling

Sun-Mountain · Jun 22, 2023 · 41301f3 · 41301f3
1 parent c13aa81
commit 41301f3
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 10 deletions.
diff --git a/frontend/components/DailyTabs.tsx b/frontend/components/DailyTabs.tsx
@@ -40,6 +40,8 @@ export default function DailyTabs({
   allBaseFilters,
   showOnly,
   dateList,
+  durationFilter,
+  durationLength,
   hideMaterialReq,
   hideSoldOut,
   materialsRequired,
@@ -57,11 +59,28 @@ export default function DailyTabs({
     setTab(newValue);
   };
 
+  const lowestDuration = durationFilter[0];
+  const highestDuration = durationFilter[1];
+  const durationKeys = Object.keys(durationLength).sort();
+
   const getEventsList = (date: string) => {
     const dayEvents = dateList[date]
 
     var eventsForDay = dayEvents.filter(val => !allBaseFilters.includes(val));
 
+    if (Number(durationKeys[0]) != lowestDuration || Number(durationKeys[durationKeys.length - 1]) != highestDuration) {
+      durationKeys.map(key => {
+        if (Number(key) < lowestDuration){
+          var events = durationLength[key]
+          eventsForDay = eventsForDay.filter(val => !events.includes(val));
+        }
+        if (Number(key) > highestDuration){
+          var events = durationLength[key]
+          eventsForDay = eventsForDay.filter(val => !events.includes(val));
+        }
+      })
+    }
+
     if (hideMaterialReq) {
       eventsForDay = eventsForDay.filter(val => !materialsRequired.includes(val));
     }

diff --git a/frontend/components/SliderComponent.tsx b/frontend/components/SliderComponent.tsx
@@ -27,7 +27,7 @@ export default function SliderComponent({
   const chosenRange = minValue != maxValue ? `Between ${minValue} and ${maxValue} hours.` : `Only with a duration of ${minValue} hour(s).`
 
   return (
-    <>
+    <div className='filter-component-container'>
       <strong>{label}</strong><br />
       {chosenRange}
       <div className='flex-row slider-container'>
@@ -52,6 +52,6 @@ export default function SliderComponent({
           {max} Hours
         </div>
       </div>
-    </>
+    </div>
   );
 }
diff --git a/frontend/pages/index.tsx b/frontend/pages/index.tsx
@@ -50,7 +50,6 @@ export default function Home() {
   const [tournamentFilter, setTournamentFilter] = useState(tournamentFilterOptions[0]);
 
   // Switches
-  const [hideLongestDur, setHideLongestDur] = useState(false);
   const [hideSoldOut, setHideSoldOut] = useState(false);
   const [hideMaterialsReq, setHideMaterialsReq] = useState(false);
 
@@ -121,11 +120,6 @@ export default function Home() {
           min={0.5}
           max={10}
         />
-        <Switch
-          switchLabel={'Events with Duration Over 10 Hours'}
-          hide={hideLongestDur}
-          setHide={setHideLongestDur}
-        />
       </div>
       <DailyTabs
         allBaseFilters={[

diff --git a/frontend/styles/styles.css b/frontend/styles/styles.css
@@ -133,8 +133,9 @@ a:hover {
   margin-top: 19px;
 }
 
-.filter-component-container+.filter-component-container {
-  margin-top: 25px;
+.filter-component-container {
+  margin-top: 10px;
+  padding-top: 10px;
 }
 
 .filter-list {