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

Remove 'inner-scroll' class on small screen devices to give more room to the scroll

Browse Source
This commit is contained in:
Sercan Yemen 2018-06-09 14:43:42 +03:00
parent bd79830cb4
commit f8f97f8ad4
2 changed files with 57 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/@fuse/directives/fuse-inner-scroll/fuse-inner-scroll.directive.ts
View File

@ -1,4 +1,8 @@
import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { FuseMatchMediaService } from '@fuse/services/match-media.service';
@Directive({
selector: '.inner-scroll'
@ -8,15 +12,23 @@ export class FuseInnerScrollDirective implements OnInit, OnDestroy
// Private
private _parent: any;
private _grandParent: any;
private _unsubscribeAll: Subject<any>;
/**
* Constructor
*
* @param {ElementRef} _elementRef
* @param {FuseMatchMediaService} _fuseMediaMatchService
* @param {Renderer2} _renderer
*/
constructor(
private _elementRef: ElementRef,
private _fuseMediaMatchService: FuseMatchMediaService,
private _renderer: Renderer2
)
{
// Set the private defaults
this._unsubscribeAll = new Subject();
}
// -----------------------------------------------------------------------------------------------------
@ -40,8 +52,21 @@ export class FuseInnerScrollDirective implements OnInit, OnDestroy
// Get the grand parent
this._grandParent = this._renderer.parentNode(this._parent);
// Add the inner-scroll class
this._renderer.addClass(this._grandParent, 'inner-scroll');
// Register to the media query changes
this._fuseMediaMatchService.onMediaChange
.pipe(takeUntil(this._unsubscribeAll))
.subscribe((alias) => {
console.log(alias);
if ( alias === 'xs' )
{
this._removeClass();
}
else
{
this._addClass();
}
});
}
/**
@ -55,6 +80,36 @@ export class FuseInnerScrollDirective implements OnInit, OnDestroy
return;
}
// Remove the class
this._removeClass();
// Unsubscribe from all subscriptions
this._unsubscribeAll.next();
this._unsubscribeAll.complete();
}
// -----------------------------------------------------------------------------------------------------
// @ Private methods
// -----------------------------------------------------------------------------------------------------
/**
* Add the class name
*
* @private
*/
private _addClass(): void
{
// Add the inner-scroll class
this._renderer.addClass(this._grandParent, 'inner-scroll');
}
/**
* Remove the class name
* @private
*/
private _removeClass(): void
{
// Remove the inner-scroll class
this._renderer.removeClass(this._grandParent, 'inner-scroll');
}

44
src/@fuse/scss/partials/_page-layouts.scss
View File

@ -552,50 +552,6 @@ $carded-header-height-without-toolbar-sm: $carded-header-height-sm - $carded-too
@include media-breakpoint-down('xs') {
// Activate single-scroll
&.carded {
&.fullwidth {
> .center {
flex: 1 0 auto;
max-height: none;
}
}
&.left-sidenav,
&.right-sidenav {
> mat-sidenav-container {
flex: 1 0 auto;
}
}
}
&.simple {
&.fullwidth {
> .content {
flex: 1 0 auto;
}
}
&.left-sidenav,
&.right-sidenav {
> mat-sidenav-container {
flex: 1 0 auto !important;
> .mat-sidenav-content,
> .mat-drawer-content {
flex: 1 0 auto;
}
}
}
}
// End - Activate single-scroll
// Smaller margins
&.carded {