Made dashboard responsive #1.1.0

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/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%;
@@ -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;
-
+    gap: 10px;
-    // .frontend-version {
-    // }
-
-    .version-divider {
-      margin: 0 5px;
-    }
-
-    // .backend-version {
-    // }
   }
 
   .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;
+      }
+    }
+  }
+
+}