Overal improvement
This commit is contained in:
Corentin Risselin
parent
f11aec082d
commit
7125e35103
15 changed files with 199 additions and 86 deletions
|
|
@ -1,12 +0,0 @@
|
|||
:root
|
||||
{
|
||||
--main-bg-color: #21262b;
|
||||
--main-fg-color: #bbb;
|
||||
--lighter-bg-color: #31363b;
|
||||
--lighter-fg-color: #ccc;
|
||||
--highlight-bg-color: #41464b;
|
||||
--highlight-fg-color: #ddd;
|
||||
|
||||
--main-primary-color: hsl(213, 35%, 65%);
|
||||
--light-primary-color: hsl(213, 35%, 45%);
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
:root
|
||||
{
|
||||
--main-bg-color: #ddd;
|
||||
--main-fg-color: #21262b;
|
||||
--lighter-bg-color: #ccc;
|
||||
--lighter-fg-color: #31363b;
|
||||
--highlight-bg-color: #bbb;
|
||||
--highlight-fg-color: #41464b;
|
||||
|
||||
--main-primary-color: hsl(213, 35%, 45%);
|
||||
--light-primary-color: hsl(213, 35%, 65%);
|
||||
}
|
||||
|
|
@ -3,14 +3,15 @@
|
|||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="data:,">
|
||||
<title>Inferno - Hello World</title>
|
||||
<title>AYO Inc.</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="shortcut icon" href="/assets/favicon.svg" type="image/svg+xml">
|
||||
<link rel="shortcut icon" href="/assets/favicon.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script src="/public/bundle.js.gz"></script>
|
||||
<script src="/bundle.js.gz"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
"compression-webpack-plugin": "^3.0.0",
|
||||
"inferno": "^7.3.2",
|
||||
"inferno-redux": "^7.3.3",
|
||||
"inferno-router": "^7.3.2",
|
||||
"redux": "^4.0.5",
|
||||
"webpack": "^4.41.2",
|
||||
"webpack-cli": "^3.3.10"
|
||||
|
|
@ -28,6 +27,7 @@
|
|||
"scripts": {
|
||||
"build": "webpack --config webpack.prod.js",
|
||||
"dev": "webpack --config webpack.dev.js",
|
||||
"server": "webpack --config webpack.server.js",
|
||||
"start": "node server.js",
|
||||
"start-dev": "webpack-dev-server --config webpack.dev.js"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ const server = http.createServer((request, response) => {
|
|||
const mimeEncoding = {
|
||||
'.gz': 'gzip',
|
||||
};
|
||||
let pathname = '.' + url.parse(request.url).pathname;
|
||||
let pathname = 'public' + url.parse(request.url).pathname;
|
||||
fs.exists(pathname, function (exist) {
|
||||
if(!exist)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ export const fetchLang = (new_lang) => {
|
|||
return
|
||||
}
|
||||
dispatch(changeLang(new_lang))
|
||||
return fetch('/public/lang/' + new_lang + '.json')
|
||||
return fetch('/lang/' + new_lang + '.json')
|
||||
.then((response) => {
|
||||
if(!response.ok)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { fetchLang } from './actions'
|
|||
|
||||
import Main from './main.jsx'
|
||||
|
||||
export const init_app = () => {
|
||||
const logger = process.env.DEBUG ? store => next => action => {
|
||||
console.group(action.type)
|
||||
console.info('dispatching', action)
|
||||
|
|
@ -46,10 +47,23 @@ let savedState = {
|
|||
}
|
||||
store.subscribe(() => {
|
||||
const state = store.getState()
|
||||
if(savedState.theme !== state.theme) localStorage.setItem('theme', store.getState().theme)
|
||||
if(savedState.lang !== state.lang.lang) localStorage.setItem('lang', store.getState().lang.lang)
|
||||
if(savedState.theme !== state.theme)
|
||||
{
|
||||
savedState.theme = state.theme
|
||||
localStorage.setItem('theme', state.theme)
|
||||
}
|
||||
if(savedState.lang !== state.lang.lang)
|
||||
{
|
||||
savedState.lang = state.lang.lang
|
||||
localStorage.setItem('lang', state.lang.lang)
|
||||
}
|
||||
})
|
||||
|
||||
return store
|
||||
}
|
||||
|
||||
const store = init_app()
|
||||
|
||||
store.dispatch(fetchLang(store.getState().lang.lang)).then(() => {
|
||||
render(
|
||||
<Provider store={store}>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,8 @@
|
|||
{
|
||||
"lang": "English",
|
||||
"test": "Cloud"
|
||||
"company_name": "AYO inc.",
|
||||
"address_one_line": "Tokyo Itabashi Akatsukashinmachi 3-chōme-33-3",
|
||||
"flow1": "From repetitive tasks done by human",
|
||||
"flow2": "With the help of data gathered",
|
||||
"flow3": "To automated systems"
|
||||
}
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
{
|
||||
"lang": "日本語",
|
||||
"test": "雲"
|
||||
"company_name": "AYO\u200B合同会社",
|
||||
"address_one_line": "東京\u200B都板橋区\u200B赤塚新町\u200B三丁目３３番３ｰ１０２号",
|
||||
"flow1": "",
|
||||
"flow2": "",
|
||||
"flow3": ""
|
||||
}
|
||||
62
src/main.css
62
src/main.css
|
|
@ -8,6 +8,21 @@ body
|
|||
background-color: var(--main-bg-color);
|
||||
color: var(--main-fg-color);
|
||||
margin: 0;
|
||||
font-family: sans;
|
||||
}
|
||||
|
||||
footer
|
||||
{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
footer > div
|
||||
{
|
||||
margin: 0 10px;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h5
|
||||
|
|
@ -15,6 +30,13 @@ h1, h2, h3, h4, h5, h5
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
main
|
||||
{
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nav
|
||||
{
|
||||
display: flex;
|
||||
|
|
@ -35,8 +57,48 @@ nav .actions
|
|||
svg
|
||||
{
|
||||
fill: var(--main-fg-color);
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.content
|
||||
{
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.process-flow
|
||||
{
|
||||
background-color: var(--lighter-bg-color);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 10vw;
|
||||
}
|
||||
|
||||
.process-flow > *
|
||||
{
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.process-flow h3
|
||||
{
|
||||
margin: 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.process-flow .svg
|
||||
{
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.process-flow .svg:nth-child(even) > svg
|
||||
{
|
||||
width: 5vw;
|
||||
}
|
||||
|
||||
|
||||
.toggle
|
||||
{
|
||||
display: inline-flex;
|
||||
|
|
|
|||
41
src/main.jsx
41
src/main.jsx
|
|
@ -12,6 +12,11 @@ import LangSvg from '../assets/translate.svg'
|
|||
import LightSvg from '../assets/brightness_high.svg'
|
||||
import DarkSvg from '../assets/brightness_medium.svg'
|
||||
|
||||
import ArrowSvg from '../assets/arrow_forward.svg'
|
||||
import Flow1Svg from '../assets/undraw_maintenance_cn7j.svg'
|
||||
import Flow2Svg from '../assets/undraw_design_data_khdb.svg'
|
||||
import Flow3Svg from '../assets/undraw_Artificial_intelligence_oyxx.svg'
|
||||
|
||||
class MainComponent extends Component
|
||||
{
|
||||
componentDidMount()
|
||||
|
|
@ -40,25 +45,47 @@ class MainComponent extends Component
|
|||
render()
|
||||
{
|
||||
return (
|
||||
<div>
|
||||
<main>
|
||||
<link rel="stylesheet" type="text/css" href={'/assets/theme/' + this.props.theme + '.css'} />
|
||||
<nav>
|
||||
<Svg url={LogoSvg}/>
|
||||
<h1>{this.props.strings.test}</h1>
|
||||
<div></div>
|
||||
<Svg src={LogoSvg}/>
|
||||
<div className="actions">
|
||||
<SvgToggle default={LangSvg} text={this.props.strings.lang}
|
||||
toggle={(checked) => this.toggleLang(checked)}/>
|
||||
toggle={(checked) => this.toggleLang(checked)} value={this.props.lang === 'en'}/>
|
||||
<SvgToggle default={LightSvg} checked={DarkSvg}
|
||||
toggle={(checked) => this.toggleTheme(checked)} value={this.props.theme == 'dark'}/>
|
||||
toggle={(checked) => this.toggleTheme(checked)} value={this.props.theme === 'dark'}/>
|
||||
</div>
|
||||
</nav>
|
||||
</div>)
|
||||
<div className="content">
|
||||
<div className="process-flow">
|
||||
<div>
|
||||
<Svg src={Flow1Svg}/>
|
||||
<h3>{this.props.strings.flow1}</h3>
|
||||
</div>
|
||||
<Svg src={ArrowSvg}/>
|
||||
<div>
|
||||
<Svg src={Flow2Svg}/>
|
||||
<h3>{this.props.strings.flow2}</h3>
|
||||
</div>
|
||||
<Svg src={ArrowSvg}/>
|
||||
<div>
|
||||
<Svg src={Flow3Svg}/>
|
||||
<h3>{this.props.strings.flow3}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer>
|
||||
<div>{this.props.strings.company_name}</div>
|
||||
<div>{this.props.strings.address_one_line}</div>
|
||||
</footer>
|
||||
</main>)
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
strings: state.lang.strings,
|
||||
lang: state.lang,
|
||||
lang: state.lang.lang,
|
||||
theme: state.theme
|
||||
})
|
||||
|
||||
|
|
|
|||
13
src/svg.jsx
13
src/svg.jsx
|
|
@ -14,9 +14,16 @@ export class Svg extends Component
|
|||
|
||||
componentDidMount()
|
||||
{
|
||||
fetch(this.props.url)
|
||||
.then(res => res.text())
|
||||
fetch(this.props.src)
|
||||
.then(response => {
|
||||
if(!response.ok)
|
||||
{
|
||||
throw true
|
||||
}
|
||||
return response.text()
|
||||
})
|
||||
.then(text => this.setState({ svg: text }))
|
||||
.catch(() => console.error('Couldn\'t load ' + this.props.src))
|
||||
}
|
||||
|
||||
render()
|
||||
|
|
@ -30,6 +37,6 @@ export class Svg extends Component
|
|||
{
|
||||
return <span className="error"/>
|
||||
}
|
||||
return <span dangerouslySetInnerHTML={{ __html: this.state.svg}}/>
|
||||
return <span class="svg" dangerouslySetInnerHTML={{ __html: this.state.svg}}/>
|
||||
}
|
||||
}
|
||||
|
|
@ -8,15 +8,21 @@ export class SvgToggle extends Component
|
|||
super(props)
|
||||
this.state = {
|
||||
checked: props.value !== undefined ? props.value : false,
|
||||
svg_default: null,
|
||||
svg_checked: null
|
||||
svg_default: '',
|
||||
svg_checked: ''
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount()
|
||||
{
|
||||
fetch(this.props.default)
|
||||
.then(res => res.text())
|
||||
.then(response => {
|
||||
if(!response.ok)
|
||||
{
|
||||
throw true
|
||||
}
|
||||
return response.text()
|
||||
})
|
||||
.then(text => {
|
||||
if(this.props.checked)
|
||||
{
|
||||
|
|
@ -27,11 +33,19 @@ export class SvgToggle extends Component
|
|||
this.setState({ svg_default: text, svg_checked: text})
|
||||
}
|
||||
})
|
||||
.catch(() => console.error('Couldn\'t load ' + this.props.src))
|
||||
if(this.props.checked)
|
||||
{
|
||||
fetch(this.props.checked)
|
||||
.then(res => res.text())
|
||||
.then(response => {
|
||||
if(!response.ok)
|
||||
{
|
||||
throw true
|
||||
}
|
||||
return response.text()
|
||||
})
|
||||
.then(text => this.setState({ svg_checked: text }))
|
||||
.catch(() => console.error('Couldn\'t load ' + this.props.src))
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,9 @@ module.exports = Object.assign(
|
|||
} // set a DEBUG flag that can be used in the scripts
|
||||
}),
|
||||
new CopyPlugin([
|
||||
{from: 'src/lang', to: 'lang'}
|
||||
{from: 'index.html'},
|
||||
{from: 'src/lang', to: 'lang'},
|
||||
{from: 'assets/public', to: 'assets'}
|
||||
]),
|
||||
new CompressionPlugin(
|
||||
{
|
||||
|
|
|
|||
|
|
@ -20,7 +20,9 @@ module.exports = Object.assign(
|
|||
} // set a DEBUG flag that can be used in the scripts (can be skipped)
|
||||
}),
|
||||
new CopyPlugin([
|
||||
{from: 'src/lang', to: 'lang'}
|
||||
{from: 'index.html'},
|
||||
{from: 'src/lang', to: 'lang'},
|
||||
{from: 'assets/public', to: 'assets'}
|
||||
]),
|
||||
new CompressionPlugin(
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue