purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

(fuseNavBar) change media steps for folded feature.

Browse Source
This commit is contained in:
mustafahlvc 2017-08-18 16:33:19 +03:00
parent 953f8cf44a
commit 38f83bd905
5 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/main/navbar/navbar.component.html
View File

@ -5,11 +5,11 @@
<span class="logo-text">FUSE</span> <span class="logo-text">FUSE</span>
</div> </div>
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="toggleFold" fxHide.xs> <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="toggleFold" fxHide.lt-lg>
<md-icon>menu</md-icon> <md-icon>menu</md-icon>
</button> </button>
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="closeBar" fxHide.gt-xs> <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="closeBar" fxHide.gt-md>
<md-icon>arrow_back</md-icon> <md-icon>arrow_back</md-icon>
</button> </button>

2
src/app/main/navbar/navbar.component.scss
View File

@ -72,7 +72,7 @@ fuse-navbar {
box-shadow: none; box-shadow: none;
} }
@include media-breakpoint('lt-md') { @include media-breakpoint('lt-lg') {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;

4
src/app/main/navbar/navbar.component.ts
View File

@ -35,7 +35,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
.subscribe((mediaStep) => { .subscribe((mediaStep) => {
setTimeout(() => { setTimeout(() => {
if ( this.media.isActive('lt-md') ) if ( this.media.isActive('lt-lg') )
{ {
this.closeBar(); this.closeBar();
this.deActivateFolded(); this.deActivateFolded();
@ -60,7 +60,7 @@ export class FuseNavbarComponent implements OnInit, OnDestroy
this.initialized = true; this.initialized = true;
}); });
if ( this.media.isActive('lt-md') ) if ( this.media.isActive('lt-lg') )
{ {
this.closeBar(); this.closeBar();
this.deActivateFolded(); this.deActivateFolded();

4
src/app/main/toolbar/toolbar.component.html
View File

@ -4,11 +4,11 @@
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> <div fxFlex fxLayout="row" fxLayoutAlign="start center">
<button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-sm fxFlex="56px"> <button md-button class="toggle-button-navbar mat-icon-button" fuseNavbar="openBar" fxHide.gt-md>
<md-icon>menu</md-icon> <md-icon>menu</md-icon>
</button> </button>
<div class="toolbar-separator" fxHide.gt-sm></div> <div class="toolbar-separator" fxHide.gt-md></div>
<div class="px-16" fxHide.lt-md> <div class="px-16" fxHide.lt-md>
<fuse-shortcuts></fuse-shortcuts> <fuse-shortcuts></fuse-shortcuts>

5
src/app/main/toolbar/toolbar.component.scss
View File

@ -21,6 +21,11 @@
height: 64px; height: 64px;
} }
.toggle-button-navbar {
min-width: 56px;
height: 56px;
}
.toolbar-separator { .toolbar-separator {
height: 64px; height: 64px;
width: 1px; width: 1px;