From c14a0c7d6222dafc49dcf4d27c94115be647a5a5 Mon Sep 17 00:00:00 2001
From: Romain CREY <ext.sopra.rcrey@grandlyon.com>
Date: Fri, 12 Jun 2020 11:07:33 +0200
Subject: [PATCH] fix: loader/graph scroll
---
.../FluidChartContainer.tsx | 4 ++--
.../SingleFluidViewContainer.tsx | 23 +++++++++++++------
.../ChallengeList/ChallengeListItem.tsx | 1 -
src/styles/components/_challenges.scss | 3 +++
4 files changed, 21 insertions(+), 10 deletions(-)
diff --git a/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx b/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx
index 679caa1b4..82b1bd435 100644
--- a/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx
+++ b/src/components/ContainerComponents/FluidChartContainer/FluidChartContainer.tsx
@@ -112,7 +112,7 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
return (
<>
- {isLoaded ? (
+ {isLoaded && (
<>
{isMinuteBlocked && timeStep === TimeStep.HALF_AN_HOUR && (
<ActivateHalfHourLoad />
@@ -134,7 +134,7 @@ const FluidChartContainer: React.FC<FluidChartContainerProps> = ({
</div>
</div>
</>
- ) : null}
+ )}
</>
)
}
diff --git a/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx
index 27651f09f..1a893630e 100644
--- a/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/SingleFluidViewContainer.tsx
@@ -3,7 +3,7 @@ import StyledSpinner from 'components/CommonKit/Spinner/StyledSpinner'
import CozyBar from 'components/ContainerComponents/CozyBar/CozyBar'
import Header from 'components/ContainerComponents/Header/Header'
import Content from 'components/ContainerComponents/Content/Content'
-import FluidContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer'
+import FluidChartContainer from 'components/ContainerComponents/FluidChartContainer/FluidChartContainer'
import { FluidType } from 'enum/fluid.enum'
import { TimeStep } from 'services/dataConsumptionContracts'
import ConsumptionNavigator from 'components/ContentComponents/ConsumptionNavigator/ConsumptionNavigator'
@@ -68,7 +68,7 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
<StyledSpinner size="5em" fluidTypes={fluidTypes} />
</div>
)}
- <FluidContainer
+ <FluidChartContainer
timeStep={timeStep}
fluidTypes={fluidTypes}
resetReferenceDate={resetRefenceDate}
@@ -76,11 +76,20 @@ const SingleFluidViewContainer: React.FC<SingleFluidViewContainerProps> = ({
handleClickTimeStep={handleClickTimeStepForFluidContainer}
setChartLoaded={setChartLoaded}
/>
- <SingleFluidIndicatorsContainer
- timeStep={timeStep}
- setIndicatorsLoaded={setIndicatorsLoaded}
- fluidTypes={fluidTypes}
- />
+ <div
+ className="chart-indicator"
+ style={{
+ display: `${
+ isChartLoading || isIndicatorsLoading ? 'none' : 'block'
+ }`,
+ }}
+ >
+ <SingleFluidIndicatorsContainer
+ timeStep={timeStep}
+ setIndicatorsLoaded={setIndicatorsLoaded}
+ fluidTypes={fluidTypes}
+ />
+ </div>
</Content>
</>
)
diff --git a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx b/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
index c533747de..a97b85f60 100644
--- a/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
+++ b/src/components/ContentComponents/ChallengeList/ChallengeListItem.tsx
@@ -80,7 +80,6 @@ const ChallengeListItem: React.FC<ChallengeListItemProps> = ({
<img
className="cli-content-icon"
src={defineBadge() ? defineBadge() : DefaultChallengeIcon}
- width={62}
></img>
<div className={`cli-content-title`}>
{challengeState === 'available' && (
diff --git a/src/styles/components/_challenges.scss b/src/styles/components/_challenges.scss
index 8014aeb72..3f515c341 100644
--- a/src/styles/components/_challenges.scss
+++ b/src/styles/components/_challenges.scss
@@ -97,6 +97,9 @@
.cli-content-icon {
margin: 0.5rem 0;
z-index: 5;
+ object-fit: cover;
+ width: 62px;
+ height: 100%;
}
.cli-content-title {
color: $text-white;
--
GitLab