Updated main groups classroom UX
testing/ogGui-multibranch/pipeline/head This commit is unstable Details

pull/7/head
Manuel Aranda Rosales 2024-11-21 12:17:06 +01:00
parent d1195239ad
commit 5962c2e051
2 changed files with 26 additions and 9 deletions

View File

@ -218,19 +218,38 @@ mat-card {
.classroom-grid { .classroom-grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 16px; gap: 16px; /* Espacio entre elementos */
justify-content: flex-start; justify-content: flex-start; /* Alinea los elementos a la izquierda */
} }
.classroom-item { .classroom-item {
flex: 0 1 calc(16.66% - 16px); flex: 0 1 calc(16.66% - 16px); /* 6 columnas (para pantallas grandes) */
max-width: calc(16.66% - 16px); box-sizing: border-box; /* Incluye padding y borde en el cálculo del ancho */
box-sizing: border-box;
} }
.classroom-card { .classroom-card {
width: 100%; width: 100%; /* Asegura que el card ocupe todo el espacio del item */
text-align: center; }
/* 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 { .client-text {

View File

@ -139,8 +139,6 @@
</div> </div>
</mat-card-content> </mat-card-content>
</mat-card> </mat-card>
</div> </div>
</mat-tab> </mat-tab>