spaghetti

NYPL · Nov 28, 2023 · 5b29fb0 · 5b29fb0
1 parent 5bde4f2
commit 5b29fb0
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 11 deletions.
diff --git a/src/components/ItemFilters/FiltersContainer.tsx b/src/components/ItemFilters/FiltersContainer.tsx
@@ -31,11 +31,11 @@ interface ItemFilterContainerProps {
 
 const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => {
   const router = useRouter()
-  const { isLargerThanMedium } = useNYPLBreakpoints()
-  const filterGroupClassName = isLargerThanMedium
+  const { isLargerThanLarge, isLargerThanMedium } = useNYPLBreakpoints()
+  const filterGroupClassName = isLargerThanLarge
     ? styles.filterGroup
     : styles.filterGroupMobile
-
+  console.log(filterGroupClassName)
   const filterData = useRef(
     itemAggs.map((agg: ItemAggregation) => {
       if (agg.field === "location") return new LocationFilterData(agg)
@@ -79,13 +79,25 @@ const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => {
 
   return (
     <>
-      <Box className={styles.filtersContainer} sx={{ display: "flex" }}>
+      <Box
+        className={styles.filtersContainer}
+        sx={{
+          display: "flex",
+          flexDirection: isLargerThanMedium ? "row" : "column",
+        }}
+      >
         <Card className={filterGroupClassName} ref={ref}>
           <CardHeading level="h3" size="body2">
             Filter by
           </CardHeading>
           <CardContent>
-            <SimpleGrid gap="nypl-s">
+            <Box
+              sx={{
+                display: "flex",
+                flexDirection: isLargerThanLarge ? "row" : "column",
+              }}
+              gap="nypl-s"
+            >
               {filterData.map((field: ItemFilterData) => (
                 <ItemFilter
                   isOpen={whichFilterIsOpen === field.field}
@@ -96,7 +108,7 @@ const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => {
                   submitFilters={submitFilters}
                 />
               ))}
-            </SimpleGrid>
+            </Box>
           </CardContent>
         </Card>
         <Card className={filterGroupClassName}>
@@ -113,7 +125,7 @@ const ItemFilterContainer = ({ itemAggs }: ItemFilterContainerProps) => {
               id="year-filter"
               labelText="Apply"
               textInputProps={{
-                defaultValue: "Horizon",
+                defaultValue: "YYYY",
                 isClearable: true,
                 labelText: "Item Search",
                 name: "textInputName",

diff --git a/styles/components/ItemFilters.module.scss b/styles/components/ItemFilters.module.scss
@@ -2,8 +2,6 @@
 
 // The gray box that holds the filter groups
 .filtersContainer {
-  display: flex;
-  flex-wrap: wrap;
   background-color: var(--nypl-colors-ui-gray-x-light-cool);
   padding: 16px;
   min-height: 128px;
@@ -15,11 +13,11 @@
 // there are the aggregation filters and the search by year filter
 .filterGroupMobile {
   flex-grow: 1;
-  & .itemFilterOptionsContainer {
+  .itemFilterOptionsContainer {
     position: relative;
     width: inherit;
   }
-  & .itemFilter {
+  .itemFilter {
     margin-right: 0px;
   }
 }