cupcakearmy/fight-of-the-mobiles
1
0
Fork 0
mirror of https://github.com/cupcakearmy/fight-of-the-mobiles.git synced 2024-12-23 00:16:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

src

Browse Source
This commit is contained in:
nicco 2018-09-04 12:13:05 +02:00
parent 2d0fcce046
commit 6b6517cc53
9 changed files with 221 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/cordova/src/components/Button.jsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
export default class Button extends React.Component {
render() {
return <div className="button" onClick={this.props.onPress}>
<span>{this.props.text}</span>
</div>
}
}

12
src/cordova/src/components/Logo.jsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react'
export default class Logo extends React.Component {
render() {
return <div className="Logo">
<div className="title">QR NOTIFICATOR</div>
<div className="badge">
<div>2</div>
</div>
</div>
}
}

3
src/cordova/src/components/Spacer.jsx Normal file
View File

@ -0,0 +1,3 @@
import React from 'react'
export default (props) => <div style={{ height: `${props.height}px` }}></div>

14
src/cordova/src/index.html Executable file
View File

@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Basic Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="root"></div>
</body>
</html>

12
src/cordova/src/index.jsx Executable file
View File

@ -0,0 +1,12 @@
import React from 'react'
import ReactDOM from 'react-dom'
import './styles.less'
import './assets/fonts/fonts.less'
import App from './screens/App'
ReactDOM.render(
<App />
, document.getElementById('root')
)

42
src/cordova/src/screens/App.jsx Normal file
View File

@ -0,0 +1,42 @@
import React from 'react'
import Home from './Home'
import Scan from './Scan'
const Screens = {
home: Home,
scan: Scan
}
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
route: 'home',
data: {},
}
this.navigate = this.navigate.bind(this)
}
navigate(route, data = {}) {
this.setState({
route, data
})
}
render() {
const Current = Screens[this.state.route]
return <div id="app">
<div className="bg" />
<div className="content">
{Current && <Current data={this.state.data} navigate={this.navigate} />}
</div>
</div>
}
}

30
src/cordova/src/screens/Home.jsx Normal file
View File

@ -0,0 +1,30 @@
import React from 'react'
import Button from '../components/Button'
import Spacer from '../components/Spacer';
import Logo from '../components/Logo';
const list = {
1: 'Open camera.',
2: 'Scan QR code.',
3: 'Get notified',
}
export default class Home extends React.Component {
render() {
return <div id="Home" className="center fill">
<div className="column center">
<Logo />
<Spacer height={120} />
<Button text="Scan" onPress={() => this.props.navigate('scan')} />
<Spacer height={120} />
<div className="list">
{Object.entries(list).map((entry, i) => <div key={i}>
<span className="bold">{entry[0]}. </span>
<span>{entry[1]}</span>
</div>)}
</div>
</div>
</div>
}
}

12
src/cordova/src/screens/Scan.jsx Normal file
View File

@ -0,0 +1,12 @@
import React from 'react'
import Button from '../components/Button'
export default class Home extends React.Component {
render() {
return <div>
<div>Scan</div>
<Button text="Test" onPress={() => { console.log('Pressed') }} />
</div>
}
}

87
src/cordova/src/styles.less Normal file
View File

@ -0,0 +1,87 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
overflow: hidden
}
.fill {
width: 100%;
height: 100%;
}
.column {
display: flex;
flex-direction: column;
}
.row {
display: flex;
flex-direction: row;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.abs {
position: absolute;
top: 0;
left: 0;
.fill;
}
.button {
border: 1px solid #000;
height: 45px;
width: 180px;
border-radius: 50px;
.center;
}
.bold {
font-weight: bold;
}
#app {
.fill;
font-family: 'Helvetica Neue';
.bg {
.abs;
z-index: 0;
background-image: linear-gradient(135deg, #6FABFF, #E4FF71);
}
.content {
.abs;
z-index: 1;
}
}
.Logo {
position: relative;
font-family: 'Jaapokki';
.title {
font-size: 30px;
}
.badge {
.center;
position: absolute;
right: -20px;
top: -5px;
width: 20px;
height: 20px;
background-color: #f00;
border-radius: 20px;
div {
font-size: 10px;
}
}
}