Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-20 16:07:45 +01:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
libs/auth/src/angular/anon-layout/anon-layout.component.html
View File

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

8
libs/auth/src/angular/anon-layout/anon-layout.component.ts
View File

@ -1,5 +1,5 @@
import { CommonModule } from "@angular/common"; 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 { RouterModule } from "@angular/router";
import { firstValueFrom } from "rxjs"; import { firstValueFrom } from "rxjs";
@ -19,6 +19,12 @@ import { BitwardenLogo, BitwardenShield } from "../icons";
imports: [IconModule, CommonModule, TypographyModule, SharedModule, RouterModule], imports: [IconModule, CommonModule, TypographyModule, SharedModule, RouterModule],
}) })
export class AnonLayoutComponent implements OnInit, OnChanges { 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() title: string;
@Input() subtitle: string; @Input() subtitle: string;
@Input() icon: Icon; @Input() icon: Icon;