diff --git a/package-lock.json b/package-lock.json index 91972508..65a4ac97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9178,8 +9178,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz", "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=", - "dev": true, - "optional": true + "dev": true }, "uglifyjs-webpack-plugin": { "version": "0.4.6", diff --git a/src/app/core/animations.ts b/src/app/core/animations.ts index 65e7a622..611dd1f1 100644 --- a/src/app/core/animations.ts +++ b/src/app/core/animations.ts @@ -267,7 +267,7 @@ export class Animations public static routerTransitionFade = trigger('routerTransitionFade', [ - transition('* => *', [ + transition('* => *', group([ query('fuse-content > :enter, fuse-content > :leave ', [ style({ @@ -283,28 +283,26 @@ export class Animations opacity: 0 }) ], {optional: true}), - // sequence([ - query('fuse-content > :leave', [ - style({ - opacity: 1 - }), - animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', - style({ - opacity: 0 - })) - ], {optional: true}), - query('fuse-content > :enter', [ + query('fuse-content > :leave', [ + style({ + opacity: 1 + }), + animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', style({ opacity: 0 - }), - animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', - style({ - opacity: 1 - })) - ], {optional: true}), - // ]), + })) + ], {optional: true}), + query('fuse-content > :enter', [ + style({ + opacity: 0 + }), + animate('300ms cubic-bezier(0.250, 0.460, 0.450, 0.940)', + style({ + opacity: 1 + })) + ], {optional: true}), query('fuse-content > :enter', animateChild(), {optional: true}), query('fuse-content > :leave', animateChild(), {optional: true}) - ]) + ])) ]); } diff --git a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts b/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts index b487bd50..ca6fa6af 100644 --- a/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts +++ b/src/app/core/directives/md-sidenav-helper/md-sidenav-helper.directive.ts @@ -73,7 +73,7 @@ export class FuseMdSidenavHelperDirective implements OnInit, AfterViewInit, OnDe { setTimeout(() => { this.stopTransition = false; - }, 0); + }, 300); } ngOnDestroy() diff --git a/src/app/core/scss/partials/_angular-material-fix.scss b/src/app/core/scss/partials/_angular-material-fix.scss index f0ec4593..ca87b3c9 100644 --- a/src/app/core/scss/partials/_angular-material-fix.scss +++ b/src/app/core/scss/partials/_angular-material-fix.scss @@ -4,3 +4,50 @@ border-radius: 50%; } } + +md-sidenav-container { + + md-sidenav { + order: 1; + + &.md-is-locked-open { + position: relative !important; + } + + &.md-stop-transition { + transition: none !important; + transform: translate3d(0, 0, 0) !important; + + ~ .mat-sidenav-content, + ~ .mat-drawer-content { + transition: none !important; + } + } + + &.mat-sidenav-opened { + + &.mat-drawer-side { + + &.md-is-locked-open { + position: relative !important; + } + + ~ .mat-sidenav-content, + ~ .mat-drawer-content { + transition: none !important; + margin-left: 0 !important; + margin-right: 0 !important; + transform: translate3d(0, 0, 0) !important; + } + } + } + + &.mat-drawer-end { + order: 3; + } + } + + .mat-drawer-content { + order: 2; + } +} \ No newline at end of file diff --git a/src/app/core/scss/partials/_page-layouts.scss b/src/app/core/scss/partials/_page-layouts.scss index 81f815e5..0ce92f09 100644 --- a/src/app/core/scss/partials/_page-layouts.scss +++ b/src/app/core/scss/partials/_page-layouts.scss @@ -137,19 +137,10 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); @include mat-elevation(7); &.md-is-locked-open { - position: relative; background: none; box-shadow: none; } - &.md-stop-transition { - - ~ .mat-sidenav-content, - ~ .mat-drawer-content { - transition: none; - } - } - .header { height: $carded-header-height; min-height: $carded-header-height; @@ -233,7 +224,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); ~ .mat-sidenav-content, ~ .mat-drawer-content { - margin-left: 0 !important; .center { margin-left: 0; @@ -257,7 +247,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); ~ .mat-sidenav-content, ~ .mat-drawer-content { - margin-right: 0 !important; .center { margin-right: 0; @@ -347,7 +336,8 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); > md-sidenav-container { display: flex; - flex-direction: column; + // flex-direction: column; + flex-direction: row; flex: 1; background: none; z-index: 2; @@ -368,14 +358,6 @@ $top-bg-image: url('assets/images/backgrounds/header-bg.png'); background: transparent; } - &.md-stop-transition { - - ~ .mat-sidenav-content, - ~ .mat-drawer-content { - transition: none; - } - } - .sidenav-content { height: 100%; } diff --git a/src/app/main/content/apps/dashboards/project/project.component.html b/src/app/main/content/apps/dashboards/project/project.component.html index d8dc13a5..00fc77a3 100644 --- a/src/app/main/content/apps/dashboards/project/project.component.html +++ b/src/app/main/content/apps/dashboards/project/project.component.html @@ -687,7 +687,8 @@ - +