Merge branch 'develop' of ssh://ognproject.evlt.uma.es:21987/opengnsys/oggui into develop

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

@@ -34,12 +34,6 @@
   padding-right: 0.5rem;
 }
 
-.button-container {
-  display: flex;
-  justify-content: center;
-  margin: 20px 0;
-}
-
 .clients-container {
   flex-grow: 1;
   box-sizing: border-box;
@@ -99,15 +93,6 @@
   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;
@@ -118,19 +103,7 @@
   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;
@@ -142,16 +115,6 @@
   }
 }
 
-@media (max-width: 768px) {
-  mat-card {
-    padding: 12px;
-  }
-
-  .unidad-card {
-    font-size: 12px;
-  }
-}
-
 mat-tree {
   background-color: #f9f9f9;
   padding: 0px 10px 10px 10px;
@@ -264,41 +227,6 @@ 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;
@@ -307,42 +235,24 @@ mat-tree mat-tree-node.disabled:hover {
   justify-content: flex-start;
 }
 
-.classroom-item {
-  flex: 1 1 calc(25% - 16px);
-  max-width: calc(25% - 16px);
-  box-sizing: border-box;
+.client-name {
+  display: block;
+  font-size: 16px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 5px;
+  margin-top: 5px;
 }
 
-.classroom-pc {
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  padding: 16px;
+.filters-container {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  text-align: center;
+  justify-content: start;
+  padding: 1em 1em 0em 1em;
 }
 
-.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;
+.filter-form-field {
+  min-width: 21rem;
 }
 
 .filters-and-tree-container {
@@ -369,6 +279,7 @@ 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);
@@ -379,25 +290,20 @@ 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 {
-  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;
+  width: 35px;
+  height: 35px;
+  margin-top: 10px;
+  margin-bottom: 8px;
 }
 
 .client-ip {
@@ -412,27 +318,6 @@ 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;
@@ -440,18 +325,6 @@ 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);
 }
@@ -463,37 +336,10 @@ 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;
 }
@@ -503,7 +349,6 @@ 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 appearance="outline">
+            <mat-form-field class="filter-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 appearance="outline">
+            <mat-form-field class="filter-form-field" appearance="outline">
               <mat-label>{{ 'searchClient' | translate }}</mat-label>
               <input matInput #clientSearchInput (input)="onClientFilterInput($event)"
                 placeholder="Nombre, IP, estado o MAC" />
@@ -200,9 +200,11 @@
         <!-- CLIENTS VIEWS-->
         <div class="clients-view" *ngIf="!isLoadingClients">
           <div *ngIf="hasClients; else noClientsTemplate">
+
             <!-- Cards view -->
             <div *ngIf="currentView === 'card'" class="cards-view">
-              <mat-checkbox (change)="toggleAllCards()" [checked]="selection.hasValue() && isAllSelected()"
+              <mat-checkbox class="cards-select-all" (change)="toggleAllCards()"
+                [checked]="selection.hasValue() && isAllSelected()"
                 [indeterminate]="selection.hasValue() && !isAllSelected()"
                 style="margin-left: 1em; margin-top: 0.5rem;">
               </mat-checkbox>
@@ -289,7 +291,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">
-                      {{ client.name }}
+                      <p style="font-weight: 500;">{{ client.name }}</p>
                     </td>
                   </ng-container>
                   <ng-container matColumnDef="ip">
@@ -364,7 +366,9 @@
                 (page)="onPageChange($event)">
               </mat-paginator>
             </div>
+
           </div>
+
           <!-- No clients view -->
           <ng-template #noClientsTemplate>
             <div *ngIf="!initialLoading" class="no-clients-info">