Skip to content

Commit 1d5a143

Browse files
mrholekmrholek
committed
- HeaderDropdown component example extracted out of Header
- Fix height and position problems with .fixed-footer - Fix mobile sidebar height - Fix mobile breadcrumb position with .fixed-breadcrumb - Add new navbar toggler icon - Update old bootstrap classes ex. `hidden-sm-down` - Add gulp-autoprefixer
1 parent 5766d28 commit 1d5a143

File tree

58 files changed

+208
-128
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+208
-128
lines changed

‎CHANGELOG.md

+3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
## [react](./REACT.md) version `changelog`
22

3+
###### `v1.0.2`
4+
- `HeaderDropdown` component example extracted out of `Header`
5+
36
###### `v1.0.1`
47
- moved to react: `^16.0.0`
58
- moved to reactstrap: `^5.0.0-alpha.3`

‎React_Full_Project/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@coreui/react",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"description": "",
55
"author": "Łukasz Holeczek <[email protected]>",
66
"url": "http://coreui.io",
@@ -26,10 +26,10 @@
2626
"sass-loader": "^6.0.6",
2727
"source-list-map": "^2.0.0",
2828
"style-loader": "^0.19.0",
29-
"uglify-js": "^3.1.3",
29+
"uglify-js": "^3.1.4",
3030
"url-loader": "^0.6.2",
31-
"webpack": "^3.6.0",
32-
"webpack-dev-server": "^2.9.1"
31+
"webpack": "^3.7.1",
32+
"webpack-dev-server": "^2.9.2"
3333
},
3434
"dependencies": {
3535
"bootstrap": "^4.0.0-beta",

‎React_Full_Project/scss/core/_dropdown-menu-right.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@
55
right: auto;
66
}
77
}
8-
}
8+
}

‎React_Full_Project/scss/core/_footer.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
.app-footer {
22
display: flex;
3+
flex-wrap: wrap;
4+
align-items: center;
35
padding: 0 $spacer;
46
color: $footer-color;
57
background: $footer-bg;
6-
flex-wrap: wrap;
7-
align-items: center;
88
@include borders($footer-borders);
99
}

‎React_Full_Project/scss/core/_layout.scss

+16-16
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
app-dashboard,
1212
app-root {
1313
display: flex;
14-
min-height: 100vh;
1514
flex-direction: column;
15+
min-height: 100vh;
1616
}
1717

