PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Make it log in

Browse source
This commit is contained in:
David Baker 2015-06-11 18:23:02 +01:00
parent eeb2dfd1fc
commit f487b9ba04
5 changed files with 46 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
css/common.css Normal file
View file

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

12
css/molecules/ProgressBar.css Normal file
View file

@ -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 Normal file
View file

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

@ -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 Normal file
View file

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