From fa71759a2066ed2617ceadc69f17ff7f58f9911d Mon Sep 17 00:00:00 2001
From: Sven Heidemann <sven.heidemann@sh-edraft.de>
Date: Thu, 17 Aug 2023 22:35:10 +0200
Subject: [PATCH 1/2] Made dashboard responsive #1.1.0

---
 kdb-web/package.json                          |  2 +-
 .../components/footer/footer.component.html   |  4 +-
 kdb-web/src/assets/version.json               |  2 +-
 kdb-web/src/styles.scss                       | 47 ++++++++++++++-----
 4 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/kdb-web/package.json b/kdb-web/package.json
index 32db2791..fc35367e 100644
--- a/kdb-web/package.json
+++ b/kdb-web/package.json
@@ -1,6 +1,6 @@
 {
     "name": "kdb-web",
-    "version": "1.1.0.rc4",
+    "version": "1.1.0",
     "scripts": {
         "ng": "ng",
         "update-version": "ts-node-esm update-version.ts",
diff --git a/kdb-web/src/app/components/footer/footer.component.html b/kdb-web/src/app/components/footer/footer.component.html
index 2b104231..dda279bb 100644
--- a/kdb-web/src/app/components/footer/footer.component.html
+++ b/kdb-web/src/app/components/footer/footer.component.html
@@ -8,7 +8,7 @@
                 {{frontendVersion.getVersionString()}}
             </span>
     </div>
-    <span class="version-divider">
+    <span class="divider">
             |
         </span>
     <div class="backend-version">
@@ -22,7 +22,7 @@
   </div>
   <div class="right">
     <button pButton label="{{'footer.privacy' | translate}}" class="btn text-btn" (click)="navigateToPrivacy()"></button>
-    <span> | </span>
+    <span class="divider"> | </span>
     <button pButton label="{{'footer.imprint' | translate}}" class="btn text-btn" (click)="navigateToImprint()"></button>
   </div>
 </footer>
diff --git a/kdb-web/src/assets/version.json b/kdb-web/src/assets/version.json
index 2cedf04e..71ae202d 100644
--- a/kdb-web/src/assets/version.json
+++ b/kdb-web/src/assets/version.json
@@ -2,6 +2,6 @@
     "WebVersion": {
         "Major": "1",
         "Minor": "1",
-        "Micro": "0.rc4"
+        "Micro": "0"
     }
 }
\ No newline at end of file
diff --git a/kdb-web/src/styles.scss b/kdb-web/src/styles.scss
index 2a75ada2..09974d6c 100644
--- a/kdb-web/src/styles.scss
+++ b/kdb-web/src/styles.scss
@@ -79,7 +79,14 @@ header {
   .logo {
     display: flex;
     align-items: center;
-    justify-content: center;
+
+    overflow: hidden;
+
+    .app-name {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
   }
 
   .header-menu {
@@ -119,6 +126,7 @@ header {
 
   .component-wrapper {
     width: 100%;
+    overflow: hidden;
 
     .component {
       width: 100%;
@@ -316,8 +324,11 @@ header {
                 gap: 15px;
 
                 padding: 20px;
+                overflow: hidden;
 
                 .logo {
+                  display: flex;
+                  align-items: center;
 
                   img {
                     width: 4rem;
@@ -337,6 +348,7 @@ header {
 
                     justify-content: center;
                     align-items: center;
+                    word-break: break-word;
                   }
 
                   .data {
@@ -480,7 +492,7 @@ header {
 
 footer {
   width: 100%;
-  height: $footerHeight;
+  min-height: $footerHeight;
   padding: 0 10px;
 
   display: flex;
@@ -489,23 +501,18 @@ footer {
 
   .left {
     width: 50%;
-
     display: flex;
-
-    // .frontend-version {
-    // }
-
-    .version-divider {
-      margin: 0 5px;
-    }
-
-    // .backend-version {
-    // }
+    gap: 10px;
   }
 
   .right {
     width: 50%;
+
+    display: flex;
+    align-items: end;
     text-align: right;
+    justify-content: right;
+    gap: 10px;
 
     .p-button-label {
       font-weight: unset !important;
@@ -633,3 +640,17 @@ p-inputNumber {
   padding: 0 !important;
   border: none !important;
 }
+
+@media (max-width: 720px) {
+  footer {
+    .left,
+    .right {
+      flex-direction: column;
+
+      .divider {
+        display: none;
+      }
+    }
+  }
+
+}

From b49512e28d0a13d229f2c4de163b6cdcb911d7ea Mon Sep 17 00:00:00 2001
From: Sven Heidemann <sven.heidemann@sh-edraft.de>
Date: Thu, 17 Aug 2023 23:36:44 +0200
Subject: [PATCH 2/2] Made hole app responsive #1.1.0

---
 .../auth-user/auth-user.component.html        |   2 +-
 .../config-list/config-list.component.html    |   4 +-
 .../feature-flag-list.component.html          |   2 +-
 .../achievement/achievement.component.html    |   2 +-
 .../auto-roles-rules.component.html           |   2 +-
 .../auto-roles/auto-roles.component.html      |   2 +-
 .../components/levels/levels.component.html   |   2 +-
 .../server/members/members.component.html     |   2 +-
 kdb-web/src/styles.scss                       | 164 ++++++++++++++----
 .../src/styles/themes/default-dark-theme.scss |   4 +-
 .../styles/themes/default-light-theme.scss    |   4 +-
 .../styles/themes/sh-edraft-dark-theme.scss   |   4 -
 .../styles/themes/sh-edraft-light-theme.scss  |   4 +-
 13 files changed, 142 insertions(+), 56 deletions(-)

diff --git a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html b/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
index 2f9db7c1..d5dd5d8e 100644
--- a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
+++ b/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)">
 
diff --git a/kdb-web/src/app/modules/shared/components/config-list/config-list.component.html b/kdb-web/src/app/modules/shared/components/config-list/config-list.component.html
index 8b695e47..9eedf0f9 100644
--- a/kdb-web/src/app/modules/shared/components/config-list/config-list.component.html
+++ b/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">
diff --git a/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.html b/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.html
index cc382543..88133f0b 100644
--- a/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.html
+++ b/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">
diff --git a/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html b/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
index 6f505f81..3e78f93d 100644
--- a/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
+++ b/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)">
 
diff --git a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
index 6128b503..49c86105 100644
--- a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
+++ b/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)">
 
diff --git a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
index aa3440fe..07133332 100644
--- a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
+++ b/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)">
 
diff --git a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html b/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
index 6e35edb5..538e2bb0 100644
--- a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
+++ b/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)">
 
diff --git a/kdb-web/src/app/modules/view/server/members/members.component.html b/kdb-web/src/app/modules/view/server/members/members.component.html
index f1d3db30..c669ba3f 100644
--- a/kdb-web/src/app/modules/view/server/members/members.component.html
+++ b/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)">
 
diff --git a/kdb-web/src/styles.scss b/kdb-web/src/styles.scss
index 09974d6c..874df302 100644
--- a/kdb-web/src/styles.scss
+++ b/kdb-web/src/styles.scss
@@ -162,43 +162,43 @@ header {
             flex-direction: row;
             flex: 1;
             margin: 5px 0;
-          }
 
-          .content-column {
-            display: flex;
-            flex: 1;
-          }
-
-          .content-data-name {
-            display: flex;
-            flex: 1;
-            align-items: center;
-
-            font-size: 18px;
-          }
-
-          .content-data-value {
-            display: flex;
-            flex: 1;
-            align-items: center;
-
-            font-size: 18px;
-
-            input {
-              width: 100% !important;
+            .content-column {
+              display: flex;
+              flex: 1;
             }
-          }
 
-          .content-data-value-row {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
+            .content-data-name {
+              display: flex;
+              flex: 1;
+              align-items: center;
 
-            font-size: 18px;
-          }
+              font-size: 18px;
+            }
 
-          .content-divider {
-            margin: 5px 0;
+            .content-data-value {
+              display: flex;
+              flex: 1;
+              align-items: center;
+
+              font-size: 18px;
+
+              input {
+                width: 100% !important;
+              }
+            }
+
+            .content-data-value-row {
+              display: flex;
+              flex: 1;
+              flex-direction: column;
+
+              font-size: 18px;
+            }
+
+            .content-divider {
+              margin: 5px 0;
+            }
           }
 
           p-panel {
@@ -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;
+    }
+  }
 }
diff --git a/kdb-web/src/styles/themes/default-dark-theme.scss b/kdb-web/src/styles/themes/default-dark-theme.scss
index 45fa4f2f..e3283097 100644
--- a/kdb-web/src/styles/themes/default-dark-theme.scss
+++ b/kdb-web/src/styles/themes/default-dark-theme.scss
@@ -411,9 +411,7 @@
         }
       }
 
-      .table-caption-btn-wrapper {
-        height: 30px !important;
-      }
+
     }
 
     .table-edit-input {
diff --git a/kdb-web/src/styles/themes/default-light-theme.scss b/kdb-web/src/styles/themes/default-light-theme.scss
index 82341a81..41d46599 100644
--- a/kdb-web/src/styles/themes/default-light-theme.scss
+++ b/kdb-web/src/styles/themes/default-light-theme.scss
@@ -411,9 +411,7 @@
         }
       }
 
-      .table-caption-btn-wrapper {
-        height: 30px !important;
-      }
+
     }
 
     .table-edit-input {
diff --git a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
index ff205f0f..a23b4064 100644
--- a/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
+++ b/kdb-web/src/styles/themes/sh-edraft-dark-theme.scss
@@ -416,10 +416,6 @@
           }
         }
       }
-
-      .table-caption-btn-wrapper {
-        height: 30px !important;
-      }
     }
 
     .table-edit-input {
diff --git a/kdb-web/src/styles/themes/sh-edraft-light-theme.scss b/kdb-web/src/styles/themes/sh-edraft-light-theme.scss
index ebf9360d..e1191651 100644
--- a/kdb-web/src/styles/themes/sh-edraft-light-theme.scss
+++ b/kdb-web/src/styles/themes/sh-edraft-light-theme.scss
@@ -411,9 +411,7 @@
         }
       }
 
-      .table-caption-btn-wrapper {
-        height: 30px !important;
-      }
+
     }
 
     .table-edit-input {