PM-13252 - AnonLayout - Style tweaks to fix scrollbars on browser + add typography to footer content + misc minor refactors. (#11449)

This commit is contained in:
Jared Snider 2024-10-08 14:51:08 -04:00 committed by GitHub
parent 005937cb4a
commit 18522e5165
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 7 deletions

View File

@ -5,8 +5,7 @@
'tw-pt-0': decreaseTopPadding,
'tw-pt-8': !decreaseTopPadding,
'tw-min-h-screen': clientType === 'web',
'tw-min-h-[calc(100vh-72px)]': clientType === 'browser',
'tw-min-h-[calc(100vh-54px)]': clientType === 'desktop',
'tw-min-h-full': clientType === 'browser' || clientType === 'desktop',
}"
>
<a *ngIf="!hideLogo" [routerLink]="['/']" class="tw-w-[128px] [&>*]:tw-align-top">
@ -33,7 +32,7 @@
</div>
<div
class="tw-mb-auto tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
[ngClass]="{ 'tw-max-w-md': maxWidth === 'md', 'tw-max-w-3xl': maxWidth === '3xl' }"
>
<div
@ -45,13 +44,15 @@
</div>
<footer *ngIf="!hideFooter" class="tw-text-center">
<div *ngIf="showReadonlyHostname">{{ "accessing" | i18n }} {{ hostname }}</div>
<div *ngIf="showReadonlyHostname" bitTypography="body2">
{{ "accessing" | i18n }} {{ hostname }}
</div>
<ng-container *ngIf="!showReadonlyHostname">
<ng-content select="[slot=environment-selector]"></ng-content>
</ng-container>
<ng-container *ngIf="!hideYearAndVersion">
<div>&copy; {{ year }} Bitwarden Inc.</div>
<div>{{ version }}</div>
<div bitTypography="body2">&copy; {{ year }} Bitwarden Inc.</div>
<div bitTypography="body2">{{ version }}</div>
</ng-container>
</footer>
</main>

View File

@ -1,5 +1,5 @@
import { CommonModule } from "@angular/common";
import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
import { Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
import { RouterModule } from "@angular/router";
import { firstValueFrom } from "rxjs";
@ -19,6 +19,12 @@ import { BitwardenLogo, BitwardenShield } from "../icons";
imports: [IconModule, CommonModule, TypographyModule, SharedModule, RouterModule],
})
export class AnonLayoutComponent implements OnInit, OnChanges {
@HostBinding("class")
get classList() {
// AnonLayout should take up full height of parent container for proper footer placement.
return ["tw-h-full"];
}
@Input() title: string;
@Input() subtitle: string;
@Input() icon: Icon;