Made hole app responsive #1.1.0

kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html

@@ -3,7 +3,7 @@
 </h1>
 <div class="content-wrapper">
   <div class="content">
-    <p-table #dt [value]="users" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
+    <p-table #dt [value]="users" responsiveLayout="stack" [breakpoint]="'720px'" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
              [rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
              [lazy]="true" (onLazyLoad)="nextPage($event)">
 

kdb-web/src/app/modules/shared/components/config-list/config-list.component.html

@@ -4,7 +4,7 @@
       {{translationKey | translate}}:
     </div>
     <div class="content-data-value-row">
-      <p-table #dt [value]="internal_data" dataKey="id" editMode="row">
+      <p-table #dt [value]="internal_data" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row">
         <ng-template pTemplate="caption">
           <div class="table-caption">
             <div class="table-caption-btn-wrapper btn-wrapper">
@@ -15,7 +15,7 @@
           </div>
         </ng-template>
         <ng-template pTemplate="body" let-value let-editing="editing" let-ri="rowIndex">
-          <tr [pEditableRow]="value" style="display: flex;">
+          <tr class="content-table-row" [pEditableRow]="value" style="display: flex;">
             <td style="flex: 1;">
               <p-cellEditor>
                 <ng-template pTemplate="input">

kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.html

@@ -4,7 +4,7 @@
       {{'common.feature_flags' | translate}}:
     </div>
     <div class="content-data-value-row">
-      <p-table #dt [value]="internal_data" dataKey="id" editMode="row">
+      <p-table #dt [value]="internal_data" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row">
         <ng-template pTemplate="caption">
           <div class="table-caption">
             <div class="table-caption-btn-wrapper btn-wrapper">

kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html

@@ -3,7 +3,7 @@
 </h1>
 <div class="content-wrapper">
   <div class="content">
-    <p-table #dt [value]="achievements" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
+    <p-table #dt [value]="achievements" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
              [rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
              [lazy]="true" (onLazyLoad)="nextPage($event)">
 

kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html

@@ -3,7 +3,7 @@
 </h1>
 <div class="content-wrapper">
   <div class="content">
-    <p-table #dt [value]="rules" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
+    <p-table #dt [value]="rules" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
              [rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
              [lazy]="true" (onLazyLoad)="nextPage($event)">
 

kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html

@@ -3,7 +3,7 @@
 </h1>
 <div class="content-wrapper">
   <div class="content">
-    <p-table #dt [value]="auto_roles" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
+    <p-table #dt [value]="auto_roles" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
              [rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
              [lazy]="true" (onLazyLoad)="nextPage($event)">
 

kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html

@@ -3,7 +3,7 @@
 </h1>
 <div class="content-wrapper">
   <div class="content">
-    <p-table #dt [value]="levels" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
+    <p-table #dt [value]="levels" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
              [rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
              [lazy]="true" (onLazyLoad)="nextPage($event)">
 

kdb-web/src/app/modules/view/server/members/members.component.html

@@ -3,7 +3,7 @@
 </h1>
 <div class="content-wrapper">
   <div class="content">
-    <p-table #dt [value]="members" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
+    <p-table #dt [value]="members" responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row" [rowHover]="true" [rows]="10"
              [rowsPerPageOptions]="[10,25,50]" [paginator]="true" [loading]="loading" [totalRecords]="totalRecords"
              [lazy]="true" (onLazyLoad)="nextPage($event)">
 

kdb-web/src/styles.scss

@@ -162,7 +162,6 @@ header {
             flex-direction: row;
             flex: 1;
             margin: 5px 0;
-          }
 
             .content-column {
               display: flex;
@@ -200,6 +199,7 @@ header {
             .content-divider {
               margin: 5px 0;
             }
+          }
 
           p-panel {
             margin: 5px 0;
@@ -212,7 +212,7 @@ header {
           }
 
           .content-input-field {
-            width: 50% !important;
+            width: 75% !important;
             margin: 0 !important;
           }
 
@@ -258,6 +258,7 @@ header {
               flex: 1;
               flex-direction: row;
               gap: 25px;
+              align-items: center;
 
               .table-caption-text {
                 display: flex;
@@ -329,6 +330,7 @@ header {
                 .logo {
                   display: flex;
                   align-items: center;
+                  justify-content: center;
 
                   img {
                     width: 4rem;
@@ -509,7 +511,7 @@ footer {
     width: 50%;
 
     display: flex;
-    align-items: end;
+    align-items: flex-end;
     text-align: right;
     justify-content: right;
     gap: 10px;
@@ -652,5 +654,99 @@ p-inputNumber {
       }
     }
   }
+  .app {
+    .component-wrapper {
+      .component {
+        .content-wrapper {
+          .content {
+            .server-list-wrapper {
+              .server-list {
+                .server {
+                  flex-direction: column;
+                }
+              }
+            }
 
+            .table-caption {
+              flex-direction: column;
+
+              .table-caption-btn-wrapper {
+                .p-button {
+                  padding: 0.75rem 0 !important;
+                }
+              }
+
+              .table-caption-table-info,
+              .table-caption-btn-wrapper {
+                flex-direction: column;
+                align-items: baseline !important;
+
+                .p-multiselect-chip .p-multiselect-label {
+                  flex-direction: column !important;
+                }
+              }
+            }
+
+
+            .content-row {
+              .content-column {
+                flex-direction: column;
+                word-break: break-word;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .p-datatable-wrapper {
+    border-top: 1px solid white;
+  }
+
+  .hidden-column {
+    display: none !important;
+  }
+
+  app-multi-select-columns {
+    width: 100%;
+  }
+
+  app-config-list {
+    .content-row {
+      .content-column {
+        flex-direction: column;
+
+        .content-data-name {
+        }
+
+        .content-data-value-row {
+          .content-table-row {
+            flex-direction: column;
+          }
+        }
+      }
+    }
+  }
+
+  .p-multiselect {
+    width: 100% !important;
+  }
+
+  .p-paginator {
+    flex-direction: column !important;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .p-panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    .content-row {
+      flex-direction: column !important;
+      gap: 5px;
+    }
+  }
 }

kdb-web/src/styles/themes/default-dark-theme.scss

@@ -411,9 +411,7 @@
         }
       }
 
-      .table-caption-btn-wrapper {
+
-        height: 30px !important;
-      }
     }
 
     .table-edit-input {

kdb-web/src/styles/themes/default-light-theme.scss

@@ -411,9 +411,7 @@
         }
       }
 
-      .table-caption-btn-wrapper {
+
-        height: 30px !important;
-      }
     }
 
     .table-edit-input {

kdb-web/src/styles/themes/sh-edraft-dark-theme.scss

@@ -416,10 +416,6 @@
           }
         }
       }
-
-      .table-caption-btn-wrapper {
-        height: 30px !important;
-      }
     }
 
     .table-edit-input {

kdb-web/src/styles/themes/sh-edraft-light-theme.scss

@@ -411,9 +411,7 @@
         }
       }
 
-      .table-caption-btn-wrapper {
+
-        height: 30px !important;
-      }
     }
 
     .table-edit-input {