publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 01:54:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

update style of side panel categories if supported

Browse source 
- if the browser has ":has" support, the new category styles will be applied
- if not, the older style will remain in place
This commit is contained in:
Vim USDS 2022-09-08 23:14:34 -07:00
parent 825361ab1c
commit 2bfa7d454f
7 changed files with 81 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
client/src/components/Category/Category.module.scss
View file

@ -7,4 +7,13 @@
.category {
flex-basis: 80%;
}
}
}
.disCategoryContainer {
display: flex;
justify-content: space-between;
.category {
flex-basis: 80%;
}
}

2
client/src/components/Category/Category.module.scss.d.ts vendored
View file

@ -2,7 +2,7 @@ declare namespace CategoryNamespace {
export interface ICategoryScss {
categoryContainer: string;
category:string;
disadvantageDot: string;
disCategoryContainer: string;
}
}

27
client/src/components/Category/Category.tsx
View file

@ -8,8 +8,32 @@ interface ICategory {
isDisadvantaged: boolean | null;
}
/**
* This component controls the Categories on the side panel.
*
* The category will be styled differently differently depending on
* if the category is disadvantaged or not. The JSX in the return
* statement is identical however in the global CSS file, we
* override the disadvantaged case with a psuedo-selector (:has) that
* is new. In order to fallback gracefully for browsers that do
* not yet support the ":has" psuedo selector, this redundant JSX
* will allow the disadvantaged case show the older category styling
* while browsers that do support the ":has" psuedo selector will
* render the newer category style.
*
* @param {string} name
* @param {boolean} isDisadvagtaged
* @return {JSX.Element}
*/
const Category = ({name, isDisadvantaged}:ICategory) => {
return (
return isDisadvantaged ? (
<div className={styles.disCategoryContainer}>
<div className={styles.category}>
{name}
</div>
<DisadvantageDot isDisadvantaged={isDisadvantaged}/>
</div>
) : (
<div className={styles.categoryContainer}>
<div className={styles.category}>
{name}
@ -18,5 +42,4 @@ const Category = ({name, isDisadvantaged}:ICategory) => {
</div>
);
};
export default Category;

4
client/src/components/utils.scss
View file

@ -8,8 +8,8 @@
//Styles associated with the side panel
$sidePanelBorderColor: #f2f2f2;
$sidePanelBorder: 2px solid $sidePanelBorderColor;
$mobileBreakpoint: 400px;
$featureSelectBorderColor: #00bde3;
$mobileBreakpoint: 400px; // Todo replace with USWDS breakpoint
$additionalCardsBGColor: #FAFAFA;
$sidePanelLabelFontColor: #171716;

1
client/src/images/sidePanelIcons/accordion-minus.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13H5v-2h14v2z" fill="white"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 168 B

1
client/src/images/sidePanelIcons/accordion-plus.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" fill="white"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 186 B

71
client/src/styles/global.scss
View file

@ -18,25 +18,32 @@ There are 3 things that should be included in this file:
// 3. Include or point to your project's custom Sass
/*
Instead of having a separate file for these styles, all styles are being placed here.
- Global styles
- Layout styles
-- Main content styles
-- Footer styles
- Component styles
-- Map styles
-- Demographics styles
-- Public Event styles
-- About styles
-- Summary box
Ideally, this file should only hold styles for when we need to override the USWDS component
or the Trusswork component. J40 component styles should be contained in it's own component styles.
- GLOBAL STYLES
- MAIN CONTENT STYLES
- FOOTER STYLES
- MAP STYLES
- ACCORDION STYLES
- DEMOGRAPHICS STYLES
- PUBLIC EVENT STYLES
- ABOUT CARD STYLES
- SUMMARY BOX STYLES
*/
/***************** GLOBAL STYLES **************************************************************/
/*
******************************
* GLOBAL STYLES
******************************
*/
$primary-color: #112f4e; // Used for header font color - selection color is #005EA2
$j40-blue-background-color: #e7f2f5; // Hex value of 'blue-cool-5'
$disadvantaged-color-side-panel: #1a4480;
// The j40-element mixin is used to create any font element. E.g. <h1>, <p> tags, etc.
// Arguments to the mixins must be tokens from USWDS
@ -97,12 +104,6 @@ p.flush {
@include j40-element('lg', 2, 'bold', 0 );
}
/***************** LAYOUT STYLES **************************************************************
This section will outline styles for components that are on each page. These
components include:
- main content styles
- footer styles
/*
@ -184,14 +185,6 @@ li[class*='datasetCard-module'] .usa-link--external::after {
}
/***************** COMPONENT STYLES **************************************************************
This section will outline styles that are component specific
- map
- timeline
- about
/*
******************************
* MAP STYLES
@ -359,16 +352,34 @@ Beacon - the beacon's color (*-location-dot) and proximity animation (::before),
}
.usa-accordion__content {
padding-bottom: 0;
}
//As per Mikel Maron's (MapBox advocate) suggestion to use svg data URI override:
a.mapboxgl-ctrl-logo {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='88' height='23' viewBox='0 0 88 23' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill-rule='evenodd'%3E %3Cdefs%3E %3Cpath id='logo' d='M11.5 2.25c5.105 0 9.25 4.145 9.25 9.25s-4.145 9.25-9.25 9.25-9.25-4.145-9.25-9.25 4.145-9.25 9.25-9.25zM6.997 15.983c-.051-.338-.828-5.802 2.233-8.873a4.395 4.395 0 013.13-1.28c1.27 0 2.49.51 3.39 1.42.91.9 1.42 2.12 1.42 3.39 0 1.18-.449 2.301-1.28 3.13C12.72 16.93 7 16 7 16l-.003-.017zM15.3 10.5l-2 .8-.8 2-.8-2-2-.8 2-.8.8-2 .8 2 2 .8z'/%3E %3Cpath id='text' d='M50.63 8c.13 0 .23.1.23.23V9c.7-.76 1.7-1.18 2.73-1.18 2.17 0 3.95 1.85 3.95 4.17s-1.77 4.19-3.94 4.19c-1.04 0-2.03-.43-2.74-1.18v3.77c0 .13-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V8.23c0-.12.1-.23.23-.23h1.4zm-3.86.01c.01 0 .01 0 .01-.01.13 0 .22.1.22.22v7.55c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V15c-.7.76-1.69 1.19-2.73 1.19-2.17 0-3.94-1.87-3.94-4.19 0-2.32 1.77-4.19 3.94-4.19 1.03 0 2.02.43 2.73 1.18v-.75c0-.12.1-.23.23-.23h1.4zm26.375-.19a4.24 4.24 0 00-4.16 3.29c-.13.59-.13 1.19 0 1.77a4.233 4.233 0 004.17 3.3c2.35 0 4.26-1.87 4.26-4.19 0-2.32-1.9-4.17-4.27-4.17zM60.63 5c.13 0 .23.1.23.23v3.76c.7-.76 1.7-1.18 2.73-1.18 1.88 0 3.45 1.4 3.84 3.28.13.59.13 1.2 0 1.8-.39 1.88-1.96 3.29-3.84 3.29-1.03 0-2.02-.43-2.73-1.18v.77c0 .12-.1.23-.23.23h-1.4c-.13 0-.23-.1-.23-.23V5.23c0-.12.1-.23.23-.23h1.4zm-34 11h-1.4c-.13 0-.23-.11-.23-.23V8.22c.01-.13.1-.22.23-.22h1.4c.13 0 .22.11.23.22v.68c.5-.68 1.3-1.09 2.16-1.1h.03c1.09 0 2.09.6 2.6 1.55.45-.95 1.4-1.55 2.44-1.56 1.62 0 2.93 1.25 2.9 2.78l.03 5.2c0 .13-.1.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.8 0-1.46.7-1.59 1.62l.01 4.68c0 .13-.11.23-.23.23h-1.41c-.13 0-.23-.11-.23-.23v-4.59c0-.98-.74-1.71-1.62-1.71-.85 0-1.54.79-1.6 1.8v4.5c0 .13-.1.23-.23.23zm53.615 0h-1.61c-.04 0-.08-.01-.12-.03-.09-.06-.13-.19-.06-.28l2.43-3.71-2.39-3.65a.213.213 0 01-.03-.12c0-.12.09-.21.21-.21h1.61c.13 0 .24.06.3.17l1.41 2.37 1.4-2.37a.34.34 0 01.3-.17h1.6c.04 0 .08.01.12.03.09.06.13.19.06.28l-2.37 3.65 2.43 3.7c0 .05.01.09.01.13 0 .12-.09.21-.21.21h-1.61c-.13 0-.24-.06-.3-.17l-1.44-2.42-1.44 2.42a.34.34 0 01-.3.17zm-7.12-1.49c-1.33 0-2.42-1.12-2.42-2.51 0-1.39 1.08-2.52 2.42-2.52 1.33 0 2.42 1.12 2.42 2.51 0 1.39-1.08 2.51-2.42 2.52zm-19.865 0c-1.32 0-2.39-1.11-2.42-2.48v-.07c.02-1.38 1.09-2.49 2.4-2.49 1.32 0 2.41 1.12 2.41 2.51 0 1.39-1.07 2.52-2.39 2.53zm-8.11-2.48c-.01 1.37-1.09 2.47-2.41 2.47s-2.42-1.12-2.42-2.51c0-1.39 1.08-2.52 2.4-2.52 1.33 0 2.39 1.11 2.41 2.48l.02.08zm18.12 2.47c-1.32 0-2.39-1.11-2.41-2.48v-.06c.02-1.38 1.09-2.48 2.41-2.48s2.42 1.12 2.42 2.51c0 1.39-1.09 2.51-2.42 2.51z'/%3E %3C/defs%3E %3Cmask id='clip'%3E %3Crect x='0' y='0' width='100%25' height='100%25' fill='white'/%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/mask%3E %3Cg id='outline' opacity='0.3' stroke='%23000' stroke-width='3'%3E %3Ccircle mask='url(/studio-manual/assets/%23clip)' cx='11.5' cy='11.5' r='9.25'/%3E %3Cuse xlink:href='%23text' mask='url(/studio-manual/assets/%23clip)'/%3E %3C/g%3E %3Cg id='fill' opacity='0.9' fill='%23fff'%3E %3Cuse xlink:href='%23logo'/%3E %3Cuse xlink:href='%23text'/%3E %3C/g%3E %3C/svg%3E") !important;
};
/*
******************************
* ACCORDION STYLES
******************************
*/
.usa-accordion__content {
padding-bottom: 0;
}
// The following two styles will only work in browsers that support the ":has" selector
button.usa-accordion__button:has(div[class*="disCategoryContainer"]) {
background-color: $disadvantaged-color-side-panel;
background-image: url("../images/sidePanelIcons/accordion-plus.svg");
div[class*="disCategoryContainer"]{
color: white;
}
}
button.usa-accordion__button[aria-expanded=true]:has(div[class*="disCategoryContainer"]) {
background-image: url("../images/sidePanelIcons/accordion-minus.svg");
}
/*
******************************
* DEMOGRAPHICS STYLES