Browse Source

Make it log in

pull/1/head
David Baker 7 years ago
parent
commit
f487b9ba04
  1. 3
      css/common.css
  2. 12
      css/molecules/ProgressBar.css
  3. 11
      css/templates/Login.css
  4. 1
      example/index.html
  5. 19
      src/molecules/ProgressBar.js

3
css/common.css

@ -0,0 +1,3 @@
div.error {
color: red;
}

12
css/molecules/ProgressBar.css

@ -0,0 +1,12 @@
.mx_ProgressBar {
height: 5px;
border-radius: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
.mx_ProgressBar_fill {
height: 100%;
background-color: #666;
transition: width 0.1s ease;
}

11
css/templates/Login.css

@ -0,0 +1,11 @@
.mx_Login {
width: 600px;
height: 350px;
margin-left: auto;
margin-right: auto;
padding: 10px;
text-align: center;
background-color: #eee;
border: 1px solid black;
}

1
example/index.html

@ -7,5 +7,6 @@
<body>
<section id="matrixchat"></section>
<script src="bundle.js"></script>
<link rel="stylesheet" href="bundle.css">
</body>
</html>

19
src/molecules/ProgressBar.js

@ -0,0 +1,19 @@
var React = require('react');
module.exports = React.createClass({
propTypes: {
value: React.PropTypes.number,
max: React.PropTypes.number
},
render: function() {
// Would use an HTML5 progress tag but if that doesn't animate if you
// use the HTML attributes rather than styles
var progressStyle = {
width: ((this.props.value / this.props.max) * 100)+"%"
};
return (
<div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
);
}
});
Loading…
Cancel
Save