diff --git a/src/app/core/components/search-bar/search-bar.component.scss b/src/app/core/components/search-bar/search-bar.component.scss index 0c2cf178..c32299be 100644 --- a/src/app/core/components/search-bar/search-bar.component.scss +++ b/src/app/core/components/search-bar/search-bar.component.scss @@ -5,7 +5,9 @@ .fuse-search-bar { height: 64px; font-size: 13px; - + @include media-breakpoint-down('xs') { + height: 56px; + } .fuse-search-bar-expander, .fuse-search-bar-collapser { cursor: pointer; @@ -14,12 +16,20 @@ width: 64px !important; height: 64px !important; line-height: 64px !important; + @include media-breakpoint-down('xs') { + height: 56px !important; + line-height: 56px !important; + } } .fuse-search-bar-loader { width: 64px !important; height: 64px !important; line-height: 64px !important; + @include media-breakpoint-down('xs') { + height: 56px !important; + line-height: 56px !important; + } } .fuse-search-bar-collapser { diff --git a/src/app/core/services/config.service.ts b/src/app/core/services/config.service.ts index d8208c3a..56efc302 100644 --- a/src/app/core/services/config.service.ts +++ b/src/app/core/services/config.service.ts @@ -1,6 +1,7 @@ import { Injectable } from '@angular/core'; import { BehaviorSubject } from 'rxjs/BehaviorSubject'; import { NavigationStart, Router } from '@angular/router'; +import { Platform } from '@angular/cdk'; @Injectable() export class FuseConfigService @@ -12,22 +13,34 @@ export class FuseConfigService /** * @param router */ - constructor(private router: Router) + constructor( + private router: Router, + public platform: Platform + ) { // Set the default settings this.defaultSettings = { - layout : { + layout : { navigation: 'left', // 'right', 'left', 'top', none toolbar : 'below', // 'above', 'below', none footer : 'none' // 'above', 'below', none }, - colorClasses: { + colorClasses : { toolbar: 'md-white-500-bg', navbar : 'md-fuse-dark-500-bg', footer : 'md-fuse-dark-800-bg' - } + }, + customScrollbars: true }; + /** + * Disable Custom Scrollbars if Browser is Mobile + */ + if ( this.platform.ANDROID || this.platform.IOS ) + { + this.defaultSettings.customScrollbars = false; + } + this.settings = Object.assign({}, this.defaultSettings); // Reload the default settings on every navigation start diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts index 579965e6..8c6d245c 100644 --- a/src/app/main/main.component.ts +++ b/src/app/main/main.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; +import { Component, ElementRef, HostBinding, OnDestroy, OnInit, Renderer2, ViewEncapsulation } from '@angular/core'; import { Subscription } from 'rxjs/Subscription'; import { FuseConfigService } from '../core/services/config.service'; @@ -12,6 +12,7 @@ export class FuseMainComponent implements OnInit, OnDestroy { onSettingsChanged: Subscription; fuseSettings: any; + @HostBinding('class.disable-perfect-scrollbar') disableCustomScrollbars; constructor( private _renderer: Renderer2, @@ -24,6 +25,7 @@ export class FuseMainComponent implements OnInit, OnDestroy .subscribe( (newSettings) => { this.fuseSettings = newSettings; + this.disableCustomScrollbars = !this.fuseSettings.customScrollbars; } ); }