mirror of
https://github.com/bitwarden/browser
synced 2026-02-19 19:04:01 +00:00
651cb7bbb2
* wip * wip * implement new control flow syntax * new landing helper components * add missing imports to header * create max width container * create landing card component * address claude feedback * fix center aligned text * ensure secondary content is centered for now * only render container when there is content * remove max width container * remove constructor init of variable * remove unnecessary styling * build styling into helper components * ensure content grows * ensure content takes allowed width * apply padding to elements instead of header and check for projected content * use Array.from to filter nodes * fix logo width * use has selector to apply actions styles, simplify heading padding * remove unneeded content projection * remove unneeded comment * use modern control flow for story * update max width classes to signal and remove switch * make logo input readonly * remove variables * remove object type * fix width types usage * add comments about component usage * fix broken variable reference * fix broken max width class usage * only appyly y padding to header actions
41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
import { Component, ChangeDetectionStrategy, inject, input } from "@angular/core";
|
|
|
|
import { BackgroundLeftIllustration, BackgroundRightIllustration } from "@bitwarden/assets/svg";
|
|
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
|
|
|
import { IconModule } from "../icon";
|
|
|
|
/**
|
|
* Root layout component for landing pages providing a full-screen container with optional decorative background illustrations.
|
|
*
|
|
* @remarks
|
|
* This component serves as the outermost wrapper for landing pages and provides:
|
|
* - Full-screen layout that adapts to different client types (web, browser, desktop)
|
|
* - Optional decorative background illustrations in the bottom corners
|
|
* - Content projection slots for header, main content, and footer
|
|
*
|
|
* @example
|
|
* ```html
|
|
* <bit-landing-layout [hideBackgroundIllustration]="false">
|
|
* <bit-landing-header>...</bit-landing-header>
|
|
* <bit-landing-content>...</bit-landing-content>
|
|
* <bit-landing-footer>...</bit-landing-footer>
|
|
* </bit-landing-layout>
|
|
* ```
|
|
*/
|
|
@Component({
|
|
selector: "bit-landing-layout",
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
templateUrl: "./landing-layout.component.html",
|
|
imports: [IconModule],
|
|
})
|
|
export class LandingLayoutComponent {
|
|
readonly hideBackgroundIllustration = input<boolean>(false);
|
|
|
|
protected readonly leftIllustration = BackgroundLeftIllustration;
|
|
protected readonly rightIllustration = BackgroundRightIllustration;
|
|
|
|
private readonly platformUtilsService: PlatformUtilsService = inject(PlatformUtilsService);
|
|
protected readonly clientType = this.platformUtilsService.getClientType();
|
|
}
|