1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-11-15 01:34:57 +01:00

global layout and menu refactor

This commit is contained in:
Matthias Kretschmann 2020-07-09 13:20:50 +02:00
parent 39fb280666
commit 8159b66a52
Signed by: m
GPG Key ID: 606EEEF3C479A91F
11 changed files with 159 additions and 91 deletions

View File

@ -12,10 +12,7 @@
}
.main {
padding: calc(var(--spacer) * 2) calc(var(--spacer) / 1.5);
margin-left: auto;
margin-right: auto;
max-width: var(--layout-max-width);
padding: calc(var(--spacer) * 2) 0;
/* sticky footer technique */
flex: 1;

View File

@ -5,6 +5,7 @@ import Footer from './organisms/Footer'
import PageHeader from './molecules/PageHeader'
import styles from './Layout.module.css'
import Seo from './atoms/Seo'
import Container from './atoms/Container'
export interface LayoutProps {
children: ReactNode
@ -33,10 +34,12 @@ export default function Layout({
<Header />
<main className={styles.main}>
<Container>
{title && !noPageHeader && (
<PageHeader title={title} description={description} />
)}
{children}
</Container>
</main>
<Footer />
</div>

View File

@ -0,0 +1,12 @@
.container {
max-width: var(--break-point--large);
margin-left: auto;
margin-right: auto;
padding-left: calc(var(--spacer) / 1.2);
padding-right: calc(var(--spacer) / 1.2);
width: 100%;
}
.container.narrow {
max-width: 42rem;
}

View File

@ -0,0 +1,22 @@
import React, { ReactElement, ReactNode } from 'react'
import styles from './Container.module.css'
export default function Container({
children,
narrow,
className
}: {
children: ReactNode
narrow?: boolean
className?: string
}): ReactElement {
return (
<div
className={`${styles.container} ${narrow && styles.narrow} ${
className && className
}`}
>
{children}
</div>
)
}

View File

@ -1,12 +1,91 @@
.menu {
width: 100%;
}
.menu > div,
.link {
.menu > div {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: calc(var(--spacer) / 2);
padding-bottom: calc(var(--spacer) / 2);
}
.logoUnit {
display: flex;
align-items: center;
}
.logoUnit svg {
fill: var(--color-primary);
width: 4rem;
height: 4rem;
margin-left: -0.5rem;
}
.logoUnit path {
fill: var(--brand-black);
}
.logoUnit:hover path {
fill: var(--brand-pink);
}
.title {
display: none;
}
@media screen and (min-width: 40rem) {
.title {
margin: 0;
display: block;
color: var(--color-secondary);
font-size: var(--font-size-base);
}
.logoUnit svg {
margin-top: -0.4rem;
}
}
@media screen and (min-width: 60rem) {
.title {
font-size: var(--font-size-large);
}
}
.navigation {
white-space: nowrap;
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.navigation::-webkit-scrollbar,
.navigation::-moz-scrollbar {
display: none;
}
.navigation li {
display: inline-block;
}
.navigation button,
.link {
display: block;
padding: calc(var(--spacer) / 2);
margin-left: var(--spacer);
text-transform: uppercase;
color: var(--brand-grey);
font-weight: var(--font-weight-bold);
margin: calc(var(--spacer) / 4) var(--spacer);
font-size: var(--font-size-small);
position: relative;
z-index: 1;
}
.navigation button {
text-transform: none;
padding-top: calc(var(--spacer) / 4);
padding-bottom: calc(var(--spacer) / 4);
}
.link:hover,
@ -15,14 +94,12 @@
color: var(--brand-pink);
}
.link.active {
.link[aria-current],
.link[aria-current]:hover,
.link[aria-current]:focus {
color: var(--brand-pink);
}
.link:first-child {
margin-left: 0;
}
.link:last-child {
margin-right: 0;
padding-right: 0;
}

View File

@ -1,9 +1,11 @@
import React from 'react'
import React, { ReactElement } from 'react'
import { Link } from 'gatsby'
import { useLocation } from '@reach/router'
import styles from './Menu.module.css'
import { useSiteMetadata } from '../../hooks/useSiteMetadata'
import Wallet from './Wallet'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
import Container from '../atoms/Container'
declare type MenuItem = {
name: string
@ -25,15 +27,28 @@ function MenuLink({ item }: { item: MenuItem }) {
)
}
export default function Menu() {
const { menu } = useSiteMetadata()
export default function Menu(): ReactElement {
const { menu, siteTitle } = useSiteMetadata()
return (
<nav className={styles.menu}>
<Container>
<Link to="/" className={styles.logoUnit}>
<Logo />
<h1 className={styles.title}>{siteTitle}</h1>
</Link>
<ul className={styles.navigation}>
<li>
<Wallet />
</li>
{menu.map((item: MenuItem) => (
<MenuLink key={item.name} item={item} />
<li key={item.name}>
<MenuLink item={item} />
</li>
))}
</ul>
</Container>
</nav>
)
}

View File

@ -5,7 +5,7 @@
text-transform: uppercase;
border: 1px solid var(--brand-grey-lighter);
border-radius: var(--border-radius);
padding: calc(var(--spacer) / 6) calc(var(--spacer) / 4);
padding: calc(var(--spacer) / 4);
white-space: nowrap;
background: none;
color: var(--brand-grey);

View File

@ -6,7 +6,7 @@
@media screen and (min-width: 25rem) {
.assetList {
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: var(--spacer);
}
}

View File

@ -1,55 +1,3 @@
.header {
background-color: var(--brand-white);
}
.content {
padding: calc(var(--spacer) / 2) var(--spacer);
display: flex;
justify-content: space-between;
align-items: center;
margin-left: auto;
margin-right: auto;
max-width: var(--layout-max-width);
}
.logoUnit {
display: flex;
align-items: center;
}
.logoUnit svg {
fill: var(--color-primary);
width: 4rem;
height: 4rem;
margin-right: calc(var(--spacer) / 2);
}
.logoUnit path {
fill: var(--brand-black);
}
.logoUnit:hover path {
fill: var(--brand-pink);
}
.title {
display: none;
}
@media screen and (min-width: 40rem) {
.title {
margin: 0;
display: block;
color: var(--color-secondary);
font-size: var(--font-size-base);
}
.logoUnit svg {
margin-top: -0.4rem;
}
}
@media screen and (min-width: 60rem) {
.title {
font-size: var(--font-size-large);
}
}

View File

@ -1,23 +1,11 @@
import React, { ReactElement } from 'react'
import { Link } from 'gatsby'
import Menu from '../molecules/Menu'
import styles from './Header.module.css'
import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
import { useSiteMetadata } from '../../hooks/useSiteMetadata'
export default function Header(): ReactElement {
const { siteTitle } = useSiteMetadata()
return (
<header className={styles.header}>
<div className={styles.content}>
<Link to="/" className={styles.logoUnit}>
<Logo />
<h1 className={styles.title}>{siteTitle}</h1>
</Link>
<Menu />
</div>
</header>
)
}

View File

@ -6,6 +6,12 @@
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
html {
font-size: var(--font-size-root);
scroll-behavior: smooth;