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.

Sign up for GitHub

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

Jump to bottom

He updates #654

Merged
merged 8 commits into from
Jan 24, 2024
Merged

He updates #654

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
36f3518
style updates
cmanciero Dec 19, 2023
cca8d0c
clear layers button
cmanciero Dec 19, 2023
2cb69c6
fix map issue for Africa
cmanciero Jan 17, 2024
b972ddd
moved button and font-size variables
cmanciero Jan 18, 2024
28bf3a7
Commit changes for font-styling
cmanciero Jan 18, 2024
3ebab75
remove clear selection button for now
cmanciero Jan 24, 2024
c105463
remove unused code
cmanciero Jan 24, 2024
c85da6b
back to og code
cmanciero Jan 24, 2024
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
6 changes: 3 additions & 3 deletions src/components/charts/scatter-plot/scatter-plot-styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ $chart-margin: 14px;
.tickValue {
@extend %annotation;
color: $alto;
font-size: 18px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you use a variable for this? It's true that we dont have any variable for font-size: 18px. But maybe create a new one on src/styles/settings.scss

}

.tickValue {
Expand All @@ -94,7 +95,7 @@ $chart-margin: 14px;
border: 2px solid $firefly;
width: 190px;
overflow: hidden;
.countryLabel{
.countryLabel {
padding: 5px;
.name {
@extend %title;
Expand All @@ -109,12 +110,11 @@ $chart-margin: 14px;
}
}


@keyframes pulse {
0% {
r: 1%;
opacity: 0;
animation-timing-function:cubic-bezier(1,.01,.91,.46);
animation-timing-function: cubic-bezier(1, 0.01, 0.91, 0.46);
}
50% {
r: 1.1%;
Expand Down
17 changes: 8 additions & 9 deletions src/containers/nrc-content/nrc-challenges/nrc-challenges-styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
width: 80%;
margin-left: 20px;

.xAxisContainer{
.xAxisContainer {
width: 100%;

.xAxisLabelContainer {
Expand All @@ -63,8 +63,8 @@
.yAxisIndicator {
@extend %bodyText;
color: $alto;
font-size: 18px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you use the variable also here?

}

}
}

Expand All @@ -77,8 +77,8 @@
position: relative;
bottom: 50%;
left: 2px;
font-size: 18px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And here

}

}

.scatterPlotLegendWrapper {
Expand All @@ -88,14 +88,15 @@
.legendTitle {
color: $grey-text;
font-weight: 300;
font-size: 13px;
font-size: 17px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here, is to have all font-sizes tracked

}

.legendItem {
align-items: center;
color: $white;
display: flex;
margin: 0;
font-size: 18px;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And the last missing


.legendItemColor {
border-radius: 50%;
Expand Down Expand Up @@ -158,10 +159,9 @@
.scatterPlotChartWrapper {
width: 100%;

.xAxisLabelContainer {
padding-left: calc(50% - 165px);

}
.xAxisLabelContainer {
padding-left: calc(50% - 165px);
}

.yAxisContainer {
bottom: 300px;
Expand All @@ -176,7 +176,6 @@
width: 90%;

.continentsLegendWrapper {

.legendItemsContainer {
display: grid;
grid-template-columns: 1fr 1fr;
Expand Down
13 changes: 12 additions & 1 deletion src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,24 @@ function AnalyzeAreasCardComponent({
setAoiHistoryModalOpen(!isAoiHistoryModalOpen);
};

const clearFilters = () => {
handleOptionSelection({ slug: 'clear' });
};

return (
<div
className={cx(styles.sidebarCardContainer, className, {
[styles.onboardingOverlay]:
onboardingType === 'priority-places' && onboardingStep === 2,
})}
>
<button
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know why this button is needed? The Analysis radio button was supposed to have always an option selected. Also, maybe if its closer to the options would be easier to the user to understand its functionality

type="button"
className={styles.clearFilters}
onClick={clearFilters}
>
clear filters
</button>
<h2 className={styles.subtitle}>
{t('Analyze pre-calculated areas or your own custom area.')}
</h2>
Expand Down Expand Up @@ -128,7 +139,7 @@ function AnalyzeAreasCardComponent({
<RadioButton
id={option.slug}
option={{ ...option, name: option.label }}
checked={selectedOption.slug === option.slug}
checked={selectedOption?.slug === option.slug}
onChange={() => handleOptionSelection(option)}
theme={radioTheme}
/>
Expand Down
26 changes: 19 additions & 7 deletions src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,16 +212,28 @@ function AnalyzeAreasContainer(props) {
newSelectedOption === WDPA_OECM_FEATURE_LAYER;

const getLayersToToggle = () => {
const formerSelectedSlug = selectedOption.slug;
const formerSelectedSlug = selectedOption?.slug;
const newLayerCategory =
newSelectedOption === HALF_EARTH_FUTURE_TILE_LAYER
? LAYERS_CATEGORIES.PROTECTION
: undefined;

let layersToToggle = [
{ layerId: formerSelectedSlug },
{ layerId: newSelectedOption, category: newLayerCategory },
];
let layersToToggle = [];

if (newSelectedOption !== 'clear' && formerSelectedSlug !== undefined) {
layersToToggle.push({ layerId: formerSelectedSlug });
layersToToggle.push({
layerId: newSelectedOption,
category: newLayerCategory,
});
} else {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The clear and the selection is not working correctly here in relation to the layers. Two examples:

  • Go to the analyze areas
  • Click on the clear button. The radio is deselected ✔️
  • Click on the Places for half earth future. The future layer is not selected ✖️
  • Click on the Administrative Boundaries. Now the future layer is selected ✖️
  • Go to the analyze areas
  • Click on the Places for half earth future. The future layer is selected ✔️
  • Click on Protected areas. The protected layers are selected ✔️
  • Click on the clear button. The places for half earth future layer is still selected ✖️

activeLayers.forEach((l) => {
layersToToggle.push({
layerId: l.title,
category: LAYERS_CATEGORIES.PROTECTION,
});
});
}

if (protectedAreasSelected) {
const additionalProtectedAreasLayers = [
Expand Down Expand Up @@ -285,8 +297,8 @@ function AnalyzeAreasContainer(props) {
};

const handleOptionSelection = (option) => {
handleLayerToggle(option.slug);
changeUI({ selectedAnalysisLayer: option.slug });
handleLayerToggle(option?.slug);
changeUI({ selectedAnalysisLayer: option?.slug });
setTooltipIsVisible(false);
};

Expand Down
22 changes: 18 additions & 4 deletions src/containers/sidebars/data-global-sidebar/analyze-areas-sidebar-card/styles.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
height: 100px;
border: 1px dashed $white;
border-radius: $border-radius-desktop;
.uploadShapeButton{
.uploadShapeButton {
margin-right: $paragraph-gutter;
}
.label {
Expand Down Expand Up @@ -189,7 +189,7 @@
}

input:checked ~ .checkbox {
background-color: #2196F3;
background-color: #2196f3;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would be also great to have this as a variable

}

.checkbox {
Expand All @@ -203,7 +203,7 @@
background-color: #eee;

&:after {
content: "";
content: '';
position: absolute;
display: none;
}
Expand All @@ -219,4 +219,18 @@
margin: 0;
padding: 0 0 0 10px;
}
}
}

.clearFilters {
@extend %title;
background-color: $brand-color-main;
width: 100%;
height: 30px;
padding: 0px 20px;
border-radius: 2px;
margin-top: 10px;

&:hover {
background-color: $white;
}
}
Loading