Skip to content

Commit

Permalink
Merge pull request #81 from CivicActions/filter-side-bar
Browse files Browse the repository at this point in the history 
Reposition filter sidebar
  • Loading branch information
@acabouet
acabouet authored Feb 10, 2025
2 parents 6242cba + e8abae2 commit 5c7a2a9
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 90 deletions.
9 changes: 8 additions & 1 deletion src/frontend/components/view--goal-facets.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { Icon } from "@trussworks/react-uswds";

const ViewGoalFacets = ({handleSearch}) => {
const ViewGoalFacets = ({handleSearch, handleClose}) => {
const [facets, setFacets] = useState(null);
const url = `/api/get-facets`;

Expand Down Expand Up @@ -34,6 +35,12 @@ const ViewGoalFacets = ({handleSearch}) => {

return(
<div>
<div className="grid-row flex-justify">
<h2>Filter by topic</h2>
<button className="close-button" onClick={() => handleClose()} aria-label="Close filters">
<Icon.Close size={3} aria-hidden={true} />
</button>
</div>
{facets.data.termTopics.nodes.map(( facetKey ) => (
<div className="usa-checkbox" key={facetKey.id}>
<input
Expand Down
183 changes: 95 additions & 88 deletions src/frontend/components/view--goal-search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@ export default function GoalsSearchView({ filters, goals, total, description }:
const [filtersOpen, setFiltersOpen] = useState(false);
const [offset, setOffset] = useState(offsetAmount);

const toggleFilters = () => {
setFiltersOpen(!filtersOpen);
};
const handleSearch = useCallback(async (e: FormEvent, facets: Array<string> = []) => {
if (e) {
e.preventDefault();
Expand Down Expand Up @@ -60,100 +63,104 @@ export default function GoalsSearchView({ filters, goals, total, description }:
<p className="font-sans-lg margin-y-0">Smart Strategy. Strong Execution.</p>
<p className="font-sans-lg margin-top-0">Data-Driven Updates on America’s Strategic Goals.</p>
</div>
<div className="grid-row flex-row flex-align-center padding-x-205 padding-y-105 bg-white search-goals--container">
<div className="grid-col flex-auto">
<button className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black search-goals--filter" onClick={() => setFiltersOpen(!filtersOpen)}>
Filter by topic
</button>
</div>
<div className="grid-col flex-fill">
<ViewGoalSearchFulltext
fulltext={fulltext}
setFulltext={setFulltext}
handleSearch={handleSearch}
/>
<div className={`position-relative ${filtersOpen ? "container-open" : ""}`}>
<div className="grid-row flex-row flex-align-center padding-x-205 padding-y-105 bg-white search-goals--container">
<div className={`side-bar position-absolute ${filtersOpen ? "" : "filters-closed"}`}>
<ViewGoalFacets handleSearch={handleSearch} handleClose={toggleFilters} />
</div>
{!filtersOpen && (
<div className="grid-col flex-auto">
<button className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black search-goals--filter" onClick={() => toggleFilters()}>
Filter by topic
</button>
</div>
)}
<div className="grid-col flex-fill">
<ViewGoalSearchFulltext
fulltext={fulltext}
setFulltext={setFulltext}
handleSearch={handleSearch}
/>
</div>
<div className="grid-col flex-auto">
<form className="usa-form">
<label className="usa-sr-only" htmlFor="options">Dropdown label</label>
<select className="search-goals--administration padding-left-105 padding-right-3 padding-y-1 text-bold"
name="options" id="options" value={administration} onChange={e => setAdministration(e.target.value)}>
<option value="53">Trump 47</option>
<option value="55">Trump 45</option>
</select>
</form>
</div>
</div>
<div className="grid-col flex-auto">
<form className="usa-form">
<label className="usa-sr-only" htmlFor="options">Dropdown label</label>
<select className="search-goals--administration padding-left-105 padding-right-3 padding-y-1 text-bold"
name="options" id="options" value={administration} onChange={e => setAdministration(e.target.value)}>
<option value="53">Trump 47</option>
<option value="55">Trump 45</option>
</select>
</form>
<div className="grid-row margin-y-3 padding-x-205 padding-y-105 overflow-hidden">
<ul className="add-list-reset search-goals--toggle hr-lines">
<li>
<button
className={"usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill active"}>
Everything
</button>
</li>
<li>
<button
className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
Plans
</button>
</li>
<li>
<button
className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
Goals
</button>
</li>
<li>
<button
className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
Indicators
</button>
</li>
</ul>
</div>
</div>
<div className="grid-row margin-y-3 padding-x-205 padding-y-105">
<ul className="add-list-reset search-goals--toggle hr-lines">
<li>
<button
className={"usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill active"}>
Everything
</button>
</li>
<li>
<button
className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
Plans
</button>
</li>
<li>
<button
className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
Goals
</button>
</li>
<li>
<button
className="usa-button usa-button--unstyled text-no-underline padding-x-2 padding-y-105 text-bold text-black radius-pill">
Indicators
</button>
</li>
</ul>
</div>

<div className="grid-row">
<div className={`side-bar ${filtersOpen ? "" : "filters-closed"}`}>
<ViewGoalFacets handleSearch={handleSearch} />
</div>
<div className="content-area">
{displayGoals?.length ? (
<ResponsiveMasonry
columnsCountBreakPoints={masonryBP}
gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}
>
<Masonry>
{displayGoals.slice(0, offset).map((goal) => (
isNodeGoalProps(goal) ? (
<NodeGoalCard key={goal.id} goal={goal} />
) : (
<NodePlanCard key={goal.id} goal={goal} />
)
))}
</Masonry>
</ResponsiveMasonry>
<div className="grid-row">
<div className="content-area">
{displayGoals?.length ? (
<ResponsiveMasonry
columnsCountBreakPoints={masonryBP}
gutterBreakpoints={{350: "12px", 750: "16px", 900: "24px"}}
>
<Masonry>
{displayGoals.slice(0, offset).map((goal) => (
isNodeGoalProps(goal) ? (
<NodeGoalCard key={goal.id} goal={goal} />
) : (
<NodePlanCard key={goal.id} goal={goal} />
)
))}
</Masonry>
</ResponsiveMasonry>

) : (
<div className="usa-alert usa-alert--warning usa-alert--slim">
<div className="usa-alert__body">
<p className="usa-alert__text">
No matching goals.
</p>
) : (
<div className="usa-alert usa-alert--warning usa-alert--slim">
<div className="usa-alert__body">
<p className="usa-alert__text">
No matching goals.
</p>
</div>
</div>
</div>
)}
)}

<div className="grid-row flex-justify-center margin-bottom-205">
{offset < totalResults &&
<Button
type="button"
onClick={() => setOffset(offset + offsetAmount)}
>
Show more
</Button>
}
</div>
<div className="grid-row flex-justify-center margin-bottom-205">
{offset < totalResults &&
<Button
type="button"
onClick={() => setOffset(offset + offsetAmount)}
>
Show more
</Button>
}
</div>
</div>
</div>
</div>
</div>
Expand Down
17 changes: 16 additions & 1 deletion src/frontend/styles/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,27 @@ $goals-gray: rgba(202, 204, 216, 1);
margin-bottom: 0 !important;
}

.container-open {
padding-left: 394px;
}

.side-bar {
background-color: white;
min-height: 100%;
width: 394px;
max-width: 394px;
padding: 24px;
padding: 0 24px 24px;
border-right: 1px solid $goals-gray;
position: absolute;
top: 0;
left: 0;
}

.close-button {
appearance: none;
border: 0px;
cursor: pointer;
background: transparent;
}

.filters-closed {
Expand Down

0 comments on commit 5c7a2a9

Please sign in to comment.