refs #1799 Enhance responsiveness and layout for small screens in groups component

ogWebconsole/src/app/components/groups/groups.component.css

@@ -22,6 +22,85 @@
   overflow: hidden;
 }
 
+.clients-mat-divider {
+  display: none;
+}
+
+@media (max-width: 992px) {
+  .main-container {
+    display: flex !important;
+    flex-direction: column !important;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: hidden !important;
+  }
+
+  .filters-and-tree-container {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-grow: 1 !important;
+    flex-shrink: 1 !important;
+    width: 100% !important;
+    max-width: none !important;
+    min-width: 0 !important;
+    padding: 1rem !important;
+    box-sizing: border-box !important;
+    min-height: 250px !important;
+    overflow-y: auto !important; 
+  }
+
+  .filters-panel,
+  .tree-container {
+    flex: 1 1 50% !important;
+    overflow-y: auto !important; 
+    padding: 0.5rem !important; 
+    box-sizing: border-box !important;
+    margin-bottom: 0 !important;
+  }
+
+  .filters-container {
+    padding: 0 !important;
+  }
+
+  .tree-mat-divider {
+    display: none !important;
+  }
+
+  .clients-mat-divider {
+    display: inline;
+  }
+
+  .clients-view-header {
+    display: flex;
+    flex-direction: row !important;
+    justify-content: space-between !important;
+    margin-bottom: 0.5rem !important;
+    margin-top: 0.5rem !important;
+    align-items: center !important;
+    padding-right: 1rem !important;
+  }
+
+  .groups-button-row {
+    display: none !important;
+  }
+
+  .cards-view {
+    max-height: none !important;
+  }
+}
+
+@media (max-width: 1400px) {
+  .type-view-text {
+    display: none;
+  }
+}
+
+@media (max-width: 450px) {
+  .clients-title-name {
+    font-size: 20px !important;
+  }
+}
+
 .header-container-title {
   flex-grow: 1;
   text-align: left;
@@ -34,15 +113,6 @@
   padding-right: 0.5rem;
 }
 
-.clients-container {
-  flex-grow: 1;
-  box-sizing: border-box;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  padding: 0rem 1rem 0rem 0.5rem;
-}
-
 .clients-view-header {
   display: flex;
   flex-direction: row;
@@ -53,6 +123,32 @@
   padding-right: 1rem;
 }
 
