From d0678b0474c16e59b0ff1f7463078bbea9dd7317 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Tue, 18 Jan 2022 09:14:16 +0000
Subject: [PATCH] fix: change the global content height
---
src/components/Analysis/AnalysisView.spec.tsx | 32 +++++++++----------
src/components/Challenge/ChallengeCard.tsx | 2 +-
src/components/Challenge/ChallengeView.tsx | 2 +-
.../__snapshots__/ChallengeView.spec.tsx.snap | 2 +-
src/components/Challenge/challengeCard.scss | 10 +++---
src/components/Challenge/challengeView.scss | 26 ++++++---------
src/components/Content/Content.tsx | 2 +-
src/components/Header/Header.tsx | 9 ++----
src/components/Splash/splashRoot.scss | 4 +--
src/components/Splash/splashScreen.scss | 5 +--
src/styles/index.scss | 14 +++-----
11 files changed, 45 insertions(+), 63 deletions(-)
diff --git a/src/components/Analysis/AnalysisView.spec.tsx b/src/components/Analysis/AnalysisView.spec.tsx
index c8ce83163..286f6cf6b 100644
--- a/src/components/Analysis/AnalysisView.spec.tsx
+++ b/src/components/Analysis/AnalysisView.spec.tsx
@@ -6,7 +6,6 @@ import { Provider } from 'react-redux'
import AnalysisView from 'components/Analysis/AnalysisView'
import { globalStateData } from '../../../tests/__mocks__/globalStateData.mock'
import { profileData } from '../../../tests/__mocks__/profile.mock'
-import Header from 'components/Header/Header'
import {
createMockStore,
mockInitialEcolyoState,
@@ -23,14 +22,11 @@ jest.mock('cozy-ui/transpiled/react/I18n', () => {
}),
}
})
-jest.mock('components/Header/CozyBar', () => () => <div id="cozybar"></div>)
-jest.mock('components/DateNavigator/DateNavigator', () => () => (
- <div id="dateNavigator"></div>
-))
-
-jest.mock('components/Analysis/MonthlyAnalysis', () => () => (
- <div id="monthlyanalysis"></div>
-))
+jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
+jest.mock('components/Header/Header', () => 'mock-header')
+jest.mock('components/Content/Content', () => 'mock-content')
+jest.mock('components/DateNavigator/DateNavigator', () => 'mock-datenavigator')
+jest.mock('components/Analysis/MonthlyAnalysis', () => 'mock-monthlyanalysis')
jest.mock('react-router-dom', () => ({
...jest.requireActual('react-router-dom'),
@@ -69,9 +65,10 @@ describe('AnalysisView component', () => {
<AnalysisView />
</Provider>
)
- expect(wrapper.find('#cozybar')).toBeTruthy()
- expect(wrapper.find(Header)).toBeTruthy()
- expect(wrapper.find('#monthlyanalysis')).toBeTruthy()
+ expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
+ expect(wrapper.find('mock-header').exists()).toBeTruthy()
+ expect(wrapper.find('mock-datenavigator').exists()).toBeTruthy()
+ expect(wrapper.find('mock-monthlyanalysis').exists()).toBeTruthy()
})
it('should update profile and toggle analysis notification to false if notification is true', () => {
@@ -91,14 +88,15 @@ describe('AnalysisView component', () => {
<AnalysisView />
</Provider>
)
- expect(wrapper.find('#cozybar')).toBeTruthy()
- expect(wrapper.find(Header)).toBeTruthy()
- expect(wrapper.find('#monthlyanalysis')).toBeTruthy()
- expect(updateProfileSpy).toBeCalledTimes(2)
+ expect(wrapper.find('mock-cozybar').exists()).toBeTruthy()
+ expect(wrapper.find('mock-header').exists()).toBeTruthy()
+ expect(wrapper.find('mock-datenavigator').exists()).toBeTruthy()
+ expect(wrapper.find('mock-monthlyanalysis').exists()).toBeTruthy()
+ expect(updateProfileSpy).toBeCalledTimes(1)
expect(updateProfileSpy).toHaveBeenCalledWith({
haveSeenLastAnalysis: true,
})
- expect(toggleAnalysisNotificationSpy).toBeCalledTimes(2)
+ expect(toggleAnalysisNotificationSpy).toBeCalledTimes(1)
expect(toggleAnalysisNotificationSpy).toHaveBeenCalledWith(false)
})
})
diff --git a/src/components/Challenge/ChallengeCard.tsx b/src/components/Challenge/ChallengeCard.tsx
index 74ea68a88..852f3395f 100644
--- a/src/components/Challenge/ChallengeCard.tsx
+++ b/src/components/Challenge/ChallengeCard.tsx
@@ -43,7 +43,7 @@ const ChallengeCard: React.FC<ChallengeCardProps> = ({
return (
<div
onClick={() => moveToSlide(index)}
- className={indexSlider === index ? 'slide active' : 'slide'}
+ className={indexSlider === index ? 'slide active' : 'slide inactive'}
style={{
minWidth: `${cardWidth}px`,
maxWidth: `${cardWidth}px`,
diff --git a/src/components/Challenge/ChallengeView.tsx b/src/components/Challenge/ChallengeView.tsx
index 973567aa2..17fd42277 100644
--- a/src/components/Challenge/ChallengeView.tsx
+++ b/src/components/Challenge/ChallengeView.tsx
@@ -153,7 +153,7 @@ const ChallengeView: React.FC = () => {
<div className="content">{t('challenge.banner.content')}</div>
</div>
<div
- className="container"
+ className="challenge-container"
style={{
transform: `translateX(${containerTranslation}px)`,
}}
diff --git a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
index bcc90ac09..5f7dfa0f9 100644
--- a/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
+++ b/src/components/Challenge/__snapshots__/ChallengeView.spec.tsx.snap
@@ -39,7 +39,7 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
</div>
</div>
<div
- className="container"
+ className="challenge-container"
style={
Object {
"transform": "translateX(16px)",
diff --git a/src/components/Challenge/challengeCard.scss b/src/components/Challenge/challengeCard.scss
index 9cac755c1..467bf027d 100644
--- a/src/components/Challenge/challengeCard.scss
+++ b/src/components/Challenge/challengeCard.scss
@@ -1,16 +1,16 @@
.slide {
- margin: auto;
- // height: 465px;
+ margin: 1rem 1rem 1rem 0;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
- margin-right: 1rem;
transition: all 300ms ease;
color: white;
display: flex;
flex-direction: column;
- transform: scale(0.9);
&.active {
- transform: scale(1.08);
+ transform: scale(1);
+ }
+ &.inactive {
+ transform: scale(0.9);
}
.cardContent {
background: linear-gradient(180deg, #323339 0%, #25262b 100%);
diff --git a/src/components/Challenge/challengeView.scss b/src/components/Challenge/challengeView.scss
index 55fb3f25e..31e0d2537 100644
--- a/src/components/Challenge/challengeView.scss
+++ b/src/components/Challenge/challengeView.scss
@@ -4,22 +4,15 @@
@import '../../styles/base/z-index';
.challengeSlider {
- min-height: inherit;
- margin-top: 0;
- overflow-x: hidden;
- padding: 1rem 2rem;
position: relative;
- max-width: 850px;
+ min-height: inherit;
user-select: none;
- @media all and (min-width: $width-tablet) {
- margin: auto;
- // margin-top: 3rem; //TODO: uncomment when wip is removed from challenges
- padding: 5rem 2rem 2rem 2rem;
- min-height: 0;
- }
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0 2rem;
}
.building-banner {
- position: absolute;
display: flex;
flex-direction: column;
align-items: center;
@@ -40,20 +33,19 @@
padding: 0.5rem 1rem;
text-align: center;
height: 75px;
- margin: 0 1rem;
+ margin: 1rem -1rem 0;
z-index: calc(#{$z-header} - 1);
border-radius: 6px;
- top: 14px;
- left: 0;
.title {
font-weight: 700;
margin-bottom: 0.1rem;
}
}
-.container {
- min-height: inherit;
+.challenge-container {
+ position: relative;
width: 100%;
display: flex;
+ flex: 1;
transition: all 300ms ease;
}
.cardContent {
diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
index 1722a0bd6..6e141e273 100644
--- a/src/components/Content/Content.tsx
+++ b/src/components/Content/Content.tsx
@@ -82,7 +82,7 @@ const Content: React.FC<ContentProps> = ({
paddingBottom: 0,
minHeight:
screenType !== ScreenType.DESKTOP
- ? `calc(100vh - ${height}px - ${cozyBarHeight}px - ${cozyNavHeight}px)`
+ ? `calc(100vh - ${height}px - ${cozyBarHeight}px - ${cozyNavHeight}px - env(safe-area-inset-top) - env(safe-area-inset-bottom) - env(safe-area-inset-bottom))`
: `unset`,
background: background,
}}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 85bdd9e7c..3d9f6e59d 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -41,7 +41,6 @@ const Header: React.FC<HeaderProps> = ({
const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
const cozyBarHeight = 48
- const headerBottomHeight = 8
const handleClickBack = useCallback(() => {
history.goBack()
@@ -54,14 +53,10 @@ const Header: React.FC<HeaderProps> = ({
useEffect(() => {
if (screenType === ScreenType.MOBILE) {
setHeaderHeight(
- header.current
- ? header.current.clientHeight - cozyBarHeight - headerBottomHeight
- : 0
+ header.current ? header.current.clientHeight - cozyBarHeight : 0
)
} else {
- setHeaderHeight(
- header.current ? header.current.clientHeight - headerBottomHeight : 0
- )
+ setHeaderHeight(header.current ? header.current.clientHeight : 0)
}
}, [screenType, children, setHeaderHeight])
diff --git a/src/components/Splash/splashRoot.scss b/src/components/Splash/splashRoot.scss
index 2ecb11281..c741b89df 100644
--- a/src/components/Splash/splashRoot.scss
+++ b/src/components/Splash/splashRoot.scss
@@ -7,8 +7,8 @@
z-index: $z-splash;
left: 0;
top: 0;
- height: 100vh;
- width: 100vw;
+ height: 100%;
+ width: 100%;
opacity: 1;
overflow: hidden;
background-color: rgba(27, 28, 34, 1);
diff --git a/src/components/Splash/splashScreen.scss b/src/components/Splash/splashScreen.scss
index 293a29e05..60582eb87 100644
--- a/src/components/Splash/splashScreen.scss
+++ b/src/components/Splash/splashScreen.scss
@@ -4,8 +4,8 @@
display: flex;
flex-direction: column;
align-items: center;
- justify-content: flex-end;
- // flex: 1;
+ justify-content: center;
+ height: 100%;
&:first-child {
margin: auto;
}
@@ -33,5 +33,6 @@
}
button.btn-highlight {
max-width: 50vw;
+ margin: 0.5rem 0 0;
}
}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 012d28314..6e47ddb51 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -52,16 +52,12 @@
--waterColorRadialGradient: #{$water-color-radial-gradient};
}
-html {
- // min-height: calc(100% + env(safe-area-inset-top));
- // padding: env(safe-area-inset-top) env(safe-area-inset-right)
- // env(safe-area-inset-bottom) env(safe-area-inset-left);
-}
-
.application {
- @media #{$large-phone} {
- min-height: 100vh;
- }
+ // @media #{$large-phone} {
+ // min-height: calc(
+ // 100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom)
+ // );
+ // }
overflow-x: hidden;
background-color: $default-background;
}
--
GitLab