From 5f6c5e01eab290b23ab87600dc84de93603c3c7c Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Fri, 18 Nov 2022 18:06:57 +0300 Subject: [PATCH 1/3] Fix Toaster padding-right on mobile --- .../toast-container.component.scss | 5 +++++ .../toast-container.component.ts | 19 ++++++++++++++++++- 2 files changed, 23 insertions(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.scss b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.scss index 281e08998d..27e5e2dffa 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.scss +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.scss @@ -11,3 +11,8 @@ flex-direction: column-reverse; } } +@media only screen and (max-width: 768px) { + .abp-toast-container { + min-width: 100%; + } +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts index c3b6989a51..7913e65876 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts @@ -1,4 +1,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { Component, HostListener, Input, OnInit } from '@angular/core'; import { ReplaySubject } from 'rxjs'; import { toastInOut } from '../../animations/toast.animations'; import { Toaster } from '../../models/toaster'; @@ -21,6 +21,8 @@ export class ToastContainerComponent implements OnInit { @Input() right = '30px'; + defaultRight = '30px'; + defaultMobileRight = '0'; @Input() bottom = '30px'; @@ -28,10 +30,13 @@ export class ToastContainerComponent implements OnInit { @Input() left?: string; + @Input() toastKey?: string; + screenWidth: number; ngOnInit() { + this.setDefaultRight(); this.toasts$.subscribe(toasts => { this.toasts = this.toastKey ? toasts.filter(t => { @@ -41,6 +46,18 @@ export class ToastContainerComponent implements OnInit { }); } + @HostListener('window:resize', ['$event']) + onWindowResize() { + this.setDefaultRight(); + } + setDefaultRight() { + + const screenWidth = window.innerWidth; + if(screenWidth < 768 && this.right == this.defaultRight) { + this.right = this.defaultMobileRight; + } + } + trackByFunc(index: number, toast: Toaster.Toast) { if (!toast) return null; return toast.options?.id; From 50bce3542688f52d9bbafa46859ad97f702eacb1 Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Wed, 23 Nov 2022 15:14:31 +0300 Subject: [PATCH 2/3] Reformat --- .../toast-container.component.ts | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts index 7913e65876..2ce2367a17 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts @@ -1,7 +1,7 @@ -import { Component, HostListener, Input, OnInit } from '@angular/core'; -import { ReplaySubject } from 'rxjs'; -import { toastInOut } from '../../animations/toast.animations'; -import { Toaster } from '../../models/toaster'; +import {Component, HostListener, Input, OnInit} from '@angular/core'; +import {ReplaySubject} from 'rxjs'; +import {toastInOut} from '../../animations/toast.animations'; +import {Toaster} from '../../models/toaster'; @Component({ selector: 'abp-toast-container', @@ -33,27 +33,27 @@ export class ToastContainerComponent implements OnInit { @Input() toastKey?: string; - screenWidth: number; ngOnInit() { this.setDefaultRight(); this.toasts$.subscribe(toasts => { this.toasts = this.toastKey ? toasts.filter(t => { - return t.options && t.options.containerKey !== this.toastKey; - }) + return t.options && t.options.containerKey !== this.toastKey; + }) : toasts; }); } @HostListener('window:resize', ['$event']) onWindowResize() { - this.setDefaultRight(); - } - setDefaultRight() { - + this.setDefaultRight(); + } + + setDefaultRight() { + const screenWidth = window.innerWidth; - if(screenWidth < 768 && this.right == this.defaultRight) { + if (screenWidth < 768 && this.right == this.defaultRight) { this.right = this.defaultMobileRight; } } From 47922bfce7a9e4e71971d23958f6c10c7b2ccc3d Mon Sep 17 00:00:00 2001 From: Mahmut Gundogdu Date: Thu, 24 Nov 2022 16:07:21 +0300 Subject: [PATCH 3/3] Reformat with prettier --- .../toast-container/toast-container.component.ts | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts index 2ce2367a17..3551ff1535 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast-container/toast-container.component.ts @@ -1,7 +1,7 @@ -import {Component, HostListener, Input, OnInit} from '@angular/core'; -import {ReplaySubject} from 'rxjs'; -import {toastInOut} from '../../animations/toast.animations'; -import {Toaster} from '../../models/toaster'; +import { Component, HostListener, Input, OnInit } from '@angular/core'; +import { ReplaySubject } from 'rxjs'; +import { toastInOut } from '../../animations/toast.animations'; +import { Toaster } from '../../models/toaster'; @Component({ selector: 'abp-toast-container', @@ -30,7 +30,6 @@ export class ToastContainerComponent implements OnInit { @Input() left?: string; - @Input() toastKey?: string; @@ -39,8 +38,8 @@ export class ToastContainerComponent implements OnInit { this.toasts$.subscribe(toasts => { this.toasts = this.toastKey ? toasts.filter(t => { - return t.options && t.options.containerKey !== this.toastKey; - }) + return t.options && t.options.containerKey !== this.toastKey; + }) : toasts; }); } @@ -51,7 +50,6 @@ export class ToastContainerComponent implements OnInit { } setDefaultRight() { - const screenWidth = window.innerWidth; if (screenWidth < 768 && this.right == this.defaultRight) { this.right = this.defaultMobileRight;