Skip to content

Commit

Permalink
Mobile version (#46)
Browse files Browse the repository at this point in the history 
* update css for mobile header

* Create FondationLogo.jsx

* Update Logo.jsx

* Update Logotypes.jsx

* Update Overlay.jsx

* Update overlay.css

* Delete Logo.jsx

* Create LogoMemorialCompact.jsx

* update header code

* more generic svg rules update

* fix outdated component

* Update Slides.jsx

* fixes for header mobile/desktop versions
  • Loading branch information
@donsiamese
donsiamese authored Jan 25, 2024
1 parent 9609084 commit 2a79a1b
Show file tree
Hide file tree
Showing 13 changed files with 292 additions and 531 deletions.
140 changes: 52 additions & 88 deletions src/components/Header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import React from 'react'
import { useTranslation } from 'react-i18next'
import { Container, Row, Col } from 'react-bootstrap'
import LangLink from './LangLink'
import Logo from './Logo'
import {
BootstrapStartColumnLayoutNoOffset,
BootstrapEndColumnLayout,
LanguageRootPathRegExp,
AboutRoute,
StoryRoute,
Expand All @@ -17,6 +13,9 @@ import {
import { useStore } from '../store'
import '../styles/components/Header.css'
import LanguageSwitch from './LanguageSwitch'
import { isMobile } from 'react-device-detect'
import { LogoMemorial } from './Hero/ui/Logo'
import LogoMemorialCompact from './LogoMemorialCompact'

const Header = () => {
const { t } = useTranslation()
Expand All @@ -26,96 +25,61 @@ const Header = () => {
const isRootPath = window.location.pathname.match(LanguageRootPathRegExp)
console.debug('[Header] isRootPath:', isRootPath, '\n - routeLabel:', routeLabel)
return (
<header className="Header">
<Container>
<Row>
<Col md={{ span: 1 }} className="position-relative">
<>
{!isMobile && routeLabel === HomeRoute.label ? (
<div className="overlay__logo">
<LogoMemorial width={180} />
</div>
) : null}
<header className="Header">
<div className="container p-0 d-flex justify-content-between">
<div className="home-nav-wrapper">
{routeLabel !== HomeRoute.label ? (
<LangLink to={HomeRoute.to} className="">
<Logo
width={80}
height={80}
style={{
top: '50%',
marginTop: -40,
}}
<>
<LogoMemorialCompact
width={100}
className="me-3 position-absolute"
color="var(--bs-primary-text)"
className="position-absolute"
/>
</LangLink>
</>
) : null}
</Col>
<Col {...BootstrapStartColumnLayoutNoOffset}>
<nav className="Header_ariaSearch" role="navigation" aria-label={t('ariaLabelSearch')}>
<ul className="d-flex justify-content-between">
<li className={routeLabel === HomeRoute.label ? 'active' : null}>
<LangLink to={HomeRoute.to} className="">
{t(HomeRoute.label)}
</LangLink>
</li>
{/* <li>
<Breadcrumb />
</li> */}
{/* <li
className={
[SearchRoute.label, SearchStoryRoute.label].includes(routeLabel)
? 'active'
: null
}
>
<LangLink to={SearchRoute.to}>{t(SearchRoute.label)}</LangLink>
</li> */}
<li>
<ul className="d-flex">
<li
className={
[BiographiesRoute.label, StoryRoute.label].includes(routeLabel)
? 'active'
: null
}
>
<LangLink to={BiographiesRoute.to}>{t(BiographiesRoute.label)}</LangLink>
</li>
{/* <li
style={{ borderRight: '1px solid', paddingRight: '1.75rem' }}
className={routeLabel === PeopleRoute.label ? 'active' : null}
>
<LangLink to={PeopleRoute.to} className="ms-4">
{t(PeopleRoute.label)}
</LangLink>
</li> */}
</ul>
</li>
</ul>
</nav>
</Col>
<Col {...BootstrapEndColumnLayout}>
<nav
className="Header_ariaLanguageAbout"
role="navigation"
aria-label={t('ariaLabelLanguageAbout')}
<div
style={{ paddingLeft: '8rem' }}
className={routeLabel === HomeRoute.label ? 'active' : null}
>
<ul className="d-flex justify-content-between">
<li className={routeLabel === AboutRoute.label ? 'active' : null}>
<LangLink to={AboutRoute.to} className="">
{t(AboutRoute.label)}
</LangLink>
</li>
<li className={routeLabel === FaqRoute.label ? 'active' : null}>
<LangLink to={FaqRoute.to} className="">
{t(FaqRoute.label)}
</LangLink>
</li>
<LangLink to={HomeRoute.to} className="">
{t(HomeRoute.label)}
</LangLink>
</div>
</div>

<li>
<LanguageSwitch isRootPath={isRootPath} className="d-flex" linkClassName="ms-3" />
</li>
</ul>
</nav>
</Col>
</Row>
</Container>
</header>
<nav className="Header_Nav" role="navigation" aria-label={t('ariaLabelLanguageAbout')}>
<ul className="d-flex justify-content-end">
<li
className={
[BiographiesRoute.label, StoryRoute.label].includes(routeLabel) ? 'active' : null
}
>
<LangLink to={BiographiesRoute.to}>{t(BiographiesRoute.label)}</LangLink>
</li>
<li className={routeLabel === AboutRoute.label ? 'active' : null}>
<LangLink to={AboutRoute.to} className="">
{t(AboutRoute.label)}
</LangLink>
</li>
<li className={routeLabel === FaqRoute.label ? 'active' : null}>
<LangLink to={FaqRoute.to} className="">
{t(FaqRoute.label)}
</LangLink>
</li>
<li className="pe-2">
<LanguageSwitch isRootPath={isRootPath} className="d-flex" linkClassName="ms-3" />
</li>
</ul>
</nav>
</div>
</header>
</>
)
}

Expand Down
64 changes: 64 additions & 0 deletions src/components/Hero/hero.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,3 +35,67 @@
pointer-events: none;
overflow: hidden;
}

@media (max-width: 576px) {
.hero {
height: 100vh;
}

.hero__canvas-wrapper {
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
}
.overlay__copy {
left: 0 !important;
padding: 0 3rem;
}
.overlay__copy p {
line-height: 1rem !important;
text-align: center;
color: var(--bs-white);
margin-bottom: 1.5rem;
}
.overlay__logos {
right: 1.5rem !important;
bottom: 4.5rem !important;
}
.overlay__logo_soah {
left: 1.5rem !important;
bottom: 4rem !important;
}
.overlay__logo_soah .Logo {
width: 110px;
height: 100%;
}
.overlay__actions {
margin-top: 1rem;
flex-direction: column !important;
}
.overlay__actions button,
.overlay__actions a {
width: 100% !important;
}
.overlay__intro-wrapper {
top: 20% !important;
width: 100%;
gap: 1rem !important;
}
.overlay__intro-wrapper .overlay__text,
.overlay__intro {
width: 100% !important;
padding: 0 2rem;
}
.overlay__text p {
margin-bottom: 0 !important;
}
.overlay__intro_exp {
width: 100% !important;
top: 8rem;
}
.overlay__experience-wrapper {
width: 100% !important;
padding: 0 2rem;
}
}
22 changes: 22 additions & 0 deletions src/components/Hero/ui/FondationLogo.jsx
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 2a79a1b

Please sign in to comment.