purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +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

17
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-top mat-indigo-700-bg">
<div class="navbar-header mat-indigo-700-bg">
<div class="top">
<div class="logo"> <div class="logo">
<img class="logo-icon" src="assets/images/logos/fuse.svg"> <img class="logo-icon" src="assets/images/logos/fuse.svg">
@ -22,9 +18,12 @@
</div> </div>
</div> </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="h3 username">Charlie Adams</div>
<div class="h5 email hint-text mt-8">adams.charlie@mail.com</div> <div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
@ -34,9 +33,7 @@
</div> </div>
</div> <div class="navbar-content">
<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<fuse-navigation layout="vertical"></fuse-navigation> <fuse-navigation layout="vertical"></fuse-navigation>
</div> </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-vertical-style-1 {
.navbar-wrapper { .navbar-top {
padding: 12px 0;
.navbar-header {
.top {
padding: 12px 0 0 0;
justify-content: center; justify-content: center;
.buttons { .buttons {
@ -30,8 +26,10 @@ fuse-sidebar {
} }
} }
.navbar-scroll-container {
.user { .user {
padding-bottom: 24px; padding: 12px 0;
.avatar-container { .avatar-container {
position: relative; position: relative;
@ -49,11 +47,9 @@ fuse-sidebar {
display: none; display: none;
} }
} }
}
.navbar-content { .navbar-content {
margin-top: 0; margin-top: 0;
height: auto !important;
} }
} }
} }
@ -69,29 +65,13 @@ navbar {
width: 100%; width: 100%;
height: 100%; height: 100%;
.navbar-wrapper { .navbar-top {
overflow: hidden;
@include media-breakpoint-down('md') {
overflow: auto;
}
.navbar-header {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center;
justify-content: space-between;
flex: 1 0 auto; 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; align-items: center;
padding: 12px 12px 0 16px; justify-content: space-between;
padding: 12px 12px 12px 20px;
.logo { .logo {
display: flex; 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 { .user {
position: relative; position: relative;
display: flex; display: flex;
@ -130,17 +120,10 @@ navbar {
} }
} }
} }
}
.navbar-content { .navbar-content {
flex: 1 1 auto; flex: 1 1 auto;
overflow-y: auto; margin-top: 32px;
margin-top: 48px;
height: calc(100vh - 236px);
@include media-breakpoint-down('md') {
height: auto;
}
} }
} }
} }

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 Angular Material to 6.3.3</li>
<li>Updated various other packages</li> <li>Updated various other packages</li>
<li>Updated Angular material examples</li> <li>Updated Angular material examples</li>
<li>Chat Panel sidebar</li> <li>New Chat Panel sidebar</li>
<li>New style variants for the Navbar</li> <li>(Navbar) New style variants for the Navbar</li>
<li>Added 'foldedChanged' & 'openedChanged' outputs to the FuseSidebar</li> <li>(FuseSidebar) Added 'foldedChanged' & 'openedChanged' outputs</li>
<li>Ability to add custom classes to the navigation items</li> <li>(FuseNavigation) Ability to add custom classes to the navigation items</li>
<li>FuseLoadingBarService for showing/hiding the loading bar easily</li> <li>(FuseLoadingBarService) New service for showing/hiding the loading bar easily</li>
</ul> </ul>
</div> </div>
<div class="improved"> <div class="improved">
<span class="title">Improved</span> <span class="title">Improved</span>
<ul> <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> <li>(E-Commerce) Added sticky headers to the tables</li>
</ul> </ul>
</div> </div>