Fixed column layout on multiple components for the user settings (#1602)

#Fixed
- Fixed: Fixed an issue where the controls would extend outside of the container on the user account preferences page.
This commit is contained in:
Robbie Davis 2022-10-22 10:47:40 -04:00 committed by GitHub
parent 5f0df03e1d
commit d2e86eaa24
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 22 additions and 16 deletions

View File

@ -1,20 +1,22 @@
<div class="card mt-2">
<div class="card-body">
<div class="card-title">
<div class="row mb-2">
<div class="col-11"><h4 id="age-restriction">Age Restriction</h4></div>
<div class="col-1">
<div class="container-fluid row mb-2">
<div class="col-10 col-sm-11"><h4 id="age-restriction">Age Restriction</h4></div>
<div class="col-1 text-end">
<button class="btn btn-primary btn-sm" (click)="toggleViewMode()" *ngIf="(hasChangeAgeRestrictionAbility | async)">{{isViewMode ? 'Edit' : 'Cancel'}}</button>
</div>
</div>
</div>
<ng-container *ngIf="isViewMode">
<span>{{user?.ageRestriction?.ageRating| ageRating | async}}
<div class="container-fluid row">
<span class="col-12">{{user?.ageRestriction?.ageRating| ageRating | async}}
<ng-container *ngIf="user?.ageRestriction?.ageRating !== AgeRating.NotApplicable && user?.ageRestriction?.includeUnknowns">
<span class="ms-1 me-1">+</span> Unknowns
</ng-container>
</span>
</div>
</ng-container>
<div #collapse="ngbCollapse" [(ngbCollapse)]="isViewMode">

View File

@ -1,8 +1,8 @@
<div class="card mt-2">
<div class="card-body">
<div class="card-title">
<div class="row mb-2">
<div class="col-11">
<div class="container-fluid row mb-2">
<div class="col-10 col-sm-11">
<h4 id="email-card">Email
<ng-container *ngIf="!emailConfirmed">
<i class="fa-solid fa-circle ms-1 confirm-icon" aria-hidden="true" ngbTooltip="This email is not confirmed"></i>
@ -10,14 +10,16 @@
</ng-container>
</h4>
</div>
<div class="col-1">
<div class="col-1 text-end">
<button class="btn btn-primary btn-sm" (click)="toggleViewMode()">{{isViewMode ? 'Edit' : 'Cancel'}}</button>
</div>
</div>
</div>
<ng-container *ngIf="isViewMode">
<span>{{user?.email}}</span>
<div class="container-fluid row">
<span class="col-12">{{user?.email}}</span>
</div>
</ng-container>
<div #collapse="ngbCollapse" [(ngbCollapse)]="isViewMode">

View File

@ -1,16 +1,18 @@
<div class="card mt-2">
<div class="card-body">
<div class="card-title">
<div class="row mb-2">
<div class="col-11"><h4>Password</h4></div>
<div class="col-1">
<div class="container-fluid row mb-2">
<div class="col-10 col-sm-11"><h4>Password</h4></div>
<div class="col-1 text-end">
<button class="btn btn-primary btn-sm" (click)="toggleViewMode()" *ngIf="(hasChangePasswordAbility | async)">{{isViewMode ? 'Edit' : 'Cancel'}}</button>
</div>
</div>
</div>
<ng-container *ngIf="isViewMode">
<span>***************</span>
<div class="container-fluid row">
<span class="col-12">***************</span>
</div>
</ng-container>
<div #collapse="ngbCollapse" [(ngbCollapse)]="isViewMode">