Fix search filters

* Update styles for all search filters * Make search filters function better on mobile * Small refactor on individual filter bar files to extract individual search filter rendering into variables
2023-06-30 12:25:33 -07:00 · 2023-06-30 12:25:33 -07:00 · c26752d8c1
commit c26752d8c1
parent 3434e7042c
12 changed files with 386 additions and 366 deletions
--- a/components/character/CharacterSearchFilterBar/index.module.scss
+++ b/components/character/CharacterSearchFilterBar/index.module.scss
@ -0,0 +1,11 @@
+.filterBar {
+  display: flex;
+  gap: $unit;
+  padding: $unit-half $unit-3x;
+
+  @include breakpoint(phone) {
+    display: grid;
+    gap: $unit;
+    grid-template-columns: 1fr 1fr;
+  }
+}
--- a/components/character/CharacterSearchFilterBar/index.tsx
+++ b/components/character/CharacterSearchFilterBar/index.tsx
@ -144,16 +144,12 @@ const CharacterSearchFilterBar = (props: Props) => {
    return (
      <SearchFilter
        label={`${t('filters.labels.proficiency')} ${proficiency}`}
+        display="grid"
        numSelected={numSelected}
        open={open}
        onOpenChange={onOpenChange}
      >
-        <DropdownMenu.Label className="Label">{`${t(
-          'filters.labels.proficiency'
-        )} ${proficiency}`}</DropdownMenu.Label>
-        <section>
-          <DropdownMenu.Group className="Group">
-            {Array.from(Array(proficiencies.length / 2)).map((x, i) => {
+        {Array.from(Array(proficiencies.length)).map((x, i) => {
          const checked =
            proficiency == 1
              ? proficiency1State[proficiencies[i]].checked
@ -170,43 +166,14 @@ const CharacterSearchFilterBar = (props: Props) => {
            </SearchFilterCheckboxItem>
          )
        })}
-          </DropdownMenu.Group>
-          <DropdownMenu.Group className="Group">
-            {Array.from(Array(proficiencies.length / 2)).map((x, i) => {
-              const checked =
-                proficiency == 1
-                  ? proficiency1State[
-                      proficiencies[i + proficiencies.length / 2]
-                    ].checked
-                  : proficiency2State[
-                      proficiencies[i + proficiencies.length / 2]
-                    ].checked
-
-              return (
-                <SearchFilterCheckboxItem
-                  key={proficiencies[i + proficiencies.length / 2]}
-                  onCheckedChange={onCheckedChange}
-                  checked={checked}
-                  valueKey={proficiencies[i + proficiencies.length / 2]}
-                >
-                  {t(
-                    `proficiencies.${
-                      proficiencies[i + proficiencies.length / 2]
-                    }`
-                  )}
-                </SearchFilterCheckboxItem>
-              )
-            })}
-          </DropdownMenu.Group>
-        </section>
      </SearchFilter>
    )
  }

-  return (
-    <div className="SearchFilterBar">
+  const rarityFilter = (
    <SearchFilter
      label={t('filters.labels.rarity')}
+      display="list"
      numSelected={
        Object.values(rarityState)
          .map((x) => x.checked)
@ -215,9 +182,6 @@ const CharacterSearchFilterBar = (props: Props) => {
      open={rarityMenu}
      onOpenChange={rarityMenuOpened}
    >
-        <DropdownMenu.Label className="Label">
-          {t('filters.labels.rarity')}
-        </DropdownMenu.Label>
      {Array.from(Array(rarities.length)).map((x, i) => {
        return (
          <SearchFilterCheckboxItem
@ -231,9 +195,12 @@ const CharacterSearchFilterBar = (props: Props) => {
        )
      })}
    </SearchFilter>
+  )

+  const elementFilter = (
    <SearchFilter
      label={t('filters.labels.element')}
+      display="list"
      numSelected={
        Object.values(elementState)
          .map((x) => x.checked)
@ -242,9 +209,6 @@ const CharacterSearchFilterBar = (props: Props) => {
      open={elementMenu}
      onOpenChange={elementMenuOpened}
    >
-        <DropdownMenu.Label className="Label">
-          {t('filters.labels.element')}
-        </DropdownMenu.Label>
      {Array.from(Array(elements.length)).map((x, i) => {
        return (
          <SearchFilterCheckboxItem
@ -258,7 +222,12 @@ const CharacterSearchFilterBar = (props: Props) => {
        )
      })}
    </SearchFilter>
+  )

+  return (
+    <div className={styles.filterBar}>
+      {rarityFilter}
+      {elementFilter}
      {renderProficiencyFilter(1)}
      {renderProficiencyFilter(2)}
    </div>
--- a/components/job/JobSkillSearchFilterBar/index.module.scss
+++ b/components/job/JobSkillSearchFilterBar/index.module.scss
@ -1,3 +1,9 @@
 .SearchFilterBar .SelectTrigger {
  width: 100%;
 }
+
+.filterBar {
+  display: flex;
+  gap: $unit;
+  padding: $unit-half $unit-3x;
+}
--- a/components/job/JobSkillSearchFilterBar/index.tsx
+++ b/components/job/JobSkillSearchFilterBar/index.tsx
@ -39,10 +39,13 @@ const JobSkillSearchFilterBar = (props: Props) => {
  }, [currentGroup])

  return (
-    <div className="SearchFilterBar">
+    <div className={styles.filterBar}>
      <Select
        value={-1}
-        triggerClass="Bound"
+        trigger={{
+          bound: true,
+          className: 'full',
+        }}
        open={open}
        overlayVisible={false}
        onValueChange={onChange}
--- a/components/search/SearchFilter/index.module.scss
+++ b/components/search/SearchFilter/index.module.scss
@ -1,35 +1,54 @@
-button.DropdownLabel {
+.pill {
  align-items: center;
  background: var(--button-contained-bg);
  border: none;
  border-radius: $unit-2x;
-  color: var(--text-secondary);
+  border: 2px solid transparent;
  display: flex;
  font-size: $font-small;
  gap: $unit-half;
  flex-direction: row;
  justify-content: space-between;
-  padding: $unit ($unit * 1.5) $unit $unit-2x;
-
-  div {
-    align-items: center;
-    display: flex;
-    gap: $unit-half;
-  }
+  padding: $unit ($unit * 1.5);

  &:hover {
    background: var(--button-contained-bg-hover);
-    color: var(--text-primary);
    cursor: pointer;
+
+    .text {
+      color: var(--text-primary);
+    }
+  }
+
+  @include breakpoint(phone) {
+    justify-content: center;
+  }
+
+  .label {
+    justify-content: center;
+    flex: 1;
+
+    @include breakpoint(phone) {
+      &::before {
+        content: '';
+        display: block;
+        width: calc($unit-2x - 1px);
+      }
+    }
+
+    .text {
+      color: var(--text-tertiary);
+      font-weight: $bold;
    }

    .count {
-    color: var(--text-tertiary);
+      color: var(--text-secondary);
      font-weight: $medium;
    }
+  }

-  & > .icon {
-    $diameter: 16px;
+  .icon {
+    $diameter: $unit-2x;
    height: $diameter;
    width: $diameter;

@ -39,16 +58,39 @@ button.DropdownLabel {
      }
    }
  }
+
+  div {
+    align-items: center;
+    display: flex;
+    gap: $unit-half;
+  }
 }

-.Dropdown {
+.dropdown {
  background: var(--button-contained-bg);
+  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: $unit;
-  box-shadow: 0 0 2px rgba(0, 0, 0, 0.18);
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
+  gap: $unit;
  padding: $unit;
-  min-width: 120px;
+  overflow-y: scroll;
+  max-height: 60vh;
+
+  @include breakpoint(phone) {
+    width: calc(100vw - $unit-6x);
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .list {
+    display: flex;
+    flex-direction: column;
+  }

  & > span {
    overflow: hidden;
@ -64,16 +106,4 @@ button.DropdownLabel {
    flex-direction: row;
    gap: $unit;
  }
-
-  .Group {
-    flex: 1 1 0px;
-    flex-direction: column;
-  }
-
-  .Label {
-    color: var(--text-tertiary);
-    font-size: $font-small;
-    margin-bottom: $unit-half;
-    padding: $unit-half 0 $unit $unit-half;
-  }
 }
--- a/components/search/SearchFilter/index.tsx
+++ b/components/search/SearchFilter/index.tsx
@ -1,5 +1,5 @@
 import React from 'react'
-
+import classNames from 'classnames'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'

 import ChevronIcon from '~public/icons/Chevron.svg'
@ -8,26 +8,35 @@ import styles from './index.module.scss'
 interface Props {
  label: string
  open: boolean
+  display: 'grid' | 'list'
  numSelected: number
  onOpenChange: (open: boolean) => void
  children: React.ReactNode
 }

 const SearchFilter = (props: Props) => {
+  const displayClasses = classNames({
+    [styles.grid]: props.display === 'grid',
+    [styles.list]: props.display === 'list',
+  })
+
  return (
    <DropdownMenu.Root open={props.open} onOpenChange={props.onOpenChange}>
-      <DropdownMenu.Trigger className="DropdownLabel">
-        <div>
-          {props.label}
-          <span className="count">{props.numSelected}</span>
+      <DropdownMenu.Trigger className={styles.pill}>
+        <div className={styles.label}>
+          <span className={styles.text}>{props.label}</span>
+          <span className={styles.count}>{props.numSelected}</span>
        </div>
-        <span className="icon">
+        <span className={styles.icon}>
          <ChevronIcon />
        </span>
      </DropdownMenu.Trigger>
-      <DropdownMenu.Content className="Dropdown" sideOffset={4}>
-        {props.children}
-        <DropdownMenu.Arrow />
+      <DropdownMenu.Content
+        className={styles.dropdown}
+        sideOffset={4}
+        collisionPadding={16}
+      >
+        <div className={displayClasses}>{props.children}</div>
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  )
--- a/components/search/SearchFilterCheckboxItem/index.module.scss
+++ b/components/search/SearchFilterCheckboxItem/index.module.scss
@ -1,7 +1,7 @@
-.Item {
+.item {
  align-items: center;
  border-radius: calc($unit / 2);
-  color: var(--text-secondary);
+  color: var(--text-tertiary);
  font-size: $font-regular;
  line-height: 1.2;
  min-width: 100px;
@ -23,7 +23,7 @@
    }
  }

-  .Indicator {
+  .indicator {
    $diameter: 20px;

    display: flex;
--- a/components/search/SearchFilterCheckboxItem/index.tsx
+++ b/components/search/SearchFilterCheckboxItem/index.tsx
@ -23,12 +23,12 @@ const SearchFilterCheckboxItem = (props: Props) => {

  return (
    <DropdownMenu.CheckboxItem
-      className="Item"
+      className={styles.item}
      checked={props.checked || false}
      onCheckedChange={handleCheckedChange}
      onSelect={(event) => event.preventDefault()}
    >
-      <DropdownMenu.ItemIndicator className="Indicator">
+      <DropdownMenu.ItemIndicator className={styles.indicator}>
        <CheckIcon />
      </DropdownMenu.ItemIndicator>
      {props.children}
--- a/components/summon/SummonSearchFilterBar/index.module.scss
+++ b/components/summon/SummonSearchFilterBar/index.module.scss
@ -0,0 +1,11 @@
+.filterBar {
+  display: flex;
+  gap: $unit;
+  padding: $unit-half $unit-3x;
+
+  @include breakpoint(phone) {
+    display: grid;
+    gap: $unit;
+    grid-template-columns: 1fr 1fr;
+  }
+}
--- a/components/summon/SummonSearchFilterBar/index.tsx
+++ b/components/summon/SummonSearchFilterBar/index.tsx
@ -72,10 +72,10 @@ const SummonSearchFilterBar = (props: Props) => {
    sendFilters()
  }, [rarityState, elementState])

-  return (
-    <div className="SearchFilterBar">
+  const rarityFilter = (
    <SearchFilter
      label={t('filters.labels.rarity')}
+      display="list"
      numSelected={
        Object.values(rarityState)
          .map((x) => x.checked)
@ -84,9 +84,6 @@ const SummonSearchFilterBar = (props: Props) => {
      open={rarityMenu}
      onOpenChange={rarityMenuOpened}
    >
-        <DropdownMenu.Label className="Label">
-          {t('filters.labels.rarity')}
-        </DropdownMenu.Label>
      {Array.from(Array(rarities.length)).map((x, i) => {
        return (
          <SearchFilterCheckboxItem
@ -100,9 +97,12 @@ const SummonSearchFilterBar = (props: Props) => {
        )
      })}
    </SearchFilter>
+  )

+  const elementFilter = (
    <SearchFilter
      label={t('filters.labels.element')}
+      display="list"
      numSelected={
        Object.values(elementState)
          .map((x) => x.checked)
@ -111,9 +111,6 @@ const SummonSearchFilterBar = (props: Props) => {
      open={elementMenu}
      onOpenChange={elementMenuOpened}
    >
-        <DropdownMenu.Label className="Label">
-          {t('filters.labels.element')}
-        </DropdownMenu.Label>
      {Array.from(Array(elements.length)).map((x, i) => {
        return (
          <SearchFilterCheckboxItem
@ -127,6 +124,12 @@ const SummonSearchFilterBar = (props: Props) => {
        )
      })}
    </SearchFilter>
+  )
+
+  return (
+    <div className={styles.filterBar}>
+      {rarityFilter}
+      {elementFilter}
    </div>
  )
 }
--- a/components/weapon/WeaponSearchFilterBar/index.module.scss
+++ b/components/weapon/WeaponSearchFilterBar/index.module.scss
@ -0,0 +1,11 @@
+.filterBar {
+  display: flex;
+  gap: $unit;
+  padding: $unit-half $unit-3x;
+
+  @include breakpoint(phone) {
+    display: grid;
+    gap: $unit;
+    grid-template-columns: 1fr 1fr;
+  }
+}
--- a/components/weapon/WeaponSearchFilterBar/index.tsx
+++ b/components/weapon/WeaponSearchFilterBar/index.tsx
@ -40,6 +40,10 @@ const WeaponSearchFilterBar = (props: Props) => {
    emptyWeaponSeriesState
  )

+  useEffect(() => {
+    sendFilters()
+  }, [rarityState, elementState, proficiencyState, seriesState])
+
  function rarityMenuOpened(open: boolean) {
    if (open) {
      setRarityMenu(true)
@ -124,54 +128,49 @@ const WeaponSearchFilterBar = (props: Props) => {
    props.sendFilters(filters)
  }

-  const renderWeaponSeries = () => {
-    const numColumns = 3
+  const renderProficiencies = () => {
    return (
-      <React.Fragment>
-        {Array.from({ length: numColumns }, () => 0).map((x, i) => {
-          return renderWeaponSeriesGroup(i)
-        })}
-      </React.Fragment>
-    )
-  }
-
-  const renderWeaponSeriesGroup = (index: number) => {
-    return (
-      <DropdownMenu.Group className="Group" key={`Group-${index}`}>
-        {weaponSeries
-          .slice(
-            index * Math.ceil(weaponSeries.length / 3),
-            (index + 1) * Math.ceil(weaponSeries.length / 3)
-          )
-          .map((x, i) => {
-            return renderSingleWeaponSeries(x.id, x.slug)
-          })}
-      </DropdownMenu.Group>
-    )
-  }
-
-  const renderSingleWeaponSeries = (id: number, slug: string) => {
+      <>
+        {proficiencies.map((x, i) => {
          return (
            <SearchFilterCheckboxItem
-        key={slug}
-        onCheckedChange={handleSeriesChange}
-        checked={seriesState[slug].checked}
-        valueKey={slug}
+              key={x}
+              onCheckedChange={handleProficiencyChange}
+              checked={proficiencyState[x].checked}
+              valueKey={x}
            >
-        {t(`series.${slug}`)}
+              {t(`proficiencies.${x}`)}
            </SearchFilterCheckboxItem>
          )
+        })}
+      </>
+    )
  }

-  useEffect(() => {
-    sendFilters()
-  }, [rarityState, elementState, proficiencyState, seriesState])
-
+  const renderWeaponSeries = () => {
    return (
-    <div className="SearchFilterBar">
+      <>
+        {weaponSeries.map((x, i) => {
+          return (
+            <SearchFilterCheckboxItem
+              key={x.slug}
+              onCheckedChange={handleSeriesChange}
+              checked={seriesState[x.slug].checked}
+              valueKey={x.slug}
+            >
+              {t(`series.${x.slug}`)}
+            </SearchFilterCheckboxItem>
+          )
+        })}
+      </>
+    )
+  }
+
+  const rarityFilter = (
    <SearchFilter
      label={t('filters.labels.rarity')}
      key="rarity"
+      display="list"
      numSelected={
        Object.values(rarityState)
          .map((x) => x.checked)
@ -180,9 +179,6 @@ const WeaponSearchFilterBar = (props: Props) => {
      open={rarityMenu}
      onOpenChange={rarityMenuOpened}
    >
-        <DropdownMenu.Label className="Label">
-          {t('filters.labels.rarity')}
-        </DropdownMenu.Label>
      {Array.from(Array(rarities.length)).map((x, i) => {
        return (
          <SearchFilterCheckboxItem
@ -196,10 +192,13 @@ const WeaponSearchFilterBar = (props: Props) => {
        )
      })}
    </SearchFilter>
+  )

+  const elementFilter = (
    <SearchFilter
      label={t('filters.labels.element')}
      key="element"
+      display="list"
      numSelected={
        Object.values(elementState)
          .map((x) => x.checked)
@ -208,9 +207,6 @@ const WeaponSearchFilterBar = (props: Props) => {
      open={elementMenu}
      onOpenChange={elementMenuOpened}
    >
-        <DropdownMenu.Label className="Label">
-          {t('filters.labels.element')}
-        </DropdownMenu.Label>
      {Array.from(Array(elements.length)).map((x, i) => {
        return (
          <SearchFilterCheckboxItem
@ -224,10 +220,13 @@ const WeaponSearchFilterBar = (props: Props) => {
        )
      })}
    </SearchFilter>
+  )

+  const proficiencyFilter = (
    <SearchFilter
      label={t('filters.labels.proficiency')}
      key="proficiency"
+      display="grid"
      numSelected={
        Object.values(proficiencyState)
          .map((x) => x.checked)
@ -236,52 +235,15 @@ const WeaponSearchFilterBar = (props: Props) => {
      open={proficiencyMenu}
      onOpenChange={proficiencyMenuOpened}
    >
-        <DropdownMenu.Label className="Label">
-          {t('filters.labels.proficiency')}
-        </DropdownMenu.Label>
-        <section>
-          <DropdownMenu.Group className="Group">
-            {Array.from(Array(proficiencies.length / 2)).map((x, i) => {
-              return (
-                <SearchFilterCheckboxItem
-                  key={proficiencies[i]}
-                  onCheckedChange={handleProficiencyChange}
-                  checked={proficiencyState[proficiencies[i]].checked}
-                  valueKey={proficiencies[i]}
-                >
-                  {t(`proficiencies.${proficiencies[i]}`)}
-                </SearchFilterCheckboxItem>
-              )
-            })}
-          </DropdownMenu.Group>
-          <DropdownMenu.Group className="Group">
-            {Array.from(Array(proficiencies.length / 2)).map((x, i) => {
-              return (
-                <SearchFilterCheckboxItem
-                  key={proficiencies[i + proficiencies.length / 2]}
-                  onCheckedChange={handleProficiencyChange}
-                  checked={
-                    proficiencyState[
-                      proficiencies[i + proficiencies.length / 2]
-                    ].checked
-                  }
-                  valueKey={proficiencies[i + proficiencies.length / 2]}
-                >
-                  {t(
-                    `proficiencies.${
-                      proficiencies[i + proficiencies.length / 2]
-                    }`
-                  )}
-                </SearchFilterCheckboxItem>
-              )
-            })}
-          </DropdownMenu.Group>
-        </section>
+      {renderProficiencies()}
    </SearchFilter>
+  )

+  const seriesFilter = (
    <SearchFilter
      label={t('filters.labels.series')}
      key="series"
+      display="grid"
      numSelected={
        Object.values(seriesState)
          .map((x) => x.checked)
@ -290,12 +252,17 @@ const WeaponSearchFilterBar = (props: Props) => {
      open={seriesMenu}
      onOpenChange={seriesMenuOpened}
    >
-        <DropdownMenu.Label className="Label">
-          {t('filters.labels.series')}
-        </DropdownMenu.Label>
-        <section>{renderWeaponSeries()}</section>
+      {renderWeaponSeries()}
    </SearchFilter>
-    </div>
+  )
+
+  return (
+    <section className={styles.filterBar}>
+      {rarityFilter}
+      {elementFilter}
+      {proficiencyFilter}
+      {seriesFilter}
+    </section>
  )
 }