kopia lustrzana https://github.com/badgen/badgen.net
web: simplify layout
Amio
rodzic
b62e33b8ad
commit
212a485468
|
|
@ -1,47 +0,0 @@
|
|||
import React from 'react'
|
||||
import Preview from './builder-preview.js'
|
||||
import Bar from './builder-bar.js'
|
||||
import Helper from './builder-helper.js'
|
||||
|
||||
export default class extends React.Component {
|
||||
state = {
|
||||
host: undefined,
|
||||
badgeURL: '',
|
||||
placeholder: ''
|
||||
}
|
||||
|
||||
setBadgeURL = badgeURL => this.setState({ badgeURL })
|
||||
selectExample = exampleURL => this.setState({ badgeURL: exampleURL })
|
||||
|
||||
componentDidMount () {
|
||||
const forceHost = new URL(window.location).searchParams.get('host')
|
||||
const autoHost = window.location.host === 'flat.badgen.net'
|
||||
? 'https://flat.badgen.net'
|
||||
: 'https://badgen.net'
|
||||
this.setState({
|
||||
host: (forceHost || autoHost) + '/',
|
||||
placeholder: 'badge/:subject/:status/:color'
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
const { host, placeholder, badgeURL } = this.state
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Preview host={host} badgeURL={badgeURL} />
|
||||
<Bar host={host} badgeURL={badgeURL} placeholder={placeholder} onChange={this.setBadgeURL} />
|
||||
<Helper host={host} badgeURL={badgeURL} onClick={this.selectExample} />
|
||||
<style jsx>{`
|
||||
div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -4,19 +4,23 @@ const examplesDB = Object.entries(examples).reduce((accu, curr) => {
|
|||
return accu.concat(curr[1].map(eg => eg.concat(curr[0])))
|
||||
}, [])
|
||||
|
||||
export default ({ badgeURL, onClick }) => {
|
||||
export default ({ badgeURL, onSelect }) => {
|
||||
const matched = badgeURL.length > 1 && examplesDB.filter(eg => {
|
||||
return eg.find(str => str.includes(badgeURL))
|
||||
})
|
||||
|
||||
const hints = matched.length === 1 && matched[0][1] === badgeURL ? [] : matched
|
||||
|
||||
return (
|
||||
<div className='wrapper'>
|
||||
{ matched && (
|
||||
{ hints.length ? (
|
||||
<table><tbody>
|
||||
{ matched.map(eg => (
|
||||
<Hint key={eg[1]} info={eg} onSelect={e => onClick(eg[1])} />
|
||||
{ hints.map(eg => (
|
||||
<Hint key={eg[1]} info={eg} onSelect={e => onSelect(eg[1])} />
|
||||
)) }
|
||||
</tbody></table>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
<style jsx>{`
|
||||
.wrapper {
|
||||
|
|
@ -29,7 +33,7 @@ export default ({ badgeURL, onClick }) => {
|
|||
table {
|
||||
min-width: 640px;
|
||||
margin: 0 auto;
|
||||
padding: 1em 0;
|
||||
padding: 1.2em 0;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,12 @@ const BadgePreview = ({ host = 'https://badgen.net/', badgeURL }) => {
|
|||
<img src={genBadgeSrc(host, badgeURL)} />
|
||||
<style jsx>{`
|
||||
div {
|
||||
height: 90px;
|
||||
text-align: center;
|
||||
height: calc(50vh - 160px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
img {
|
||||
height: 30px;
|
||||
padding: 10px 0;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,16 @@
|
|||
import React from 'react'
|
||||
import App, { Container } from 'next/app'
|
||||
import Head from 'next/head'
|
||||
|
||||
export default class MyApp extends App {
|
||||
render () {
|
||||
const { Component, pageProps } = this.props
|
||||
return (
|
||||
<Container>
|
||||
<Head>
|
||||
<link rel='icon' type='image/png' href='/static/favicon.png' />
|
||||
<meta name='viewport' content='initial-scale=1.0, width=device-width' />
|
||||
</Head>
|
||||
<Component {...pageProps} />
|
||||
<style jsx global>{`
|
||||
html, body { margin: 0; height: 100% }
|
||||
|
|
|
|||
|
|
@ -1,14 +1,43 @@
|
|||
import React from 'react'
|
||||
import BadgeBuilder from '../components/badge-builder.js'
|
||||
import Preview from '../components/builder-preview.js'
|
||||
import Bar from '../components/builder-bar.js'
|
||||
import Helper from '../components/builder-helper.js'
|
||||
|
||||
export default class BuilderPage extends React.Component {
|
||||
state = {
|
||||
host: undefined,
|
||||
badgeURL: '',
|
||||
placeholder: ''
|
||||
}
|
||||
|
||||
setBadgeURL = badgeURL => this.setState({ badgeURL })
|
||||
selectExample = exampleURL => this.setState({ badgeURL: exampleURL })
|
||||
|
||||
componentDidMount () {
|
||||
const forceHost = new URL(window.location).searchParams.get('host')
|
||||
const autoHost = window.location.host === 'flat.badgen.net'
|
||||
? 'https://flat.badgen.net'
|
||||
: 'https://badgen.net'
|
||||
this.setState({
|
||||
host: (forceHost || autoHost) + '/',
|
||||
placeholder: 'badge/:subject/:status/:color'
|
||||
})
|
||||
}
|
||||
|
||||
export default class extends React.Component {
|
||||
render () {
|
||||
const { host, placeholder, badgeURL } = this.state
|
||||
|
||||
return (
|
||||
<div>
|
||||
<BadgeBuilder />
|
||||
<Preview host={host} badgeURL={badgeURL} />
|
||||
<Bar host={host} badgeURL={badgeURL} placeholder={placeholder} onChange={this.setBadgeURL} />
|
||||
<Helper host={host} badgeURL={badgeURL} onSelect={this.selectExample} />
|
||||
<style jsx>{`
|
||||
div {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue