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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
tests/reftests/dynamicstyle.html
View File

@ -18,9 +18,14 @@
padding: 20px; padding: 20px;
} }
.div1 { .div1 {
background: darkgreen; background: darkred;
color: white; color: white;
} }
@media (min-width: 10px) {
.div1 {
background: darkgreen;
}
}
</style> </style>
<script> <script>
document.querySelector('#style').sheet.insertRule( document.querySelector('#style').sheet.insertRule(

2
www/package.json
View File

@ -28,7 +28,7 @@
"scripts": { "scripts": {
"copybuild": "mkdirp public/dist && cpy ../dist/*.js public/dist", "copybuild": "mkdirp public/dist && cpy ../dist/*.js public/dist",
"build": "npm run copybuild && gatsby build", "build": "npm run copybuild && gatsby build",
"develop": "gatsby develop", "start": "gatsby develop",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"
} }
} }

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

4
www/src/images/ic_menu_black_24px.svg Normal file
View File

@ -0,0 +1,4 @@
<svg fill="#ffffff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 210 B

41
www/src/pages/index.js
View File

@ -55,7 +55,16 @@ export default ({data}) => {
Screenshots with JavaScript Screenshots with JavaScript
</h4> </h4>
<div css={{display: 'flex', justifyContent: 'center'}}> <div
css={{
display: 'flex',
justifyContent: 'center',
flexDirection: 'column',
'@media(min-width: 1000px)': {
flexDirection: 'row'
}
}}
>
<div> <div>
<h4>HTML</h4> <h4>HTML</h4>
<div <div
@ -101,14 +110,25 @@ export default ({data}) => {
Documentation Documentation
</Link> </Link>
</div> </div>
<div css={{display: 'flex'}}> <div
css={{
display: 'flex',
flexDirection: 'column',
'@media(min-width: 1000px)': {
flexDirection: 'row'
}
}}
>
<div <div
css={{ css={{
flex: 1, flex: 1,
backgroundColor: '#558b2f', backgroundColor: '#558b2f',
padding: '10px 20px', padding: '10px 20px',
borderRadius: '10px', borderRadius: '10px',
marginRight: '5px' marginBottom: '10px',
'@media(min-width: 1000px)': {
marginRight: '5px'
}
}} }}
> >
<Carbon /> <Carbon />
@ -116,12 +136,16 @@ export default ({data}) => {
<div <div
css={{ css={{
flex: 1, flex: 1,
marginLeft: '5px',
backgroundColor: '#558b2f', backgroundColor: '#558b2f',
padding: '10px 20px', padding: '10px 20px',
borderRadius: '10px', borderRadius: '10px',
textAlign: 'left', textAlign: 'left',
marginRight: '5px' marginBottom: '10px',
'@media(min-width: 1000px)': {
marginLeft: '5px',
marginRight: '5px'
}
}} }}
> >
<h6>Install NPM</h6> <h6>Install NPM</h6>
@ -143,11 +167,14 @@ export default ({data}) => {
<div <div
css={{ css={{
flex: 1, flex: 1,
marginLeft: '5px',
backgroundColor: '#558b2f', backgroundColor: '#558b2f',
padding: '10px 20px', padding: '10px 20px',
borderRadius: '10px', borderRadius: '10px',
textAlign: 'left' textAlign: 'left',
marginBottom: '10px',
'@media(min-width: 1000px)': {
marginLeft: '5px'
}
}} }}
> >
<h5>Connect</h5> <h5>Connect</h5>

21
www/src/templates/docs.js
View File

@ -19,7 +19,9 @@ export default ({data}) => {
<Navigation /> <Navigation />
<div <div
css={{ css={{
marginLeft: '300px', '@media(min-width: 1000px)': {
marginLeft: '300px'
},
display: 'flex', display: 'flex',
minHeight: '100vh', minHeight: '100vh',
flexDirection: 'column' flexDirection: 'column'
@ -37,10 +39,23 @@ export default ({data}) => {
<div css={{maxWidth: '960px'}}> <div css={{maxWidth: '960px'}}>
<div css={{width: '85%', margin: '0 auto', display: 'flex'}}> <div css={{width: '85%', margin: '0 auto', display: 'flex'}}>
<div css={{flex: 1}}> <div css={{flex: 1}}>
<h1 css={{padding: '20px 0'}}> <h1
css={{
padding: '20px 0',
fontSize: '2.8rem',
'@media(min-width: 1000px)': {fontSize: '4.2rem'}
}}
>
{post.frontmatter.title} {post.frontmatter.title}
</h1> </h1>
<h4 css={{fontWeight: 300, color: 'rgba(255, 255, 255, 0.6)'}}> <h4
css={{
fontWeight: 300,
color: 'rgba(255, 255, 255, 0.6)',
fontSize: '1.8rem',
'@media(min-width: 1000px)': {fontSize: '2.28rem'}
}}
>
{post.frontmatter.description} {post.frontmatter.description}
</h4> </h4>
</div> </div>