Skip to content

Commit

Permalink
updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@scwambach
scwambach committed Jan 16, 2025
1 parent d0dddbe commit 4e937b9
Show file tree
Hide file tree
Showing 8 changed files with 110 additions and 67 deletions.
2 changes: 1 addition & 1 deletion src/app/training/search/components/ResultsHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ export const ResultsHeader = () => {
);
}}
>
Filters
{`${toggle ? "Hide" : "Show"} Filters`}
</Button>

<div className="sortBy">
Expand Down
4 changes: 2 additions & 2 deletions src/app/training/search/components/controls/CipSoc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const CipSoc = () => {
<FormInput
type="text"
inputId="cip"
label="Filter by CIP Code"
label="Filter by CIP code"
defaultValue={extractParam("cipCode", results) || undefined}
placeholder="i.e. 011102"
onChange={(e) => {
Expand All @@ -34,7 +34,7 @@ export const CipSoc = () => {
<FormInput
type="text"
inputId="soc"
label="Filter by SOC Code"
label="Filter by SOC code"
defaultValue={extractParam("socCode", results) || undefined}
placeholder="i.e. 43-9041"
onChange={(e) => {
Expand Down
2 changes: 1 addition & 1 deletion src/app/training/search/components/controls/ClearAll.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const ClearAll = () => {
type="button"
defaultStyle="secondary"
outlined
label="Clear Filters"
label="Clear filters"
onClick={() => {
window.location.href = `/training/search?q=${extractParam(
"q",
Expand Down
2 changes: 1 addition & 1 deletion src/app/training/search/components/controls/Cost.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const Cost = () => {
<FormInput
type="number"
inputId="maxCost"
label="Max Cost"
label="Max cost"
defaultValue={extractParam("maxCost", results) || undefined}
onChange={(e) => {
updateSearchParamsNavigate(
Expand Down
2 changes: 1 addition & 1 deletion src/app/training/search/components/controls/County.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const County = () => {
<FormInput
type="select"
inputId="county"
label="Filter by County"
label="Filter by county"
defaultValue={extractParam("county", results) || undefined}
options={[
{ key: "", value: "" },
Expand Down
102 changes: 76 additions & 26 deletions src/styles/blocks/_searchFilter.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,38 +2,40 @@

.searchFilter {
background-color: s.$secondary-lighter;
overflow: auto;
-webkit-overflow-scrolling: touch;
display: none;
border-radius: s.$size-8;
width: 0;
display: block;
transition-duration: s.$transition-speed;

@media screen and (min-width: (s.$tablet-md)) {
position: sticky;
top: 0;
max-height: 100svh;
opacity: 0;
}

@media screen and (max-width: (s.$tablet-md - 1)) {
width: 100%;
display: block;
position: fixed;
left: 0;
max-height: 90svh;
z-index: 10;
bottom: -110svh;
transition-duration: s.$transition-speed;
}

.overlay {
transition-duration: s.$transition-speed;
display: block;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}

&.open {
bottom: 0;
display: block;

@media screen and (min-width: (s.$tablet)) {
width: s.$size-320;
margin-right: s.$size-24;
opacity: 1;
}

@media screen and (max-width: (s.$tablet-md - 1)) {
width: 100%;
}

.overlay {
@media screen and (max-width: (s.$tablet-md - 1)) {
Expand All @@ -50,6 +52,37 @@
}
}
}

> form {
@media screen and (min-width: (s.$tablet-md)) {
opacity: 1;
transition-delay: s.$transition-speed / 2;
}
}
}

> form {
white-space: nowrap;

@media screen and (min-width: (s.$tablet-md)) {
transition-duration: s.$transition-speed;
min-width: s.$size-320;
opacity: 0;
}
}

.overlay {
transition-duration: s.$transition-speed;
display: block;
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
pointer-events: none;
opacity: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}

.controls {
Expand All @@ -62,6 +95,13 @@
@media screen and (max-width: (s.$tablet-md - 1)) {
padding-bottom: s.$size-120;
}

@media screen and (min-width: (s.$tablet-md)) {
overflow: auto;
-webkit-overflow-scrolling: touch;
height: calc(100svh - s.$size-64);
padding-bottom: s.$size-112;
}
}

.heading {
Expand All @@ -72,6 +112,10 @@
padding: s.$size-16;
position: relative;

@media screen and (min-width: (s.$tablet-md)) {
border-radius: s.$size-8 s.$size-8 0 0;
}

@media screen and (max-width: (s.$tablet-md - 1)) {
position: sticky;
top: 0;
Expand Down Expand Up @@ -138,6 +182,19 @@
align-items: center;
justify-content: center;
transition-duration: s.$transition-speed;
left: 0;
width: 100%;

@media screen and (min-width: (s.$tablet-md)) {
bottom: 0;
border-radius: 0 0 s.$size-8 s.$size-8;
position: absolute;
}

@media screen and (max-width: (s.$tablet-md - 1)) {
bottom: -100px;
position: fixed;
}

button {
width: s.$size-144;
Expand All @@ -148,13 +205,6 @@
}
}
}

@media screen and (max-width: (s.$tablet-md - 1)) {
position: fixed;
bottom: -100px;
left: 0;
width: 100%;
}
}
}
}
49 changes: 25 additions & 24 deletions src/styles/modules/_resultCard.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
@use "../settings" as settings;
@use "../settings" as s;

.resultCard {
border-radius: settings.$border-radius-5;
border: settings.$size-1 solid settings.$base-lighter;
padding: settings.$size-24;
border-radius: s.$border-radius-5;
border: s.$size-1 solid s.$base-lighter;
padding: s.$size-24;
display: flex;
gap: settings.$size-14;
gap: s.$size-14;
flex-direction: column;
color: settings.$ink;
transition-duration: settings.$transition-speed;
background-color: s.$white;
color: s.$ink;
transition-duration: s.$transition-speed;
transition-timing-function: ease-in-out;

&:hover {
@media screen and (min-width: (settings.$tablet)) {
box-shadow: settings.$shadow-3;
color: settings.$ink;
@media screen and (min-width: (s.$tablet)) {
box-shadow: s.$shadow-3;
color: s.$ink;
}
}

Expand All @@ -31,15 +32,15 @@
.footing {
display: flex;

@media screen and (min-width: (settings.$mobile-md)) {
@media screen and (min-width: (s.$mobile-md)) {
align-items: center;
justify-content: space-between;
}

@media screen and (max-width: (settings.$mobile-md - 1)) {
@media screen and (max-width: (s.$mobile-md - 1)) {
flex-direction: column;
align-items: flex-start;
gap: settings.$size-16;
gap: s.$size-16;
}

.formField {
Expand All @@ -50,7 +51,7 @@
}

.footing {
margin-top: settings.$size-16;
margin-top: s.$size-16;

&.noLabel {
justify-content: flex-end;
Expand All @@ -60,17 +61,17 @@
.heading {
flex-direction: row;
justify-content: space-between;
gap: settings.$size-14;
gap: s.$size-14;

.heading-tag {
color: settings.$primary-vivid;
color: s.$primary-vivid;
margin: 0;
}
}

.footing {
.usa-checkbox {
@media screen and (max-width: (settings.$tablet - 1)) {
@media screen and (max-width: (s.$tablet - 1)) {
justify-content: flex-end;
display: flex;
}
Expand All @@ -79,41 +80,41 @@

.heading {
.heading-tag {
font-size: settings.$size-18;
font-size: s.$size-18;
}

> span {
font-size: settings.$size-20;
font-size: s.$size-20;
font-weight: bold;
}
}

.information {
display: flex;
flex-direction: column;
gap: settings.$size-8;
gap: s.$size-8;

p {
display: flex;
align-items: center;
gap: settings.$size-8;
gap: s.$size-8;

&.cipCode {
display: block;

b {
display: block;
width: 100%;
padding-left: settings.$size-24;
padding-left: s.$size-24;
}
}

svg {
width: settings.$size-16;
width: s.$size-16;
}

span {
width: calc(100% - settings.$size-16);
width: calc(100% - s.$size-16);
}

&.description {
Expand Down
14 changes: 3 additions & 11 deletions src/styles/pages/_search.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
.inner {
display: flex;
align-items: flex-start;
gap: s.$size-32;
padding: 0 0 s.$size-48;

@media screen and (max-width: (s.$tablet-md - 1)) {
Expand Down Expand Up @@ -127,7 +126,7 @@

.sortBy {
display: flex;
gap: s.$size-20;
gap: s.$size-16;
width: 100%;

@media screen and (min-width: (s.$tablet-md)) {
Expand All @@ -142,12 +141,6 @@
}

aside {
width: 100%;

@media screen and (min-width: (s.$tablet-md)) {
width: s.$size-400;
}

input,
select {
max-width: none;
Expand All @@ -161,7 +154,8 @@
width: 100%;

@media screen and (min-width: (s.$tablet-md)) {
width: calc(100% - s.$size-400);
transition-duration: s.$transition-speed;
width: calc(100% - (s.$size-320));

&.wide {
width: 100%;
Expand All @@ -175,8 +169,6 @@

.usa-button.primary.usa-button--outline.editSearch {
justify-content: center;
outline-color: s.$disabled-dark;
color: s.$disabled-dark;

@media screen and (max-width: (s.$tablet-md - 1)) {
display: none !important;
Expand Down

0 comments on commit 4e937b9

Please sign in to comment.