purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-12-03 07:36:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Auth page v2 styles iOS height issue

Browse Source 
+ Fix: Perfect scrollbar causes issues on outside of the zone
+ Fix: Navigation must unsubscribe the nav toggle and clear the timeout
+ Fix: Chat view is not scrollable on mobile
+ Fix: Terms & Conditions checkbox styling issues on Auth forms
+ Fix: Sidenav z-index issue on certain page layouts
+ Fix: Some page layout header heights not correct on small devices
This commit is contained in:
Sercan Yemen
2017-10-12 14:28:58 +03:00
parent cb89da4647
commit 72f968b594
12 changed files with 947 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive.ts
View File

@@ -1,4 +1,4 @@
import { AfterViewInit, Directive, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
import { AfterViewInit, Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
import PerfectScrollbar from 'perfect-scrollbar';
import { FuseConfigService } from '../../services/config.service';
import { Subscription } from 'rxjs/Subscription';
@@ -17,7 +17,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
constructor(
private element: ElementRef,
private zone: NgZone,
private fuseConfig: FuseConfigService,
private platform: Platform
)
@@ -49,11 +48,8 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
return;
}
this.zone.runOutsideAngular(() => {
// Initialize the perfect-scrollbar
this.ps = new PerfectScrollbar(this.element.nativeElement);
});
// Initialize the perfect-scrollbar
this.ps = new PerfectScrollbar(this.element.nativeElement);
}
ngOnDestroy()
@@ -127,7 +123,6 @@ export class FusePerfectScrollbarDirective implements OnInit, AfterViewInit, OnD
// PS has weird event sending order, this is a workaround for that
this.update();
this.update();
}
else if ( value !== this.element.nativeElement[target] )

15
src/app/core/scss/partials/_page-layouts.scss
View File

@@ -132,7 +132,7 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
min-width: 240px;
max-width: 240px;
height: auto;
z-index: 2;
z-index: 4;
overflow-y: hidden;
@include mat-elevation(7);
@@ -145,6 +145,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
height: $carded-header-height;
min-height: $carded-header-height;
max-height: $carded-header-height;
@include media-breakpoint-down('sm') {
height: $carded-header-height-sm;
min-height: $carded-header-height-sm;
max-height: $carded-header-height-sm;
}
}
.content {
@@ -175,6 +181,12 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
height: $carded-header-height-without-toolbar;
min-height: $carded-header-height-without-toolbar;
max-height: $carded-header-height-without-toolbar;
@include media-breakpoint-down('sm') {
height: $carded-header-height-without-toolbar-sm;
min-height: $carded-header-height-without-toolbar-sm;
max-height: $carded-header-height-without-toolbar-sm;
}
}
.content-card {
@@ -341,7 +353,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png');
> mat-sidenav-container {
display: flex;
flex-direction: column;
//flex-direction: row;
flex: 1;
background: none;
z-index: 2;

1
src/app/main/content/apps/chat/chat-view/chat-view.component.scss
View File

@@ -32,6 +32,7 @@
#chat-content {
background: transparent;
overflow: auto;
.message-row {
padding: 16px;

1
src/app/main/content/pages/authentication/forgot-password-2/forgot-password-2.component.scss
View File

@@ -37,7 +37,6 @@
width: 400px;
min-width: 400px;
max-width: 400px;
height: 100%;
background: #FFFFFF;
@include mat-elevation(7);

1
src/app/main/content/pages/authentication/login-2/login-2.component.scss
View File

@@ -37,7 +37,6 @@
width: 400px;
min-width: 400px;
max-width: 400px;
height: 100%;
background: #FFFFFF;
@include mat-elevation(7);

4
src/app/main/content/pages/authentication/register-2/register-2.component.html
View File

@@ -62,8 +62,8 @@
</mat-form-field>
<div class="terms" fxLayout="row" fxLayoutAlign="center center">
<mat-checkbox name="terms" aria-label="I read and accept" required>
<span>I read and accept</span>
<mat-checkbox name="terms" aria-label="Accept" required>
<span>Accept</span>
</mat-checkbox>
<a href="#">terms and conditions</a>
</div>

3
src/app/main/content/pages/authentication/register-2/register-2.component.scss
View File

@@ -37,7 +37,6 @@
width: 400px;
min-width: 400px;
max-width: 400px;
height: 100%;
background: #FFFFFF;
@include mat-elevation(7);
@@ -99,10 +98,10 @@
}
.terms {
font-size: 13px;
margin: 16px 0 32px 0;
a {
font-size: 16px;
margin-left: 4px;
}
}

2
src/app/main/content/pages/authentication/register/register.component.scss
View File

@@ -52,10 +52,10 @@
}
.terms {
font-size: 13px;
margin: 16px 0 32px 0;
a {
font-size: 16px;
margin-left: 4px;
}
}

1
src/app/main/content/pages/authentication/reset-password-2/reset-password-2.component.scss
View File

@@ -37,7 +37,6 @@
width: 400px;
min-width: 400px;
max-width: 400px;
height: 100%;
background: #FFFFFF;
@include mat-elevation(7);

25
src/app/main/navbar/vertical/navbar-vertical.component.ts
View File

@@ -26,6 +26,8 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
@ViewChild(FusePerfectScrollbarDirective) fusePerfectScrollbarDirective;
matchMediaWatcher: Subscription;
navigationServiceWatcher: Subscription;
fusePerfectScrollbarUpdateTimeout;
player: AnimationPlayer;
@@ -43,11 +45,12 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
{
navBarService.setNavBar(this);
this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
setTimeout(() => {
this.fusePerfectScrollbarDirective.update();
}, 310);
});
this.navigationServiceWatcher =
this.fuseNavigationService.onNavCollapseToggle.subscribe(() => {
this.fusePerfectScrollbarUpdateTimeout = setTimeout(() => {
this.fusePerfectScrollbarDirective.update();
}, 310);
});
this.matchMediaWatcher =
this.fuseMatchMedia.onMediaChange
@@ -112,6 +115,13 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
}
}
ngOnDestroy()
{
clearTimeout(this.fusePerfectScrollbarUpdateTimeout);
this.matchMediaWatcher.unsubscribe();
this.navigationServiceWatcher.unsubscribe();
}
openBar()
{
this.isClosed = false;
@@ -235,9 +245,4 @@ export class FuseNavbarVerticalComponent implements OnInit, OnDestroy
});
}
}
ngOnDestroy()
{
this.matchMediaWatcher.unsubscribe();
}
}

4
src/app/navigation.model.ts
View File

@@ -117,7 +117,7 @@ export class NavigationModel
'url' : '/pages/auth/forgot-password'
},
{
'title': 'Forgot Password 2',
'title': 'Forgot Password v2',
'type' : 'item',
'url' : '/pages/auth/forgot-password-2'
},
@@ -127,7 +127,7 @@ export class NavigationModel
'url' : '/pages/auth/reset-password'
},
{
'title': 'Reset Password 2',
'title': 'Reset Password v2',
'type' : 'item',
'url' : '/pages/auth/reset-password-2'
},