Skip to content

Commit 40e19fc

Browse files
archies-coderarchies-coder
committed
navbar,list responsive
1 parent c2adb1d commit 40e19fc

File tree

7 files changed

+271
-64
lines changed

7 files changed

+271
-64
lines changed

‎client/src/App.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {Component} from 'react';
2-
import Navbar from './components/navigation/AppNav';
2+
import AppNavbar from './components/navigation/AppNav';
33
import 'bootstrap/dist/css/bootstrap.min.css';
44
import { Switch, Route} from "react-router-dom";
55
//Components
@@ -16,7 +16,7 @@ export default class App extends Component {
1616
render() {
1717
return (
1818
<div className='App'>
19-
<Navbar/>
19+
<AppNavbar/>
2020
<Switch>
2121
<Route exact path="/" component={Home} />
2222
<Route path="/list" component={StudentList} />

‎client/src/components/navigation/AppNav.js‎

Lines changed: 79 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,92 @@
11
import React, { Component } from 'react'
22
import { Link, Redirect } from 'react-router-dom'
33
import {AuthContext} from '../../context';
4+
import {
5+
Collapse,
6+
Navbar,
7+
NavbarToggler,
8+
NavbarBrand,
9+
Nav,
10+
NavItem,
11+
NavLink
12+
} from 'reactstrap';
413

5-
export default class Navbar extends Component {
14+
15+
export default class AppNavbar extends Component {
16+
constructor(props) {
17+
super(props);
18+
this.toggle = this.toggle.bind(this);
19+
this.state = {
20+
isOpen: false
21+
};
22+
}
23+
toggle() {
24+
this.setState({
25+
isOpen: !this.state.isOpen
26+
});
27+
}
628
render() {
729
return (
830
<AuthContext.Consumer>
931
{context =>(
10-
<nav className="navbar navbar-expand-sm bg-dark navbar-dark px-sm-5">
11-
<Link to='/'>
12-
<span className='navbar-brand'>NitMoi</span>
13-
</Link>
32+
<Navbar color='dark' dark expand='md'>
1433
{context.state.isAuth && <Redirect from='/login' to='/' />}
1534
{!context.state.isAuth && <Redirect from='/' to='/login' />}
16-
17-
{context.state.isAuth && <ul className="navbar-nav ml-5 align-items-center">
18-
<li className="nav-item students-link">
19-
<Link to='/list' className='nav-link'>
20-
Students
21-
</Link>
22-
</li>
23-
<li className="nav-item students-link">
24-
<Link to='/add' className='nav-link'>
25-
Add
26-
</Link>
27-
</li>
28-
<li className="nav-item students-link">
29-
<Link to='/attendance' className='nav-link'>
30-
Attendance
31-
</Link>
32-
</li>
33-
<li className="nav-item students-link">
34-
<Link to='/fees' className='nav-link'>
35-
Fee
36-
</Link>
37-
</li>
38-
</ul>}
39-
<span className="navbar-nav ml-auto pull-right">
40-
{!context.state.isAuth&&<span className="nav-item students-link pull-right">
41-
<Link to='/login'
42-
className='nav-link'>
43-
{/* <i className="fas fa-user-plus"></i> */}
44-
Login
45-
</Link>
46-
</span>}
47-
{context.state.isAuth&&<li className="nav-item students-link ">
48-
<a href='/' className='nav-link' onClick={context.handleLogout}>
49-
{/* <i className="fas fa-sign-in-alt ml-3"></i> */}
50-
LogOut
51-
</a>
52-
</li>}
53-
</span>
54-
</nav>
35+
<NavbarBrand>
36+
<Link to='/'>
37+
<span className='navbar-brand'>NitMoi</span>
38+
</Link>
39+
</NavbarBrand>
40+
<NavbarToggler onClick={this.toggle} />
41+
<Collapse isOpen={this.state.isOpen} navbar>
42+
<Nav className="mr-auto" navbar>
43+
<NavItem>
44+
<NavLink onClick={this.toggle}>
45+
<Link to='/list' className='nav-link'>
46+
Students
47+
</Link>
48+
</NavLink>
49+
</NavItem>
50+
<NavItem>
51+
<NavLink onClick={this.toggle}>
52+
<Link to='/add' className='nav-link'>
53+
Add
54+
</Link>
55+
</NavLink>
56+
</NavItem>
57+
<NavItem>
58+
<NavLink onClick={this.toggle}>
59+
<Link to='/attendance' className='nav-link'>
60+
Attendance
61+
</Link>
62+
</NavLink>
63+
</NavItem>
64+
<NavItem>
65+
<NavLink onClick={this.toggle}>
66+
<Link to='/fees' className='nav-link'>
67+
Fee
68+
</Link>
69+
</NavLink>
70+
</NavItem>
71+
</Nav>
72+
<Nav className="ml-auto" navbar>
73+
<NavItem>
74+
<NavLink onClick={this.toggle}>
75+
{!context.state.isAuth&&<Link to='/login' className='nav-link'>
76+
Login
77+
</Link>}
78+
</NavLink>
79+
</NavItem>
80+
<NavItem>
81+
<NavLink onClick={this.toggle}>
82+
{context.state.isAuth&&<Link to='/logout' className='nav-link' onClick={context.handleLogout}>
83+
Logout
84+
</Link>}
85+
</NavLink>
86+
</NavItem>
87+
</Nav>
88+
</Collapse>
89+
</Navbar>
5590
)}
5691
</AuthContext.Consumer>
5792
)

‎client/src/components/student-list/Student.css‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
.stud-card {
2+
width: 100%;
23
background-color: #ababe6 !important;
3-
font: 16px/100% Ebrima !important
4+
font: 16px/100% Ebrima !important;
5+
min-width: 230px;
6+
display: inline-block;
7+
margin: 6px;
8+
text-align: center;
49
}
510

611
.stud-card:hover {
@@ -31,4 +36,10 @@
3136
width: 100px;
3237
text-align: center;
3338
margin: auto;
39+
}
40+
41+
@media screen and (min-width: 1px) and (max-width: 767px){
42+
.stud-card {
43+
min-width: 350px;
44+
}
3445
}

‎client/src/components/student-list/StudentList.js‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,7 @@
11
import React, { Component } from 'react'
22
import Student from './Student';
33
import MyLoader from '../reusables/MyLoader';
4-
5-
const gridStyle = {
6-
display: "grid",
7-
gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr",
8-
gridGap: "8px",
9-
width: "100%",
10-
textAlign: "center",
11-
padding: "10px"
12-
};
4+
import './list.css'
135

146
export default class StudentList extends Component {
157
constructor(){
@@ -63,7 +55,6 @@ export default class StudentList extends Component {
6355
this.setState({loading: false})
6456
return <h4>Not Found !!</h4>
6557
}
66-
throw new Error(res.status)
6758
}
6859
return res.json()
6960
}).then(resdata => {
@@ -93,12 +84,15 @@ export default class StudentList extends Component {
9384
return (this.state.loading) ?
9485
<MyLoader loading={this.state.loading} />
9586
:
96-
<div style={gridStyle}>
97-
{this.state.students.length === 0 ? <div>No Students To Display</div>
98-
:this.state.students.sort((a,b)=>{
99-
return a.standard - b.standard;
100-
}).map(stud => {
101-
return <Student key={stud._id}
87+
<div className="container">
88+
<div className='row w-100 justify-content-left justify-content-sm-center'>
89+
{this.state.students.length === 0 ? <div>No Students To Display</div>
90+
:this.state.students.sort((a,b)=>{
91+
return a.standard - b.standard;
92+
}).map(stud => {
93+
return <div className='col col-md-auto col-sm-auto'>
94+
<Student className=''
95+
key={stud._id}
10296
id={stud._id}
10397
fName={stud.firstName}
10498
lName={stud.lastName}
@@ -112,7 +106,10 @@ export default class StudentList extends Component {
112106
fees={stud.fees.total}
113107
deleteStudent={this.deleteStudent}
114108
/>
109+
</div>
115110
})}
116-
</div>;
111+
</div>
112+
</div>
113+
;
117114
}
118115
}

‎client/src/components/student-list/list.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/* @media screen and (min-width: 1px) and (max-width: 767px){
2+
#grid-container {
3+
grid-template-columns: 1fr 1fr;
4+
}
5+
}
6+
@media screen and (min-width:768px) and (max-width: 991px){
7+
#grid-container {
8+
display: grid;
9+
width: 100%;
10+
grid-template-columns: 1fr 1fr 1fr;
11+
}
12+
}
13+
@media screen and (min-width:992px) and (max-width: 9999px){
14+
#grid-container {
15+
grid-template-columns: 1fr;
16+
}
17+
} */

0 commit comments

Comments
 (0)