From 133470e1767ca440e3b241baf7da35b5f176a0fe Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Fri, 13 Jan 2023 10:15:35 +0000
Subject: [PATCH] fix(css): header and sge view for small screens
---
.../Connection/SGEConnect/SgeConnect.scss | 2 +
.../Connection/SGEConnect/SgeConnectView.tsx | 3 +
.../SgeConnectView.spec.tsx.snap | 1 +
src/components/Header/Header.tsx | 19 +++--
src/components/Header/header.scss | 8 +--
src/styles/base/_layout.scss | 70 -------------------
6 files changed, 19 insertions(+), 84 deletions(-)
diff --git a/src/components/Connection/SGEConnect/SgeConnect.scss b/src/components/Connection/SGEConnect/SgeConnect.scss
index 73e386aba..7a02ec9d4 100644
--- a/src/components/Connection/SGEConnect/SgeConnect.scss
+++ b/src/components/Connection/SGEConnect/SgeConnect.scss
@@ -13,6 +13,8 @@
top: 4rem;
width: 100%;
height: 92vh;
+ overflow-y: auto;
+ overscroll-behavior: contain;
@media (min-width: $width-large-phone) {
top: 8rem;
height: 85vh;
diff --git a/src/components/Connection/SGEConnect/SgeConnectView.tsx b/src/components/Connection/SGEConnect/SgeConnectView.tsx
index 88c9b5f08..1f5cbf459 100644
--- a/src/components/Connection/SGEConnect/SgeConnectView.tsx
+++ b/src/components/Connection/SGEConnect/SgeConnectView.tsx
@@ -142,6 +142,9 @@ const SgeConnectView: React.FC = () => {
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_sge_connect'}
displayBackArrow={true}
+ backFunction={() =>
+ dispatch(updateSgeStore({ ...sgeConnect, openSGEForm: false }))
+ }
></Header>
<Content height={headerHeight}>
<div className="sge-view">
diff --git a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
index 6b58abe11..b3f663e1a 100644
--- a/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
+++ b/src/components/Connection/SGEConnect/__snapshots__/SgeConnectView.spec.tsx.snap
@@ -339,6 +339,7 @@ exports[`SgeConnectView component should be rendered correctly 1`] = `
</BarRight>
</CozyBar>
<Header
+ backFunction={[Function]}
desktopTitleKey="common.title_sge_connect"
displayBackArrow={true}
setHeaderHeight={[Function]}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 3a469698a..49a4fc643 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,16 +1,15 @@
-import React, { useCallback, useEffect, useRef } from 'react'
-import './header.scss'
-import { useI18n } from 'cozy-ui/transpiled/react/I18n'
-import { useSelector, useDispatch } from 'react-redux'
-import { AppStore } from 'store'
-import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
-import { useHistory } from 'react-router-dom'
-
-import { ScreenType } from 'enum/screen.enum'
+import IconButton from '@material-ui/core/IconButton'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbackIcon from 'assets/icons/ico/feedback.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
-import IconButton from '@material-ui/core/IconButton'
+import { ScreenType } from 'enum/screen.enum'
+import React, { useCallback, useEffect, useRef } from 'react'
+import { useDispatch, useSelector } from 'react-redux'
+import { useHistory } from 'react-router-dom'
+import { AppStore } from 'store'
+import { updateModalIsFeedbacksOpen } from 'store/modal/modal.actions'
+import './header.scss'
interface HeaderProps {
textKey?: string
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 58b400875..1a73a5fe5 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -22,17 +22,17 @@
$dark-2 100%
);
width: 100%;
+ display: flex;
+ justify-content: flex-end;
.header-text {
padding: 0 1rem 1rem 1rem;
color: $grey-bright;
}
}
.header-content {
- margin: 0 0 0 220px;
- display: flex;
- flex-direction: column;
+ width: 85%;
@media #{$tablet} {
- margin: 0;
+ width: 100%;
}
@media #{$large-phone} {
margin: 60px 0 0 0;
diff --git a/src/styles/base/_layout.scss b/src/styles/base/_layout.scss
index 977aa5666..63369debd 100644
--- a/src/styles/base/_layout.scss
+++ b/src/styles/base/_layout.scss
@@ -45,76 +45,6 @@ body {
color: #32363f;
}
-.header {
- display: flex;
- align-items: center;
- flex-direction: column;
- overflow: hidden;
- width: 100%;
- z-index: $z-header;
- position: fixed;
- top: 48px;
- left: 0;
- @media #{$large-phone} {
- top: 0;
- }
- .header-top {
- background: radial-gradient(
- circle,
- rgba(52, 54, 65, 1) 0%,
- rgba(27, 28, 34, 1) 100%
- );
- width: 100%;
- .header-text {
- padding: 0 1rem 1rem 1rem;
- color: $grey-bright;
- }
- }
- .header-content {
- margin: 0 0 0 220px;
- display: flex;
- flex-direction: column;
- @media #{$tablet} {
- margin: 0;
- }
- @media #{$large-phone} {
- margin: 60px 0 0 0;
- }
- .header-content-top {
- display: flex;
- flex-direction: row;
- &.header-content-top-right {
- justify-content: flex-end;
- }
- .header-text {
- padding: 2rem 1rem;
- flex: 1;
- }
- .header-text-desktop {
- display: flex;
- flex: 1;
- padding: 2rem 1.25rem;
- color: $grey-bright;
- }
- .header-back-button {
- padding: 0 0.75rem;
- }
- @media #{$large-phone} {
- .header-text {
- padding: 0 1rem 1rem 1rem;
- color: $grey-bright;
- }
- .header-text-desktop {
- display: none;
- }
- .header-feedbacks-button {
- display: none;
- }
- }
- }
- }
-}
-
.content-view-loading {
height: 80vh;
width: 100%;
--
GitLab