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()
export class FuseNavigationService
{
onNavCollapseToggle = new EventEmitter<any>();
onNavCollapseToggled = new EventEmitter<any>();
onNavigationModelChange: BehaviorSubject<any> = new BehaviorSubject({});
navigationModel: NavigationModel;

View File

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

View File

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

View File

@ -1,9 +1,9 @@
<div class="page-layout simple fullwidth angular-material-element" fusePerfectScrollbar>
<!-- 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">
<md-icon class="secondary-text s-16">home</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>
<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>
<span>Reference</span>
</a>

View File

@ -1,9 +1,9 @@
<div id="material-colors" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
<!-- 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">
<md-icon class="secondary-text s-16">home</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>
<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"
target="_blank">
<md-icon>link</md-icon>

View File

@ -1,9 +1,9 @@
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column" fusePerfectScrollbar>
<!-- 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">
<md-icon class="secondary-text s-16">home</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>
<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>
<span>Reference</span>
</a>

View File

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

View File

@ -3,7 +3,7 @@
<input mdInput placeholder="State" aria-label="State" [mdAutocomplete]="auto" [formControl]="stateCtrl">
<md-autocomplete #auto="mdAutocomplete">
<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> |
<small>Population: {{state.population}}</small>
</md-option>