Commit b63ff29a authored by Hugo SUBTIL's avatar Hugo SUBTIL
Browse files

Merge branch 'fix/challenge-banner-and-title' into 'dev'

Fix/challenge banner and title

See merge request web-et-numerique/llle_project/ecolyo!486
parents 1cc88569 2ad925af
@import '../../styles/base/color';
@import '../../styles/base/breakpoint';
@import '../../styles/base/z-index';
.totalAnalysis-container {
display: flex;
......@@ -26,7 +27,7 @@
position: absolute;
border-radius: 50%;
background: $dark-light-2;
z-index: 5;
z-index: $z-pieChart;
padding: 1rem;
display: flex;
flex-direction: column;
......
......@@ -135,12 +135,9 @@ const ChallengeView: React.FC = () => {
<Header
setHeaderHeight={defineHeaderHeight}
desktopTitleKey={'common.title_challenge'}
isBuilding={true}
></Header>
<Content height={headerHeight}>
<div className="building-banner">
<div className="title">{t('challenge.banner.title')}</div>
<div className="content">{t('challenge.banner.content')}</div>
</div>
<div
className="challengeSlider"
onClick={resetValues}
......@@ -151,6 +148,10 @@ const ChallengeView: React.FC = () => {
onMouseMove={handleClickOrTouchMove}
onMouseUp={handleClickOrTouchEnd}
>
<div className="building-banner">
<div className="title">{t('challenge.banner.title')}</div>
<div className="content">{t('challenge.banner.content')}</div>
</div>
<div
className="container"
style={{
......
......@@ -8,25 +8,12 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
/>
<Header
desktopTitleKey="common.title_challenge"
isBuilding={true}
setHeaderHeight={[Function]}
/>
<Content
height={0}
>
<div
className="building-banner"
>
<div
className="title"
>
challenge.banner.title
</div>
<div
className="content"
>
challenge.banner.content
</div>
</div>
<div
className="challengeSlider"
onClick={[Function]}
......@@ -37,6 +24,20 @@ exports[`ChallengeView component should be rendered correctly 1`] = `
onTouchMove={[Function]}
onTouchStart={[Function]}
>
<div
className="building-banner"
>
<div
className="title"
>
challenge.banner.title
</div>
<div
className="content"
>
challenge.banner.content
</div>
</div>
<div
className="container"
style={
......
@import '../../styles/base/breakpoint';
@import '../../styles/base/typo-variables';
@import '../../styles/base/color';
@import '../../styles/base/z-index';
.challengeSlider {
min-height: inherit;
......@@ -12,7 +13,7 @@
user-select: none;
@media all and (min-width: $width-tablet) {
margin: auto;
margin-top: 3rem;
// margin-top: 3rem; //TODO: uncomment when wip is removed from challenges
padding: 5rem 2rem 2rem 2rem;
min-height: 0;
}
......@@ -39,13 +40,11 @@
padding: 0.5rem 1rem;
text-align: center;
height: 75px;
margin: 1rem;
z-index: 10000;
top: 0;
margin: 0 1rem;
z-index: calc(#{$z-header} - 1);
border-radius: 6px;
@media all and (min-width: $width-tablet) {
top: 4rem;
}
top: 14px;
left: 0;
.title {
font-weight: 700;
margin-bottom: 0.1rem;
......
@import 'src/styles/base/breakpoint';
@import 'src/styles/base/color';
@import 'src/styles/base/typo-variables';
@import 'src/styles/base/z-index';
// EcogestureCardContainer
.ecogesture-root {
......@@ -147,7 +148,7 @@ div.filter-menu {
box-sizing: border-box;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
z-index: 3;
z-index: $z-filterMenu;
width: 220px;
padding: 0.5rem 0rem;
font-size: 0.875rem;
......
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 Icon from 'cozy-ui/transpiled/react/Icon'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
interface HeaderProps {
textKey?: string
desktopTitleKey?: string
displayBackArrow?: boolean
children?: React.ReactNode
setHeaderHeight(height: number): void
}
const Header: React.FC<HeaderProps> = ({
textKey,
desktopTitleKey,
displayBackArrow,
children,
setHeaderHeight,
}: HeaderProps) => {
const { t } = useI18n()
const history = useHistory()
const header = useRef(null)
const dispatch = useDispatch()
const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
const cozyBarHeight = 48
const headerBottomHeight = 8
const handleClickBack = useCallback(() => {
history.goBack()
}, [history])
const handleClickFeedbacks = () => {
dispatch(updateModalIsFeedbacksOpen(true))
}
useEffect(() => {
if (screenType === ScreenType.MOBILE) {
setHeaderHeight(
header.current
? header.current.clientHeight - cozyBarHeight - headerBottomHeight
: 0
)
} else {
setHeaderHeight(
header.current ? header.current.clientHeight - headerBottomHeight : 0
)
}
}, [screenType, children, setHeaderHeight])
return (
<div className="header" ref={header}>
<div className="header-top">
<div className="header-content">
<div
className={
!textKey && !desktopTitleKey
? 'header-content-top header-content-top-right'
: 'header-content-top'
}
>
{textKey && (
<div
className={`header-text ${
screenType === ScreenType.MOBILE
? 'text-14-normal-uppercase'
: 'text-22-bold'
}`}
>
{t(textKey)}
</div>
)}
{desktopTitleKey && (
<div
className={`header-text-desktop ${
screenType === ScreenType.MOBILE
? 'text-14-normal-uppercase'
: 'text-22-bold'
}`}
>
{displayBackArrow && (
<IconButton
aria-label={t('header.accessibility.button_back')}
className="header-back-button"
onClick={handleClickBack}
>
<Icon icon={BackArrowIcon} size={16} />
</IconButton>
)}
{t(desktopTitleKey)}
</div>
)}
<IconButton
aria-label={t('header.accessibility.button_open_feedbacks')}
className={
!textKey && !desktopTitleKey
? 'header-feedbacks-button right'
: 'header-feedbacks-button'
}
onClick={handleClickFeedbacks}
>
<Icon icon={FeedbacksIcon} size={40} />
</IconButton>
</div>
{children}
</div>
</div>
<div className="header-bar"></div>
</div>
)
}
export default Header
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 Icon from 'cozy-ui/transpiled/react/Icon'
import BackArrowIcon from 'assets/icons/ico/back-arrow.svg'
import FeedbacksIcon from 'assets/icons/ico/feedbacks.svg'
import HammerLeft from 'assets/icons/ico/hammer-left.svg'
import HammerRight from 'assets/icons/ico/hammer-right.svg'
interface HeaderProps {
textKey?: string
desktopTitleKey?: string
displayBackArrow?: boolean
children?: React.ReactNode
setHeaderHeight(height: number): void
isBuilding?: boolean
}
const Header: React.FC<HeaderProps> = ({
textKey,
desktopTitleKey,
displayBackArrow,
children,
setHeaderHeight,
isBuilding,
}: HeaderProps) => {
const { t } = useI18n()
const history = useHistory()
const header = useRef(null)
const dispatch = useDispatch()
const { screenType } = useSelector((state: AppStore) => state.ecolyo.global)
const cozyBarHeight = 48
const headerBottomHeight = 8
const handleClickBack = useCallback(() => {
history.goBack()
}, [history])
const handleClickFeedbacks = () => {
dispatch(updateModalIsFeedbacksOpen(true))
}
useEffect(() => {
if (screenType === ScreenType.MOBILE) {
setHeaderHeight(
header.current
? header.current.clientHeight - cozyBarHeight - headerBottomHeight
: 0
)
} else {
setHeaderHeight(
header.current ? header.current.clientHeight - headerBottomHeight : 0
)
}
}, [screenType, children, setHeaderHeight])
return (
<div className="header" ref={header}>
<div className="header-top">
<div className="header-content">
<div
className={
!textKey && !desktopTitleKey
? 'header-content-top header-content-top-right'
: 'header-content-top'
}
>
{textKey && (
<div
className={`header-text ${
screenType === ScreenType.MOBILE
? 'text-14-normal-uppercase'
: 'text-22-bold'
}`}
>
{t(textKey)}
</div>
)}
{desktopTitleKey && (
<div
className={`header-text-desktop ${
screenType === ScreenType.MOBILE
? 'text-14-normal-uppercase'
: 'text-22-bold'
}`}
>
{displayBackArrow && (
<IconButton
aria-label={t('header.accessibility.button_back')}
className="header-back-button"
onClick={handleClickBack}
>
<Icon icon={BackArrowIcon} size={16} />
</IconButton>
)}
{/* {t(desktopTitleKey)} */}
{isBuilding ? (
<>
<div className="building-title">
<Icon icon={HammerLeft} size={17} />
<span className="isBuilding">{t(desktopTitleKey)}</span>
<Icon icon={HammerRight} size={17} />
</div>
</>
) : (
<span>{t(desktopTitleKey)}</span>
)}
</div>
)}
<IconButton
aria-label={t('header.accessibility.button_open_feedbacks')}
className={
!textKey && !desktopTitleKey
? 'header-feedbacks-button right'
: 'header-feedbacks-button'
}
onClick={handleClickFeedbacks}
>
<Icon icon={FeedbacksIcon} size={40} />
</IconButton>
</div>
{children}
</div>
</div>
<div className="header-bar"></div>
</div>
)
}
export default Header
@import 'src/styles/base/breakpoint';
@import 'src/styles/base/color';
.header {
display: flex;
align-items: center;
flex-direction: column;
overflow: hidden;
width: 100%;
z-index: 18;
position: fixed;
top: 48px;
left: 0;
@media #{$large-phone} {
top: 0;
}
.header-top {
background: radial-gradient(
74.83% 76.97% at 50% 13.64%,
#343641 0%,
#1b1c22 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;
}
}
}
}
}
@import 'src/styles/base/breakpoint';
@import 'src/styles/base/color';
@import 'src/styles/base/z-index';
.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(
74.83% 76.97% at 50% 13.64%,
#343641 0%,
#1b1c22 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;
}
}
}
}
}
.building-title {
text-align: center;
}
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
@import 'src/styles/base/z-index';
.o-sidebar {
background-color: $dark-light;
......@@ -8,7 +9,7 @@
border-top: unset;
border-right: unset;
position: relative;
z-index: 19;
z-index: calc(#{$z-header} + 1);
}
.logos-container {
position: absolute;
......
@import 'src/styles/base/color';
@import 'src/styles/base/breakpoint';
@import 'src/styles/base/z-index';
.splash-root {
position: fixed;
z-index: 1500;
z-index: $z-splash;
left: 0;
top: 0;
height: 100vh;
......
@import 'color';
@import '../base/breakpoint';
@import '../base/z-index';
html {
background: $dark-2;
......@@ -52,7 +53,7 @@ body {
flex-direction: column;
overflow: hidden;
width: 100%;
z-index: 18;
z-index: $z-header;
position: fixed;
top: 48px;
left: 0;
......
$z-filterMenu: 3;
$z-pieChart: 5;
$z-dialog: 10;
$z-header: 18;
$z-splash: 1500;
@import '../base/color';
@import '../base/z-index';
div.modal-root {
.MuiBackdrop-root {
......@@ -42,7 +43,7 @@ div.modal-paper {
top: 0.5rem;
right: 0.5rem;