kdb-web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kdb-web",
-    "version": "1.1.0.rc6",
+    "version": "1.1.0.rc5",
     "scripts": {
         "ng": "ng",
         "update-version": "ts-node-esm update-version.ts",

kdb-web/src/app/app.component.html

@@ -5,7 +5,7 @@
 
     <section class="app">
       <div>
-        <section [ngClass]="{'sidebar-open': isSidebarOpen, 'sidebar-closed': !isSidebarOpen}">
+        <section class="sidebar" [style.width]="sidebarWidth">
           <app-sidebar></app-sidebar>
         </section>
       </div>

kdb-web/src/app/app.component.ts

@@ -16,7 +16,7 @@ import { takeUntil } from "rxjs/operators";
 export class AppComponent implements OnInit, OnDestroy {
 
   themeName: string = Themes.Default;
-  isSidebarOpen: boolean = true;
+  sidebarWidth: string = '175px';
 
   isLoggedIn: boolean = false;
 
@@ -29,10 +29,10 @@ export class AppComponent implements OnInit, OnDestroy {
     private translateService: TranslateService,
     private config: PrimeNGConfig,
   ) {
-    this.themeService.isSidebarOpen$.pipe(
+    this.themeService.sidebarWidth$.pipe(
       takeUntil(this.unsubscriber)
     ).subscribe(value => {
-      this.isSidebarOpen = value;
+      this.sidebarWidth = value;
     });
     this.themeService.themeName$.pipe(
       takeUntil(this.unsubscriber)

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

@@ -1,5 +1,5 @@
 <div class="client">
-  <div class="client-info client-info-small">
+  <div class="client-info">
     <label class="client-info-header">{{'common.id' | translate}}</label>
     <label class="client-info-value">{{client.id}}</label>
   </div>

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

@@ -30,6 +30,7 @@
 
             <div class="client-data"
                  *ngFor="let client of server.clients">
+              <i class="pi pi-discord"></i>
               <app-client class="client-component" [client]="client"></app-client>
             </div>
           </div>

kdb-web/src/app/services/sidebar/sidebar.service.ts

@@ -69,7 +69,7 @@ export class SidebarService {
 
   async buildMenu(user: UserDTO | null, hasPermission: boolean, isTechnician: boolean = false) {
     this.dashboard = {
-      label: this.translateService.instant("sidebar.dashboard"),
+      label: this.isSidebarOpen ? this.translateService.instant("sidebar.dashboard") : "",
       icon: "pi pi-th-large",
       routerLink: "dashboard"
     };

kdb-web/src/app/services/theme/theme.service.ts

@@ -9,10 +9,13 @@ import { AuthService } from "../auth/auth.service";
 export class ThemeService {
 
   themeName: string = Themes.Default;
+
+  sidebarWidth = "150px";
   isSidebarOpen = false;
 
   themeName$ = new BehaviorSubject<string>(Themes.Default);
   isSidebarOpen$ = new BehaviorSubject<boolean>(true);
+  sidebarWidth$ = new BehaviorSubject<string>("175px");
 
   constructor(
     private authService: AuthService
@@ -22,6 +25,10 @@ export class ThemeService {
     });
     this.isSidebarOpen$.subscribe(isSidebarOpen => {
       this.isSidebarOpen = isSidebarOpen;
+      this.sidebarWidth$.next(isSidebarOpen ? "175px" : "75px");
+    });
+    this.sidebarWidth$.subscribe(sidebarWidth => {
+      this.sidebarWidth = sidebarWidth;
     });
 
     this.loadTheme();

kdb-web/src/assets/version.json

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

kdb-web/src/styles.scss

@@ -115,14 +115,8 @@ header {
   display: flex;
   flex: 1;
 
-  .sidebar-open {
+  .sidebar {
     height: 100%;
-    width: 175px;
-  }
-
-  .sidebar-closed {
-    height: 100%;
-    width: 75px;
   }
 
   h1 {
@@ -378,23 +372,19 @@ header {
                         flex-wrap: wrap;
                         gap: 10px;
 
-                        .client-info-small {
-                          flex: 0.25 !important;
-                        }
-
                         .client-info {
                           display: flex;
                           flex-direction: column;
-                          flex: 1;
+                          margin-left: 2%;
 
                           .client-info-header {
                             margin-bottom: 5px;
-                            white-space: break-spaces;
+                            white-space: nowrap;
                             font-weight: bold
                           }
 
                           .client-info-value {
-                            word-break: break-word;
+                            white-space: nowrap;
                           }
                         }
                       }
@@ -664,31 +654,11 @@ p-inputNumber {
       }
     }
   }
-
-
-  .p-panelmenu {
-    .p-menuitem-text {
-      display: none;
-    }
-  }
-
   .app {
-    .sidebar-open {
-      width: 65px;
-    }
-
-    .sidebar-closed {
-      display: none;
-    }
-
     .component-wrapper {
       .component {
         .content-wrapper {
           .content {
-            .client {
-              flex-direction: column !important;
-            }
-
             .server-list-wrapper {
               .server-list {
                 .server {
@@ -779,7 +749,6 @@ p-inputNumber {
   .p-column-title {
     min-width: 50%;
     font-weight: 600;
-    word-break: break-word;
   }
 
   p-cellEditor {

kdb-web/src/styles/primeng-fixes.scss

@@ -40,7 +40,6 @@ header,
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: normal !important;
   }
 
   .p-panelmenu-header > a {
@@ -54,6 +53,10 @@ header,
     border: none !important;
     background: none !important;
   }
+
+  .p-menuitem-text {
+    line-height: normal !important;
+  }
 }
 
 ui-menu .ui-menu-parent .ui-menu-child {