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

@@ -34,6 +34,12 @@
   padding-right: 0.5rem;
 }
 
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin: 20px 0;
+}
+
 .clients-container {
   flex-grow: 1;
   box-sizing: border-box;
@@ -93,6 +99,15 @@
   color: #1976d2;
 }
 
+.empty-list {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  font-size: 16px;
+  color: #777;
+}
+
 .search-container {
   display: flex;
   gap: 20px;
@@ -103,7 +118,19 @@
   flex: 1;
 }
 
+.filters {
+  padding: 20px;
+  background-color: #f9f9f9;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+}
+
 @media (max-width: 1024px) {
+  .card-container {
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 15px;
+  }
+
   .header-container {
     flex-direction: column;
     gap: 10px;
@@ -115,6 +142,16 @@
   }
 }
 
+@media (max-width: 768px) {
+  mat-card {
+    padding: 12px;
+  }
+
+  .unidad-card {
+    font-size: 12px;
+  }
+}
+
 mat-tree {
   background-color: #f9f9f9;
   padding: 0px 10px 10px 10px;
@@ -227,6 +264,41 @@ mat-tree mat-tree-node.disabled:hover {
   display: none;
 }
 
+.filters-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  padding: 1em 1em 0em 1em;
+}
+
+.chip-busy {
+  background-color: indianred !important;
+  color: black;
+}
+
+.chip-og-live {
+  background-color: yellow !important;
+  color: black;
+}
+
+.chip-windows,
+.chip-windows-session,
+.chip-macos {
+  background-color: cornflowerblue !important;
+  color: white;
+}
+
+.chip-linux,
+.chip-linux-session {
+  background-color: mediumpurple !important;
+  color: white;
+}
+
+.chip-off {
+  background-color: darkgrey !important;
+  color: white;
+}
+
 .clients-card-container {
   display: flex;
   flex-wrap: wrap;
@@ -235,24 +307,42 @@ mat-tree mat-tree-node.disabled:hover {
   justify-content: flex-start;
 }
 
-.client-name {
-  display: block;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 5px;
-  margin-top: 5px;
+.classroom-item {
+  flex: 1 1 calc(25% - 16px);
+  max-width: calc(25% - 16px);
+  box-sizing: border-box;
 }
 
-.filters-container {
+.classroom-pc {
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 16px;
   display: flex;
   flex-direction: column;
-  justify-content: start;
-  padding: 1em 1em 0em 1em;
+  align-items: center;
+  text-align: center;
 }
 
-.filter-form-field {
-  min-width: 21rem;
+.classroom-pc .pc-image {
+  width: 64px;
+  height: 64px;
+  margin-bottom: 8px;
+}
+
+.pc-details {
+  margin-bottom: 8px;
+}
+
+.pc-details .client-name,
+.pc-details .client-ip,
+.pc-details .client-mac {
+  display: block;
+  font-size: 14px;
+  color: #666;
+}
+
+.pc-actions button {
+  margin: 0 4px;
 }
 
 .filters-and-tree-container {
@@ -279,7 +369,6 @@ mat-tree mat-tree-node.disabled:hover {
 
 .client-card {
   background-color: #fff;
-  border: 1px solid #ccc;
   border-radius: 8px;
   overflow: hidden;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -290,20 +379,25 @@ mat-tree mat-tree-node.disabled:hover {
   align-items: center;
   text-align: center;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
-  position: relative;
 }
 
-
 .client-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
 }
 
 .client-image {
-  width: 35px;
-  height: 35px;
-  margin-top: 10px;
-  margin-bottom: 8px;
+  max-width: 35px !important;
+  max-height: 35px !important;
+  height: auto;
+}
+
+.client-name {
+  display: block;
+  font-size: 1.2em;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 5px;
 }
 
 .client-ip {
@@ -318,6 +412,27 @@ mat-tree mat-tree-node.disabled:hover {
   gap: 4px;
 }
 
+.client-item-list {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.client-details-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.clients-list .list-item-content {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+}
+
 .action-icons {
   display: flex;
   justify-content: center;
@@ -325,6 +440,18 @@ mat-tree mat-tree-node.disabled:hover {
   margin-top: 10px;
 }
 
+.client-card,
+.list-item-content {
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.client-image {
+  width: 50px;
+  height: 50px;
+  margin-bottom: 0.5rem;
+}
+
 .mat-elevation-z8 {
   box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
@@ -336,10 +463,37 @@ mat-tree mat-tree-node.disabled:hover {
   margin: 5px;
 }
 
+.client-name {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.flex {
+  display: flex;
+  justify-self: center;
+  align-items: center;
+}
+
 .client-item {
   position: relative;
 }
 
+.client-card {
+  background: #ffffff;
+  border-radius: 6px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+  position: relative;
+  text-align: center;
+}
+
+.client-image {
+  max-width: 100%;
+  height: auto;
+  margin-top: 10px;
+  margin-bottom: 8px;
+}
+
 .client-details {
   margin-top: 4px;
 }
@@ -349,6 +503,7 @@ mat-tree mat-tree-node.disabled:hover {
     display: flex;
     flex-direction: column;
   }
+
 }
 
 .clients-title-name {

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

@@ -41,7 +41,7 @@
         <!-- Filters -->
         <div class="filters-panel" joyrideStep="filtersPanelStep" text="{{ 'filtersPanelStepText' | translate }}">
           <div class="filters-container">
-            <mat-form-field class="filter-form-field" appearance="outline">
+            <mat-form-field appearance="outline">
               <mat-label>{{ 'searchTree' | translate }}</mat-label>
               <input matInput #treeSearchInput (input)="onTreeFilterInput($event)"
                 placeholder="Centro, aula, grupos ..." />
@@ -50,7 +50,7 @@
                 <mat-icon>close</mat-icon>
               </button>
             </mat-form-field>
-            <mat-form-field class="filter-form-field" appearance="outline">
+            <mat-form-field appearance="outline">
               <mat-label>{{ 'searchClient' | translate }}</mat-label>
               <input matInput #clientSearchInput (input)="onClientFilterInput($event)"
                 placeholder="Nombre, IP, estado o MAC" />
@@ -200,11 +200,9 @@
         <!-- CLIENTS VIEWS-->
         <div class="clients-view" *ngIf="!isLoadingClients">
           <div *ngIf="hasClients; else noClientsTemplate">
-
             <!-- Cards view -->
             <div *ngIf="currentView === 'card'" class="cards-view">
-              <mat-checkbox class="cards-select-all" (change)="toggleAllCards()"
-                [checked]="selection.hasValue() && isAllSelected()"
+              <mat-checkbox (change)="toggleAllCards()" [checked]="selection.hasValue() && isAllSelected()"
                 [indeterminate]="selection.hasValue() && !isAllSelected()"
                 style="margin-left: 1em; margin-top: 0.5rem;">
               </mat-checkbox>
@@ -291,7 +289,7 @@
                     <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'name' | translate }} </th>
                     <td mat-cell *matCellDef="let client" matTooltip="{{ getClientPath(client) }}"
                       matTooltipPosition="left" matTooltipShowDelay="500">
-                      <p style="font-weight: 500;">{{ client.name }}</p>
+                      {{ client.name }}
                     </td>
                   </ng-container>
                   <ng-container matColumnDef="ip">
@@ -366,9 +364,7 @@
                 (page)="onPageChange($event)">
               </mat-paginator>
             </div>
-
           </div>
-
           <!-- No clients view -->
           <ng-template #noClientsTemplate>
             <div *ngIf="!initialLoading" class="no-clients-info">