1818
.app-header {
@@ -26,12 +26,12 @@ app-root {
2626
.app-body {
2727
display: flex;
2828
flex-direction: row;
29-
overflow-x: hidden;
3029
flex-grow: 1;
30+
overflow-x: hidden;
3131

3232
.main {
33-
min-width: 0;
3433
flex: 1;
34+
min-width: 0;
3535
}
3636

3737
.sidebar {
@@ -269,9 +269,11 @@ app-root {
269269
.footer-fixed {
270270
.app-footer {
271271
position: fixed;
272+
right: 0;
272273
bottom: 0;
274+
left: 0;
273275
z-index: $zindex-sticky;
274-
width: 100%;
276+
height: $footer-height;
275277
}
276278

277279
.app-body {
@@ -328,17 +330,26 @@ app-root {
328330
margin-top: $navbar-height;
329331
}
330332

333+
.breadcrumb-fixed {
334+
.main:nth-child(2) .breadcrumb {
335+
right: auto;
336+
left: auto;
337+
width: 100%;
338+
}
339+
}
340+
331341
.sidebar,
332342
.sidebar-fixed .sidebar {
333343
position: fixed;
334344
z-index: $zindex-sticky - 1;
335345
width: $mobile-sidebar-width;
336-
height: 100%;
346+
// height: 100%;
337347
margin-left: - $mobile-sidebar-width;
338348

339349
.sidebar-nav,
340350
.nav {
341351
width: $mobile-sidebar-width !important;
352+
height: calc(100vh - #{$navbar-height});
342353
}
343354

344355
.sidebar-minimizer {
@@ -364,22 +375,11 @@ app-root {
364375
.sidebar {
365376
width: $mobile-sidebar-width;
366377
margin-left: 0;
367-
368-
.sidebar-nav {
369-
height: calc(100vh - #{$navbar-height});
370-
}
371378
}
372379

373380
.main {
374381
margin-right: - $mobile-sidebar-width !important;
375382
margin-left: $mobile-sidebar-width !important;
376383
}
377384
}
378-
379-
.breadcrumb-fixed {
380-
.main .breadcrumb {
381-
right: 0 !important;
382-
left: 0 !important;
383-
}
384-
}
385385
}

‎React_Full_Project/scss/core/_navbar.scss

+12-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.app-header.navbar {
22
position: relative;
3-
height: $navbar-height;
43
flex-direction: row;
4+
height: $navbar-height;
55
padding: 0;
66
margin: 0;
77
background-color: $navbar-bg;
@@ -22,7 +22,17 @@
2222
}
2323

2424
.navbar-toggler {
25-
color: $navbar-color;
25+
min-width: 50px;
26+
padding: $navbar-toggler-padding-y 0;
27+
28+
&:hover .navbar-toggler-icon {
29+
background-image: $navbar-toggler-icon-hover;
30+
}
31+
}
32+
33+
.navbar-toggler-icon {
34+
height: 23px;
35+
background-image: $navbar-toggler-icon;
2636
}
2737

2838
.navbar-nav {

‎React_Full_Project/scss/core/_sidebar.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,8 +78,8 @@
7878

7979
.nav {
8080
@include sidebar-width($sidebar-borders, $sidebar-width);
81-
min-height: 100%;
8281
flex-direction: column;
82+
min-height: 100%;
8383
}
8484

8585
.nav-title {

‎React_Full_Project/scss/core/_variables.scss

+3
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,9 @@ $navbar-hover-color: $gray-800 !default;
6969
$navbar-active-color: $gray-800 !default;
7070
$navbar-disabled-color: $gray-300 !default;
7171

72+
$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
73+
$navbar-toggler-icon-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
74+
7275
// Sidebar
7376

7477
$sidebar-width: 200px !default;

‎React_Full_Project/scss/style.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
/*!
22
* CoreUI - Open Source Bootstrap Admin Template
3-
* @version v1.0.1
3+
* @version v1.0.2
44
* @link http://coreui.io
55
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
66
* @license MIT
77
*/
8+
89
// Override Boostrap variables
910
@import "bootstrap-variables";
1011

‎React_Full_Project/src/components/Aside/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "Aside",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"private": true,
55
"main": "./Aside.js"
66
}

‎React_Full_Project/src/components/Breadcrumb/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "Breadcrumb",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"private": true,
55
"main": "./Breadcrumb.js"
66
}

‎React_Full_Project/src/components/Footer/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "Footer",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"private": true,
55
"main": "./Footer.js"
66
}

‎React_Full_Project/src/components/Header/Header.js

+18-36
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,19 @@
11
import React, {Component} from 'react';
2+
import PropTypes from 'prop-types';
23
import {
3-
Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavbarBrand, NavbarToggler, NavDropdown, NavItem, NavLink
4+
Nav,
5+
NavbarBrand,
6+
NavbarToggler,
7+
NavItem,
8+
NavLink,
9+
Badge
410
} from 'reactstrap';
11+
import HeaderDropdown from './HeaderDropdown';
512

613
class Header extends Component {
714

815
constructor(props) {
916
super(props);
10-
11-
this.toggle = this.toggle.bind(this);
12-
this.state = {
13-
dropdownOpen: false
14-
};
15-
}
16-
17-
toggle() {
18-
this.setState({
19-
dropdownOpen: !this.state.dropdownOpen
20-
});
2117
}
2218

2319
sidebarToggle(e) {
@@ -43,9 +39,13 @@ class Header extends Component {
4339
render() {
4440
return (
4541
<header className="app-header navbar">
46-
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>&#9776;</NavbarToggler>
42+
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>
43+
<span className="navbar-toggler-icon"></span>
44+
</NavbarToggler>
4745
<NavbarBrand href="#"></NavbarBrand>
48-
<NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>&#9776;</NavbarToggler>
46+
<NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>
47+
<span className="navbar-toggler-icon"></span>
48+
</NavbarToggler>
4949
<Nav className="d-md-down-none" navbar>
5050
<NavItem className="px-3">
5151
<NavLink href="#">Dashboard</NavLink>
@@ -67,29 +67,11 @@ class Header extends Component {
6767
<NavItem className="d-md-down-none">
6868
<NavLink href="#"><i className="icon-location-pin"></i></NavLink>
6969
</NavItem>
70-
<NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
71-
<DropdownToggle nav caret>
72-
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="[email protected]"/>
73-
<span className="d-md-down-none">admin</span>
74-
</DropdownToggle>
75-
<DropdownMenu right>
76-
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
77-
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
78-
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
79-
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
80-
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
81-
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
82-
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
83-
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
84-
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
85-
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
86-
<DropdownItem divider/>
87-
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
88-
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
89-
</DropdownMenu>
90-
</NavDropdown>
70+
<HeaderDropdown/>
9171
</Nav>
92-
<NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>&#9776;</NavbarToggler>
72+
<NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>
73+
<span className="navbar-toggler-icon"></span>
74+
</NavbarToggler>
9375
</header>
9476
);
9577
}

‎React_Full_Project/src/components/Header/HeaderDropdown.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, {Component} from 'react';
2+
import {
3+
Badge,
4+
DropdownItem,
5+
DropdownMenu,
6+
DropdownToggle,
7+
NavDropdown
8+
} from 'reactstrap';
9+
10+
class HeaderDropdown extends Component {
11+
12+
constructor(props) {
13+
super(props);
14+
15+
this.toggle = this.toggle.bind(this);
16+
this.state = {
17+
dropdownOpen: false
18+
};
19+
}
20+
21+
toggle() {
22+
this.setState({
23+
dropdownOpen: !this.state.dropdownOpen
24+
});
25+
}
26+
27+
dropAccnt() {
28+
return (
29+
<NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
30+
<DropdownToggle nav caret={this.state.caretVisible}>
31+
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="[email protected]"/>
32+
<span className="d-md-down-none">admin</span>
33+
</DropdownToggle>
34+
<DropdownMenu right>
35+
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
36+
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
37+
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
38+
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
39+
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
40+
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
41+
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
42+
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
43+
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
44+
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
45+
<DropdownItem divider/>
46+
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
47+
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
48+
</DropdownMenu>
49+
</NavDropdown>
50+
);
51+
}
52+
53+
render() {
54+
const {...attributes} = this.props;
55+
return (
56+
this.dropAccnt()
57+
);
58+
}
59+
}
60+
61+
export default HeaderDropdown;

‎React_Full_Project/src/components/Header/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "Header",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"private": true,
55
"main": "./Header.js"
66
}

‎React_Full_Project/src/components/Sidebar/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "Sidebar",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"private": true,
55
"main": "./Sidebar.js"
66
}

‎React_Full_Project/src/components/SidebarFooter/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "SidebarFooter",
3-
"version": "1.0.1",
3+
"version": "1.0.2",
44
"private": true,
55
"main": "./SidebarFooter.js"
66
}

0 commit comments

Comments
 (0)