mgr/dashboard: Improving notification sidebar card spacing

There were some unnecessary spacings in the notification sidebar cards. This commit is a cleanup for taking care of that spaces.

Fixes: https://tracker.ceph.com/issues/47262
Signed-off-by: Nizamudeen A <nia@redhat.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
index 6fdb46bd776f4f727687de7ff3ae177fc85338f6..d22069c9841856078bd659640a5de9c6e821ad27 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.html
@@ -1,9 +1,9 @@
 <ng-template #tasksTpl>
   <!-- Executing -->
   <div *ngFor="let executingTask of executingTasks; trackBy:trackByFn">
-    <div class="card tc_task border-0 mb-3">
+    <div class="card tc_task border-0">
       <div class="row no-gutters">
-        <div class="col-md-3 text-center">
+        <div class="col-md-2 text-center">
           <span [ngClass]="[icons.stack, icons.large2x]"
                 class="text-info">
             <i [ngClass]="[icons.stack2x, icons.circle]"></i>
@@ -11,7 +11,7 @@
           </span>
         </div>
         <div class="col-md-9">
-          <div class="card-body p-0">
+          <div class="card-body p-1">
             <h6 class="card-title bold">{{ executingTask.description }}</h6>
 
             <div class="mb-1">
@@ -54,16 +54,16 @@
     <hr>
 
     <div *ngFor="let notification of notifications; let i = index">
-      <div class="card tc_notification border-0 mb-3">
+      <div class="card tc_notification border-0">
         <div class="row no-gutters">
-          <div class="col-md-3 text-center">
-            <span [ngClass]="[icons.stack, icons.large2x, notification.textClass]">
+          <div class="col-md-2 text-center">
+            <span [ngClass]="[icons.stack, icons.large2x,  notification.textClass]">
               <i [ngClass]="[icons.circle, icons.stack2x]"></i>
               <i [ngClass]="[icons.stack1x, icons.inverse, notification.iconClass]"></i>
             </span>
           </div>
-          <div class="col-md-9">
-            <div class="card-body p-0">
+          <div class="col-md-10">
+            <div class="card-body p-1">
               <button class="btn btn-link float-right mt-0 pt-0"
                       title="Remove notification"
                       i18n-title
@@ -114,7 +114,9 @@
             tabindex="-1"
             type="button"
             (click)="closeSidebar()">
-      <span>×</span>
+      <span>
+        <i [ngClass]="icons.close"></i>
+      </span>
     </button>
   </div>
 

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
index fb7f8ef3a34d31f49c86c27129a4ed5fb95c7e53..52bb484f2a5e2738082de8fd3c7c8dc2ab01af29 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/notifications-sidebar/notifications-sidebar.component.scss
@@ -22,6 +22,10 @@
   height: 100%;
 }
 
+.card-body {
+  padding-left: 5px;
+}
+
 ngx-simplebar {
   height: calc(100% - 42.2px);
 }
@@ -45,3 +49,7 @@ table {
   margin-left: 0;
   margin-right: 0;
 }
+
+.fa-times {
+  margin-right: 10px;
+}

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
index 8fc034b0d0ff026cc259b5c71457ebcb6a266680..3e5d0a213d4fba33d8a09430f8f6e354ac1f4b55 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/enum/icons.enum.ts
@@ -61,6 +61,7 @@ export enum Icons {
   clearFilters = 'fa fa-window-close', // Clear filters, solid x
   download = 'fa fa-download', // Download
   upload = 'fa fa-upload', // Upload
+  close = 'fa fa-times', // Close
 
   /* Icons for special effect */
   large = 'fa fa-lg', // icon becomes 33% larger