Skip to content
Permalink
Browse files

We now have vertical centering

  • Loading branch information...
StoneCypher committed Apr 6, 2015
1 parent 2d5a6e0 commit d61c325fbbc831ee28e62567b0b18acf09bd8a6a
Showing with 30 additions and 4 deletions.
  1. +21 −0 TipCalc.css
  2. +1 −3 TipCalcLayout.jsx
  3. +8 −1 index.html
@@ -0,0 +1,21 @@
html, body {
height : 100%;
width : 100%;
padding : 0;
margin : 0;
border : 0;
}

#layout {
position : fixed;
top : 0;
left : 0;
right : 0;
bottom : 0;
height : 100%;
width : 100%;
}

#layout td {
vertical-align : middle;
}
@@ -3,12 +3,10 @@ var TipCalcLayout = flocks.createClass({

render: function() {

var tdstyle = { verticalAlign: 'middle', textAlign: 'center' };

return (
<table id="layout">
<tr>
<td style={tdstyle}>{this.props.children}</td>
<td>{this.props.children}</td>
</tr>
</table>
);
@@ -5,6 +5,8 @@

<title>Example Tip Calculator</title>

<link rel="stylesheet" type="text/css" href="TipCalc.css">

<script defer src="http://fb.me/JSXTransformer-0.13.1.js"></script>
<script defer src="http://fb.me/react-0.13.1.js"></script>
<script defer src="http://cdnjs.cloudflare.com/ajax/libs/flocks.js/1.6.0/flocks.js"></script>
@@ -13,7 +15,12 @@
<script type="text/jsx" defer src="TipCalcApp.jsx"></script>

<script type="text/jsx" defer>
flocks.mount({target: document.body, control: TipCalcApp}, {bill: 0, total: 0});
flocks.mount(
{target: document.body, control: TipCalcApp},
{bill: 0, total: 0}
);
</script>

</head>

0 comments on commit d61c325

Please sign in to comment.
You can’t perform that action at this time.