src/app/core/common-components/warning-not-optimized-for-small-screen/warning-not-optimized-for-small-screen.component.ts
Displays an inline warning banner when the user is on a small screen (≤599px), indicating that the current page is not optimized for small screens.
Add <app-warning-not-optimized-for-small-screen /> at the top of any complex
page template that is not suited for mobile use.
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | app-warning-not-optimized-for-small-screen |
| standalone | true |
| imports | |
| styleUrls | ./warning-not-optimized-for-small-screen.component.scss |
| templateUrl | ./warning-not-optimized-for-small-screen.component.html |
| styleUrl | ./warning-not-optimized-for-small-screen.component.scss |
Properties |
| isSmallScreen |
Type : unknown
|
Default value : toSignal(
this.breakpointObserver
.observe(Breakpoints.XSmall)
.pipe(map((result) => result.matches)),
{ initialValue: false },
)
|
import { ChangeDetectionStrategy, Component, inject } from "@angular/core";
import { BreakpointObserver, Breakpoints } from "@angular/cdk/layout";
import { toSignal } from "@angular/core/rxjs-interop";
import { map } from "rxjs/operators";
import { FaIconComponent } from "@fortawesome/angular-fontawesome";
/**
* Displays an inline warning banner when the user is on a small screen (≤599px),
* indicating that the current page is not optimized for small screens.
*
* Add `<app-warning-not-optimized-for-small-screen />` at the top of any complex
* page template that is not suited for mobile use.
*/
@Component({
selector: "app-warning-not-optimized-for-small-screen",
changeDetection: ChangeDetectionStrategy.OnPush,
imports: [FaIconComponent],
templateUrl: "./warning-not-optimized-for-small-screen.component.html",
styleUrl: "./warning-not-optimized-for-small-screen.component.scss",
})
export class WarningNotOptimizedForSmallScreenComponent {
private readonly breakpointObserver = inject(BreakpointObserver);
isSmallScreen = toSignal(
this.breakpointObserver
.observe(Breakpoints.XSmall)
.pipe(map((result) => result.matches)),
{ initialValue: false },
);
}
@if (isSmallScreen()) {
<div class="small-screen-warning">
<fa-icon icon="triangle-exclamation" />
<span i18n="small screen warning message"
>This page is not yet optimized for small screens. Currently, this feature
works best on larger screens.</span
>
</div>
}
./warning-not-optimized-for-small-screen.component.scss
@use "@angular/material/core/style/elevation" as mat-elevation;
@use "variables/colors";
.small-screen-warning {
display: flex;
align-items: flex-start;
gap: 0.75em;
background-color: colors.$grey-light;
border-left: 4px solid colors.$warn;
color: rgba(0, 0, 0, 0.87);
padding: 1em;
margin-bottom: 1em;
border-radius: 4px;
box-sizing: border-box;
width: 100%;
@include mat-elevation.elevation(1);
span {
min-width: 0;
overflow-wrap: break-word;
}
fa-icon {
color: colors.$warn;
flex-shrink: 0;
}
}