Construção do botão abrir diálogo com as críticas literárias

FelipeMarques06 · Feb 2, 2022 · 486bcd1 · 486bcd1
1 parent 71e772c
commit 486bcd1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/src/app/criticas/critica/critica.component.html b/src/app/criticas/critica/critica.component.html
@@ -9,17 +9,20 @@
       </mat-form-field>
     </div>
     <div class="grid-container" *ngIf="result$ | async as busca">
-      <mat-grid-list cols="2" rowHeight="180px">
+      <mat-grid-list cols="2" rowHeight="200px">
         <mat-grid-tile *ngFor="let busca of result$| async"  [colspan]="busca.cols" [rowspan]="busca.rows">
           <mat-card class="dashboard-card">
             <mat-card-title-group>
               <mat-card-title>{{busca.titulo}}</mat-card-title>
               <mat-card-subtitle>{{busca.subtitulo}}</mat-card-subtitle>
-              <img mat-card-image class="imgcard" [src]="busca.img" [alt]="busca.titulo" (click)="abrirCriticas(busca.completo)">
+              <img mat-card-image class="imgcard" [src]="busca.img" [alt]="busca.titulo">
             </mat-card-title-group>
             <mat-card-content>
               {{busca.resumo}}
             </mat-card-content>
+            <mat-card-actions class="texto">
+              <button mat-button (click)="abrirCriticas(busca.completo)" mat-raised-button>Saiba Mais</button>
+            </mat-card-actions>
           </mat-card>
         </mat-grid-tile>
       </mat-grid-list>
@@ -32,17 +35,20 @@
         <h1 class="mat-h1"> CRÍTICAS LITERÁRIAS</h1>
       </div>
     </mat-toolbar>
-    <mat-grid-list cols="2" rowHeight="180px">
+    <mat-grid-list cols="2" rowHeight="200px">
       <mat-grid-tile *ngFor="let critica of criticas$ | async" [colspan]="critica.cols" [rowspan]="critica.rows">
         <mat-card class="dashboard-card">
           <mat-card-title-group>
-            <mat-card-title>{{critica.titulo}}</mat-card-title>
-            <mat-card-subtitle>{{critica.subtitulo}}</mat-card-subtitle>
-            <img mat-card-image class="imgcard" [src]="critica.img" [alt]="critica.titulo" (click)="abrirCriticas(critica.completo)">
+              <mat-card-title>{{critica.titulo}}</mat-card-title>
+              <mat-card-subtitle>{{critica.subtitulo}}</mat-card-subtitle>
+              <img mat-card-image class="imgcard" [src]="critica.img" [alt]="critica.titulo">
           </mat-card-title-group>
           <mat-card-content>
             {{critica.resumo}}
           </mat-card-content>
+          <mat-card-actions class="texto">
+            <button mat-button (click)="abrirCriticas(critica.completo)" mat-raised-button>Saiba Mais</button>
+          </mat-card-actions>
         </mat-card>
       </mat-grid-tile>
     </mat-grid-list>

diff --git a/src/app/criticas/critica/critica.component.scss b/src/app/criticas/critica/critica.component.scss
@@ -15,17 +15,16 @@
 
 .more-button {
   position: absolute;
-  top: 5px;
-  right: 10px;
 }
 
 .dashboard-card-content {
   text-align: justify;
 }
 
 .imgcard {
-  max-width: 150px;
-  max-height: 175px;
+  padding-top: 0%;
+  max-width: 125px;
+  max-height: 150px;
 }
 
 .loading-spinner{
@@ -39,3 +38,7 @@
 .titulo{
   margin-left: 400px;
 }
+
+mat-card-content{
+  text-align: justify;
+}