LayoutJob.tsx

/**
 * Lays out a job with a job form in a scrollable region
 * with the footer pinned to the bottom
 */
@ui.Radium
export class LayoutJob extends React.Component<{
    content:JSX.Element,
    footer:JSX.Element,
},{}>{
    private styles = {
        content: {
            root: csx.extend(
                csx.flex,
                csx.scroll
            )
        },
        footer: {
            root: csx.extend(
                csx.flexRoot,
                csx.centerCenter,
                BoxModel.padding(10),
                {
                    background: '#FFF',
                }
            ),
            content: csx.extend(
                csx.flex,
                {
                    maxWidth: '1170px'
                }
            )
        }
    }
    render(){
        return (
            <div style={[csx.flex,csx.vertical]}>
                <div style={this.styles.content.root}>{this.props.content}</div>
                <div style={this.styles.footer.root}>
                    <div style={this.styles.footer.content}>
                        {this.props.footer}
                    </div>
                </div>
            </div>
        );
    }
}