Group Cards flex width
parent
e8dbd3d5f8
commit
c2795eda48
|
|
@ -7,8 +7,7 @@
|
|||
}
|
||||
|
||||
.classroom-group {
|
||||
margin: 10px;
|
||||
width: 800px;
|
||||
flex: 1 1 25%;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue