Merge pull request '1.1.0_responsive' (#347) from 1.1.0_responsive into 1.1.0

Reviewed-on: sh-edraft.de/kd_discord_bot#347

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",

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>

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/assets/version.json

@@ -2,6 +2,6 @@
     "WebVersion": {
         "Major": "1",
         "Minor": "1",
-        "Micro": "0.rc4"
+        "Micro": "0"
     }
 }

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%;
@@ -154,43 +162,43 @@ header {
             flex-direction: row;
             flex: 1;
             margin: 5px 0;
-          }
 
-          .content-column {
+            .content-column {
-            display: flex;
+              display: flex;
-            flex: 1;
+              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-data-value-row {
+            .content-data-name {
-            display: flex;
+              display: flex;
-            flex: 1;
+              flex: 1;
-            flex-direction: column;
+              align-items: center;
 
-            font-size: 18px;
+              font-size: 18px;
-          }
+            }
 
-          .content-divider {
+            .content-data-value {
-            margin: 5px 0;
+              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 {
@@ -204,7 +212,7 @@ header {
           }
 
           .content-input-field {
-            width: 50% !important;
+            width: 75% !important;
             margin: 0 !important;
           }
 
@@ -250,6 +258,7 @@ header {
               flex: 1;
               flex-direction: row;
               gap: 25px;
+              align-items: center;
 
               .table-caption-text {
                 display: flex;
@@ -316,8 +325,12 @@ header {
                 gap: 15px;
 
                 padding: 20px;
+                overflow: hidden;
 
                 .logo {
+                  display: flex;
+                  align-items: center;
+                  justify-content: center;
 
                   img {
                     width: 4rem;
@@ -337,6 +350,7 @@ header {
 
                     justify-content: center;
                     align-items: center;
+                    word-break: break-word;
                   }
 
                   .data {
@@ -480,7 +494,7 @@ header {
 
 footer {
   width: 100%;
-  height: $footerHeight;
+  min-height: $footerHeight;
   padding: 0 10px;
 
   display: flex;
@@ -489,23 +503,18 @@ footer {
 
   .left {
     width: 50%;
-
     display: flex;
-
+    gap: 10px;
-    // .frontend-version {
-    // }
-
-    .version-divider {
-      margin: 0 5px;
-    }
-
-    // .backend-version {
-    // }
   }
 
   .right {
     width: 50%;
+
+    display: flex;
+    align-items: flex-end;
     text-align: right;
+    justify-content: right;
+    gap: 10px;
 
     .p-button-label {
       font-weight: unset !important;
@@ -633,3 +642,111 @@ p-inputNumber {
   padding: 0 !important;
   border: none !important;
 }
+
+@media (max-width: 720px) {
+  footer {
+    .left,
+    .right {
+      flex-direction: column;
+
+      .divider {
+        display: none;
+      }
+    }
+  }
+  .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 {