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 side panel styling for 1.0

Browse source
This commit is contained in:
Vim USDS 2022-09-13 14:16:41 -07:00
parent 5ed00f603c
commit dec3305834
4 changed files with 15 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
client/src/components/AreaDetail/AreaDetail.tsx
View file

@ -8,7 +8,6 @@ import {Accordion, Button} from '@trussworks/react-uswds';
import Category from '../Category';
import TractDemographics from '../TractDemographics';
import DisadvantageDot from '../DisadvantageDot';
import ExceedBurden from '../ExceedBurden';
import Indicator from '../Indicator';
import TractInfo from '../TractInfo';
@ -745,12 +744,6 @@ const AreaDetail = ({properties, hash, isCensusLayerSelected}: IAreaDetailProps)
title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged} />,
content: (
<>
{/* Exceeds one or more burdens */}
<ExceedBurden
text={EXPLORE_COPY.SIDE_PANEL_SPACERS.EXCEED_ONE_OR_MORE}
isBurdened={category.isExceed1MoreBurden}
/>
{/* Indicators - filters then map */}
{category.indicators
.filter(indicatorFilter(EXPLORE_COPY.SIDE_PANEL_INDICATORS.HIST_UNDERINVEST))

9
client/src/components/AreaDetail/areaDetail.module.scss
View file

@ -113,14 +113,11 @@ $sidePanelLabelFontColor: #171716;
}
.categorySpacer {
@include u-bg('gray-cool-3');
@include typeset('sans', '2xs', 2);
@include u-text('bold');
margin: 0 -20px 1rem -20px;
@include u-padding-top(2);
@include u-padding-bottom(2);
margin-left: -20px;
@include u-padding-top(1);
@include u-padding-bottom(1);
@include u-padding-left(2.5);
}

112
client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
View file

@ -258,14 +258,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for ISL
hidden=""
id="work-dev"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -677,14 +669,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden=""
id="climate-change"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -890,14 +874,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden=""
id="clean-energy"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -1019,14 +995,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden=""
id="health-burdens"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -1202,14 +1170,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden=""
id="sustain-house"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -1397,14 +1357,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden=""
id="leg-pollute"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -1604,14 +1556,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden=""
id="clean-transport"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -1759,14 +1703,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden=""
id="clean-water"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -1889,14 +1825,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden=""
id="work-dev"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -2102,14 +2030,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for NAT
hidden=""
id="test"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -2436,14 +2356,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
hidden=""
id="clean-energy"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -2565,14 +2477,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
hidden=""
id="sustain-house"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -2680,14 +2584,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
hidden=""
id="leg-pollute"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"
@ -2887,14 +2783,6 @@ exports[`rendering of the Islan areas in AreaDetail checks if indicators for PUE
hidden=""
id="work-dev"
>
<div>
<div>
At or above at least one threshold?
</div>
<div>
No
</div>
</div>
<li
data-cy="indicatorBox"
data-testid="indicator-box"

21
client/src/components/Indicator/Indicator.module.scss
View file

@ -2,8 +2,8 @@
@import "../utils.scss";
@mixin indicatorPadding {
@include u-padding-left(1);
@include u-padding-right(1);
@include u-padding-left("05");
@include u-padding-right("05");
}
@mixin indicator {
@ -24,12 +24,11 @@
}
.indicatorName {
// flex: 0 1 77%;
flex-basis: 60%;
flex-basis: 55%;
display: flex;
flex-direction: column;
@include typeset('sans', '2xs', 2);
@include u-text('medium');
@include u-text('bold');
.indicatorDesc {
@include typeset('sans', '3xs', 2);
@ -45,6 +44,9 @@
.indicatorValueCol {
display: flex;
flex-direction: column;
@include typeset('sans', '2xs', 2);
@include u-text('bold');
width: 40%;
.indicatorValueRow {
display: flex;
@ -76,11 +78,11 @@
}
.indicatorValueSubText{
display: flex;
flex-direction: column;
align-self: flex-end;
// display: flex;
// flex-direction: column;
// align-self: flex-start;
text-align: right;
@include u-width(8);
// @include u-width(8);
@include typeset('sans', 'micro', 2);
@include u-text('thin');
}
@ -92,4 +94,5 @@
//Indicator box styles
.indicatorBoxMain {
@include indicator;
@include u-color('gray-warm-90');
}