Render app pages using react
This commit is contained in:
parent
a3c580aae0
commit
2fd57e8f9a
4 changed files with 33 additions and 16 deletions
|
@ -9,20 +9,10 @@
|
||||||
<script type="text/javascript" src="js/jquery.js"></script>
|
<script type="text/javascript" src="js/jquery.js"></script>
|
||||||
<title>Oriment</title>
|
<title>Oriment</title>
|
||||||
</head>
|
</head>
|
||||||
<body id="main">
|
<body>
|
||||||
<div class="container jumbotron header">
|
<div id="app"></div>
|
||||||
<h1 class="animated rubberBand">Oriment</h1>
|
</body>
|
||||||
<h5>Orient documents and images automagically</h5>
|
|
||||||
</div>
|
|
||||||
<div class="container animated zoomInUp">
|
|
||||||
<img src="img/compass.png" id="compass"/>
|
|
||||||
</div>
|
|
||||||
<footer>
|
|
||||||
<a class="btn btn-success btn-lg animated pulse infinite">Open Document / Images</a>
|
|
||||||
<input type="file" style="display: none" />
|
|
||||||
</footer>
|
|
||||||
<script type="text/javascript" src="cordova.js"></script>
|
<script type="text/javascript" src="cordova.js"></script>
|
||||||
<script type="text/javascript" src="js/libs.js"></script>
|
<script type="text/javascript" src="js/libs.js"></script>
|
||||||
<script type="text/javascript" src="js/app.js"></script>
|
<script type="text/javascript" src="js/app.js"></script>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import './utils';
|
import './utils';
|
||||||
|
import React from 'react';
|
||||||
|
import HomeScreen from './components/homescreen';
|
||||||
|
|
||||||
document.addEventListener("deviceready", function () {
|
document.addEventListener("deviceready", function () {
|
||||||
function onSuccess(heading) {
|
function onSuccess(heading) {
|
||||||
|
@ -28,3 +29,5 @@ $('footer input').on('change', function () {
|
||||||
reader.onload = function(e) { $('#compass').attr('src', e.target.result); };
|
reader.onload = function(e) { $('#compass').attr('src', e.target.result); };
|
||||||
reader.readAsDataURL(file);
|
reader.readAsDataURL(file);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
React.render(<HomeScreen />, $('#app')[0]);
|
||||||
|
|
21
src/js/components/homescreen.js
Normal file
21
src/js/components/homescreen.js
Normal file
|
@ -0,0 +1,21 @@
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export default class HomeScreen extends React.Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<span id="main">
|
||||||
|
<div className="container jumbotron header">
|
||||||
|
<h1 className="animated rubberBand">Oriment</h1>
|
||||||
|
<h5>Orient documents and images automagically</h5>
|
||||||
|
</div>
|
||||||
|
<div className="container animated zoomInUp">
|
||||||
|
<img src="img/compass.png" id="compass"/>
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<a className="btn btn-success btn-lg animated pulse infinite">Open Document / Images</a>
|
||||||
|
<input type="file" />
|
||||||
|
</footer>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
|
@ -63,4 +63,7 @@ footer {
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
padding-bottom: 25px;
|
padding-bottom: 25px;
|
||||||
|
input {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue