Responsive refinement on some doc pages,

Navigation scrool fix on collapse toggled.
This commit is contained in:
mustafahlvc 2017-09-28 12:22:33 +03:00
parent 5e4940fed9
commit 9400c3d748
8 changed files with 24 additions and 23 deletions

View File

@ -5,6 +5,7 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable() @Injectable()
export class FuseNavigationService export class FuseNavigationService
{ {
onNavCollapseToggle = new EventEmitter<any>();
onNavCollapseToggled = new EventEmitter<any>(); onNavCollapseToggled = new EventEmitter<any>();
onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({}); onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
navigationModel: NavigationModel; navigationModel: NavigationModel;

View File

@ -43,7 +43,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
this.navigationService.onNavCollapseToggled this.navigationService.onNavCollapseToggled
.subscribe( .subscribe(
(clickedItem) => { (clickedItem) => {
if ( clickedItem.children ) if ( clickedItem && clickedItem.children )
{ {
// Check if the clicked item is one // Check if the clicked item is one
// of the children of this item // of the children of this item
@ -82,6 +82,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
// Navigation collapse toggled... // Navigation collapse toggled...
this.navigationService.onNavCollapseToggled.emit(this.item); this.navigationService.onNavCollapseToggled.emit(this.item);
this.navigationService.onNavCollapseToggle.emit();
} }
/** /**
@ -95,6 +96,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
} }
this.isOpen = true; this.isOpen = true;
this.navigationService.onNavCollapseToggle.emit();
} }
/** /**
@ -107,6 +109,7 @@ export class FuseNavVerticalCollapseComponent implements OnInit
return; return;
} }
this.isOpen = false; this.isOpen = false;
this.navigationService.onNavCollapseToggle.emit();
} }
/** /**

View File

@ -1,8 +1,8 @@
<div id="ngx-datatable" class="page-layout simple fullwidth" fusePerfectScrollbar> <div id="ngx-datatable" class="page-layout simple fullwidth" fusePerfectScrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between"> <div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
<div fxLayout="column" fxLayoutAlign="center start"> <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center"> <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon> <md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon> <md-icon class="secondary-text s-16">chevron_right</md-icon>
@ -11,14 +11,12 @@
<div class="h2 mt-16">ngx-datatable</div> <div class="h2 mt-16">ngx-datatable</div>
</div> </div>
<div fxLayout="row" fxLayoutAlign="start center"> <a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0"
<a md-raised-button class="md-white-bg" href="https://github.com/swimlane/ngx-datatable"
href="https://github.com/swimlane/ngx-datatable" target="_blank">
target="_blank"> <md-icon>link</md-icon>
<md-icon>link</md-icon> <span>Reference</span>
<span>Reference</span> </a>
</a>
</div>
</div> </div>
<!-- / HEADER --> <!-- / HEADER -->

View File

@ -1,9 +1,9 @@
<div class="page-layout simple fullwidth angular-material-element" fusePerfectScrollbar> <div class="page-layout simple fullwidth angular-material-element" fusePerfectScrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center"> <div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
<div fxLayout="column" fxLayoutAlign="center start"> <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center"> <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon> <md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon> <md-icon class="secondary-text s-16">chevron_right</md-icon>
@ -14,7 +14,7 @@
<div class="h2 mt-16">{{title}}</div> <div class="h2 mt-16">{{title}}</div>
</div> </div>
<a md-raised-button class="reference-button md-white-bg" href="https://material.io/icons/" target="_blank"> <a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0" href="https://material.io/icons/" target="_blank">
<md-icon>link</md-icon> <md-icon>link</md-icon>
<span>Reference</span> <span>Reference</span>
</a> </a>

View File

@ -1,9 +1,9 @@
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar> <div id="material-colors" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center"> <div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
<div fxLayout="column" fxLayoutAlign="center start"> <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center"> <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon> <md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon> <md-icon class="secondary-text s-16">chevron_right</md-icon>
@ -12,7 +12,7 @@
<div class="h1 mt-16">Colors</div> <div class="h1 mt-16">Colors</div>
</div> </div>
<a md-raised-button class="reference-button md-white-bg" <a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0"
href="https://www.google.com/design/spec/style/color.html#color-color-palette" href="https://www.google.com/design/spec/style/color.html#color-color-palette"
target="_blank"> target="_blank">
<md-icon>link</md-icon> <md-icon>link</md-icon>

View File

@ -1,9 +1,9 @@
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar> <div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
<!-- HEADER --> <!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="space-between center"> <div class="header md-accent-bg p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center">
<div fxLayout="column" fxLayoutAlign="center start"> <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center"> <div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon> <md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon> <md-icon class="secondary-text s-16">chevron_right</md-icon>
@ -12,7 +12,7 @@
<div class="h1 mt-16">Icons</div> <div class="h1 mt-16">Icons</div>
</div> </div>
<a md-raised-button class="reference-button md-white-bg" href="https://material.angular.io" target="_blank"> <a md-raised-button class="reference-button md-white-bg mt-16 mt-sm-0" href="https://material.angular.io" target="_blank">
<md-icon>link</md-icon> <md-icon>link</md-icon>
<span>Reference</span> <span>Reference</span>
</a> </a>

View File

@ -43,8 +43,7 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
{ {
navBarService.setNavBar(this); navBarService.setNavBar(this);
this.fuseNavigationService.onNavCollapseToggled.subscribe(() => { this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
setTimeout(() => { setTimeout(() => {
this.fusePerfectScrollbarDirective.update(); this.fusePerfectScrollbarDirective.update();
}, 310); }, 310);

View File

@ -3,7 +3,7 @@
<input mdInput placeholder="State" aria-label="State" [mdAutocomplete]="auto" [formControl]="stateCtrl"> <input mdInput placeholder="State" aria-label="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
<md-autocomplete #auto="mdAutocomplete"> <md-autocomplete #auto="mdAutocomplete">
<md-option *ngFor="let state of filteredStates | async" [value]="state.name"> <md-option *ngFor="let state of filteredStates | async" [value]="state.name">
<img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" width="25" />
<span>{{ state.name }}</span> | <span>{{ state.name }}</span> |
<small>Population: {{state.population}}</small> <small>Population: {{state.population}}</small>
</md-option> </md-option>