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:
parent
39fb280666
commit
8159b66a52
@ -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;
|
||||
|
@ -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>
|
||||
|
12
src/components/atoms/Container.module.css
Normal file
12
src/components/atoms/Container.module.css
Normal 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;
|
||||
}
|
22
src/components/atoms/Container.tsx
Normal file
22
src/components/atoms/Container.tsx
Normal 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>
|
||||
)
|
||||
}
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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);
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -6,6 +6,12 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: var(--font-size-root);
|
||||
scroll-behavior: smooth;
|
||||
|
Loading…
Reference in New Issue
Block a user