Skip to content

Commit

Permalink
fixed my mystake about css
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kerry-G
Kerry-G committed Feb 1, 2018
1 parent f1d6470 commit 8e01c16
Show file tree
Hide file tree
Showing 4 changed files with 139 additions and 117 deletions.
2 changes: 1 addition & 1 deletion static/src/components/body/Body.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ class Body extends Component {
return (
<div>
<Row>
<Col xs={12} md={4} mdOffset={8}>
<Col xs={12} md={3} mdOffset={9}>
<div className="box-login">
<Login registerModal={this.handleShowRegister}/>
</div>
Expand Down
193 changes: 105 additions & 88 deletions static/src/components/body/Register.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Component } from 'react'
import { Modal, Button, FormGroup, FormControl, HelpBlock, ControlLabel, Alert, Image } from 'react-bootstrap'
import { Grid, Col , Row, Modal, Button, FormGroup, FormControl, HelpBlock, ControlLabel, Alert, Image } from 'react-bootstrap'
import Select from 'react-select'
class Register extends Component {
constructor(props) {
Expand Down Expand Up @@ -31,6 +31,10 @@ class Register extends Component {
this.handlePreviousPage = this.handlePreviousPage.bind(this);
}

componentDidMount() {
console.log("Test")
}

componentDidUpdate() {
this.validateButton()
}
Expand Down Expand Up @@ -87,7 +91,7 @@ class Register extends Component {
email: this.state.email,
password: this.state.pw,
engineer: this.state.role,
display_image: "/public/images/avatar/1.png"
display_Image: "/public/Images/avatar/1.png"
}
console.log(data)
let myHeaders = new Headers();
Expand Down Expand Up @@ -193,111 +197,124 @@ class Register extends Component {
}
let body
if (this.state.page == 1) {
body = <div >
<div class = "menu">
{alert}
<FieldGroup
type="text"
label="E-mail"
placeholder="email"
valid={this.state.validEmail}
onChange={(e) => {
this.validateEmail(e.target.value)
this.setState({ email: e.target.value })
}}
/>
<FieldGroup
label="Password"
type="password"
onChange={(e) => this.setState({ pw: e.target.value })}
/>
</div>
<div class = "picture">
<Image src = "https://i.imgur.com/cmPoLVn.jpg" responsive rounded />
</div>

</div>


body =

<div>
<Col xs={12} md={4}>
<div className="menu">
<FieldGroup
type="text"
label="E-mail"
placeholder="email"
valid={this.state.validEmail}
onChange={(e) => {
this.validateEmail(e.target.value)
this.setState({ email: e.target.value })
}}
/>
<FieldGroup
label="Password"
type="password"
onChange={(e) => this.setState({ pw: e.target.value })}
/>
</div>
</Col>
<Col xs={12} md={8}>
<div className="picture">
<Image src="https://i.imgur.com/cmPoLVn.jpg" responsive rounded />
</div>
</Col>
</div>

}

else if (this.state.page == 2) {
body = <div>
<Col xs={12} md={4}>
<div class="menu">
<FieldGroup
type="text"
label="First Name"
placeholder="John"
onChange={(e) => {
this.setState({ fname: e.target.value })
}}
/>
<FieldGroup
type="text"
label="Last Name"
placeholder="McQueen"
onChange={(e) => {
this.setState({ lname: e.target.value })
}}
/>
</div>
<div class = "picture">
<Image src = "https://i.imgur.com/aZpgMrl.jpg" responsive rounded />
</div>
</div>
<FieldGroup
type="text"
label="First Name"
placeholder="John"
onChange={(e) => {
this.setState({ fname: e.target.value })
}}
/>
<FieldGroup
type="text"
label="Last Name"
placeholder="McQueen"
onChange={(e) => {
this.setState({ lname: e.target.value })
}}
/>
</div>
</Col>
<Col xs={12} md={8}>
<div class="picture">
<Image src="https://i.imgur.com/aZpgMrl.jpg" responsive rounded />
</div>
</Col>
</div>
}
else if(this.state.page == 3){
else if (this.state.page == 3) {
body = <div>
<div class ="menu">
<FieldGroup
type="file"
id="formControlsFile"
label="File"
/>

<ControlLabel>Engineering Field</ControlLabel>
<Select
name="form-field-name"
value={this.state.role}
options={options}
onChange={(e) => {
if (e !== null) {
this.setState({ role: e.value })
} else {
this.setState({ role: '' })
}
}}
/>
</div>
<div class = "picture">
<Image src = "https://i.imgur.com/RdzM1lU.jpg" responsive rounded />
</div>
<div class="menu">
{alert}
<FieldGroup
type="file"
id="formControlsFile"
label="File"
/>

<ControlLabel>Engineering Field</ControlLabel>
<Select
name="form-field-name"
value={this.state.role}
options={options}
onChange={(e) => {
if (e !== null) {
this.setState({ role: e.value })
} else {
this.setState({ role: '' })
}
}}
/>
</div>
<div class="picture">
<Image src="https://i.imgur.com/RdzM1lU.jpg" responsive rounded />
</div>
</div>
}

let previousButton, nextButton, saveButton;

if (this.state.page == 3) {
saveButton = <Button bsStyle="primary" disabled={this.state.button} onClick={this.handleClick}>Save</Button>
previousButton= <Button onClick={this.handlePreviousPage}>Previous</Button>
nextButton= null
if (this.state.page == 1) {
saveButton = null
previousButton = null
nextButton = <Button onClick={this.handleNextPage}>Next</Button>
}

else if (this.state.page == 2) {
saveButton = null
previousButton= <Button onClick={this.handlePreviousPage}>Previous</Button>
nextButton= <Button onClick={this.handleNextPage}>Next</Button>
previousButton = <Button onClick={this.handlePreviousPage}>Previous</Button>
nextButton = <Button onClick={this.handleNextPage}>Next</Button>
}

else if (this.state.page == 1) {
saveButton = null
previousButton= null
nextButton= <Button onClick={this.handleNextPage}>Next</Button>
else if (this.state.page == 3) {
saveButton = <Button bsStyle="primary" disabled={this.state.button} onClick={this.handleClick}>Save</Button>
previousButton = <Button onClick={this.handlePreviousPage}>Previous</Button>
nextButton = null
}


return (
<Modal dialogClassName="custom-modal" show={this.props.show} onHide={this.handleClose}>
<Modal dialogClassName="custom-modal" show={this.props.show} onHide={this.handleClose}>

<Modal.Body>
<Grid fluid>
<Row>
{body}
</Row>
</Grid>
</Modal.Body>

<Modal.Footer>
Expand Down
6 changes: 0 additions & 6 deletions static/src/components/header/Header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,6 @@ import {Col, Row} from 'react-bootstrap'
import { connect } from 'react-redux'

class Header extends Component {
constructor(props) {
super(props);
}



render() {
return (
<Row className="header">
Expand Down
55 changes: 33 additions & 22 deletions static/src/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,26 @@
border-bottom: 0.1em solid;
border-color: lightBlue;
margin:0px;
background: url(https://www.freewebheaders.com/wordpress/wp-content/gallery/metal/blue-punctured-metal-plate-header.jpg);
z-index:1;
}
.header h1{
font-size:5rem;
color:lightgray;
}
.header h1 small{
color:white;

/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);

/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);

/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7); z-index:1;
}
h1 {
margin-left: 0.5em;
.header:hover {
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #1a82f7, #2F2727);

}
.header h1{
font-size:5rem;
Expand Down Expand Up @@ -41,16 +49,6 @@ h1 {
text-align: center;
}

.picture { float :left;
height : 10rem;
width : 45rem;
margin-left: 2rem;

}
.menu{ float: left;

}

.box-login {
border:0.1em solid black;
padding: 1em;
Expand All @@ -64,4 +62,17 @@ h1 {
padding: 1rem;
background-color: #efefef;
text-align: center;
}
}
/* REGISTER MODAL */
.picture {
width:45rem;
height:30rem;
margin-left: 2rem;
}
.menu{ float: left;

}
.custom-modal{
background-color:lightgray;
width:50%;
}

0 comments on commit 8e01c16

Please sign in to comment.