kopia lustrzana https://github.com/badgen/badgen.net
web: refine builder & gallery footer
rodzic
86651ff76d
commit
cdb8c5a8ba
|
@ -6,11 +6,16 @@ export default () => (
|
|||
<div>
|
||||
<h3><img src='/static/badgen-logo-w.svg' />Badgen Service</h3>
|
||||
<div className='sitemap'>
|
||||
<Link href='/gallery'><a>Gallery</a></Link>
|
||||
<Link href='https://badgen.net'><a>Classic</a></Link>
|
||||
<em>/</em>
|
||||
<Link href='https://flat.badgen.net'><a>Flat</a></Link>
|
||||
<em>/</em>
|
||||
<Link href='https://api.badgen.net'><a>API</a></Link>
|
||||
<em>/</em>
|
||||
<Link href='/gallery'><a>Gallery</a></Link>
|
||||
<em>/</em>
|
||||
<Link href='https://status.badgen.net'><a>Status</a></Link>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
<div className='bottom'>
|
||||
|
@ -29,7 +34,7 @@ export default () => (
|
|||
</div>
|
||||
<style jsx>{`
|
||||
footer {
|
||||
background-color: #333;
|
||||
background-color: #222;
|
||||
padding: 2rem 2rem;
|
||||
color: #777;
|
||||
}
|
||||
|
@ -37,11 +42,12 @@ export default () => (
|
|||
margin: 0 auto;
|
||||
}
|
||||
h3 {
|
||||
font: 22px/32px Merriweather, serif;
|
||||
color: #EEE;
|
||||
font: 24px/32px Merriweather, serif;
|
||||
letter-spacing: 0.5px;
|
||||
color: #DDD;
|
||||
}
|
||||
h3 img {
|
||||
height: 20px;
|
||||
height: 21px;
|
||||
opacity: 0.8;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
|
@ -49,6 +55,7 @@ export default () => (
|
|||
}
|
||||
.sitemap {
|
||||
line-height: 26px;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
.sitemap a {
|
||||
color: #999;
|
||||
|
@ -60,11 +67,12 @@ export default () => (
|
|||
text-decoration: underline;
|
||||
}
|
||||
.sitemap em {
|
||||
margin: 0 0.5rem;
|
||||
color: #555;
|
||||
margin: 0 0.6rem;
|
||||
}
|
||||
.bottom {
|
||||
margin-top: 2rem;
|
||||
border-top: 1px solid #555;
|
||||
border-top: 1px solid #444;
|
||||
padding-top: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 100px;
|
||||
|
@ -76,14 +84,14 @@ export default () => (
|
|||
text-align: right;
|
||||
}
|
||||
.links a {
|
||||
margin-left: 10px;
|
||||
margin-left: 1em;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.links a:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.links img {
|
||||
height: 20px;
|
||||
height: 22px;
|
||||
}
|
||||
`}</style>
|
||||
</footer>
|
||||
|
|
|
@ -33,7 +33,7 @@ export default class BuilderPage extends React.Component {
|
|||
const { host, placeholder, badgeURL, focus } = this.state
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='home'>
|
||||
<Preview host={host} badgeURL={badgeURL} focus={focus} />
|
||||
<Bar
|
||||
host={host}
|
||||
|
@ -43,11 +43,29 @@ export default class BuilderPage extends React.Component {
|
|||
onBlur={this.setBlur}
|
||||
onFocus={this.setFocus} />
|
||||
<Hints focus={focus} badgeURL={badgeURL} />
|
||||
{ badgeURL &&
|
||||
<Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} /> }
|
||||
{ badgeURL && <Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} /> }
|
||||
{ !badgeURL && <div className='home-footer'>
|
||||
<a href='/gallery/live'>BADGE GALLERY</a>
|
||||
</div> }
|
||||
<style jsx>{`
|
||||
div {
|
||||
height: 100%;
|
||||
.home {
|
||||
height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
.home-footer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.home-footer a {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
border: 1px solid #FFF;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
.home-footer a:hover {
|
||||
border-color: #333;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
|
|
|
@ -6,7 +6,7 @@ import liveExamples from '../../libs/examples-live.js'
|
|||
export default class Gallery extends React.Component {
|
||||
render () {
|
||||
return (
|
||||
<GalleryLayout tab='static'>
|
||||
<GalleryLayout tab='live'>
|
||||
<BadgeExamples data={liveExamples} />
|
||||
</GalleryLayout>
|
||||
)
|
||||
|
|
|
@ -1,7 +1,3 @@
|
|||
import React from 'react'
|
||||
import Builder from './builder.js'
|
||||
|
||||
export default class Index extends React.Component {
|
||||
render () {
|
||||
return 'hello'
|
||||
}
|
||||
}
|
||||
export default Builder
|
||||
|
|
Ładowanie…
Reference in New Issue