History dashboard not correctly layouted - code correction

Issue-ID: PORTALNG-5

Signed-off-by: Ludmila Schlegelova <Ludmila.Schlegelova@telekom.com>
Change-Id: Ie578726acefa92df5a06d92dac144e1b7f9118a9

7 files changed, 72 insertions, 14 deletions

diff --git a/src/app/modules/dashboard/apps/user-last-action-tile/action-row/action-row.component.html b/src/app/modules/dashboard/apps/user-last-action-tile/action-row/action-row.component.html
index 62cf722..201666c 100644
--- a/src/app/modules/dashboard/apps/user-last-action-tile/action-row/action-row.component.html
+++ b/src/app/modules/dashboard/apps/user-last-action-tile/action-row/action-row.component.html
@@ -18,11 +18,11 @@
 
 
 <ng-container *ngIf="action">
-  <div class="row py-2 border-bottom">
-    <div class="col-3">
+  <div class="row py-2 border-bottom d-flex flex-wrap">
+    <div class="col-lg-3 col-md-2">
       <div class="d-flex justify-content-between">
         <span
-          class="qa_action_created_at"
+          class="qa_action_created_at mr-2"
           container="body"
           [ngbTooltip]="action.actionCreatedAt | date: FULL_DATE_FORMAT"
           >{{
@@ -98,7 +98,7 @@
         </ng-container>
       </div>
     </div>
-    <div class="col-9">
+    <div class="col-lg-9 col-md-7">
       <ng-content></ng-content>
     </div>
   </div>
diff --git a/src/app/modules/dashboard/apps/user-last-action-tile/user-last-action-tile.component.css b/src/app/modules/dashboard/apps/user-last-action-tile/user-last-action-tile.component.css
index 60842fa..2960d84 100644
--- a/src/app/modules/dashboard/apps/user-last-action-tile/user-last-action-tile.component.css
+++ b/src/app/modules/dashboard/apps/user-last-action-tile/user-last-action-tile.component.css
@@ -16,7 +16,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-
 img {
   height: 20px;
   width: 20px;
@@ -25,3 +24,25 @@ img {
 .bg-color-inherit {
   background-color: inherit;
 }
+
+.m-l-24px {
+  margin-left: 24px;
+}
+
+@media (max-width: 570px) {
+  select {
+    font-size: 11px !important;
+  }
+}
+
+@media (max-width: 1225px) {
+  .no-flex-wrap {
+    flex-wrap: nowrap !important;
+  }
+}
+
+@media (max-width: 1200px) {
+  .flex-wrap {
+    flex-wrap: wrap !important;
+  }
+}
diff --git a/src/app/modules/dashboard/apps/user-last-action-tile/user-last-action-tile.component.html b/src/app/modules/dashboard/apps/user-last-action-tile/user-last-action-tile.component.html
index d696728..166b150 100644
--- a/src/app/modules/dashboard/apps/user-last-action-tile/user-last-action-tile.component.html
+++ b/src/app/modules/dashboard/apps/user-last-action-tile/user-last-action-tile.component.html
@@ -18,10 +18,10 @@
 
 <ng-template #template>
   <ng-container *ngIf="actions$ | async as actions">
-    <div class="col-xl-4 col-lg-6 col-sm-12 my-2 qa_USER_LAST_ACTION_TILE" cdkDrag>
-      <div class="shadow card" style="height: 334.867px">
+    <div class="col-xl-5 col-lg-7 col-sm-12 my-2 qa_user_last_action_tile" cdkDrag>
+      <div class="shadow card tile-height">
         <div class="card-header pl-3">
-          <div class="d-flex" *ngIf="actionFilterType$ | async as selectedFilter">
+          <div class="d-flex flex-wrap" *ngIf="actionFilterType$ | async as selectedFilter">
             <div class="d-flex align-items-center">
               <i
                 class="bi bi-arrows-move text-primary draggable text-primary pr-2"
@@ -43,7 +43,7 @@
                 </option>
               </select>
             </div>
-            <div class="d-flex" *ngIf="actionIntervalType$ | async as selectedInterval">
+            <div class="d-flex m-l-24px" *ngIf="actionIntervalType$ | async as selectedInterval">
               <label class="d-none" for="intervalSelect"
                 >{{ 'dashboard.apps.userLastAction.filter.label' | translate
                 }}{{ 'dashboard.apps.userLastAction.filter.interval.' + selectedInterval | translate }}</label
diff --git a/src/app/modules/dashboard/dashboard.component.css b/src/app/modules/dashboard/dashboard.component.css
index bdf57d6..88535a5 100644
--- a/src/app/modules/dashboard/dashboard.component.css
+++ b/src/app/modules/dashboard/dashboard.component.css
@@ -32,3 +32,29 @@ li {
   padding-left: initial;
   margin-top: initial;
 }
+
+
+@media (max-width: 605px) {
+  h2 {
+    font-size: 31px !important;
+  }
+}
+
+@media (max-width: 600px) {
+  h2 {
+    font-size: 28px !important;
+  }
+}
+
+@media (max-width: 586px) {
+  h2 {
+    font-size: 25px !important;
+  }
+}
+
+@media (max-width: 570px) {
+  .p-l-2px {
+    padding-left: 2px !important;
+  }
+}
+
diff --git a/src/app/modules/dashboard/dashboard.component.html b/src/app/modules/dashboard/dashboard.component.html
index 76a8e96..c0e62cc 100644
--- a/src/app/modules/dashboard/dashboard.component.html
+++ b/src/app/modules/dashboard/dashboard.component.html
@@ -23,9 +23,9 @@
   </app-breadcrumb-item>
 </app-breadcrumb>
 <ng-container *ngIf="tiles$ | async as apps">
-  <div class="w-100 d-flex justify-content-between">
+  <div class="w-100 d-flex flex-wrap justify-content-between">
     <h2 class="qa_title">{{ 'layout.menu.items.dashboard' | translate }}</h2>
-    <ul>
+    <ul class="p-l-2px">
       <li
         #settingsDrop="ngbDropdown"
         [ngbTooltip]="'dashboard.tooltips.settings' | translate"
diff --git a/src/assets/css/onap-styles.css b/src/assets/css/onap-styles.css
index 272eded..61959bd 100644
--- a/src/assets/css/onap-styles.css
+++ b/src/assets/css/onap-styles.css
@@ -735,6 +735,7 @@ pre code {
   width: 100%;
   padding-right: 15px;
   padding-left: 15px;
+  min-width: 194px !important;
 }
 
 .col {
@@ -8277,7 +8278,7 @@ button.bg-dark:focus {
 
 .mt-2,
 .my-2 {
-  margin-top: 0.5rem !important;
+  margin-top: 0.375rem !important;
 }
 
 .mr-2,
@@ -8287,7 +8288,7 @@ button.bg-dark:focus {
 
 .mb-2,
 .my-2 {
-  margin-bottom: 0.5rem !important;
+  margin-bottom: 0.375rem !important;
 }
 
 .ml-2,
@@ -8508,7 +8509,7 @@ button.bg-dark:focus {
 
 .pl-5,
 .px-5 {
-  padding-left: 3rem !important;
+  padding-left: 2.25rem !important;
 }
 
 .m-n1 {
diff --git a/src/styles.css b/src/styles.css
index 2528e5d..2cc0bba 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -628,3 +628,13 @@ tree-viewport{
   content: " ";
   background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M15.81,14.99l-6.99-7l6.99-7c0.24-0.24,0.2-0.63-0.04-0.83c-0.24-0.2-0.59-0.2-0.79,0l-6.99,7l-6.99-7 C0.75-0.08,0.36-0.04,0.16,0.2c-0.2,0.24-0.2,0.59,0,0.79l6.99,7l-6.99,7c-0.24,0.24-0.2,0.63,0.04,0.83c0.24,0.2,0.59,0.2,0.79,0 l6.99-7l6.99,7c0.24,0.24,0.59,0.24,0.83,0.04C16.04,15.66,16.08,15.26,15.81,14.99C15.85,15.03,15.81,15.03,15.81,14.99z' fill='%23262626'/%3E%3C/svg%3E");
 }
+
+.tile-height {
+  height: 408.867px;
+}
+
+hr, .breadcrumb {
+  min-width: 164px;
+}
+
+