Filters - mobile view #27
Open
+435
−112
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adamik10
changed the title
+ Use it on the current interactive elements
- in order to avoid repeating code
ThomasGross
reviewed
Nov 5, 2024
Comment on lines
+16
to
+21
| className={cn([ | ||
| `focus-visible h-[29px] w-auto self-start whitespace-nowrap rounded-full bg-background-overlay px-4 | ||
| py-2 text-typo-caption hover:animate-wiggle`, | ||
| isActive && "bg-foreground text-background", | ||
| classNames, | ||
| ])}> |
There was a problem hiding this comment.
You dont need an array here
Suggested change
| className={cn([ | |
| `focus-visible h-[29px] w-auto self-start whitespace-nowrap rounded-full bg-background-overlay px-4 | |
| py-2 text-typo-caption hover:animate-wiggle`, | |
| isActive && "bg-foreground text-background", | |
| classNames, | |
| ])}> | |
| className={cn( | |
| `focus-visible h-[29px] w-auto self-start whitespace-nowrap rounded-full bg-background-overlay px-4 | |
| py-2 text-typo-caption hover:animate-wiggle`, | |
| isActive && "bg-foreground text-background", | |
| classNames, | |
| )}> |
| @@ -44,48 +45,38 @@ const SearchFiltersColumn = ({ | |||
| <> | |||
| <div | |||
| key={facet.name} | |||
| className={cn(["relative", !isLast && "min-w-32 flex-1", isLast && "flex-2"])}> | |||
| <h3 className="mb-2 text-typo-caption uppercase">{getFacetTranslation(facetFilter)}</h3> | |||
| className={cn(["relative ml-[-4px]", !isLast && "min-w-32 flex-1", isLast && "flex-2"])}> | |||
There was a problem hiding this comment.
Suggested change
| className={cn(["relative ml-[-4px]", !isLast && "min-w-32 flex-1", isLast && "flex-2"])}> | |
| className={cn("relative ml-[-4px]", !isLast && "min-w-32 flex-1", isLast && "flex-2")}> |
| @@ -1,7 +1,7 @@ | |||
| import { FacetFieldEnum } from "@/lib/graphql/generated/fbi/graphql" | |||
|
|
|||
| const search = { | |||
| "search.item.limit": 9, | |||
| "search.item.limit": 18, | |||
There was a problem hiding this comment.
9 means faster load times also serverside. Could be nice to keep. Maybe 12 could be the sweetspot
Suggested change
| "search.item.limit": 18, | |
| "search.item.limit": 9, |
| </p> | ||
| </button> | ||
| </div> | ||
| <Icon className={cn("h-8 w-8", isExpanded && "rotate-180")} name="arrow-down" /> |
There was a problem hiding this comment.
Im pretty sure "isExpanded" will end up in the class if you're using this time of if statement
Suggested change
| <Icon className={cn("h-8 w-8", isExpanded && "rotate-180")} name="arrow-down" /> | |
| <Icon className={cn("h-8 w-8", isExpanded ? "rotate-180" : '')} name="arrow-down" /> |
| className={cn(["relative ml-[-4px]", !isLast && "min-w-32 flex-1", isLast && "flex-2"])}> | ||
| <h3 className="mb-2 pl-2 text-typo-caption uppercase"> | ||
| {getFacetTranslation(facetFilter)} | ||
| </h3> | ||
| <div | ||
| className={cn([ |
There was a problem hiding this comment.
remove the extra array
Suggested change
| className={cn([ | |
| className={cn( |
| @@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from "react" | |||
| import { SearchFacetFragment, SearchFiltersInput } from "@/lib/graphql/generated/fbi/graphql" | |||
| import { cn } from "@/lib/helpers/helper.cn" | |||
|
|
|||
| import BadgeButton from "../badge/BadgeButton" | |||
| import Icon from "../icon/Icon" | |||
| @@ -12,7 +12,7 @@ | |||
| }, | |||
| "aliases": { | |||
| "components": "@/components/shadcn", | |||
| "utils": "@/lib/shadcn/utils", | |||
| "utils": "@/lib/helpers", | |||
There was a problem hiding this comment.
I think this should be changed back
Suggested change
| "utils": "@/lib/helpers", | |
| "utils": "@/lib/shadcn/utils", |
| } from "@/components/accordion/Accordion" | ||
| import { SearchFacetFragment, SearchFiltersInput } from "@/lib/graphql/generated/fbi/graphql" | ||
|
|
||
| import BadgeButton from "../badge/BadgeButton" |
| import { SearchFacetFragment, SearchFiltersInput } from "@/lib/graphql/generated/fbi/graphql" | ||
|
|
||
| import BadgeButton from "../badge/BadgeButton" | ||
| import Icon from "../icon/Icon" |
|
|
||
| import BadgeButton from "../badge/BadgeButton" | ||
| import Icon from "../icon/Icon" | ||
| import { Sheet, SheetContent, SheetTrigger } from "../sheet/Sheet" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Link to issue
https://reload.atlassian.net/browse/DDFBRA-127
Description
Introduces mobile filters + some small styling changes.
Screenshot of the result
Additional comments or questions