style: more bootstrap 5 updates

bluehalo · May 28, 2024 · 5a77ae1 · 5a77ae1
1 parent 9328351
commit 5a77ae1
Show file tree

Hide file tree

Showing 18 changed files with 101 additions and 136 deletions.
diff --git a/src/app/common/flyout/flyout.component.html b/src/app/common/flyout/flyout.component.html
@@ -1,7 +1,14 @@
-<section class="flyout flyout-{{ placement }} d-flex" [ngClass]="{ 'flyout-open': isOpen }">
-	<button class="btn btn-primary flyout-btn" data-inline="true" (click)="toggle()">
+<section
+	class="flyout flyout-{{ placement }} d-flex text-nowrap"
+	[ngClass]="{ 'flyout-open': isOpen }"
+>
+	<button
+		class="btn btn-primary flyout-btn d-flex align-items-center"
+		data-inline="true"
+		(click)="toggle()"
+	>
 		{{ label }}
-		<span class="fa-solid fa-lg fa-angle-down" data-inline="true"></span>
+		<span class="fa-solid fa-lg fa-angle-down ms-2" data-inline="true"></span>
 	</button>
 
 	<div class="flyout-content" #flyoutContentContainer>

diff --git a/src/app/common/flyout/flyout.component.scss b/src/app/common/flyout/flyout.component.scss
@@ -1,7 +1,7 @@
 @import '../../../styles/shared';
 @import '../../../styles/bootstrap/shared';
 
-$flyout-border-top: 10px !default;
+$flyout-border-top: 8px !default;
 $flyout-box-shadow: 0 0.25rem 0.5rem rgba(var(--bs-body-bg-rgb), 0.2) !default;
 
 $flyout-right-top: 24px !default;
