mirror/Compass
1
0
Fork 0
mirror of https://github.com/CompassConnections/Compass.git synced 2026-01-25 22:28:27 -05:00
Code Issues Packages Projects Releases Wiki Activity

Clean mobile filters

Browse Source
This commit is contained in:
MartinBraquet
2026-01-18 22:34:08 +01:00
parent f68321690a
commit ae977fbde7
10 changed files with 99 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/filters/age-filter.tsx
View File

@@ -28,7 +28,7 @@ export function AgeFilterText(props: {
return (
<span>
<span className={clsx('text-semibold', highlightedClass)}>{t('filter.age.any', 'Any')}</span>{' '}
<span className="hidden sm:inline">{t('filter.age.age', 'age')}</span>
<span className="">{t('filter.age.age', 'age')}</span>
</span>
)
}

92
web/components/filters/desktop-filters.tsx
View File

@@ -14,7 +14,6 @@ import {MyMatchesToggle} from './my-matches-toggle'
import {Profile} from 'common/profiles/profile'
import {FilterFields} from "common/filters";
import {ShortBioToggle} from "web/components/filters/short-bio-toggle";
import {PrefGenderFilter, PrefGenderFilterText} from "web/components/filters/pref-gender-filter";
import DropdownMenu from "web/components/comments/dropdown-menu";
import {KidsLabel, useWantsKidsLabelsWithIcon} from "web/components/filters/wants-kids-filter";
import {hasKidsLabels} from "common/has-kids";
@@ -218,25 +217,25 @@ export function DesktopFilters(props: {
/>
{/* GENDER THEY SEEK */}
<CustomizeableDropdown
buttonContent={(open: boolean) => (
<DropdownButton
content={
<PrefGenderFilterText
pref_gender={filters.pref_gender as Gender[]}
highlightedClass={open ? 'text-primary-500' : undefined}
/>
}
open={open}
/>
)}
dropdownMenuContent={
<Col>
<PrefGenderFilter filters={filters} updateFilter={updateFilter}/>
</Col>
}
popoverClassName="bg-canvas-50"
/>
{/*<CustomizeableDropdown*/}
{/* buttonContent={(open: boolean) => (*/}
{/* <DropdownButton*/}
{/* content={*/}
{/* <PrefGenderFilterText*/}
{/* pref_gender={filters.pref_gender as Gender[]}*/}
{/* highlightedClass={open ? 'text-primary-500' : undefined}*/}
{/* />*/}
{/* }*/}
{/* open={open}*/}
{/* />*/}
{/* )}*/}
{/* dropdownMenuContent={*/}
{/* <Col>*/}
{/* <PrefGenderFilter filters={filters} updateFilter={updateFilter}/>*/}
{/* </Col>*/}
{/* }*/}
{/* popoverClassName="bg-canvas-50"*/}
{/*/>*/}
{includeRelationshipFilters && <>
@@ -413,6 +412,31 @@ export function DesktopFilters(props: {
menuWidth="w-80"
/>
{/* SMOKER */}
<CustomizeableDropdown
buttonContent={(open) => (
<DropdownButton
open={open}
content={
<Row className="items-center gap-1">
<LuCigarette className="h-4 w-4"/>
<SmokerFilterText
is_smoker={filters.is_smoker}
highlightedClass={open ? 'text-primary-500' : undefined}
/>
</Row>
}
/>
)}
dropdownMenuContent={
<Col className="mx-2 mb-4">
<SmokerFilter filters={filters} updateFilter={updateFilter}/>
</Col>
}
popoverClassName="bg-canvas-50"
menuWidth="w-50"
/>
{/* LANGUAGES */}
<CustomizeableDropdown
buttonContent={(open) => (
@@ -442,7 +466,6 @@ export function DesktopFilters(props: {
{/* Interests */}
<CustomizeableDropdown
showNewBadge
newBadgeClassName={"-top-3 -left-2"}
buttonContent={(open) => (
<DropdownButton
@@ -477,7 +500,6 @@ export function DesktopFilters(props: {
{/* Causes */}
<CustomizeableDropdown
showNewBadge
newBadgeClassName={"-top-3 -left-2"}
buttonContent={(open) => (
<DropdownButton
@@ -512,7 +534,6 @@ export function DesktopFilters(props: {
{/* Work */}
<CustomizeableDropdown
showNewBadge
newBadgeClassName={"-top-3 -left-2"}
buttonContent={(open) => (
<DropdownButton
@@ -627,31 +648,6 @@ export function DesktopFilters(props: {
menuWidth="w-[350px] grid-cols-2"
/>
{/* SMOKER */}
<CustomizeableDropdown
buttonContent={(open) => (
<DropdownButton
open={open}
content={
<Row className="items-center gap-1">
<LuCigarette className="h-4 w-4"/>
<SmokerFilterText
is_smoker={filters.is_smoker}
highlightedClass={open ? 'text-primary-500' : undefined}
/>
</Row>
}
/>
)}
dropdownMenuContent={
<Col className="mx-2 mb-4">
<SmokerFilter filters={filters} updateFilter={updateFilter}/>
</Col>
}
popoverClassName="bg-canvas-50"
menuWidth="w-50"
/>
{/* EDUCATION */}
<CustomizeableDropdown
buttonContent={(open: boolean) => (

2
web/components/filters/gender-filter.tsx
View File

@@ -18,7 +18,7 @@ export function GenderFilterText(props: {
return (
<span>
<span className={clsx('text-semibold', highlightedClass)}>{t('filter.gender.any', 'Any')}</span>{' '}
<span className="hidden sm:inline">{t('filter.gender.gender', 'gender')}</span>
<span className="">{t('filter.gender.gender', 'gender')}</span>
</span>
)
}

2
web/components/filters/has-kids-filter.tsx
View File

@@ -28,7 +28,7 @@ export function HasKidsLabel(props: {
}
return (
<Row className="items-center gap-0.5">
<FaChild className="hidden h-4 w-4 sm:inline"/>
<FaChild className="h-4 w-4"/>
<span
className={clsx(highlightedClass, has_kids !== -1 && 'font-semibold')}
>

6
web/components/filters/location-filter.tsx
View File

@@ -26,16 +26,16 @@ export function LocationFilterText(props: {
return (
<span>
<span className={clsx('text-semibold', highlightedClass)}>{t('filter.location.any', 'Any')}</span>
<span className="hidden sm:inline"> {t('filter.location', 'location')}</span>
<span className=""> {t('filter.location', 'location')}</span>
</span>
)
}
return (
<span className="font-semibold">
<span className="hidden sm:inline">
<span className="">
<span className={clsx(highlightedClass)}>{radius}</span> miles
</span>{' '}
<span className="capitalize sm:normal-case">near</span>{' '}
<span className="sm:normal-case">{t('filter.near', 'near')}</span>{' '}
<span className={highlightedClass}>{location.name}</span>
</span>
)

67
web/components/filters/mobile-filters.tsx
View File

@@ -13,7 +13,6 @@ import {Gender} from 'common/gender'
import {DietType, RelationshipType, RomanticType} from 'web/lib/util/convert-types'
import {FilterFields} from "common/filters";
import {ShortBioToggle} from "web/components/filters/short-bio-toggle";
import {PrefGenderFilter, PrefGenderFilterText} from "./pref-gender-filter"
import {KidsLabel, WantsKidsFilter} from "web/components/filters/wants-kids-filter";
import {wantsKidsLabels} from "common/wants-kids";
import {HasKidsFilter, HasKidsLabel} from "./has-kids-filter"
@@ -35,6 +34,14 @@ import {InterestFilter, InterestFilterText} from "web/components/filters/interes
import {OptionTableKey} from "common/profiles/constants";
import {NewBadge} from "web/components/new-badge";
import {useT} from "web/lib/locale";
import {FaUserGroup} from "react-icons/fa6";
import {BsPersonHeart, BsPersonVcard} from "react-icons/bs";
import {FaBriefcase, FaHandsHelping, FaHeart, FaStar} from "react-icons/fa";
import {GiFruitBowl} from "react-icons/gi";
import {MdLanguage, MdLocalBar} from "react-icons/md";
import {LuCigarette, LuGraduationCap} from "react-icons/lu";
import {RiScales3Line} from "react-icons/ri";
import {PiHandsPrayingBold} from "react-icons/pi";
function MobileFilters(props: {
filters: Partial<FilterFields>
@@ -106,12 +113,13 @@ function MobileFilters(props: {
/>
</Col>
{/* RELATIONSHIP STYLE */}
{/* CONNECTION */}
<MobileFilterSection
title={t('profile.seeking', "Seeking")}
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.pref_relation_styles)}
icon={<FaUserGroup className="h-4 w-4"/>}
selection={
<RelationshipFilterText
relationship={filters.pref_relation_styles as RelationshipType[]}
@@ -132,9 +140,11 @@ function MobileFilters(props: {
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.relationship_status || undefined)}
icon={<BsPersonHeart className="h-4 w-4"/>}
selection={
<RelationshipStatusFilterText
options={filters.relationship_status as string[]}
defaultLabel={t('filter.relationship_status.any', 'Any relationship status')}
highlightedClass={
hasAny(filters.relationship_status || undefined)
? 'text-primary-600'
@@ -210,22 +220,22 @@ function MobileFilters(props: {
</MobileFilterSection>
{/* PREFERRED GENDER */}
<MobileFilterSection
title={t('filter.gender.they_seek', 'Gender they seek')}
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.pref_gender)}
selection={
<PrefGenderFilterText
pref_gender={filters.pref_gender as Gender[]}
highlightedClass={
hasAny(filters.pref_gender) ? 'text-primary-600' : 'text-ink-900'
}
/>
}
>
<PrefGenderFilter filters={filters} updateFilter={updateFilter}/>
</MobileFilterSection>
{/*<MobileFilterSection*/}
{/* title={t('filter.gender.they_seek', 'Gender they seek')}*/}
{/* openFilter={openFilter}*/}
{/* setOpenFilter={setOpenFilter}*/}
{/* isActive={hasAny(filters.pref_gender)}*/}
{/* selection={*/}
{/* <PrefGenderFilterText*/}
{/* pref_gender={filters.pref_gender as Gender[]}*/}
{/* highlightedClass={*/}
{/* hasAny(filters.pref_gender) ? 'text-primary-600' : 'text-ink-900'*/}
{/* }*/}
{/* />*/}
{/* }*/}
{/*>*/}
{/* <PrefGenderFilter filters={filters} updateFilter={updateFilter}/>*/}
{/*</MobileFilterSection>*/}
{includeRelationshipFilters && <>
@@ -235,6 +245,7 @@ function MobileFilters(props: {
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.pref_romantic_styles || undefined)}
icon={<FaHeart className="h-4 w-4"/>}
selection={
<RomanticFilterText
relationship={filters.pref_romantic_styles as RomanticType[]}
@@ -305,6 +316,7 @@ function MobileFilters(props: {
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.diet || undefined)}
icon={<GiFruitBowl className="h-4 w-4"/>}
selection={
<DietFilterText
options={filters.diet as DietType[]}
@@ -328,6 +340,7 @@ function MobileFilters(props: {
const [noMin, noMax] = getNoMinMaxDrinks(filters.drinks_min, filters.drinks_max);
return !noMin || !noMax
})()}
icon={<MdLocalBar className="h-4 w-4"/>}
selection={
<DrinksFilterText
drinks_min={filters.drinks_min}
@@ -348,6 +361,7 @@ function MobileFilters(props: {
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={filters.is_smoker != null}
icon={<LuCigarette className="h-4 w-4"/>}
selection={
<SmokerFilterText
is_smoker={filters.is_smoker}
@@ -366,6 +380,7 @@ function MobileFilters(props: {
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.languages || undefined)}
icon={<MdLanguage className="h-4 w-4"/>}
selection={
<LanguageFilterText
options={filters.languages as string[]}
@@ -382,12 +397,12 @@ function MobileFilters(props: {
{/* INTERESTS */}
<MobileFilterSection
showNewBadge
newBadgeClassName={"-top-0 -left-0"}
title={t("profile.optional.interests", "Interests")}
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.interests || undefined)}
icon={<FaStar className="h-4 w-4"/>}
selection={
<InterestFilterText
options={filters.interests as string[]}
@@ -410,12 +425,12 @@ function MobileFilters(props: {
{/* CAUSES */}
<MobileFilterSection
showNewBadge
newBadgeClassName={"-top-0 -left-0"}
title={t("profile.optional.causes", "Causes")}
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.causes || undefined)}
icon={<FaHandsHelping className="h-4 w-4"/>}
selection={
<InterestFilterText
options={filters.causes as string[]}
@@ -438,12 +453,12 @@ function MobileFilters(props: {
{/* WORK */}
<MobileFilterSection
showNewBadge
newBadgeClassName={"-top-0 -left-0"}
title={t("profile.optional.work", "Work")}
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.work || undefined)}
icon={<FaBriefcase className="h-4 w-4"/>}
selection={
<InterestFilterText
options={filters.work as string[]}
@@ -470,6 +485,7 @@ function MobileFilters(props: {
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.political_beliefs || undefined)}
icon={<RiScales3Line className="h-4 w-4"/>}
selection={
<PoliticalFilterText
options={filters.political_beliefs as string[]}
@@ -490,6 +506,7 @@ function MobileFilters(props: {
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.religion || undefined)}
icon={<PiHandsPrayingBold className="h-4 w-4"/>}
selection={
<ReligionFilterText
options={filters.religion as string[]}
@@ -508,12 +525,14 @@ function MobileFilters(props: {
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.mbti)}
icon={<BsPersonVcard className="h-4 w-4"/>}
selection={
<MbtiFilterText
options={filters.mbti as string[]}
highlightedClass={
hasAny(filters.mbti) ? 'text-primary-600' : 'text-ink-900'
}
defaultLabel={t('filter.any_mbti', 'Any MBTI')}
/>
}
>
@@ -526,6 +545,7 @@ function MobileFilters(props: {
openFilter={openFilter}
setOpenFilter={setOpenFilter}
isActive={hasAny(filters.education_levels)}
icon={<LuGraduationCap className="h-4 w-4"/>}
selection={
<EducationFilterText
options={filters.education_levels as string[]}
@@ -585,10 +605,11 @@ export function MobileFilterSection(props: {
>
{showNewBadge && <NewBadge classes={newBadgeClassName}/>}
<Row
className={clsx('items-center gap-0.5', isActive && 'font-semibold')}
className={clsx('items-center gap-2', isActive && 'font-semibold')}
>
{icon}
{title}: {selection}
{selection}
{/*{title}: {selection}*/}
</Row>
<div className="text-ink-900">
{isOpen ? (

4
web/components/filters/pref-gender-filter.tsx
View File

@@ -17,7 +17,7 @@ export function PrefGenderFilterText(props: {
if (!pref_gender || pref_gender.length < 1) {
return (
<span>
<span className="hidden sm:inline">{t('filter.gender.they_seek', 'Gender they seek')}: </span>
<span className="">{t('filter.gender.they_seek', 'Gender they seek')}: </span>
<span
className={clsx(
'text-semibold capitalize sm:normal-case',
@@ -31,7 +31,7 @@ export function PrefGenderFilterText(props: {
}
return (
<Row className="items-center gap-0.5 font-semibold">
<span className="hidden sm:inline">{t('filter.gender.they_seek', 'Gender they seek')}: </span>
<span className="">{t('filter.gender.they_seek', 'Gender they seek')}: </span>
{pref_gender.map((gender) => {
return (
<GenderIcon

2
web/components/filters/wants-kids-filter.tsx
View File

@@ -66,7 +66,7 @@ export function KidsLabel(props: {
return (
<Row className="items-center gap-0.5">
<WantsKidsIcon strength={strength} className={clsx('hidden sm:inline')}/>
<WantsKidsIcon strength={strength} className={clsx('')}/>
<span
className={clsx(
strength != wantsKidsLabelsWithIcon.no_preference.strength && 'font-semibold',

1
web/messages/de.json
View File

@@ -207,6 +207,7 @@
"filter.gender.genders": "Geschlechter",
"filter.gender.they_seek": "Geschlecht, das sie suchen",
"filter.location": "Standort",
"filter.near": "in der Nähe von",
"filter.location.any": "Jeder",
"filter.location.distance_miles": "Entfernung (Meilen)",
"filter.location.search_city": "Stadt suchen...",

1
web/messages/fr.json
View File

@@ -207,6 +207,7 @@
"filter.gender.genders": "genres",
"filter.gender.they_seek": "Genre qu'ils recherchent",
"filter.location": "localisation",
"filter.near": "près de",
"filter.location.any": "Toute",
"filter.location.distance_miles": "Distance (miles)",
"filter.location.search_city": "Rechercher une ville...",