Skip to content

Commit ad16ef9

Browse files
Git-push-01Git-push-01
committed
mobile responsive 2.0
1 parent fdad651 commit ad16ef9

File tree

14 files changed

+252
-316
lines changed

14 files changed

+252
-316
lines changed

‎src/components/breaks.js‎

Lines changed: 47 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,67 +3,62 @@ import { Card } from "react-bootstrap";
33
import { CardGroup, Container, Row, Col } from "react-bootstrap";
44
import Button from "react-bootstrap/Button";
55

6-
7-
8-
96
class Breaks extends Component {
10-
11-
127
render() {
138
console.log(this.props.deleteBreak, " break props");
149

1510
const breaksList = this.props.breaks.map(breaks => breaks);
1611

1712
return (
1813
<div>
19-
<Container >
20-
<Col>
21-
22-
23-
<Row>
24-
{breaksList.map(breaks => {
25-
return (
26-
<CardGroup
27-
style={{
28-
display: "flex",
29-
flexwrap: "wrap-reverse",
30-
justifyContent: "center",
31-
padding: 5 + "px"
32-
}}
33-
key={breaks.id}
34-
>
35-
<Card style={{ background: "#31c6e8", opacity: "0.7" }}>
36-
<Card.Body>
37-
<Card.Text>
38-
Employee Name:
39-
<br />
40-
{breaks.employee.employeename}
41-
<br />
42-
Break Date:
43-
<br />
44-
{breaks.breakdate}
45-
<br />
46-
Break Time:
47-
<br />
48-
Start:
49-
<br />
50-
{breaks.breaketime}
51-
<br />
52-
End:
53-
<br />
54-
{breaks.breakend}
55-
<br />
56-
<Button onClick={() => this.props.deleteBreak(breaks.id)}>
57-
DELETE
58-
</Button>
59-
</Card.Text>
60-
</Card.Body>
61-
</Card>
62-
</CardGroup>
63-
);
64-
})}
14+
<Container>
15+
<Col>
16+
<Row>
17+
{breaksList.map(breaks => {
18+
return (
19+
<CardGroup
20+
style={{
21+
display: "flex",
22+
flexwrap: "wrap-reverse",
23+
justifyContent: "center",
24+
padding: 5 + "px"
25+
}}
26+
key={breaks.id}
27+
>
28+
<Card style={{ background: "#31c6e8", opacity: "0.7" }}>
29+
<Card.Body>
30+
<Card.Text>
31+
Employee Name:
32+
<br />
33+
{breaks.employee.employeename}
34+
<br />
35+
Break Date:
36+
<br />
37+
{breaks.breakdate}
38+
<br />
39+
Break Time:
40+
<br />
41+
Start:
42+
<br />
43+
{breaks.breaketime}
44+
<br />
45+
End:
46+
<br />
47+
{breaks.breakend}
48+
<br />
49+
<Button
50+
onClick={() => this.props.deleteBreak(breaks.id)}
51+
>
52+
DELETE
53+
</Button>
54+
</Card.Text>
55+
</Card.Body>
56+
</Card>
57+
</CardGroup>
58+
);
59+
})}
6560
</Row>
66-
</Col>
61+
</Col>
6762
</Container>
6863
</div>
6964
);

‎src/components/breaksForm.js‎

Lines changed: 54 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -54,73 +54,67 @@ class BreakForm extends Component {
5454
} = this.state;
5555

5656
return (
57-
<div >
57+
<div>
5858
<img src={logo} alt="Logo" />
5959
<span>
6060
<a href="/ProfileContainer" className="btn btn-info" role="button">
6161
Back To Profile
6262
</a>
6363
</span>
64-
<Container style={{
65-
display: "flex",
66-
flexDirection: "row",
67-
justifyContent: "center"
68-
}}>
69-
70-
<Card
71-
style={{ background:'#31e89f', opacity:"0.7"}}
72-
73-
74-
75-
64+
<Container
65+
style={{
66+
display: "flex",
67+
flexDirection: "row",
68+
justifyContent: "center"
69+
}}
7670
>
77-
<Card.Body>
78-
<Form onSubmit={this.onSubmit}>
79-
<Form.Label>Enter Date</Form.Label>
80-
<Form.Control
81-
type="date"
82-
name="breakdate"
83-
value={breakdate}
84-
onChange={this.onChange}
85-
/>
86-
<Form.Label>Break Start Time</Form.Label>
87-
<Form.Control
88-
type="time"
89-
name="breaketime"
90-
placeholder="Break Start"
91-
value={breaketime}
92-
onChange={this.onChange}
93-
/>
94-
<Form.Label>Break End Time</Form.Label>
95-
<Form.Control
96-
type="time"
97-
name="breakend"
98-
placeholder="Break End"
99-
value={breakend}
100-
onChange={this.onChange}
101-
/>
102-
<Form.Label>User id</Form.Label>
103-
104-
<Form.Control
105-
name="user_id"
106-
placeholder="Enter User Id"
107-
value={user_id}
108-
onChange={this.onChange}
109-
/>
110-
<Form.Label>Employee id</Form.Label>
111-
<Form.Control
112-
name="employee_id"
113-
placeholder="Enter Employee Id"
114-
value={employee_id}
115-
onChange={this.onChange}
116-
/>
117-
<Button variant="primary" type="submit">
118-
Add
119-
</Button>
120-
</Form>
121-
</Card.Body>
122-
</Card>
123-
71+
<Card style={{ background: "#31e89f", opacity: "0.7" }}>
72+
<Card.Body>
73+
<Form onSubmit={this.onSubmit}>
74+
<Form.Label>Enter Date</Form.Label>
75+
<Form.Control
76+
type="date"
77+
name="breakdate"
78+
value={breakdate}
79+
onChange={this.onChange}
80+
/>
81+
<Form.Label>Break Start Time</Form.Label>
82+
<Form.Control
83+
type="time"
84+
name="breaketime"
85+
placeholder="Break Start"
86+
value={breaketime}
87+
onChange={this.onChange}
88+
/>
89+
<Form.Label>Break End Time</Form.Label>
90+
<Form.Control
91+
type="time"
92+
name="breakend"
93+
placeholder="Break End"
94+
value={breakend}
95+
onChange={this.onChange}
96+
/>
97+
<Form.Label>User id</Form.Label>
98+
99+
<Form.Control
100+
name="user_id"
101+
placeholder="Enter User Id"
102+
value={user_id}
103+
onChange={this.onChange}
104+
/>
105+
<Form.Label>Employee id</Form.Label>
106+
<Form.Control
107+
name="employee_id"
108+
placeholder="Enter Employee Id"
109+
value={employee_id}
110+
onChange={this.onChange}
111+
/>
112+
<Button variant="primary" type="submit">
113+
Add
114+
</Button>
115+
</Form>
116+
</Card.Body>
117+
</Card>
124118
</Container>
125119
</div>
126120
);

‎src/components/companies.js‎

Lines changed: 12 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,24 @@
11
import React, { Component } from "react";
22

3-
4-
53
class Companies extends Component {
6-
74
render() {
85
console.log(this.props, "props");
96

107
const companyName = this.props.companies.map(company => company);
11-
12-
13-
14-
15-
16-
17-
188

199
return (
20-
21-
22-
<div>
23-
{companyName.map((companynames, index) => {
24-
return<p key={index}>
25-
Company Name: {companynames.companyname}<br></br>Company id#:{companynames.id}</p>}
26-
)}
27-
</div>
28-
29-
30-
31-
32-
33-
34-
)
35-
36-
10+
<div>
11+
{companyName.map((companynames, index) => {
12+
return (
13+
<p key={index}>
14+
Company Name: {companynames.companyname}
15+
<br />Company id#:{companynames.id}
16+
</p>
17+
);
18+
})}
19+
</div>
20+
);
21+
}
3722
}
38-
}
39-
4023

4124
export default Companies;

‎src/components/companiesForm.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ class CompanyForm extends Component {
5656
justifyContent: "center"
5757
}}
5858
>
59-
<Card style={{ background:'#31e89f', opacity:"0.7"}}>
59+
<Card style={{ background: "#31e89f", opacity: "0.7" }}>
6060
<Card.Body>
6161
<Form onSubmit={this.onSubmit}>
6262
<Form.Label> Enter Company Name</Form.Label>
@@ -73,7 +73,7 @@ class CompanyForm extends Component {
7373
value={user_id}
7474
onChange={this.onChange}
7575
/>
76-
<Button variant="primary" type="submit">
76+
<Button variant="primary" type="submit">
7777
Add
7878
</Button>
7979
</Form>

‎src/components/employees.js‎

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,29 @@
11
import React, { Component } from "react";
22
import { Container, Button } from "react-bootstrap";
33

4-
5-
6-
7-
84
class Employees extends Component {
9-
105
render() {
116
console.log(this.props, " employee props");
127

138
const employeesList = this.props.employees.map(employee => employee);
149

15-
16-
17-
18-
1910
return (
20-
2111
<Container className="sidenav">
22-
23-
{employeesList.map((employeenames, index) => {
24-
return<ol key={employeenames.id} style={{padding: "5px"}}><Button onClick={() => this.props.deleteEmployee(employeenames.id)}> DELETE </Button> <br></br> Employee Name: {employeenames.employeename} <br></br> Employee id: {employeenames.id} </ol>
25-
26-
})}
27-
</Container>
28-
29-
30-
31-
32-
33-
34-
35-
12+
{employeesList.map((employeenames, index) => {
13+
return (
14+
<ol key={employeenames.id} style={{ padding: "5px" }}>
15+
<Button
16+
onClick={() => this.props.deleteEmployee(employeenames.id)}
17+
>
18+
{" "}
19+
DELETE{" "}
20+
</Button>{" "}
21+
<br /> Employee Name: {employeenames.employeename} <br /> Employee
22+
id: {employeenames.id}{" "}
23+
</ol>
24+
);
25+
})}
26+
</Container>
3627
);
3728
}
3829
}

‎src/components/employeesForm.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -60,10 +60,7 @@ class EmployeeForm extends Component {
6060
justifyContent: "center"
6161
}}
6262
>
63-
<Card
64-
style={{ background:'#31e8e8', opacity:"0.7"}}
65-
66-
>
63+
<Card style={{ background: "#31e8e8", opacity: "0.7" }}>
6764
<Card.Body>
6865
<Form onSubmit={this.onSubmit}>
6966
<Form.Label> Enter Employee Name </Form.Label>
@@ -97,7 +94,9 @@ class EmployeeForm extends Component {
9794
value={manager_id}
9895
onChange={this.onChange}
9996
/>
100-
<Button variant="primary" type="submit">Add</Button>
97+
<Button variant="primary" type="submit">
98+
Add
99+
</Button>
101100
</Form>
102101
</Card.Body>
103102
</Card>

0 commit comments

Comments
 (0)