From 1d5a143fd364eaeb611856634378f67f421f64a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Mon, 16 Oct 2017 16:04:35 +0200 Subject: [PATCH] - `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 --- CHANGELOG.md | 3 + React_Full_Project/package.json | 8 +-- .../scss/core/_dropdown-menu-right.scss | 2 +- React_Full_Project/scss/core/_footer.scss | 4 +- React_Full_Project/scss/core/_layout.scss | 32 +++++----- React_Full_Project/scss/core/_navbar.scss | 14 ++++- React_Full_Project/scss/core/_sidebar.scss | 2 +- React_Full_Project/scss/core/_variables.scss | 3 + React_Full_Project/scss/style.scss | 3 +- .../src/components/Aside/package.json | 2 +- .../src/components/Breadcrumb/package.json | 2 +- .../src/components/Footer/package.json | 2 +- .../src/components/Header/Header.js | 54 ++++++---------- .../src/components/Header/HeaderDropdown.js | 61 +++++++++++++++++++ .../src/components/Header/package.json | 2 +- .../src/components/Sidebar/package.json | 2 +- .../src/components/SidebarFooter/package.json | 2 +- .../src/components/SidebarForm/package.json | 2 +- .../src/components/SidebarHeader/package.json | 2 +- .../components/SidebarMinimizer/package.json | 2 +- .../src/containers/Full/package.json | 2 +- .../src/views/Charts/package.json | 2 +- .../src/views/Components/Buttons/package.json | 2 +- .../src/views/Components/Cards/package.json | 2 +- .../src/views/Components/Forms/package.json | 2 +- .../src/views/Components/Modals/package.json | 2 +- .../Components/SocialButtons/package.json | 2 +- .../views/Components/Switches/package.json | 2 +- .../src/views/Components/Tables/package.json | 2 +- .../src/views/Components/Tabs/package.json | 2 +- .../src/views/Dashboard/package.json | 2 +- .../src/views/Icons/FontAwesome/package.json | 2 +- .../views/Icons/SimpleLineIcons/package.json | 2 +- .../src/views/Pages/Login/package.json | 2 +- .../src/views/Pages/Page404/package.json | 2 +- .../src/views/Pages/Page500/package.json | 2 +- .../src/views/Pages/Register/package.json | 2 +- .../src/views/Widgets/package.json | 2 +- .../scss/core/_dropdown-menu-right.scss | 2 +- React_Starter/scss/core/_footer.scss | 4 +- React_Starter/scss/core/_layout.scss | 32 +++++----- React_Starter/scss/core/_navbar.scss | 14 ++++- React_Starter/scss/core/_sidebar.scss | 2 +- React_Starter/scss/core/_variables.scss | 3 + React_Starter/scss/style.scss | 3 +- .../src/components/Aside/package.json | 2 +- .../src/components/Breadcrumb/package.json | 2 +- .../src/components/Footer/package.json | 2 +- React_Starter/src/components/Header/Header.js | 12 +++- .../src/components/Header/package.json | 2 +- .../src/components/Sidebar/package.json | 2 +- .../src/components/SidebarFooter/package.json | 2 +- .../src/components/SidebarForm/package.json | 2 +- .../src/components/SidebarHeader/package.json | 2 +- .../components/SidebarMinimizer/package.json | 2 +- .../src/containers/Full/package.json | 2 +- .../src/views/Dashboard/package.json | 2 +- package.json | 2 +- 58 files changed, 208 insertions(+), 128 deletions(-) create mode 100644 React_Full_Project/src/components/Header/HeaderDropdown.js diff --git a/CHANGELOG.md b/CHANGELOG.md index f5326b8..64c495c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,8 @@ ## [react](./REACT.md) version `changelog` +###### `v1.0.2` +- `HeaderDropdown` component example extracted out of `Header` + ###### `v1.0.1` - moved to react: `^16.0.0` - moved to reactstrap: `^5.0.0-alpha.3` diff --git a/React_Full_Project/package.json b/React_Full_Project/package.json index 2f18ab7..38fd5e0 100644 --- a/React_Full_Project/package.json +++ b/React_Full_Project/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "1.0.1", + "version": "1.0.2", "description": "", "author": "Łukasz Holeczek ", "url": "http://coreui.io", @@ -26,10 +26,10 @@ "sass-loader": "^6.0.6", "source-list-map": "^2.0.0", "style-loader": "^0.19.0", - "uglify-js": "^3.1.3", + "uglify-js": "^3.1.4", "url-loader": "^0.6.2", - "webpack": "^3.6.0", - "webpack-dev-server": "^2.9.1" + "webpack": "^3.7.1", + "webpack-dev-server": "^2.9.2" }, "dependencies": { "bootstrap": "^4.0.0-beta", diff --git a/React_Full_Project/scss/core/_dropdown-menu-right.scss b/React_Full_Project/scss/core/_dropdown-menu-right.scss index 427ab59..4f19546 100644 --- a/React_Full_Project/scss/core/_dropdown-menu-right.scss +++ b/React_Full_Project/scss/core/_dropdown-menu-right.scss @@ -5,4 +5,4 @@ right: auto; } } -} \ No newline at end of file +} diff --git a/React_Full_Project/scss/core/_footer.scss b/React_Full_Project/scss/core/_footer.scss index 1c1748b..e01595a 100644 --- a/React_Full_Project/scss/core/_footer.scss +++ b/React_Full_Project/scss/core/_footer.scss @@ -1,9 +1,9 @@ .app-footer { display: flex; + flex-wrap: wrap; + align-items: center; padding: 0 $spacer; color: $footer-color; background: $footer-bg; - flex-wrap: wrap; - align-items: center; @include borders($footer-borders); } diff --git a/React_Full_Project/scss/core/_layout.scss b/React_Full_Project/scss/core/_layout.scss index 6e4034d..8cc54dd 100644 --- a/React_Full_Project/scss/core/_layout.scss +++ b/React_Full_Project/scss/core/_layout.scss @@ -11,8 +11,8 @@ app-dashboard, app-root { display: flex; - min-height: 100vh; flex-direction: column; + min-height: 100vh; } .app-header { @@ -26,12 +26,12 @@ app-root { .app-body { display: flex; flex-direction: row; - overflow-x: hidden; flex-grow: 1; + overflow-x: hidden; .main { - min-width: 0; flex: 1; + min-width: 0; } .sidebar { @@ -269,9 +269,11 @@ app-root { .footer-fixed { .app-footer { position: fixed; + right: 0; bottom: 0; + left: 0; z-index: $zindex-sticky; - width: 100%; + height: $footer-height; } .app-body { @@ -328,17 +330,26 @@ app-root { margin-top: $navbar-height; } + .breadcrumb-fixed { + .main:nth-child(2) .breadcrumb { + right: auto; + left: auto; + width: 100%; + } + } + .sidebar, .sidebar-fixed .sidebar { position: fixed; z-index: $zindex-sticky - 1; width: $mobile-sidebar-width; - height: 100%; + // height: 100%; margin-left: - $mobile-sidebar-width; .sidebar-nav, .nav { width: $mobile-sidebar-width !important; + height: calc(100vh - #{$navbar-height}); } .sidebar-minimizer { @@ -364,10 +375,6 @@ app-root { .sidebar { width: $mobile-sidebar-width; margin-left: 0; - - .sidebar-nav { - height: calc(100vh - #{$navbar-height}); - } } .main { @@ -375,11 +382,4 @@ app-root { margin-left: $mobile-sidebar-width !important; } } - - .breadcrumb-fixed { - .main .breadcrumb { - right: 0 !important; - left: 0 !important; - } - } } diff --git a/React_Full_Project/scss/core/_navbar.scss b/React_Full_Project/scss/core/_navbar.scss index 780d66a..221ab12 100644 --- a/React_Full_Project/scss/core/_navbar.scss +++ b/React_Full_Project/scss/core/_navbar.scss @@ -1,7 +1,7 @@ .app-header.navbar { position: relative; - height: $navbar-height; flex-direction: row; + height: $navbar-height; padding: 0; margin: 0; background-color: $navbar-bg; @@ -22,7 +22,17 @@ } .navbar-toggler { - color: $navbar-color; + min-width: 50px; + padding: $navbar-toggler-padding-y 0; + + &:hover .navbar-toggler-icon { + background-image: $navbar-toggler-icon-hover; + } + } + + .navbar-toggler-icon { + height: 23px; + background-image: $navbar-toggler-icon; } .navbar-nav { diff --git a/React_Full_Project/scss/core/_sidebar.scss b/React_Full_Project/scss/core/_sidebar.scss index 3f83a0d..b77cd5f 100644 --- a/React_Full_Project/scss/core/_sidebar.scss +++ b/React_Full_Project/scss/core/_sidebar.scss @@ -78,8 +78,8 @@ .nav { @include sidebar-width($sidebar-borders, $sidebar-width); - min-height: 100%; flex-direction: column; + min-height: 100%; } .nav-title { diff --git a/React_Full_Project/scss/core/_variables.scss b/React_Full_Project/scss/core/_variables.scss index a2bebe8..ea491eb 100644 --- a/React_Full_Project/scss/core/_variables.scss +++ b/React_Full_Project/scss/core/_variables.scss @@ -69,6 +69,9 @@ $navbar-hover-color: $gray-800 !default; $navbar-active-color: $gray-800 !default; $navbar-disabled-color: $gray-300 !default; +$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; +$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; + // Sidebar $sidebar-width: 200px !default; diff --git a/React_Full_Project/scss/style.scss b/React_Full_Project/scss/style.scss index 151efff..ebd2d6a 100644 --- a/React_Full_Project/scss/style.scss +++ b/React_Full_Project/scss/style.scss @@ -1,10 +1,11 @@ /*! * CoreUI - Open Source Bootstrap Admin Template - * @version v1.0.1 + * @version v1.0.2 * @link http://coreui.io * Copyright (c) 2017 creativeLabs Łukasz Holeczek * @license MIT */ + // Override Boostrap variables @import "bootstrap-variables"; diff --git a/React_Full_Project/src/components/Aside/package.json b/React_Full_Project/src/components/Aside/package.json index 01a49f1..283ac3a 100644 --- a/React_Full_Project/src/components/Aside/package.json +++ b/React_Full_Project/src/components/Aside/package.json @@ -1,6 +1,6 @@ { "name": "Aside", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Aside.js" } diff --git a/React_Full_Project/src/components/Breadcrumb/package.json b/React_Full_Project/src/components/Breadcrumb/package.json index 0d7d8f5..aaa5f49 100644 --- a/React_Full_Project/src/components/Breadcrumb/package.json +++ b/React_Full_Project/src/components/Breadcrumb/package.json @@ -1,6 +1,6 @@ { "name": "Breadcrumb", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Breadcrumb.js" } diff --git a/React_Full_Project/src/components/Footer/package.json b/React_Full_Project/src/components/Footer/package.json index 8dfb1cd..70f568f 100644 --- a/React_Full_Project/src/components/Footer/package.json +++ b/React_Full_Project/src/components/Footer/package.json @@ -1,6 +1,6 @@ { "name": "Footer", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Footer.js" } diff --git a/React_Full_Project/src/components/Header/Header.js b/React_Full_Project/src/components/Header/Header.js index 8139a56..1e69eb5 100644 --- a/React_Full_Project/src/components/Header/Header.js +++ b/React_Full_Project/src/components/Header/Header.js @@ -1,23 +1,19 @@ import React, {Component} from 'react'; +import PropTypes from 'prop-types'; import { - Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavbarBrand, NavbarToggler, NavDropdown, NavItem, NavLink + Nav, + NavbarBrand, + NavbarToggler, + NavItem, + NavLink, + Badge } from 'reactstrap'; +import HeaderDropdown from './HeaderDropdown'; class Header extends Component { constructor(props) { super(props); - - this.toggle = this.toggle.bind(this); - this.state = { - dropdownOpen: false - }; - } - - toggle() { - this.setState({ - dropdownOpen: !this.state.dropdownOpen - }); } sidebarToggle(e) { @@ -43,9 +39,13 @@ class Header extends Component { render() { return (
- ☰ + + + - ☰ + + + - ☰ + + +
); } diff --git a/React_Full_Project/src/components/Header/HeaderDropdown.js b/React_Full_Project/src/components/Header/HeaderDropdown.js new file mode 100644 index 0000000..d76764b --- /dev/null +++ b/React_Full_Project/src/components/Header/HeaderDropdown.js @@ -0,0 +1,61 @@ +import React, {Component} from 'react'; +import { + Badge, + DropdownItem, + DropdownMenu, + DropdownToggle, + NavDropdown +} from 'reactstrap'; + +class HeaderDropdown extends Component { + + constructor(props) { + super(props); + + this.toggle = this.toggle.bind(this); + this.state = { + dropdownOpen: false + }; + } + + toggle() { + this.setState({ + dropdownOpen: !this.state.dropdownOpen + }); + } + + dropAccnt() { + return ( + + + admin@bootstrapmaster.com + admin + + + Account + Updates42 + Messages42 + Tasks42 + Comments42 + Settings + Profile + Settings + Payments42 + Projects42 + + Lock Account + Logout + + + ); + } + + render() { + const {...attributes} = this.props; + return ( + this.dropAccnt() + ); + } +} + +export default HeaderDropdown; \ No newline at end of file diff --git a/React_Full_Project/src/components/Header/package.json b/React_Full_Project/src/components/Header/package.json index 5e2b227..d09c272 100644 --- a/React_Full_Project/src/components/Header/package.json +++ b/React_Full_Project/src/components/Header/package.json @@ -1,6 +1,6 @@ { "name": "Header", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Header.js" } diff --git a/React_Full_Project/src/components/Sidebar/package.json b/React_Full_Project/src/components/Sidebar/package.json index edac54e..7c97203 100644 --- a/React_Full_Project/src/components/Sidebar/package.json +++ b/React_Full_Project/src/components/Sidebar/package.json @@ -1,6 +1,6 @@ { "name": "Sidebar", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Sidebar.js" } diff --git a/React_Full_Project/src/components/SidebarFooter/package.json b/React_Full_Project/src/components/SidebarFooter/package.json index ccf79ae..094bff9 100644 --- a/React_Full_Project/src/components/SidebarFooter/package.json +++ b/React_Full_Project/src/components/SidebarFooter/package.json @@ -1,6 +1,6 @@ { "name": "SidebarFooter", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./SidebarFooter.js" } diff --git a/React_Full_Project/src/components/SidebarForm/package.json b/React_Full_Project/src/components/SidebarForm/package.json index c52cf88..9ca4206 100644 --- a/React_Full_Project/src/components/SidebarForm/package.json +++ b/React_Full_Project/src/components/SidebarForm/package.json @@ -1,6 +1,6 @@ { "name": "SidebarForm", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./SidebarForm.js" } diff --git a/React_Full_Project/src/components/SidebarHeader/package.json b/React_Full_Project/src/components/SidebarHeader/package.json index abd7dea..b1bd69f 100644 --- a/React_Full_Project/src/components/SidebarHeader/package.json +++ b/React_Full_Project/src/components/SidebarHeader/package.json @@ -1,6 +1,6 @@ { "name": "SidebarHeader", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./SidebarHeader.js" } diff --git a/React_Full_Project/src/components/SidebarMinimizer/package.json b/React_Full_Project/src/components/SidebarMinimizer/package.json index 90f80aa..03f07a7 100644 --- a/React_Full_Project/src/components/SidebarMinimizer/package.json +++ b/React_Full_Project/src/components/SidebarMinimizer/package.json @@ -1,6 +1,6 @@ { "name": "SidebarMinimizer", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./SidebarMinimizer.js" } diff --git a/React_Full_Project/src/containers/Full/package.json b/React_Full_Project/src/containers/Full/package.json index 0fa075b..b8a7b17 100644 --- a/React_Full_Project/src/containers/Full/package.json +++ b/React_Full_Project/src/containers/Full/package.json @@ -1,6 +1,6 @@ { "name": "Full", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Full.js" } diff --git a/React_Full_Project/src/views/Charts/package.json b/React_Full_Project/src/views/Charts/package.json index 166aa8d..b01b82d 100644 --- a/React_Full_Project/src/views/Charts/package.json +++ b/React_Full_Project/src/views/Charts/package.json @@ -1,6 +1,6 @@ { "name": "Charts", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Charts.js" } diff --git a/React_Full_Project/src/views/Components/Buttons/package.json b/React_Full_Project/src/views/Components/Buttons/package.json index 39a5037..5608e9f 100644 --- a/React_Full_Project/src/views/Components/Buttons/package.json +++ b/React_Full_Project/src/views/Components/Buttons/package.json @@ -1,6 +1,6 @@ { "name": "Buttons", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Buttons.js" } diff --git a/React_Full_Project/src/views/Components/Cards/package.json b/React_Full_Project/src/views/Components/Cards/package.json index 52c6a4c..4c5cb8a 100644 --- a/React_Full_Project/src/views/Components/Cards/package.json +++ b/React_Full_Project/src/views/Components/Cards/package.json @@ -1,6 +1,6 @@ { "name": "Cards", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Cards.js" } diff --git a/React_Full_Project/src/views/Components/Forms/package.json b/React_Full_Project/src/views/Components/Forms/package.json index 07d429d..e83d9d8 100644 --- a/React_Full_Project/src/views/Components/Forms/package.json +++ b/React_Full_Project/src/views/Components/Forms/package.json @@ -1,6 +1,6 @@ { "name": "Forms", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Forms.js" } diff --git a/React_Full_Project/src/views/Components/Modals/package.json b/React_Full_Project/src/views/Components/Modals/package.json index 5e31b98..7543114 100644 --- a/React_Full_Project/src/views/Components/Modals/package.json +++ b/React_Full_Project/src/views/Components/Modals/package.json @@ -1,6 +1,6 @@ { "name": "Modals", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Modals.js" } diff --git a/React_Full_Project/src/views/Components/SocialButtons/package.json b/React_Full_Project/src/views/Components/SocialButtons/package.json index 5594c56..f69ee17 100644 --- a/React_Full_Project/src/views/Components/SocialButtons/package.json +++ b/React_Full_Project/src/views/Components/SocialButtons/package.json @@ -1,6 +1,6 @@ { "name": "SocialButtons", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./SocialButtons.js" } diff --git a/React_Full_Project/src/views/Components/Switches/package.json b/React_Full_Project/src/views/Components/Switches/package.json index c50fa3a..e057967 100644 --- a/React_Full_Project/src/views/Components/Switches/package.json +++ b/React_Full_Project/src/views/Components/Switches/package.json @@ -1,6 +1,6 @@ { "name": "Switches", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Switches.js" } diff --git a/React_Full_Project/src/views/Components/Tables/package.json b/React_Full_Project/src/views/Components/Tables/package.json index 1056977..12e8401 100644 --- a/React_Full_Project/src/views/Components/Tables/package.json +++ b/React_Full_Project/src/views/Components/Tables/package.json @@ -1,6 +1,6 @@ { "name": "Tables", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Tables.js" } diff --git a/React_Full_Project/src/views/Components/Tabs/package.json b/React_Full_Project/src/views/Components/Tabs/package.json index 1d6972c..5ac2e71 100644 --- a/React_Full_Project/src/views/Components/Tabs/package.json +++ b/React_Full_Project/src/views/Components/Tabs/package.json @@ -1,6 +1,6 @@ { "name": "Tabs", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Tabs.js" } diff --git a/React_Full_Project/src/views/Dashboard/package.json b/React_Full_Project/src/views/Dashboard/package.json index aebf1fb..66e2883 100644 --- a/React_Full_Project/src/views/Dashboard/package.json +++ b/React_Full_Project/src/views/Dashboard/package.json @@ -1,6 +1,6 @@ { "name": "Dashboard", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Dashboard.js" } diff --git a/React_Full_Project/src/views/Icons/FontAwesome/package.json b/React_Full_Project/src/views/Icons/FontAwesome/package.json index 98d026f..693b7f9 100644 --- a/React_Full_Project/src/views/Icons/FontAwesome/package.json +++ b/React_Full_Project/src/views/Icons/FontAwesome/package.json @@ -1,6 +1,6 @@ { "name": "FontAwesome", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./FontAwesome.js" } diff --git a/React_Full_Project/src/views/Icons/SimpleLineIcons/package.json b/React_Full_Project/src/views/Icons/SimpleLineIcons/package.json index 6d11a74..52c908d 100644 --- a/React_Full_Project/src/views/Icons/SimpleLineIcons/package.json +++ b/React_Full_Project/src/views/Icons/SimpleLineIcons/package.json @@ -1,6 +1,6 @@ { "name": "SimpleLineIcons", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./SimpleLineIcons.js" } diff --git a/React_Full_Project/src/views/Pages/Login/package.json b/React_Full_Project/src/views/Pages/Login/package.json index 4ede144..fe66878 100644 --- a/React_Full_Project/src/views/Pages/Login/package.json +++ b/React_Full_Project/src/views/Pages/Login/package.json @@ -1,6 +1,6 @@ { "name": "Login", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Login.js" } diff --git a/React_Full_Project/src/views/Pages/Page404/package.json b/React_Full_Project/src/views/Pages/Page404/package.json index 2bbb96b..c79d27e 100644 --- a/React_Full_Project/src/views/Pages/Page404/package.json +++ b/React_Full_Project/src/views/Pages/Page404/package.json @@ -1,6 +1,6 @@ { "name": "Page404", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Page404.js" } diff --git a/React_Full_Project/src/views/Pages/Page500/package.json b/React_Full_Project/src/views/Pages/Page500/package.json index a1d4c1d..8af1985 100644 --- a/React_Full_Project/src/views/Pages/Page500/package.json +++ b/React_Full_Project/src/views/Pages/Page500/package.json @@ -1,6 +1,6 @@ { "name": "Page500", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Page500.js" } diff --git a/React_Full_Project/src/views/Pages/Register/package.json b/React_Full_Project/src/views/Pages/Register/package.json index f62b08c..81afb5b 100644 --- a/React_Full_Project/src/views/Pages/Register/package.json +++ b/React_Full_Project/src/views/Pages/Register/package.json @@ -1,6 +1,6 @@ { "name": "Register", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Register.js" } diff --git a/React_Full_Project/src/views/Widgets/package.json b/React_Full_Project/src/views/Widgets/package.json index c9d2c73..e14b155 100644 --- a/React_Full_Project/src/views/Widgets/package.json +++ b/React_Full_Project/src/views/Widgets/package.json @@ -1,6 +1,6 @@ { "name": "Widgets", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Widgets.js" } diff --git a/React_Starter/scss/core/_dropdown-menu-right.scss b/React_Starter/scss/core/_dropdown-menu-right.scss index 427ab59..4f19546 100644 --- a/React_Starter/scss/core/_dropdown-menu-right.scss +++ b/React_Starter/scss/core/_dropdown-menu-right.scss @@ -5,4 +5,4 @@ right: auto; } } -} \ No newline at end of file +} diff --git a/React_Starter/scss/core/_footer.scss b/React_Starter/scss/core/_footer.scss index 1c1748b..e01595a 100644 --- a/React_Starter/scss/core/_footer.scss +++ b/React_Starter/scss/core/_footer.scss @@ -1,9 +1,9 @@ .app-footer { display: flex; + flex-wrap: wrap; + align-items: center; padding: 0 $spacer; color: $footer-color; background: $footer-bg; - flex-wrap: wrap; - align-items: center; @include borders($footer-borders); } diff --git a/React_Starter/scss/core/_layout.scss b/React_Starter/scss/core/_layout.scss index 6e4034d..8cc54dd 100644 --- a/React_Starter/scss/core/_layout.scss +++ b/React_Starter/scss/core/_layout.scss @@ -11,8 +11,8 @@ app-dashboard, app-root { display: flex; - min-height: 100vh; flex-direction: column; + min-height: 100vh; } .app-header { @@ -26,12 +26,12 @@ app-root { .app-body { display: flex; flex-direction: row; - overflow-x: hidden; flex-grow: 1; + overflow-x: hidden; .main { - min-width: 0; flex: 1; + min-width: 0; } .sidebar { @@ -269,9 +269,11 @@ app-root { .footer-fixed { .app-footer { position: fixed; + right: 0; bottom: 0; + left: 0; z-index: $zindex-sticky; - width: 100%; + height: $footer-height; } .app-body { @@ -328,17 +330,26 @@ app-root { margin-top: $navbar-height; } + .breadcrumb-fixed { + .main:nth-child(2) .breadcrumb { + right: auto; + left: auto; + width: 100%; + } + } + .sidebar, .sidebar-fixed .sidebar { position: fixed; z-index: $zindex-sticky - 1; width: $mobile-sidebar-width; - height: 100%; + // height: 100%; margin-left: - $mobile-sidebar-width; .sidebar-nav, .nav { width: $mobile-sidebar-width !important; + height: calc(100vh - #{$navbar-height}); } .sidebar-minimizer { @@ -364,10 +375,6 @@ app-root { .sidebar { width: $mobile-sidebar-width; margin-left: 0; - - .sidebar-nav { - height: calc(100vh - #{$navbar-height}); - } } .main { @@ -375,11 +382,4 @@ app-root { margin-left: $mobile-sidebar-width !important; } } - - .breadcrumb-fixed { - .main .breadcrumb { - right: 0 !important; - left: 0 !important; - } - } } diff --git a/React_Starter/scss/core/_navbar.scss b/React_Starter/scss/core/_navbar.scss index 780d66a..221ab12 100644 --- a/React_Starter/scss/core/_navbar.scss +++ b/React_Starter/scss/core/_navbar.scss @@ -1,7 +1,7 @@ .app-header.navbar { position: relative; - height: $navbar-height; flex-direction: row; + height: $navbar-height; padding: 0; margin: 0; background-color: $navbar-bg; @@ -22,7 +22,17 @@ } .navbar-toggler { - color: $navbar-color; + min-width: 50px; + padding: $navbar-toggler-padding-y 0; + + &:hover .navbar-toggler-icon { + background-image: $navbar-toggler-icon-hover; + } + } + + .navbar-toggler-icon { + height: 23px; + background-image: $navbar-toggler-icon; } .navbar-nav { diff --git a/React_Starter/scss/core/_sidebar.scss b/React_Starter/scss/core/_sidebar.scss index 3f83a0d..b77cd5f 100644 --- a/React_Starter/scss/core/_sidebar.scss +++ b/React_Starter/scss/core/_sidebar.scss @@ -78,8 +78,8 @@ .nav { @include sidebar-width($sidebar-borders, $sidebar-width); - min-height: 100%; flex-direction: column; + min-height: 100%; } .nav-title { diff --git a/React_Starter/scss/core/_variables.scss b/React_Starter/scss/core/_variables.scss index a2bebe8..ea491eb 100644 --- a/React_Starter/scss/core/_variables.scss +++ b/React_Starter/scss/core/_variables.scss @@ -69,6 +69,9 @@ $navbar-hover-color: $gray-800 !default; $navbar-active-color: $gray-800 !default; $navbar-disabled-color: $gray-300 !default; +$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; +$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; + // Sidebar $sidebar-width: 200px !default; diff --git a/React_Starter/scss/style.scss b/React_Starter/scss/style.scss index 151efff..ebd2d6a 100644 --- a/React_Starter/scss/style.scss +++ b/React_Starter/scss/style.scss @@ -1,10 +1,11 @@ /*! * CoreUI - Open Source Bootstrap Admin Template - * @version v1.0.1 + * @version v1.0.2 * @link http://coreui.io * Copyright (c) 2017 creativeLabs Łukasz Holeczek * @license MIT */ + // Override Boostrap variables @import "bootstrap-variables"; diff --git a/React_Starter/src/components/Aside/package.json b/React_Starter/src/components/Aside/package.json index 01a49f1..283ac3a 100644 --- a/React_Starter/src/components/Aside/package.json +++ b/React_Starter/src/components/Aside/package.json @@ -1,6 +1,6 @@ { "name": "Aside", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Aside.js" } diff --git a/React_Starter/src/components/Breadcrumb/package.json b/React_Starter/src/components/Breadcrumb/package.json index 0d7d8f5..aaa5f49 100644 --- a/React_Starter/src/components/Breadcrumb/package.json +++ b/React_Starter/src/components/Breadcrumb/package.json @@ -1,6 +1,6 @@ { "name": "Breadcrumb", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Breadcrumb.js" } diff --git a/React_Starter/src/components/Footer/package.json b/React_Starter/src/components/Footer/package.json index 8dfb1cd..70f568f 100644 --- a/React_Starter/src/components/Footer/package.json +++ b/React_Starter/src/components/Footer/package.json @@ -1,6 +1,6 @@ { "name": "Footer", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Footer.js" } diff --git a/React_Starter/src/components/Header/Header.js b/React_Starter/src/components/Header/Header.js index 2483472..f77f001 100644 --- a/React_Starter/src/components/Header/Header.js +++ b/React_Starter/src/components/Header/Header.js @@ -31,10 +31,16 @@ class Header extends Component { render() { return (
- ☰ + + + - ☰ - ☰ + + + + + +
) } diff --git a/React_Starter/src/components/Header/package.json b/React_Starter/src/components/Header/package.json index 5e2b227..d09c272 100644 --- a/React_Starter/src/components/Header/package.json +++ b/React_Starter/src/components/Header/package.json @@ -1,6 +1,6 @@ { "name": "Header", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Header.js" } diff --git a/React_Starter/src/components/Sidebar/package.json b/React_Starter/src/components/Sidebar/package.json index edac54e..7c97203 100644 --- a/React_Starter/src/components/Sidebar/package.json +++ b/React_Starter/src/components/Sidebar/package.json @@ -1,6 +1,6 @@ { "name": "Sidebar", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Sidebar.js" } diff --git a/React_Starter/src/components/SidebarFooter/package.json b/React_Starter/src/components/SidebarFooter/package.json index ccf79ae..094bff9 100644 --- a/React_Starter/src/components/SidebarFooter/package.json +++ b/React_Starter/src/components/SidebarFooter/package.json @@ -1,6 +1,6 @@ { "name": "SidebarFooter", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./SidebarFooter.js" } diff --git a/React_Starter/src/components/SidebarForm/package.json b/React_Starter/src/components/SidebarForm/package.json index c52cf88..9ca4206 100644 --- a/React_Starter/src/components/SidebarForm/package.json +++ b/React_Starter/src/components/SidebarForm/package.json @@ -1,6 +1,6 @@ { "name": "SidebarForm", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./SidebarForm.js" } diff --git a/React_Starter/src/components/SidebarHeader/package.json b/React_Starter/src/components/SidebarHeader/package.json index abd7dea..b1bd69f 100644 --- a/React_Starter/src/components/SidebarHeader/package.json +++ b/React_Starter/src/components/SidebarHeader/package.json @@ -1,6 +1,6 @@ { "name": "SidebarHeader", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./SidebarHeader.js" } diff --git a/React_Starter/src/components/SidebarMinimizer/package.json b/React_Starter/src/components/SidebarMinimizer/package.json index 90f80aa..03f07a7 100644 --- a/React_Starter/src/components/SidebarMinimizer/package.json +++ b/React_Starter/src/components/SidebarMinimizer/package.json @@ -1,6 +1,6 @@ { "name": "SidebarMinimizer", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./SidebarMinimizer.js" } diff --git a/React_Starter/src/containers/Full/package.json b/React_Starter/src/containers/Full/package.json index 0fa075b..b8a7b17 100644 --- a/React_Starter/src/containers/Full/package.json +++ b/React_Starter/src/containers/Full/package.json @@ -1,6 +1,6 @@ { "name": "Full", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Full.js" } diff --git a/React_Starter/src/views/Dashboard/package.json b/React_Starter/src/views/Dashboard/package.json index aebf1fb..66e2883 100644 --- a/React_Starter/src/views/Dashboard/package.json +++ b/React_Starter/src/views/Dashboard/package.json @@ -1,6 +1,6 @@ { "name": "Dashboard", - "version": "1.0.1", + "version": "1.0.2", "private": true, "main": "./Dashboard.js" } diff --git a/package.json b/package.json index 93e3de8..f843449 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/react", - "version": "1.0.0", + "version": "1.0.2", "description": "Open Source React Admin Template", "main": "", "homepage": "http://coreui.io/react/",