mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Make website responsive

Browse Source
This commit is contained in:
MoyuScript
2018-01-08 21:38:54 +08:00
parent a03bd8b5a1
commit 45c75b61b8
6 changed files with 140 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
www/src/components/navigation.js
View File

@@ -1,6 +1,7 @@
import React from 'react';
import React, {Component} from 'react';
import Link from 'gatsby-link';
import logo from '../images/logo.svg';
import menu from '../images/ic_menu_black_24px.svg';
const lineLinkStyle = {
lineHeight: '44px',
@@ -16,15 +17,17 @@ const lineLinkStyle = {
};
const navStyle = {
height: '100%',
width: '300px',
position: 'fixed',
top: 0,
left: 0,
'@media(min-width: 1000px)': {
position: 'fixed',
top: 0,
left: 0,
width: '300px',
boxShadow:
'0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)',
height: '100%'
},
fontSize: '13px',
backgroundColor: '#fff',
boxShadow:
'0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2)'
backgroundColor: '#fff'
};
const links = [
@@ -36,31 +39,70 @@ const links = [
{href: '/faq', text: 'FAQ'}
];
export default () =>
<div css={navStyle}>
<Link to="/" css={{background: '#558b2f', display: 'block', padding: '24px 30px 24px'}}>
<img src={logo} css={{margin: 0}} />
</Link>
<ul
style={{
listStyle: 'none',
margin: 0,
padding: 0
}}
>
{links.map(({href, text}, i) =>
<li style={{padding: 0, margin: 0}} key={i}>
<Link
to={href}
css={lineLinkStyle}
activeStyle={{
backgroundColor: '#7cb342',
color: '#fff'
export default class Navigation extends Component {
constructor(props) {
super(props);
this.state = {open: false};
}
render() {
return (
<div css={navStyle}>
<div
css={{
background: '#558b2f',
alignItems: 'center',
padding: '24px 30px 24px 0px',
display: 'flex',
'@media(min-width: 1000px)': {
padding: '24px 30px 24px 30px'
}
}}
>
<img
src={menu}
onClick={() => this.setState(s => ({open: !s.open}))}
css={{
width: '50px',
cursor: 'pointer',
margin: '0 20px 0',
display: 'block',
'@media(min-width: 1000px)': {
display: 'none'
}
}}
>
{text}
/>
<Link to="/">
<img src={logo} css={{margin: 0}} />
</Link>
</li>
)}
</ul>
</div>;
</div>
<ul
css={{
display: this.state.open ? 'block' : 'none',
listStyle: 'none',
margin: 0,
padding: 0,
'@media(min-width: 1000px)': {
display: 'block'
}
}}
>
{links.map(({href, text}, i) =>
<li style={{padding: 0, margin: 0}} key={i}>
<Link
to={href}
css={lineLinkStyle}
activeStyle={{
backgroundColor: '#7cb342',
color: '#fff'
}}
>
{text}
</Link>
</li>
)}
</ul>
</div>
);
}
}