+@media (max-width: 768px) {
+  .clients-view-header {
+    display: flex;
+    flex-direction: column !important;
+  }
+}
+
+.clients-title-name {
+  font-size: x-large;
+  display: block;
+  padding: 1rem 1rem 1rem 13px;
+  margin-left: 0.6rem;
+  flex: 1 1 auto; 
+  white-space: nowrap; 
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.view-type-container {
+  display: flex;
+  flex-wrap: wrap; 
+  gap: 0.5rem;
+  align-items: center;
+  flex-shrink: 0;
+}
+
 .clients-view {
   flex-grow: 1;
   overflow-y: auto;
@@ -124,18 +220,6 @@
   flex: 1;
 }
 
-@media (max-width: 1024px) {
-  .header-container {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .groups-button-row {
-    flex-wrap: wrap;
-    gap: 10px;
-  }
-}
-
 mat-tree {
   background-color: #f9f9f9;
   padding: 0px 10px 10px 10px;
@@ -265,21 +349,36 @@ mat-tree mat-tree-node.disabled:hover {
   padding-right: 1rem;
 }
 
-.filters-container {
+.clients-container {
+  flex: 8;
+  box-sizing: border-box;
+  overflow: hidden;
   display: flex;
   flex-direction: column;
-  justify-content: start;
+  padding: 0rem 1rem 0rem 0.5rem;
-  padding: 1em 1em 0em 1em;
-}
-
-.filter-form-field {
-  min-width: 21rem;
 }
 
 .filters-and-tree-container {
+  flex: 2;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  flex-shrink: 1;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.filters-container {
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  flex-grow: 1;
+}
+
+.filter-form-field {
+  flex: 1;
+  min-width: 150px;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
 .filters-panel {
@@ -327,6 +426,10 @@ mat-tree mat-tree-node.disabled:hover {
   margin-top: 4px;
 }
 
+.type-view-text {
+  margin-left: 0.5vw;
+}
+
 .action-icons {
   display: flex;
   justify-content: center;
@@ -373,22 +476,6 @@ mat-tree mat-tree-node.disabled:hover {
   position: relative;
 }
 
-@media (max-width: 1560px) {
-  .clients-view-header {
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 1rem;
-    margin-top: 0;
-  }
-}
-
-.clients-title-name {
-  font-size: x-large;
-  display: block;
-  padding: 1rem 1rem 1rem 13px;
-  margin-left: 0.6rem;
-}
-
 .no-clients-info {
   display: flex;
   align-items: center;
@@ -397,13 +484,6 @@ mat-tree mat-tree-node.disabled:hover {
   margin-left: 1.6rem;
 }
 
-.view-type-container {
-  display: flex;
-  justify-content: flex-end;
-  gap: 2rem;
-  align-items: center;
-}
-
 mat-button-toggle-group {
   border: none;
 }
@@ -456,5 +536,4 @@ mat-button-toggle-group {
   padding: 0.5rem 1rem 1rem 1rem;
   width: 100%;
   box-sizing: border-box;
-}
+}
-

ogWebconsole/src/app/components/groups/groups.component.html

@@ -25,6 +25,27 @@
         {{ 'legendButton' | translate }}
       </button>
     </div>
+
+    <!-- Menú desplegable para pantallas pequeñas -->
+    <div *ngIf="isSmallScreen" class="groups-menu">
+      <button mat-icon-button [matMenuTriggerFor]="smallScreenMenu" matTooltip="Opciones" matTooltipShowDelay="1000">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <mat-menu #smallScreenMenu="matMenu">
+        <button mat-menu-item (click)="addOU($event)">
+          {{ 'newOrganizationalUnitButton' | translate }}
+        </button>
+        <button mat-menu-item (click)="addClient($event)">
+          {{ 'newSingleClientButton' | translate }}
+        </button>
+        <button mat-menu-item (click)="addMultipleClients($event)">
+          {{ 'newMultipleClientButton' | translate }}
+        </button>
+        <button mat-menu-item (click)="openBottomSheet()">
+          {{ 'legendButton' | translate }}
+        </button>
+      </mat-menu>
+    </div>
   </div>
 
   <div *ngIf="initialLoading; else contentTemplate">
@@ -72,7 +93,7 @@
               </button>
             </mat-form-field>
 
-            <mat-divider style="padding-top: 10px;"></mat-divider>
+            <mat-divider class="tree-mat-divider" style="padding-top: 10px;"></mat-divider>
 
             <!-- Funcionalidad actualmente deshabilitada-->
             <!-- <mat-form-field appearance="outline">
@@ -185,25 +206,23 @@
 
       <!-- CLIENTS -->
       <div class="clients-container">
-
+        <mat-divider class="clients-mat-divider"></mat-divider>
         <!-- CLIENTS HEADER -->
         <div class="clients-view-header">
-          <div>
+          <span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
-            <span [ngStyle]="{ visibility: isLoadingClients ? 'hidden' : 'visible' }" class="clients-title-name">
+            {{ 'clients' | translate }}
-              {{ 'clients' | translate }}
+            <strong>{{ selectedNode?.name }}</strong>
-              <strong>{{ selectedNode?.name }}</strong>
+          </span>
-            </span>
-          </div>
           <div class="view-type-container">
             <app-execute-command [clientData]="selection.selected" [buttonType]="'text'"
               [buttonText]="'Ejecutar comandos'" [disabled]="selection.selected.length === 0"></app-execute-command>
             <mat-button-toggle-group name="viewType" aria-label="View Type" [hideSingleSelectionIndicator]="true"
               (change)="toggleView($event.value)">
               <mat-button-toggle value="list" [disabled]="currentView === 'list'">
-                <mat-icon>list</mat-icon> {{ 'Vista Lista' | translate }}
+                <mat-icon>list</mat-icon> <span class="type-view-text">{{ 'Vista Lista' | translate }}</span>
               </mat-button-toggle>
               <mat-button-toggle value="card" [disabled]="currentView === 'card'">
-                <mat-icon>grid_view</mat-icon> {{ 'Vista Tarjeta' | translate }}
+                <mat-icon>grid_view</mat-icon> <span class="type-view-text">{{ 'Vista Tarjeta' | translate }}</span>
               </mat-button-toggle>
             </mat-button-toggle-group>
           </div>
@@ -228,8 +247,8 @@
                       <mat-checkbox (click)="$event.stopPropagation()" (change)="toggleRow(client)"
                         [checked]="selection.isSelected(client)" [disabled]="client.status === 'busy'">
                       </mat-checkbox>
-                      <img style="margin-top: 0.5em;" [src]="'assets/images/computer_' + client.status + '.svg'" alt="Client Icon"
+                      <img style="margin-top: 0.5em;" [src]="'assets/images/computer_' + client.status + '.svg'"
-                        class="client-image" />
+                        alt="Client Icon" class="client-image" />
 
                       <div class="client-details">
                         <span class="client-name">{{ client.name }}</span>
@@ -404,4 +423,4 @@
 
     </div>
   </ng-template>
-</div>
+</div>

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -25,6 +25,7 @@ import { debounceTime } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { ConfigService } from '@services/config.service';
 import { GlobalStatusComponent } from '../global-status/global-status.component';
+import { BreakpointObserver } from '@angular/cdk/layout';
 
 enum NodeType {
   OrganizationalUnit = 'organizational-unit',
@@ -40,6 +41,7 @@ enum NodeType {
   styleUrls: ['./groups.component.css'],
 })
 export class GroupsComponent implements OnInit, OnDestroy {
+  isSmallScreen: boolean = false;
   baseUrl: string;
   mercureUrl: string;
   organizationalUnits: UnidadOrganizativa[] = [];
@@ -105,6 +107,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     public dialog: MatDialog,
     private bottomSheet: MatBottomSheet,
     private joyrideService: JoyrideService,
+    private breakpointObserver: BreakpointObserver,
     private toastr: ToastrService,
     private configService: ConfigService
   ) {
@@ -158,6 +161,10 @@ export class GroupsComponent implements OnInit, OnDestroy {
       this.filters['query'] = searchTerm;
       this.filterClients(searchTerm);
     });
+
+    this.breakpointObserver.observe(['(max-width: 992px)']).subscribe((result) => {
+      this.isSmallScreen = result.matches;
+    })
   }
 
   private updateClientStatus(clientUuid: string, newStatus: string): void {

ogWebconsole/src/app/layout/header/header.component.css

@@ -51,7 +51,7 @@ mat-toolbar {
   display: none;
 }
 
-@media (min-width: 1328px) {
+@media (min-width: 1500px) {
   .hide-on-small {
     display: inline;
   }

ogWebconsole/src/app/layout/main-layout/main-layout.component.css

@@ -1,6 +1,7 @@
 .container {
   width: 100vw;
   height: calc(100vh - 7vh);
+  min-width: 375px;
 }
 
 .sidebar {

ogWebconsole/src/app/layout/main-layout/main-layout.component.ts

@@ -13,7 +13,7 @@ export class MainLayoutComponent implements OnInit {
   constructor(private breakpointObserver: BreakpointObserver) { }
 
   ngOnInit(): void {
-    this.breakpointObserver.observe(['(max-width: 1328px)']).subscribe((result) => {
+    this.breakpointObserver.observe(['(max-width: 1500px)']).subscribe((result) => {
       if (result.matches) {
         this.sidebarMode = 'over';
         this.isSidebarVisible = false;