Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

style: Adjust Header's padding below 380px #162

Merged
ZYSzys merged 6 commits into from
Mar 4, 2019
Merged

style: Adjust Header's padding below 380px #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c81eb94
style: Use emotion styles and fix padding style below 380px in header
BeniCheni Mar 3, 2019
8048d98
refactor: Update code format by using "format" script
BeniCheni Mar 3, 2019
9d5ca5a
test: Update header test snapshot
BeniCheni Mar 3, 2019
7ee8f04
refactor: Revert code format update
BeniCheni Mar 3, 2019
1e2c169
refactor: Revert code format update
BeniCheni Mar 3, 2019
8e9944a
refactor: Revert code format update
BeniCheni Mar 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions src/components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
import { Link } from 'gatsby'
import React from 'react'
import logo from '../images/logo.svg'
import { Link } from 'gatsby';
import React from 'react';
import { css } from 'emotion';
import logo from '../images/logo.svg';

const Header = () => (
<nav className="nav">
<ul
style={{
margin: '0 auto',
padding: '0 4.8rem',
display: 'flex',
alignItems: 'center',
listStyle: 'none',
}}
css={css`
@media (max-width: 380px) {
padding: 0;
}
margin: 0 auto;
padding: 0 4.8rem;
display: flex;
align-items: center;
list-style: none;
`}
>
<li>
<Link to="/" style={{ display: 'block' }}>
<img src={logo} alt="Node.js" className="nav__logo" />
</Link>
</li>

<li className="nav__tabs">
<a target="_blank" href="https://nodejs.org/en/download/">
Download
</a>
</li>

<li className="nav__tabs">
<a target="_blank" href="https://nodejs.org/en/docs/">
API Docs
</a>
</li>

<li className="nav__tabs">
<a target="_blank" href="https://github.com/nodejs/nodejs.dev">
GitHub
</a>
</li>

</ul>
</nav>
)
);

export default Header
export default Header;
2 changes: 1 addition & 1 deletion src/components/navigation-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ type Props = {

const NavigationItem = ({ isDone, isActive, slug, title, onClick }: Props) => {
const element = useRef<HTMLAnchorElement | null>(null);

const handleRef = (ref?: HTMLAnchorElement | null) => {
if (ref && isActive) {
element.current = ref;
Expand Down
10 changes: 1 addition & 9 deletions test/components/__snapshots__/header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,7 @@ exports[`Tests for Header component renders correctly 1`] = `
className="nav"
>
<ul
style={
Object {
"alignItems": "center",
"display": "flex",
"listStyle": "none",
"margin": "0 auto",
"padding": "0 4.8rem",
}
}
css="css-k9ksbg"
>
<li>
<a
Expand Down