v1.0.4 Cambios en interfaz MESMPR

vacaciones/src/app/components/mes/mesmpr/mesmpr.component.html

@@ -10,7 +10,7 @@
 </mat-grid-list>
 
 <!-- EASYG -->
-<mat-card class="card-normal-text mat-card-text mat-elevation-z8 animated fadeIn fast" *ngIf="!loading && casoEAYG">
+<mat-card class="card-normal-text mat-card-text mat-elevation-z8 animated fadeIn fast" style="padding-bottom: 20px;" *ngIf="!loading && casoEAYG">
   <mat-grid-list cols="12" rowHeight="100px">
     <!-- Fila 1 | Periodo | Días disponibles (título) -->
     <mat-grid-tile colspan="12">
@@ -25,7 +25,7 @@
       <div>
         <span class="display-0">Días disponibles</span>
       </div>
-      <div class="mr-5" class="position-right" style="width: 210px">
+      <div class="mr-5" class="position-right" style="bottom: 10px !important; width: 210px">
         <mat-card-title class="display-text">Días por periodo</mat-card-title>
         <span class="display-text-small text-secondary"><b>{{ diasPeriodoEAYG }}</b></span>
       </div>
@@ -35,17 +35,16 @@
       <h1 class="display-4 text-secondary">
         {{ diasDisponiblesEAYG }}
       </h1>
-      <div class="mr-5" class="position-right" style="margin-right: 1%; width: 180px">
+      <div class="mr-5" class="position-right" style="top: 10px !important; margin-right: 1%; width: 180px">
         <mat-card-title class="display-text">Días tomados</mat-card-title>
         <span class="display-text-small text-secondary"><b> {{ diasTomadosEAYG }} </b></span>
       </div>
     </mat-grid-tile>
   </mat-grid-list>
   <div align="right" style="right: 0; display: flex; align-items: center">
-    
     <div  style="width: 100%; margin-left: 150px;">  
       <mat-accordion class="headers-align" style="width: 100%; margin-top: 1%;" *ngIf="!casoActual && !casoAnterior">
-        <mat-expansion-panel class="expansion-panel" [disabled]="detalles.length === 0">
+        <mat-expansion-panel style="margin-top: 20px;" class="expansion-panel" [disabled]="detalles.length === 0">
           <mat-expansion-panel-header style="margin: auto;">
             <mat-panel-title>
               <mat-icon>calendar_month</mat-icon>
@@ -56,7 +55,6 @@
             <div class="periodo-flex">
               <span>Periodo {{ formatoPeriodo(periodos.PERIODO) }}</span>
             </div>
-    
             <div>
               <div *ngFor="let detallePeriodo of formatoDetalles(periodos.DETALLES)">
                  <mat-divider></mat-divider>
@@ -81,7 +79,7 @@
 </mat-card>
 
 <!-- Periodo Actual -->
-<mat-card class="card-normal-text mat-card-text mat-elevation-z8 animated fadeIn fast" [style.margin-bottom]="!casoAnterior ? '100px' : ''"
+<mat-card class="card-normal-text mat-card-text mat-elevation-z8 animated fadeIn fast" style="padding-bottom: 15px;" [style.margin-bottom]="!casoAnterior ? '100px' : ''"
   *ngIf="!loading && casoActual">
   <mat-grid-list cols="12" rowHeight="100px">
     <!-- Fila 1 | Periodo | Días disponibles (título) -->
@@ -97,7 +95,7 @@
       <div>
         <span class="display-0">Días disponibles</span>
       </div>
-      <div class="mr-5" class="position-right" style="width: 210px">
+      <div class="mr-5" class="position-right" style="bottom: 10px !important; width: 210px;">
         <mat-card-title class="display-text">Días por periodo</mat-card-title>
         <span class="display-text-small text-secondary"><b>{{ diasPeriodoActual }}</b></span>
       </div>
@@ -107,7 +105,7 @@
       <h1 class="display-4 text-secondary">
         {{ diasDisponiblesActual }}
       </h1>
-      <div class="mr-5" class="position-right" style="margin-right: 1%; width: 180px">
+      <div class="mr-5" class="position-right" style="top: 10px !important; margin-right: 1%; width: 180px">
         <mat-card-title class="display-text">Días tomados</mat-card-title>
         <span class="display-text-small text-secondary"><b> {{ diasTomadosActual }} </b></span>
       </div>
@@ -117,8 +115,8 @@
   <div align="right" style="right: 0; display: flex; align-items: center">
     <div  style="width: 100%; margin-left: 150px;">  
       <mat-accordion class="headers-align" style="width: 100%; margin-top: 1%;">
-        <mat-expansion-panel class="expansion-panel" [disabled]="detalles.length === 0">
-          <mat-expansion-panel-header style="margin: auto;">
+        <mat-expansion-panel class="expansion-panel" style="margin-top: 20px;" [disabled]="detalles.length === 0">
+          <mat-expansion-panel-header>
             <mat-panel-title>
               <mat-icon>calendar_month</mat-icon>
             </mat-panel-title>
@@ -152,7 +150,7 @@
 </mat-card>
 
 <!-- Periodo Anterior -->
-<mat-card class="card-normal-text mat-card-text mat-elevation-z8 animated fadeIn fast" style="margin-bottom: 100px;"
+<mat-card class="card-normal-text mat-card-text mat-elevation-z8 animated fadeIn fast" style="padding-bottom: 15px; margin-bottom: 100px; "
   *ngIf="!loading && casoAnterior">
   <mat-grid-list cols="12">
     <!-- Fila 1 | Periodo | Días disponibles (título) -->
@@ -167,7 +165,7 @@
       <div>
         <span class="display-0">Días disponibles</span>
       </div>
-      <div class="mr-5" class="position-right" style="width: 210px">
+      <div class="mr-5" class="position-right" style="bottom: 10px !important; width: 210px">
         <mat-card-title class="display-text">Días por periodo</mat-card-title>
         <span class="display-text-small text-secondary"><b>{{ diasPeriodoAnterior }}</b></span>
       </div>
@@ -190,7 +188,7 @@
      
     </div>
 
-    <div style="width: 180px; text-align: center; margin-right: 30px;">
+    <div style="width: 180px; text-align: center; margin-right: 30px; top: 10px !important;">
       <mat-card-title class="display-text">Días solicitados</mat-card-title>
         <span class="display-text-small text-secondary"><b> {{ diasSolicitadosAnterior }} </b></span>
     </div>