diff options
Diffstat (limited to 'opendc-web/opendc-web-ui/src/components')
6 files changed, 66 insertions, 64 deletions
diff --git a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js index d5c6e55f..d25a1bc4 100644 --- a/opendc-web/opendc-web-ui/src/components/home/ContactSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/ContactSection.js @@ -1,42 +1,44 @@ import React from 'react' import FontAwesome from 'react-fontawesome' -import './ContactSection.sass' +import { Row, Col } from 'reactstrap' import ContentSection from './ContentSection' +import './ContactSection.sass' + const ContactSection = () => ( - <ContentSection name="contact" title="Contact"> - <div className="row justify-content-center"> - <div className="col-4"> + <ContentSection name="contact" title="Contact" className="contact-section"> + <Row className="justify-content-center"> + <Col md="4"> <a href="https://github.com/atlarge-research/opendc"> <FontAwesome name="github" size="3x" className="mb-2" /> <div className="w-100" /> atlarge-research/opendc </a> - </div> - <div className="col-4"> + </Col> + <Col md="4"> <a href="mailto:opendc@atlarge-research.com"> <FontAwesome name="envelope" size="3x" className="mb-2" /> <div className="w-100" /> opendc@atlarge-research.com </a> - </div> - </div> - <div className="row"> - <div className="col text-center"> - <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" alt="TU Delft" /> - </div> - </div> - <div className="row"> - <div className="col text-center"> + </Col> + </Row> + <Row> + <Col className="text-center"> + <img src="img/tudelft-icon.png" className="img-fluid tudelft-icon" height="100" alt="TU Delft" /> + </Col> + </Row> + <Row> + <Col className="text-center"> A project by the <a href="http://atlarge.science" target="_blank" rel="noopener noreferrer"> <strong>@Large Research Group</strong> </a> . - </div> - </div> - <div className="row"> - <div className="col text-center disclaimer mt-5 small"> + </Col> + </Row> + <Row> + <Col className="text-center disclaimer mt-5 small"> <FontAwesome name="exclamation-triangle" size="2x" className="mr-2" /> <br /> <strong>Disclaimer: </strong> @@ -47,8 +49,8 @@ const ContactSection = () => ( <a href="https://github.com/atlarge-research/opendc/blob/master/LICENSE.txt">license</a> </strong> ). Sorry for the inconvenience. - </div> - </div> + </Col> + </Row> </ContentSection> ) diff --git a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js index 9d4832d9..3a8960d9 100644 --- a/opendc-web/opendc-web-ui/src/components/home/ContentSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/ContentSection.js @@ -1,15 +1,16 @@ +import React from 'react' import classNames from 'classnames' +import { Container } from 'reactstrap' import PropTypes from 'prop-types' -import React from 'react' import './ContentSection.sass' -const ContentSection = ({ name, title, children }) => ( - <div id={name} className={classNames(name + '-section', 'content-section')}> - <div className="container"> +const ContentSection = ({ name, title, children, className }) => ( + <section id={name} className={classNames(className, name + '-section', 'content-section')}> + <Container> <h1>{title}</h1> {children} - </div> - </div> + </Container> + </section> ) ContentSection.propTypes = { diff --git a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js index a799272a..bc6ee83b 100644 --- a/opendc-web/opendc-web-ui/src/components/home/IntroSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/IntroSection.js @@ -1,18 +1,19 @@ import React from 'react' +import { Container, Row, Col } from 'reactstrap' const IntroSection = () => ( <section id="intro" className="intro-section"> - <div className="container pt-5 pb-3"> - <div className="row justify-content-center"> - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + <Container className="pt-5 pb-3"> + <Row className="justify-content-center"> + <Col xl="4" lg="4" md="4" sm="8"> <h4>The datacenter (DC) industry...</h4> <ul> <li>Is worth over $15 bn, and growing</li> <li>Has many hard-to-grasp concepts</li> <li>Needs to become accessible to many</li> </ul> - </div> - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + </Col> + <Col xl="4" lg="4" md="4" sm="8"> <img src="img/datacenter-drawing.png" className="col-12 img-fluid" @@ -23,17 +24,17 @@ const IntroSection = () => ( Image source </a> </p> - </div> - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-8 col-8"> + </Col> + <Col xl="4" lg="4" md="4" sm="8"> <h4>OpenDC provides...</h4> <ul> <li>Collaborative online DC modeling</li> <li>Diverse and effective DC simulation</li> <li>Exploratory DC performance feedback</li> </ul> - </div> - </div> - </div> + </Col> + </Row> + </Container> </section> ) diff --git a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js index 263590d5..33aab17f 100644 --- a/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/ScreenshotSection.js @@ -1,4 +1,3 @@ -import classNames from 'classnames' import React from 'react' import { Row, Col } from 'reactstrap' import ContentSection from './ContentSection' @@ -7,20 +6,12 @@ import './ScreenshotSection.sass' const ScreenshotSection = ({ name, title, imageUrl, caption, imageIsRight, children }) => ( <ContentSection name={name} title={title}> <Row> - <Col - xl="5" - lg="5" - md="5" - sm="!2" - className={classNames('text-left my-auto', { - 'order-1': !imageIsRight, - })} - > + <Col xl="5" lg="5" md="5" sm="12" className={`text-left ${!imageIsRight ? 'order-1' : ''}`}> {children} </Col> <Col xl="7" lg="7" md="7" sm="12"> <img src={imageUrl} className="col-12 screenshot" alt={caption} /> - <Row className="text-muted justify-content-center">{caption}</Row> + <div className="row text-muted justify-content-center">{caption}</div> </Col> </Row> </ContentSection> diff --git a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js index e5ed9683..1624b4d2 100644 --- a/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/StakeholderSection.js @@ -1,29 +1,35 @@ import React from 'react' +import { Row, Col } from 'reactstrap' import ContentSection from './ContentSection' const Stakeholder = ({ name, title, subtitle }) => ( - <div className="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6"> - <img + <Col xl="4" lg="4" md="4" sm="6"> + <Col + tag="img" + xl="3" + lg="3" + md="4" + sm="4" src={'img/stakeholders/' + name + '.png'} - className="col-xl-3 col-lg-4 col-md-4 col-sm-4 col-4 img-fluid" + className="img-fluid" alt={title} /> <div className="text-center mt-2"> <h4>{title}</h4> <p>{subtitle}</p> </div> - </div> + </Col> ) const StakeholderSection = () => ( <ContentSection name="stakeholders" title="Stakeholders"> - <div className="row justify-content-center"> + <Row className="justify-content-center"> <Stakeholder name="Manager" title="Managers" subtitle="Seeing is deciding" /> <Stakeholder name="Sales" title="Sales" subtitle="Demo concepts" /> <Stakeholder name="Developer" title="DevOps" subtitle="Develop & tune" /> <Stakeholder name="Researcher" title="Researchers" subtitle="Understand & design" /> <Stakeholder name="Student" title="Students" subtitle="Grasp complex concepts" /> - </div> + </Row> </ContentSection> ) diff --git a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js index c6013c71..efd77edf 100644 --- a/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js +++ b/opendc-web/opendc-web-ui/src/components/home/TechnologiesSection.js @@ -1,39 +1,40 @@ import React from 'react' import FontAwesome from 'react-fontawesome' +import { ListGroup, ListGroupItem } from 'reactstrap' import ContentSection from './ContentSection' const TechnologiesSection = () => ( <ContentSection name="technologies" title="Technologies"> - <ul className="list-group text-left"> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-primary"> + <ListGroup className="list-group text-left"> + <ListGroupItem color="primary" className="d-flex justify-content-between align-items-center"> <span style={{ minWidth: 100 }}> <FontAwesome name="window-maximize" className="mr-2" /> <strong className="">Browser</strong> </span> <span className="text-right">JavaScript, React, Redux, Konva</span> - </li> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-warning"> + </ListGroupItem> + <ListGroupItem color="warning" className="d-flex justify-content-between align-items-center"> <span style={{ minWidth: 100 }}> <FontAwesome name="television" className="mr-2" /> <strong>Server</strong> </span> <span className="text-right">Python, Flask, FlaskSocketIO, OpenAPI</span> - </li> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-success"> + </ListGroupItem> + <ListGroupItem color="success" className="d-flex justify-content-between align-items-center"> <span style={{ minWidth: 100 }}> <FontAwesome name="database" className="mr-2" /> <strong>Database</strong> </span> <span className="text-right">MongoDB</span> - </li> - <li className="d-flex list-group-item justify-content-between align-items-center list-group-item-danger"> + </ListGroupItem> + <ListGroupItem color="danger" className="d-flex justify-content-between align-items-center"> <span style={{ minWidth: 100 }}> <FontAwesome name="cogs" className="mr-2" /> <strong>Simulator</strong> </span> <span className="text-right">Kotlin</span> - </li> - </ul> + </ListGroupItem> + </ListGroup> </ContentSection> ) |