diff --git a/manifest.webapp b/manifest.webapp
index 871bd4731b6215b3915c3923ddba40aa5e1b16eb..55d877fe577a25a3709b923ae387c556633b8262 100644
--- a/manifest.webapp
+++ b/manifest.webapp
@@ -3,7 +3,7 @@
"slug": "ecolyo",
"icon": "icon.svg",
"categories": ["energy"],
- "version": "0.1.5",
+ "version": "0.1.6",
"licence": "AGPL-3.0",
"editor": "Métropole de Lyon",
"default_locale": "fr",
diff --git a/package.json b/package.json
index 83dcc861de4db22c65a8e0e4e5f6b2956ced7437..a7875687fa3301a91b601da8c92b3fabf0bba464 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ecolyo",
- "version": "0.1.5",
+ "version": "0.1.6",
"scripts": {
"tx": "tx pull --all || true",
"lint": "yarn lint:js && yarn lint:styles",
diff --git a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
index 27f2683314cfe8141e958b7e20cc64e1519c518d..7152d937d96a2337d0b608dc2ac24db390f83ad8 100644
--- a/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/AvailableChallengeDetailsViewContainer.tsx
@@ -76,6 +76,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
}
useEffect(() => {
+ let subscribed = true
const lag = challengeManager.getLagDays(fluidTypes)
const timePeriod = {
@@ -94,7 +95,7 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
20,
fluidTypes
)
- if (fetchedPerformanceIndicators) {
+ if (fetchedPerformanceIndicators && subscribed) {
fetchedPerformanceIndicators.forEach(element => {
!element.value ? setLackOfDataForChallenge(true) : null
})
@@ -106,6 +107,9 @@ const AvailableChallengeDetailsViewContainer: React.FC<AvailableChallengeDetails
if (props.location.state) {
setChallenge(props && props.location.state.challenge)
}
+ return () => {
+ subscribed = false
+ }
}, [])
return (
diff --git a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
index 6b34c83cc892d2df4afa0a03b7613321061948b1..4dfb491d83fb89d088fb65e6c880b78be957c64f 100644
--- a/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/FinishedChallengeDetailsViewContainer.tsx
@@ -34,7 +34,7 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
const [challenge, setChallenge] = useState<UserChallenge | null>(null)
const [headerHeight, setHeaderHeight] = useState<number>(0)
const [badgeIcon, setBadgeIcon] = useState<any | null>(null)
- const { screenType } = useContext(AppContext)
+ const { screenType, toggleBackgroundScroll } = useContext(AppContext)
async function importRightBadge(id: string, badgeStatus: number) {
// Les png doivent être au format idchallenge-badgestate.png
@@ -56,10 +56,12 @@ const FinishedChallengeDetailsViewContainer: React.FC<FinishedChallengeDetailsVi
const handleClick = (index: number) => {
setChallengeEcogesture(index)
setOpenEcogestureModal(true)
+ toggleBackgroundScroll()
}
const handleCloseClick = () => {
setOpenEcogestureModal(false)
+ toggleBackgroundScroll()
}
useEffect(() => {
diff --git a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
index 5dccdf94b7fd70d0f3a5c3f31f6b2e86a4436301..1d95f0e63226c34a36b4ce9ea9dc563c0a6931d5 100644
--- a/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
+++ b/src/components/ContainerComponents/ViewContainer/OngoingChallengeDetailsViewContainer.tsx
@@ -38,7 +38,11 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
const client = props.client
const challengeManager = new ChallengeManager(client)
- const { refreshCurrentChallenge, screenType } = useContext(AppContext)
+ const {
+ refreshCurrentChallenge,
+ screenType,
+ toggleBackgroundScroll,
+ } = useContext(AppContext)
const [challengeEcogesture, setChallengeEcogesture] = useState<number>(0)
const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
const [challenge, setChallenge] = useState<UserChallenge | null>(null)
@@ -63,10 +67,12 @@ const OngoingChallengeDetailsViewContainer: React.FC<OngoingChallengeDetailsView
const handleClick = (index: number) => {
setChallengeEcogesture(index)
setOpenEcogestureModal(true)
+ toggleBackgroundScroll()
}
const handleCloseClick = () => {
setOpenEcogestureModal(false)
+ toggleBackgroundScroll()
}
useEffect(() => {
diff --git a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
index 452f8048300d01abc3c9330ea53f0f12a81458ad..da0619fe3e489c165502152a251b0f26f8f5de38 100644
--- a/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
+++ b/src/components/ContentComponents/ChallengeList/ChallengesList.tsx
@@ -19,9 +19,12 @@ interface ChallengesListProps {
const ChallengesList: React.FC<ChallengesListProps> = ({
client,
}: ChallengesListProps) => {
- const { fluidTypes, refreshCurrentChallenge, screenType } = useContext(
- AppContext
- )
+ const {
+ fluidTypes,
+ refreshCurrentChallenge,
+ screenType,
+ toggleBackgroundScroll,
+ } = useContext(AppContext)
const challengeManager = new ChallengeManager(client)
const [
ongoingChallenge,
@@ -46,6 +49,7 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
setOngoingChallenge(null)
setOpenChallengeModal(false)
setOngoingChallengeModal(null)
+ toggleBackgroundScroll()
}
const setRightChallengeInTheMiddle = (
@@ -111,6 +115,7 @@ const ChallengesList: React.FC<ChallengesListProps> = ({
)
) {
setOpenChallengeModal(true)
+ toggleBackgroundScroll()
await challengeManager.endChallenge(ongoingChallengeTmp, fluidTypes)
await refreshCurrentChallenge()
setOngoingChallenge(null)
diff --git a/src/components/ContentComponents/EcogestureList/EcogestureList.tsx b/src/components/ContentComponents/EcogestureList/EcogestureList.tsx
index 9b7b21f4d1800e772c7b87db9b192cc1bfc053d0..1a436e9da851397ba6633ce3bb16f66d9c621930 100644
--- a/src/components/ContentComponents/EcogestureList/EcogestureList.tsx
+++ b/src/components/ContentComponents/EcogestureList/EcogestureList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useContext } from 'react'
import { withClient, Client } from 'cozy-client'
import StyledChallengeSpinner from 'components/CommonKit/Spinner/StyledChallengeSpinner'
import EcogestureCard from '../EcogestureCard/EcogestureCard'
@@ -8,6 +8,7 @@ import { EcogestureType } from 'services/dataChallengeContracts'
import ChallengeManager from 'services/challengeDataManagerService'
import StyledClearGreyButton from 'components/CommonKit/Button/StyledClearGreyButton'
import { translate } from 'cozy-ui/react/I18n'
+import { AppContext } from 'components/Contexts/AppContextProvider'
interface EcogesturesListProps {
t: Function
@@ -22,7 +23,7 @@ const EcogesturesList: React.FC<EcogesturesListProps> = ({
selectedEcogesture,
setSelectedEcogesture,
] = useState<EcogestureType | null>(null)
-
+ const { toggleBackgroundScroll } = useContext(AppContext)
const [ecogestures, setEcogestures] = useState<EcogestureType[] | null>(null)
const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
const [openNegaWattModal, setOpenNegaWattModal] = useState(false)
@@ -31,18 +32,22 @@ const EcogesturesList: React.FC<EcogesturesListProps> = ({
const handleClick = (ecogesture: EcogestureType) => {
setSelectedEcogesture(ecogesture)
setOpenEcogestureModal(true)
+ toggleBackgroundScroll()
}
const handleCloseClick = () => {
setOpenEcogestureModal(false)
+ toggleBackgroundScroll()
}
const handleNegaWattClick = () => {
setOpenNegaWattModal(true)
+ toggleBackgroundScroll()
}
const handleNegaWattCloseClick = () => {
setOpenNegaWattModal(false)
+ toggleBackgroundScroll()
}
useEffect(() => {
diff --git a/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx b/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
index 7bb2d7635f8f701a83d88551d90e4324b5542cdd..4d9d01fc788c4db55a6fa042102d686926dd0d4e 100644
--- a/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
+++ b/src/components/ContentComponents/EcogestureModal/EcogestureModal.tsx
@@ -55,17 +55,16 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
<div className="em-header text-14-normal-uppercase">
{t('ECOGESTURE.TITLE_ECOGESTURE')}
</div>
- <div className="em-content-box">
- <div className="em-content-box-text">
- <div className="em-content-box-text-header">
- {(ecogesture.unlocked || unlockedEcogesture) && ecogestureIcon && (
- <div>
+ <div className="em-root">
+ <div className="em-content">
+ <div className="em-content-box-img">
+ {(ecogesture.unlocked || unlockedEcogesture) &&
+ ecogestureIcon && (
<Icon className="icon" icon={ecogestureIcon} size={140} />
- </div>
- )}
- <div className="em-title text-24-bold ">
- {ecogesture.shortName}
- </div>
+ )}
+ </div>
+ <div className="em-title text-24-bold ">
+ {ecogesture.shortName}
</div>
<div className="em-detail">
<div className="em-detail-nwh">
diff --git a/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx b/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx
index a967b39588a26f4d24775200504741a72515ee1b..69470f3abebe21f769a60987bb540f5843c101cf 100644
--- a/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorLaunch.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState, useContext } from 'react'
import { withClient, Client } from 'cozy-client'
import { translate } from 'cozy-ui/react/I18n'
@@ -18,6 +18,7 @@ import Modal from 'components/CommonKit/Modal/Modal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import errorIcon from 'assets/icons/visu/data-nok.svg'
import successIcon from 'assets/icons/visu/data-ok.svg'
+import { AppContext } from 'components/Contexts/AppContextProvider'
const loadingOptions = {
loop: true,
@@ -45,7 +46,7 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
}: KonnectorLaunchProps) => {
const [state, setState] = useState<string | null>(null)
const [openModal, setOpenModal] = useState(false)
-
+ const { toggleBackgroundScroll } = useContext(AppContext)
const callbackResponse = (_state: string) => {
setState(_state)
}
@@ -53,6 +54,7 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
const handleCloseClick = () => {
handleKonnectorLaunch()
setOpenModal(false)
+ toggleBackgroundScroll()
}
useEffect(() => {
@@ -71,6 +73,7 @@ const KonnectorLaunch: React.FC<KonnectorLaunchProps> = ({
callbackResponse(SUCCESS_EVENT)
})
setOpenModal(true)
+ toggleBackgroundScroll()
}
}
getData()
diff --git a/src/components/Contexts/AppContextProvider.tsx b/src/components/Contexts/AppContextProvider.tsx
index 55efeda0ccf15c9ce2c9880d45aa3bf904a84ba7..a69164e65347b7aa6fe6dc463b381ad0b1ec9c03 100644
--- a/src/components/Contexts/AppContextProvider.tsx
+++ b/src/components/Contexts/AppContextProvider.tsx
@@ -31,6 +31,7 @@ interface AppContextProps {
setWelcomeModalViewed: Function
chartIsLoaded: boolean
setChartIsLoaded: Function
+ toggleBackgroundScroll: Function
}
export const AppContext = React.createContext<AppContextProps>({
@@ -56,6 +57,7 @@ export const AppContext = React.createContext<AppContextProps>({
setWelcomeModalViewed: () => null,
chartIsLoaded: false,
setChartIsLoaded: () => null,
+ toggleBackgroundScroll: () => null,
})
interface AppContextProviderProps {
@@ -176,6 +178,25 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
}
}
+ const toggleBackgroundScroll = () => {
+ const backgroundDesktop = document.querySelector(
+ '.app-content'
+ ) as HTMLElement
+ const backgroundMobile = document.querySelector('html') as HTMLElement
+ const bgStyleDesktop = backgroundDesktop && backgroundDesktop.style
+ const bgStyleMobile = backgroundMobile && backgroundMobile.style
+ if (
+ bgStyleDesktop.overflowY === 'hidden' ||
+ bgStyleMobile.overflowY === 'hidden'
+ ) {
+ bgStyleDesktop.overflowY = 'unset'
+ bgStyleMobile.overflowY = 'unset'
+ } else {
+ bgStyleDesktop.overflowY = 'hidden'
+ bgStyleMobile.overflowY = 'hidden'
+ }
+ }
+
useEffect(() => {
let subscribed = true
function handleResize() {
@@ -325,6 +346,7 @@ const AppContextProvider: React.FC<AppContextProviderProps> = ({
setWelcomeModalViewed,
setChartIsLoaded,
chartIsLoaded,
+ toggleBackgroundScroll,
}}
>
{children}
diff --git a/src/styles/components/_ecogesture.scss b/src/styles/components/_ecogesture.scss
index 0c90812ea517df85de7f480855574d1e0647d721..2ad62004c9347d69bdf66da2662eb8b1a82d6700 100644
--- a/src/styles/components/_ecogesture.scss
+++ b/src/styles/components/_ecogesture.scss
@@ -8,7 +8,7 @@
align-items: center;
justify-content: center;
padding: 1rem 1.5rem 2.5rem 1.5rem;
- .negawatt-button-content{
+ .negawatt-button-content {
max-width: 52rem;
width: 97%;
@media #{$tablet} {
@@ -61,7 +61,7 @@
&.ec-content-challenge {
padding: 0.5rem 0;
}
- .ec-content-icon{
+ .ec-content-icon {
min-height: 50px;
}
.ec-content-short-name {
@@ -98,37 +98,8 @@
display: flex;
justify-content: center;
}
-.em-icon {
- margin-bottom: 1rem;
-}
-.em-title {
- margin-bottom: 0;
-}
-.em-detail {
- display: flex;
- flex-direction: row;
- margin: 0.5em 0;
- .em-detail-nwh {
- display: flex;
- flex: 1;
- align-self: flex-start;
- margin-top: 0.65rem;
- color: var(--textDark);
- .em-detail-nwh-unit {
- margin-left: 0.2rem;
- }
- }
- .em-picto-flow {
- display: flex;
- align-self: flex-end;
- .em-pic-content {
- margin: 0.3em;
- }
- }
-}
-.em-content-box {
- max-height: 70vh;
+.em-root {
overflow: auto;
width: 100%;
display: flex;
@@ -145,16 +116,14 @@
&::-webkit-scrollbar-thumb {
background: #6f7074;
}
- .em-content-box-text {
- display: flex;
- flex-direction: column;
+ .em-content {
padding: 1.5rem 2.5rem 0;
- // width: 22.125rem;
+
@media #{$large-phone} {
width: 100%;
padding: 1.5rem 1.5rem 0;
}
- .em-content-box-text-header {
+ .em-content-box-img {
display: flex;
flex-direction: column;
justify-content: center;
@@ -163,6 +132,33 @@
margin-bottom: 1rem;
}
}
+ .em-detail {
+ display: flex;
+ flex-direction: row;
+ margin: 0.5em 0;
+ .em-detail-nwh {
+ display: flex;
+ flex: 1;
+ align-self: flex-start;
+ margin-top: 0.65rem;
+ color: var(--textDark);
+ .em-detail-nwh-unit {
+ margin-left: 0.2rem;
+ }
+ }
+ .em-picto-flow {
+ display: flex;
+ align-self: flex-end;
+ .em-pic-content {
+ margin: 0.3em;
+ }
+ }
+ }
+ .em-title {
+ margin-bottom: 0;
+ text-align: center;
+ }
+
.long-name {
font-weight: bold;
line-height: 150%;
@@ -171,11 +167,25 @@
.em-description {
padding-bottom: 2rem;
}
- .em-description-2 {
- padding-top: 2rem;
- }
- .em-description-3 {
- padding-bottom: 0.5rem;
- }
+ }
+}
+.em-content-box-text {
+ display: flex;
+ flex-direction: column;
+ padding: 1.5rem 2.5rem;
+ @media #{$large-phone} {
+ padding: 1.5rem 1.5rem;
+ }
+ .em-description {
+ padding-bottom: 2rem;
+ }
+ .em-description-2 {
+ padding-top: 2rem;
+ }
+ .em-description-3 {
+ padding-bottom: 0.5rem;
+ }
+ .em-title {
+ margin-bottom: 0;
}
}
diff --git a/src/styles/components/_modal.scss b/src/styles/components/_modal.scss
index dd6c40e65f629af3db5b7c5b99869e60a6d286b0..a4b55f813b4b12f17e839617c87e431114aac9df 100644
--- a/src/styles/components/_modal.scss
+++ b/src/styles/components/_modal.scss
@@ -19,12 +19,9 @@
.modal-box {
background: $grey-background;
position: fixed;
- top: 50%;
- left: 50%;
width: 36rem;
max-width: 100%;
max-height: 80vh;
- transform: translate(-50%, -50%);
padding: 1rem 0 0 0;
box-sizing: border-box;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
@@ -50,9 +47,7 @@
z-index: 10;
}
.modal-content {
- @media #{$large-phone} {
- max-height: 80vh;
- }
+ max-height: 75vh;
display: flex;
flex-direction: column;
align-items: center;