From 5962c2e051bb006bbfb9d3eda94f65f9b6573c51 Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Thu, 21 Nov 2024 12:17:06 +0100
Subject: [PATCH] Updated main groups classroom UX

---
 .../components/groups/groups.component.css    | 33 +++++++++++++++----
 .../components/groups/groups.component.html   |  2 --
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 0cc1a01..7f0db7c 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -218,19 +218,38 @@ mat-card {
 .classroom-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
-  justify-content: flex-start;
+  gap: 16px; /* Espacio entre elementos */
+  justify-content: flex-start; /* Alinea los elementos a la izquierda */
 }
 
 .classroom-item {
-  flex: 0 1 calc(16.66% - 16px);
-  max-width: calc(16.66% - 16px);
-  box-sizing: border-box;
+  flex: 0 1 calc(16.66% - 16px); /* 6 columnas (para pantallas grandes) */
+  box-sizing: border-box; /* Incluye padding y borde en el cálculo del ancho */
 }
 
 .classroom-card {
-  width: 100%;
-  text-align: center;
+  width: 100%; /* Asegura que el card ocupe todo el espacio del item */
+}
+
+/* Pantallas medianas: 4 columnas */
+@media (max-width: 1024px) {
+  .classroom-item {
+    flex: 0 1 calc(25% - 16px); /* 4 columnas */
+  }
+}
+
+/* Pantallas pequeñas: 2 columnas */
+@media (max-width: 768px) {
+  .classroom-item {
+    flex: 0 1 calc(50% - 16px); /* 2 columnas */
+  }
+}
+
+/* Pantallas muy pequeñas: 1 columna */
+@media (max-width: 480px) {
+  .classroom-item {
+    flex: 0 1 100%; /* 1 columna */
+  }
 }
 
 .client-text {
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 2b97926..5745561 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -139,8 +139,6 @@
           </div>
         </mat-card-content>
       </mat-card>
-
-
     </div>
   </mat-tab>