purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-10-31 12:23:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

(Navbar) Improved the style variant 1

Browse Source 
Updated Changelog
This commit is contained in:
Sercan Yemen 2018-07-10 13:47:58 +03:00
parent d5b64f3258
commit ac70ecc616
3 changed files with 98 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/layout/components/navbar/vertical/style-1/style-1.component.html
View File

@ -1,8 +1,4 @@
<div class="navbar-wrapper" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<div class="navbar-header mat-indigo-700-bg">
<div class="top">
<div class="navbar-top mat-indigo-700-bg">
<div class="logo">
<img class="logo-icon" src="assets/images/logos/fuse.svg">
@ -24,7 +20,10 @@
</div>
<div class="user" fxLayout="column">
<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<div class="user mat-indigo-700-bg" fxLayout="column">
<div class="h3 username">Charlie Adams</div>
<div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
@ -34,9 +33,7 @@
</div>
</div>
<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<div class="navbar-content">
<fuse-navigation layout="vertical"></fuse-navigation>
</div>

57
src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
View File

@ -9,12 +9,8 @@ fuse-sidebar {
navbar-vertical-style-1 {
.navbar-wrapper {
.navbar-header {
.top {
padding: 12px 0 0 0;
.navbar-top {
padding: 12px 0;
justify-content: center;
.buttons {
@ -30,8 +26,10 @@ fuse-sidebar {
}
}
.navbar-scroll-container {
.user {
padding-bottom: 24px;
padding: 12px 0;
.avatar-container {
position: relative;
@ -49,11 +47,9 @@ fuse-sidebar {
display: none;
}
}
}
.navbar-content {
margin-top: 0;
height: auto !important;
}
}
}
@ -69,29 +65,13 @@ navbar {
width: 100%;
height: 100%;
.navbar-wrapper {
overflow: hidden;
@include media-breakpoint-down('md') {
overflow: auto;
}
.navbar-header {
.navbar-top {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
flex-direction: row;
flex: 1 0 auto;
background: rgba(0, 0, 0, 0.12);
transition: padding 200ms ease;
.top {
display: flex;
flex: 1 1 auto;
width: 100%;
justify-content: space-between;
align-items: center;
padding: 12px 12px 0 16px;
justify-content: space-between;
padding: 12px 12px 12px 20px;
.logo {
display: flex;
@ -109,6 +89,16 @@ navbar {
}
}
.navbar-scroll-container {
overflow-y: auto;
background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%),
linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%);
background-repeat: no-repeat;
background-size: 100% 40px, 100% 10px;
background-attachment: local, scroll;
.user {
position: relative;
display: flex;
@ -130,17 +120,10 @@ navbar {
}
}
}
}
.navbar-content {
flex: 1 1 auto;
overflow-y: auto;
margin-top: 48px;
height: calc(100vh - 236px);
@include media-breakpoint-down('md') {
height: auto;
}
margin-top: 32px;
}
}
}

12
src/app/main/documentation/changelog/changelog.component.html
View File

@ -38,18 +38,18 @@
<li>Updated Angular Material to 6.3.3</li>
<li>Updated various other packages</li>
<li>Updated Angular material examples</li>
<li>Chat Panel sidebar</li>
<li>New style variants for the Navbar</li>
<li>Added 'foldedChanged' & 'openedChanged' outputs to the FuseSidebar</li>
<li>Ability to add custom classes to the navigation items</li>
<li>FuseLoadingBarService for showing/hiding the loading bar easily</li>
<li>New Chat Panel sidebar</li>
<li>(Navbar) New style variants for the Navbar</li>
<li>(FuseSidebar) Added 'foldedChanged' & 'openedChanged' outputs</li>
<li>(FuseNavigation) Ability to add custom classes to the navigation items</li>
<li>(FuseLoadingBarService) New service for showing/hiding the loading bar easily</li>
</ul>
</div>
<div class="improved">
<span class="title">Improved</span>
<ul>
<li>Replaced cdkTable with matTable since Table is now a proper element in Material</li>
<li>Replaced cdkTable with matTable since Table is now a proper component in Material</li>
<li>(E-Commerce) Added sticky headers to the tables</li>
</ul>
</div>