From c2795eda48fe758ee79e5fc8ff4ec5f56b5c8be8 Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Fri, 5 Jul 2024 09:53:35 +0200
Subject: [PATCH] Group Cards flex width

---
 .../classroom-view.component.css              |  3 +-
 .../components/groups/groups.component.css    | 37 ++++++++------
 .../components/groups/groups.component.html   | 48 ++++++-------------
 3 files changed, 39 insertions(+), 49 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
index aaf3365..40b80f1 100644
--- a/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
+++ b/ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css
@@ -7,8 +7,7 @@
 }
 
 .classroom-group {
-  margin: 10px;
-  width: 800px;
+  flex: 1 1 25%;
   background-color: #fafafa;
 }
 
diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 920d648..444afe7 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -3,22 +3,26 @@
   flex-wrap: wrap;
 }
 
-mat-card {
+.card {
+  flex-grow: 1;
   margin: 10px;
 }
 
+.unidad-card, .elements-card {
+  flex: 1 1 45%;
+  background-color: #fafafa;
+}
+
+.details-card, .classroom-view {
+  flex: 1 1 25%;
+}
+
 mat-card-title {
   display: flex;
   justify-content: space-between;
   margin: 10px;
 }
 
-.elements-card{
-  margin: 10px;
-  width: 800px;
-  background-color: #fafafa;
-}
-
 .title-with-breadcrumb {
   display: flex;
   flex-direction: column;
@@ -32,7 +36,7 @@ mat-card-subtitle {
 mat-card-subtitle a {
   cursor: pointer;
   text-decoration: underline;
-  color: #1976d2; /* Color azul típico de enlaces */
+  color: #1976d2;
 }
 
 mat-card-subtitle a:hover {
@@ -49,6 +53,11 @@ button {
   margin-bottom: 20px;
 }
 
+.item-content {
+  display: flex;
+  width: 100%;
+}
+
 .clickable-item:hover {
   cursor: pointer;
 }
@@ -58,16 +67,16 @@ button {
 }
 
 .actions {
-  margin-left: auto; 
+  display: flex;
+  margin-left: auto;
 }
 
 .actions mat-icon {
-  cursor: pointer; 
-  margin-left: 48px; 
-  color: #757575; 
+  cursor: pointer;
+  margin-left: 16px;
+  color: #757575;
 }
 
 .actions mat-icon:hover {
   color: #212121;
-}
-
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index f0baca6..d97103a 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -6,25 +6,27 @@
 <mat-divider></mat-divider>
 <h2>Grupos</h2>
 <div class="groupLists-container">
-  <mat-card>
+  <mat-card class="card unidad-card">
     <mat-card-title>Unidad organizativa</mat-card-title>
     <mat-card-content>
       <mat-list role="list">
         <mat-list-item *ngFor="let unidad of unidadesOrganizativas"
           [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}">
-          <span (click)="onSelectUnidad(unidad)">
-            <mat-icon>apartment</mat-icon>
-            {{ unidad.nombre }}
-          </span>
-          <span class="actions">
-            <mat-icon class="edit-icon" (click)="onEditClick(unidad.type, unidad.uuid)">edit</mat-icon>
-          </span>
+          <div class="item-content">
+            <span (click)="onSelectUnidad(unidad)">
+              <mat-icon>apartment</mat-icon>
+              {{ unidad.nombre }}
+            </span>
+            <span class="actions">
+              <mat-icon class="edit-icon" (click)="onEditClick(unidad.type, unidad.uuid)">edit</mat-icon>
+            </span>
+          </div>
         </mat-list-item>
       </mat-list>
     </mat-card-content>
   </mat-card>
 
-  <mat-card class="elements-card">
+  <mat-card class="card elements-card">
     <mat-card-title>
       <div class="title-with-breadcrumb">
         <span>Elementos</span>
@@ -39,30 +41,10 @@
     <mat-card-content>
       <mat-list role="list">
         <mat-list-item *ngFor="let child of children" [ngClass]="{'clickable-item': true}">
-          <div>
+          <div class="item-content">
             <span (click)="onSelectChild(child)">
               <ng-container [ngSwitch]="getIcon(child.type)">
-                <mat-icon *ngSwitchCase="'apartment'">apartment</mat-icon>
-                <svg *ngSwitchCase="'classrooms-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
-                  viewBox="0 -960 960 960" width="24px" fill="#5f6368">
-                  <path
-                    d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z" />
-                </svg>
-                <svg *ngSwitchCase="'classroom-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
-                  viewBox="0 -960 960 960" width="24px" fill="#5f6368">
-                  <path
-                    d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z" />
-                </svg>
-                <svg *ngSwitchCase="'client-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
-                  viewBox="0 -960 960 960" width="24px" fill="#5f6368">
-                  <path
-                    d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z" />
-                </svg>
-                <svg *ngSwitchCase="'clients-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
-                  viewBox="0 -960 960 960" width="24px" fill="#5f6368">
-                  <path
-                    d="M120-80v-280h120v-160h200v-80H320v-280h320v280H520v80h200v160h120v280H520v-280h120v-80H320v80h120v280H120Zm280-600h160v-120H400v120ZM200-160h160v-120H200v120Zm400 0h160v-120H600v120ZM480-680ZM360-280Zm240 0Z" />
-                </svg>
+                <!-- Iconos aquí -->
               </ng-container>
               {{ child.name || child.nombre }}
             </span>
@@ -76,7 +58,7 @@
     </mat-card-content>
   </mat-card>
 
-  <mat-card class="groupLists-container">
+  <mat-card class="card details-card">
     <mat-card-title>Detalles del elemento</mat-card-title>
     <mat-card-content *ngIf="selectedDetail">
       <p><strong>Nombre:</strong> {{ selectedDetail.name || selectedDetail.nombre }}</p>
@@ -90,5 +72,5 @@
     </mat-card-content>
   </mat-card>
 
-  <app-classroom-view [clients]="clientsData" [pcInTable] = "3"></app-classroom-view>
+  <app-classroom-view class="card classroom-view" [clients]="clientsData" [pcInTable]="3"></app-classroom-view>
 </div>
\ No newline at end of file