Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filter toast alerts #745

Merged
merged 30 commits into from
Apr 12, 2023
Merged
Changes from 1 commit
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
f97e3b9
add react-select package
austensen Apr 5, 2023
5665f10
add react-relect (wip)
austensen Apr 6, 2023
623bb31
add back placeholder styles
austensen Apr 6, 2023
819cef2
separated selected values working
austensen Apr 6, 2023
62a5ae5
add more/less selections
austensen Apr 7, 2023
d6f2549
custom close icon for selected values
austensen Apr 7, 2023
01c44c4
replace old multiselect, new functional, styled for desktop
austensen Apr 7, 2023
e5ad5f2
fix multiselect error placement and input border
austensen Apr 7, 2023
d864725
fix info-alert styles
austensen Apr 7, 2023
f6ce0fa
multiselect mobile styles, start refactoring filter styles
austensen Apr 8, 2023
3608053
separate out MinMaxSelect component
austensen Apr 8, 2023
e160550
separate out MinMaxSelect styles
austensen Apr 8, 2023
909a533
fix up alert styles for no-close, align apply buttons
austensen Apr 8, 2023
c59cf10
finish styles refactor, fix multiselect apply move
austensen Apr 8, 2023
05cee1a
fix primary button letter spacing (from #738)
austensen Apr 8, 2023
ff20821
Merge 'filters' into multiselect-screen-reader
austensen Apr 8, 2023
b4a563f
reduce font weight for table body (except firefox)
austensen Apr 9, 2023
04c10c2
remove old styles mistakenly adding in 'filters' merge
austensen Apr 9, 2023
0176fdb
fix min-max label font styles & "to" -> "and"
austensen Apr 9, 2023
752f464
delete old multiselect styles file
austensen Apr 9, 2023
5afdd2c
"Zip Code" (fix capitalization)
austensen Apr 9, 2023
57bf5ca
adjust down firefox font-weight in minmax- & multi-select components
austensen Apr 9, 2023
623503d
fix multiselect filename
austensen Apr 9, 2023
cfc797f
adjust desktop filter dropdowns for scrollbars on windows
austensen Apr 10, 2023
6715daa
add aria labels for multiselect buttons & description on input
austensen Apr 10, 2023
ee37552
change placement of filter result alerts (formerly "toasts")
austensen Apr 10, 2023
bd05d3a
only render filter alert row if there are alerts to show
austensen Apr 10, 2023
8a9ca00
align alert text left, drop unused import
austensen Apr 10, 2023
8b9db7d
Merge branch 'filters' into filter-toast-alerts
austensen Apr 11, 2023
99c1eaa
Merge branch 'filters' into filter-toast-alerts
austensen Apr 12, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix min-max label font styles & "to" -> "and"
  • Loading branch information
austensen committed Apr 9, 2023
commit 0176fdbc4ccdd0cc9fbf87a565fad5bde0a097ea
4 changes: 3 additions & 1 deletion client/src/components/MinMaxSelect.tsx
Original file line number Diff line number Diff line change
@@ -50,7 +50,9 @@ function MinMaxSelect(props: {
onFocus={onFocusInput}
className={classnames("min-input", { hasError: minMaxErrors[0] })}
/>
<Trans>to</Trans>
<span>
<Trans>and</Trans>
</span>
<input
id={`${id || "minmax-select"}_max-input`}
type="number"
11 changes: 5 additions & 6 deletions client/src/styles/_minmaxselect.scss
Original file line number Diff line number Diff line change
@@ -7,17 +7,15 @@
flex-direction: column;
padding: 1.2rem;
gap: 1.2rem;
input {
font-size: 1.6rem;
}
font-weight: 600;
.label-input-container {
display: flex;
flex-direction: column;
gap: 0.4rem;
color: $justfix-grey-700;
font-size: 1.2rem;
.labels-container {
display: flex;
color: $justfix-grey-600;
font-size: 1.2rem;
label:first-child {
margin-right: auto;
}
@@ -26,9 +24,10 @@
display: flex;
gap: 1rem;
align-items: center;
color: $justfix-grey-600;
input {
background-color: $justfix-white;
color: $justfix-black;
font-size: 1.4rem;
width: 4.4rem;
height: 4.4rem;
border: 0.1rem solid $justfix-grey-600;