admin/clients
1
0
Fork 0
mirror of https://github.com/bitwarden/clients.git synced 2026-02-15 21:34:44 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
b4257e1c1cc258b257f1a178eaff6a59482a6069
clients/libs/auth/src/angular/anon-layout/anon-layout.component.html

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

29 lines
976 B
HTML
Raw Normal View History

[PM-3388] AnonLayout Component (#6424) * setup anon-layout component * add story with content * simplify stories and add title input * add responsiveness * adjust border styling * add logo * add logo * mock PlatformUtilsService * more responsivness * add secondary content * add stories and clarifying comments * add more to responsiveness * Update libs/components/tailwind.config.js Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * Update libs/components/tailwind.config.base.js Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * Update libs/auth/src/components/anon-layout.stories.ts Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * refactor: use bit-icon instead of css file, add auth- prefix, adjust tailwind settings * account for longer content * allow for adding an icon above logo * simplify stories by removing unnecessary styling * delete duplicate logo and minify logo and icon * remove componentWrapperDecorator * change subTitle to subtitle * use bitTypography * add accessibility title and use tw class for fill color * add <title> element to SVG * typography update and minor styling updates for stories * match breakpoint for logo and h1 * reduce spacing between sections * move to new folder * add closing tag * make fields protected * use svg directly * refactor icons * revert to allow for additional icons in the future * decouple icon from component --------- Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
2024-03-06 09:32:50 -08:00
<main
[PM-7343] AnonLayoutComponent Implementation Groundwork (#8585) * test implementation * move files * adjust import and sample router comments * add storybook docs to anon-layout * rename to AnonLayoutWrapperComponent * update storybook docs * remove references to CL and replace with 'Auth-owned' * move AnonLayoutWrapperComponent to libs * add pageTitle input * add subTitle input * translate page title/subtitle, and refactor how icon is added * update tailwind.config and component styles * adjust spacing between primary and secondary content * move switch statement to wrapper * move icon to router file * update storybook documentation * fix storybook text color in normal code blocks * remove sample route * move wrapper component back to web * remove sample route * update storybook docs
2024-05-06 18:34:40 -07:00
class="tw-flex tw-min-h-screen tw-w-full tw-mx-auto tw-flex-col tw-gap-9 tw-px-4 tw-pb-4 tw-pt-14 tw-text-main"
[PM-3388] AnonLayout Component (#6424) * setup anon-layout component * add story with content * simplify stories and add title input * add responsiveness * adjust border styling * add logo * add logo * mock PlatformUtilsService * more responsivness * add secondary content * add stories and clarifying comments * add more to responsiveness * Update libs/components/tailwind.config.js Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * Update libs/components/tailwind.config.base.js Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * Update libs/auth/src/components/anon-layout.stories.ts Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * refactor: use bit-icon instead of css file, add auth- prefix, adjust tailwind settings * account for longer content * allow for adding an icon above logo * simplify stories by removing unnecessary styling * delete duplicate logo and minify logo and icon * remove componentWrapperDecorator * change subTitle to subtitle * use bitTypography * add accessibility title and use tw class for fill color * add <title> element to SVG * typography update and minor styling updates for stories * match breakpoint for logo and h1 * reduce spacing between sections * move to new folder * add closing tag * make fields protected * use svg directly * refactor icons * revert to allow for additional icons in the future * decouple icon from component --------- Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
2024-03-06 09:32:50 -08:00
>
<div class="tw-text-center">
<div class="tw-px-8">
<div *ngIf="icon" class="tw-mb-8">
<bit-icon [icon]="icon"></bit-icon>
</div>
<bit-icon [icon]="logo" class="tw-mx-auto tw-block tw-max-w-72 sm:tw-max-w-xs"></bit-icon>
</div>
<h1 *ngIf="title" bitTypography="h3" class="tw-mt-8 sm:tw-text-2xl">
{{ title }}
</h1>
<p *ngIf="subtitle" bitTypography="body1">{{ subtitle }}</p>
</div>
[PM-7343] AnonLayoutComponent Implementation Groundwork (#8585) * test implementation * move files * adjust import and sample router comments * add storybook docs to anon-layout * rename to AnonLayoutWrapperComponent * update storybook docs * remove references to CL and replace with 'Auth-owned' * move AnonLayoutWrapperComponent to libs * add pageTitle input * add subTitle input * translate page title/subtitle, and refactor how icon is added * update tailwind.config and component styles * adjust spacing between primary and secondary content * move switch statement to wrapper * move icon to router file * update storybook documentation * fix storybook text color in normal code blocks * remove sample route * move wrapper component back to web * remove sample route * update storybook docs
2024-05-06 18:34:40 -07:00
<div class="tw-mb-auto tw-mx-auto tw-grid">
<div
class="tw-rounded-xl tw-mb-9 tw-mx-auto sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8"
>
[PM-3388] AnonLayout Component (#6424) * setup anon-layout component * add story with content * simplify stories and add title input * add responsiveness * adjust border styling * add logo * add logo * mock PlatformUtilsService * more responsivness * add secondary content * add stories and clarifying comments * add more to responsiveness * Update libs/components/tailwind.config.js Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * Update libs/components/tailwind.config.base.js Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * Update libs/auth/src/components/anon-layout.stories.ts Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com> * refactor: use bit-icon instead of css file, add auth- prefix, adjust tailwind settings * account for longer content * allow for adding an icon above logo * simplify stories by removing unnecessary styling * delete duplicate logo and minify logo and icon * remove componentWrapperDecorator * change subTitle to subtitle * use bitTypography * add accessibility title and use tw class for fill color * add <title> element to SVG * typography update and minor styling updates for stories * match breakpoint for logo and h1 * reduce spacing between sections * move to new folder * add closing tag * make fields protected * use svg directly * refactor icons * revert to allow for additional icons in the future * decouple icon from component --------- Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
2024-03-06 09:32:50 -08:00
<ng-content></ng-content>
</div>
<ng-content select="[slot=secondary]"></ng-content>
</div>
<footer class="tw-text-center">
<div>&copy; {{ year }} Bitwarden Inc.</div>
<div>{{ version }}</div>
</footer>
</main>
Reference in New Issue Copy Permalink