Render app pages using react

This commit is contained in:
Jake Howard 2015-12-23 08:39:16 +00:00
parent a3c580aae0
commit 2fd57e8f9a
4 changed files with 33 additions and 16 deletions

View file

@ -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>

View file

@ -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]);

View 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>
);
}
};

View file

@ -63,4 +63,7 @@ footer {
left: 0; left: 0;
width: 100vw; width: 100vw;
padding-bottom: 25px; padding-bottom: 25px;
input {
display: none;
}
} }