mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
(Navbar) Improved the style variant 1
Updated Changelog
This commit is contained in:
Sercan Yemen
parent
d5b64f3258
commit
ac70ecc616
|
|
@ -1,42 +1,39 @@
|
|||
<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="logo">
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
|
||||
<div class="top">
|
||||
<div class="buttons">
|
||||
|
||||
<div class="logo">
|
||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
||||
</div>
|
||||
<button mat-icon-button class="toggle-sidebar-folded"
|
||||
(click)="toggleSidebarFolded()" fxHide.lt-lg>
|
||||
<mat-icon class="secondary-text">menu</mat-icon>
|
||||
</button>
|
||||
|
||||
<div class="buttons">
|
||||
<button mat-icon-button class="toggle-sidebar-opened"
|
||||
(click)="toggleSidebarOpened()" fxHide.gt-md>
|
||||
<mat-icon class="secondary-text">arrow_back</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded"
|
||||
(click)="toggleSidebarFolded()" fxHide.lt-lg>
|
||||
<mat-icon class="secondary-text">menu</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-opened"
|
||||
(click)="toggleSidebarOpened()" fxHide.gt-md>
|
||||
<mat-icon class="secondary-text">arrow_back</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
|
||||
<div class="user" fxLayout="column">
|
||||
|
||||
<div class="h3 username">Charlie Adams</div>
|
||||
<div class="h5 email hint-text mt-8">adams.charlie@mail.com</div>
|
||||
<div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.background">
|
||||
<img class="avatar" src="assets/images/avatars/Velazquez.jpg">
|
||||
</div>
|
||||
<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>
|
||||
<div class="avatar-container" [ngClass]="fuseConfig.layout.navbar.background">
|
||||
<img class="avatar" src="assets/images/avatars/Velazquez.jpg">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
<div class="navbar-content">
|
||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,51 +9,47 @@ fuse-sidebar {
|
|||
|
||||
navbar-vertical-style-1 {
|
||||
|
||||
.navbar-wrapper {
|
||||
.navbar-top {
|
||||
padding: 12px 0;
|
||||
justify-content: center;
|
||||
|
||||
.navbar-header {
|
||||
.buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.top {
|
||||
padding: 12px 0 0 0;
|
||||
justify-content: center;
|
||||
.logo {
|
||||
|
||||
.buttons {
|
||||
display: none;
|
||||
}
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
.navbar-scroll-container {
|
||||
|
||||
.logo-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.user {
|
||||
padding: 12px 0;
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
top: auto;
|
||||
padding: 0;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.user {
|
||||
padding-bottom: 24px;
|
||||
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
top: auto;
|
||||
padding: 0;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.username,
|
||||
.email {
|
||||
display: none;
|
||||
}
|
||||
.username,
|
||||
.email {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-content {
|
||||
margin-top: 0;
|
||||
height: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -69,78 +65,65 @@ navbar {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.navbar-wrapper {
|
||||
overflow: hidden;
|
||||
.navbar-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex: 1 0 auto;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 12px 12px 20px;
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
overflow: auto;
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-header {
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
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;
|
||||
.navbar-scroll-container {
|
||||
overflow-y: auto;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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%);
|
||||
|
||||
.logo-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 40px, 100% 10px;
|
||||
background-attachment: local, scroll;
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.user {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 24px 0 64px 0;
|
||||
|
||||
.user {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
width: 100%;
|
||||
padding: 24px 0 64px 0;
|
||||
.avatar-container {
|
||||
position: absolute;
|
||||
top: 92px;
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
|
||||
.avatar-container {
|
||||
position: absolute;
|
||||
top: 92px;
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
|
||||
.avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin: 0;
|
||||
}
|
||||
.avatar {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user