web: simplify layout

6 years ago · 212a485468
5 changed files with 49 additions and 58 deletions
--- a/components/badge-builder.js
+++ b/components/badge-builder.js
@ -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>
-    )
-  }
-}
--- a/components/builder-helper.js
+++ b/components/builder-helper.js
@ -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>
--- a/components/builder-preview.js
+++ b/components/builder-preview.js
@ -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>
--- a/pages/_app.js
+++ b/pages/_app.js
@ -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% }
--- a/pages/builder.js
+++ b/pages/builder.js
@ -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>