mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 12:35:07 +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">
|
<button mat-icon-button class="toggle-sidebar-folded"
|
||||||
<img class="logo-icon" src="assets/images/logos/fuse.svg">
|
(click)="toggleSidebarFolded()" fxHide.lt-lg>
|
||||||
</div>
|
<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"
|
</div>
|
||||||
(click)="toggleSidebarFolded()" fxHide.lt-lg>
|
|
||||||
<mat-icon class="secondary-text">menu</mat-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button mat-icon-button class="toggle-sidebar-opened"
|
</div>
|
||||||
(click)="toggleSidebarOpened()" fxHide.gt-md>
|
|
||||||
<mat-icon class="secondary-text">arrow_back</mat-icon>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
<div class="navbar-scroll-container" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||||
|
|
||||||
<div class="user" fxLayout="column">
|
<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 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>
|
</div>
|
||||||
|
|
||||||
<div class="navbar-content" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
<div class="navbar-content">
|
||||||
<fuse-navigation layout="vertical"></fuse-navigation>
|
<fuse-navigation layout="vertical"></fuse-navigation>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,51 +9,47 @@ fuse-sidebar {
|
||||||
|
|
||||||
navbar-vertical-style-1 {
|
navbar-vertical-style-1 {
|
||||||
|
|
||||||
.navbar-wrapper {
|
.navbar-top {
|
||||||
|
padding: 12px 0;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
.navbar-header {
|
.buttons {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.top {
|
.logo {
|
||||||
padding: 12px 0 0 0;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.buttons {
|
.logo-icon {
|
||||||
display: none;
|
width: 32px;
|
||||||
}
|
height: 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.logo {
|
.navbar-scroll-container {
|
||||||
|
|
||||||
.logo-icon {
|
.user {
|
||||||
width: 32px;
|
padding: 12px 0;
|
||||||
height: 32px;
|
|
||||||
}
|
.avatar-container {
|
||||||
|
position: relative;
|
||||||
|
top: auto;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.user {
|
.username,
|
||||||
padding-bottom: 24px;
|
.email {
|
||||||
|
display: none;
|
||||||
.avatar-container {
|
|
||||||
position: relative;
|
|
||||||
top: auto;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.username,
|
|
||||||
.email {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-content {
|
.navbar-content {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
height: auto !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -69,78 +65,65 @@ navbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.navbar-wrapper {
|
.navbar-top {
|
||||||
overflow: hidden;
|
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') {
|
.logo {
|
||||||
overflow: auto;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.logo-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar-header {
|
.buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
}
|
||||||
flex: 1 0 auto;
|
}
|
||||||
background: rgba(0, 0, 0, 0.12);
|
|
||||||
transition: padding 200ms ease;
|
|
||||||
|
|
||||||
.top {
|
.navbar-scroll-container {
|
||||||
display: flex;
|
overflow-y: auto;
|
||||||
flex: 1 1 auto;
|
|
||||||
width: 100%;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px 12px 0 16px;
|
|
||||||
|
|
||||||
.logo {
|
background: linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 30%),
|
||||||
display: flex;
|
linear-gradient(rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 40%);
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.logo-icon {
|
background-repeat: no-repeat;
|
||||||
width: 24px;
|
background-size: 100% 40px, 100% 10px;
|
||||||
height: 24px;
|
background-attachment: local, scroll;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
.user {
|
||||||
display: flex;
|
position: relative;
|
||||||
align-items: center;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
}
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
padding: 24px 0 64px 0;
|
||||||
|
|
||||||
.user {
|
.avatar-container {
|
||||||
position: relative;
|
position: absolute;
|
||||||
display: flex;
|
top: 92px;
|
||||||
align-items: center;
|
border-radius: 50%;
|
||||||
justify-content: flex-start;
|
padding: 8px;
|
||||||
width: 100%;
|
|
||||||
padding: 24px 0 64px 0;
|
|
||||||
|
|
||||||
.avatar-container {
|
.avatar {
|
||||||
position: absolute;
|
width: 72px;
|
||||||
top: 92px;
|
height: 72px;
|
||||||
border-radius: 50%;
|
margin: 0;
|
||||||
padding: 8px;
|
|
||||||
|
|
||||||
.avatar {
|
|
||||||
width: 72px;
|
|
||||||
height: 72px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user