@@ -43,6 +43,8 @@ $flyout-bottom-bottom: 20px * 2 !default;
 }
 
 .flyout {
+	background: var(--bs-body-bg);
+
 	&.flyout-left {
 		flex-direction: row-reverse;
 	}
@@ -82,7 +84,6 @@ $flyout-bottom-bottom: 20px * 2 !default;
 	transform-origin: 0 0;
 
 	border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
-	box-shadow: none;
 
 	.flyout-left & {
 		transform: rotate(-90deg);
@@ -96,13 +97,6 @@ $flyout-bottom-bottom: 20px * 2 !default;
 	.flyout-bottom & {
 		transform: translateY(-100%);
 	}
-
-	&:not(:disabled):not(.disabled):active,
-	&:not(:disabled):not(.disabled).active,
-	&.focus,
-	&:focus {
-		box-shadow: none;
-	}
 }
 
 .flyout-content {

diff --git a/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html b/src/app/core/admin/cache-entries/list-cache-entries/list-cache-entries.component.html
@@ -1,11 +1,7 @@
 <section class="page-header mb-3">
-	<div class="row g-0">
-		<div class="media col">
-			<div class="media-body">
-				<h1 skipTo>Cache Entries</h1>
-				View and manage user cache entries.
-			</div>
-		</div>
+	<div>
+		<h1 skipTo>Cache Entries</h1>
+		View and manage user cache entries.
 	</div>
 	<system-alert></system-alert>
 </section>

diff --git a/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html b/src/app/core/admin/end-user-agreement/list-euas/admin-list-euas.component.html
@@ -1,11 +1,7 @@
 <section class="page-header mb-3">
-	<div class="row g-0">
-		<div class="media col">
-			<div class="media-body">
-				<h1 skipTo>EUAs</h1>
-				View and manage end user agreements.
-			</div>
-		</div>
+	<div>
+		<h1 skipTo>EUAs</h1>
+		View and manage end user agreements.
 	</div>
 	<system-alert></system-alert>
 </section>

diff --git a/src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.html b/src/app/core/admin/end-user-agreement/manage-eua/manage-eua.component.html
@@ -10,15 +10,13 @@
 		#form="ngForm"
 		(ngSubmit)="submitEua()"
 	>
-		<div class="media col mb-4">
-			<div class="media-body">
-				<h2 skipTo>{{ mode | titlecase }} EUA</h2>
-				@if (mode === 'create') {
-					Provide the required information to create a new EUA
-				} @else if (mode === 'edit') {
-					Make changes to the EUA's information
-				}
-			</div>
+		<div class="mb-4">
+			<h2 skipTo>{{ mode | titlecase }} EUA</h2>
+			@if (mode === 'create') {
+				Provide the required information to create a new EUA
+			} @else if (mode === 'edit') {
+				Make changes to the EUA's information
+			}
 		</div>
 
 		<!-- Basic Information -->

diff --git a/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html b/src/app/core/admin/feedback/list-feedback/admin-list-feedback.component.html
@@ -1,11 +1,7 @@
 <section class="page-header mb-3">
-	<div class="row g-0">
-		<div class="media col">
-			<div class="media-body">
-				<h1 skipTo>System Feedback</h1>
-				View and manage system feedback.
-			</div>
-		</div>
+	<div>
+		<h1 skipTo>System Feedback</h1>
+		View and manage system feedback.
 	</div>
 	<system-alert></system-alert>
 </section>

diff --git a/src/app/core/admin/messages/list-messages/list-messages.component.html b/src/app/core/admin/messages/list-messages/list-messages.component.html
@@ -1,11 +1,7 @@
 <section class="page-header mb-3">
-	<div class="row g-0">
-		<div class="media col">
-			<div class="media-body">
-				<h1 skipTo>Messages</h1>
-				View and manage messages.
-			</div>
-		</div>
+	<div>
+		<h1 skipTo>Messages</h1>
+		View and manage messages.
 	</div>
 	<system-alert></system-alert>
 </section>

diff --git a/src/app/core/admin/messages/manage-message/manage-message.component.html b/src/app/core/admin/messages/manage-message/manage-message.component.html
@@ -4,16 +4,14 @@
 
 	@if (message) {
 		<form role="form" autocomplete="off" novalidate #form="ngForm" (ngSubmit)="submitMessage()">
-			<div class="media col mb-4">
-				<div class="media-body">
-					<h2 skipTo>{{ mode | titlecase }} Message</h2>
-					@if (mode === 'create') {
-						Provide the required information to create a new message
-					}
-					@if (mode === 'edit') {
-						Make changes to the message's information
-					}
-				</div>
+			<div class="mb-4">
+				<h2 skipTo>{{ mode | titlecase }} Message</h2>
+				@if (mode === 'create') {
+					Provide the required information to create a new message
+				}
+				@if (mode === 'edit') {
+					Make changes to the message's information
+				}
 			</div>
 
 			<!-- Type -->

diff --git a/src/app/core/admin/user/list-users/admin-list-users.component.html b/src/app/core/admin/user/list-users/admin-list-users.component.html
@@ -1,11 +1,7 @@
 <section class="page-header mb-3">
-	<div class="row g-0">
-		<div class="media col">
-			<div class="media-body">
-				<h1 skipTo>Users</h1>
-				View and manage user accounts.
-			</div>
-		</div>
+	<div>
+		<h1 skipTo>Users</h1>
+		View and manage user accounts.
 	</div>
 	<system-alert></system-alert>
 </section>

diff --git a/src/app/core/admin/user/manage-user/manage-user.component.html b/src/app/core/admin/user/manage-user/manage-user.component.html
@@ -11,16 +11,14 @@
 			#form="ngForm"
 			(ngSubmit)="submitUser()"
 		>
-			<div class="media col mb-4">
-				<div class="media-body">
-					<h2 skipTo>{{ mode | titlecase }} User</h2>
-					@if (mode === 'create') {
-						Provide the required information to create a new User
-					}
-					@if (mode === 'edit') {
-						Make changes to the User's information
-					}
-				</div>
+			<div class="mb-4">
+				<h2 skipTo>{{ mode | titlecase }} User</h2>
+				@if (mode === 'create') {
+					Provide the required information to create a new User
+				}
+				@if (mode === 'edit') {
+					Make changes to the User's information
+				}
 			</div>
 
 			<!-- Name -->
@@ -77,12 +75,10 @@ <h2 skipTo>{{ mode | titlecase }} User</h2>
 			</div>
 			<!-- Local Login Information -->
 			@if (!proxyPki()) {
-				<div class="media col py-3">
-					<div class="media-body">
-						<h3>Password</h3>
-						At least 6 characters.
-						<span>Leave blank if you do not want to change the password.</span>
-					</div>
+				<div class="py-3">
+					<h3>Password</h3>
+					At least 6 characters.
+					<span>Leave blank if you do not want to change the password.</span>
 				</div>
 
 				<div class="mb-3">

diff --git a/src/app/core/audit/list-audit-entries/list-audit-entries.component.html b/src/app/core/audit/list-audit-entries/list-audit-entries.component.html
@@ -1,11 +1,7 @@
 <section class="page-header mb-3">
-	<div class="row g-0">
-		<div class="media col">
-			<div class="media-body">
-				<h1 skipTo>Audit Logs</h1>
-				Browse and search audit logs.
-			</div>
-		</div>
+	<div>
+		<h1 skipTo>Audit Logs</h1>
+		Browse and search audit logs.
 	</div>
 	<system-alert></system-alert>
 </section>

diff --git a/src/app/core/feedback/feedback-flyout/feedback-flyout.component.html b/src/app/core/feedback/feedback-flyout/feedback-flyout.component.html
@@ -153,7 +153,10 @@ <h3 class="pt-2">What happened?</h3>
 							</ng-select>
 						</div>
 					}
-					<div class="mb-3" [class.mb-0]="feedback.type === 'bug report'">
+					<div
+						[class.mb-0]="feedback.type === 'bug report'"
+						[class.mb-3]="feedback.type !== 'bug report'"
+					>
 						<textarea
 							class="form-control"
 							name="text"
@@ -181,27 +184,29 @@ <h3 class="pt-2">What happened?</h3>
 				</button>
 			</div>
 		} @else if (status() === 'submitting') {
-			<div class="media p-5">
-				<span class="fa-solid fa-spinner fa-pulse fa-3x fa-fw me-3"></span>
-				<div class="media-body">
+			<div class="d-flex p-5">
+				<span class="fa-solid fa-spinner fa-pulse fa-3x fa-fw me-3 flex-shrink-0"></span>
+				<div class="flex-grow-1">
 					<h1 class="mt-0">Submitting</h1>
 				</div>
 			</div>
 		} @else if (status() === 'success') {
-			<div class="media p-5">
-				<span class="fa-solid fa-check-circle text-highlight fa-3x fa-fw me-3"></span>
-				<div class="media-body">
+			<div class="d-flex p-5">
+				<span
+					class="fa-solid fa-check-circle text-highlight fa-3x fa-fw me-3 flex-shrink-0"
+				></span>
+				<div class="flex-grow-1">
 					<h1 class="mt-0">Thanks!</h1>
 					We got your feedback.
 				</div>
 			</div>
 		} @else if (status() === 'failure') {
 			<div class="p-5">
-				<div class="media">
+				<div class="d-flex">
 					<span
-						class="fa-solid fa-exclamation-triangle text-danger fa-3x fa-fw me-3"
+						class="fa-solid fa-exclamation-triangle text-danger fa-3x fa-fw me-3 flex-shrink-0"
 					></span>
-					<div class="media-body">
+					<div class="flex-grow-1">
 						<h1 class="mt-0">Unable To send feedback</h1>
 						Something went wrong and we didn't get your feedback.
 					</div>

diff --git a/src/app/core/feedback/feedback-flyout/feedback-flyout.component.scss b/src/app/core/feedback/feedback-flyout/feedback-flyout.component.scss
@@ -1,22 +1,16 @@
 @import '../../../../styles/shared';
-
-:host {
-	& ::ng-deep .flyout-btn {
-		width: 118px;
-	}
-}
+@import '../../../../styles/bootstrap/shared';
 
 .feedback-form {
 	width: 550px;
 
 	form {
-		height: 100%;
 		overflow: auto;
-		padding: 2rem;
+		padding: $spacer * 2;
 	}
 }
 
 .feedback-ready {
-	background: var(--bs-body-bg) url('/assets/images/feedback-bg.png') no-repeat right 1rem;
+	background: url('/assets/images/feedback-bg.png') no-repeat right 1rem;
 	background-size: 219px 129px;
 }
diff --git a/src/app/core/teams/create-team/create-team.component.html b/src/app/core/teams/create-team/create-team.component.html
@@ -1,13 +1,11 @@
-<section class="p-3">
+<section>
 	<!-- Alert Notifications -->
 	<system-alert></system-alert>
 
 	<form role="form" autocomplete="off" novalidate #form="ngForm" (ngSubmit)="save()">
-		<div class="media col mb-4">
-			<div class="media-body">
-				<h2 skipTo>Create Team</h2>
-				Provide some basic metadata to create a new team
-			</div>
+		<div>
+			<h2 skipTo>Create Team</h2>
+			Provide some basic metadata to create a new team
 		</div>
 
 		<!-- Required Indicator -->

diff --git a/src/app/core/teams/list-teams/list-teams.component.html b/src/app/core/teams/list-teams/list-teams.component.html
@@ -1,12 +1,8 @@
 @if (!embedded) {
 	<section class="page-header mb-3">
-		<div class="row g-0">
-			<div class="media col">
-				<div class="media-body">
-					<h1 skipTo>Teams</h1>
-					View and manage team membership and roles.
-				</div>
-			</div>
+		<div>
+			<h1 skipTo>Teams</h1>
+			View and manage team membership and roles.
 		</div>
 		<system-alert></system-alert>
 	</section>