Implementada solução para tornar as dashboards mais confortáveis em t…

…elas menores
FelipeMarques06 · Feb 2, 2022 · 5cbde6b · 5cbde6b
1 parent ac61b85
commit 5cbde6b
Show file tree

Hide file tree

Showing 17 changed files with 81 additions and 47 deletions.
diff --git a/src/app/biblioteconomia/abnt/abnt.component.html b/src/app/biblioteconomia/abnt/abnt.component.html
@@ -5,7 +5,7 @@
     </button>
     <span>NORMAS TÉCNICAS ABNT</span>
   </mat-toolbar>
-  <mat-grid-list cols="2" rowHeight="300px">
+  <mat-grid-list [cols]="breakpoint" rowHeight="300px" (window:resize)="handleSize($event)">
     <mat-grid-tile class="container" *ngFor="let card of cards$ | async" [colspan]="card.cols" [rowspan]="card.rows">
       <mat-card class="dashboard-card">
         <mat-card-header>

diff --git a/src/app/biblioteconomia/abnt/abnt.component.ts b/src/app/biblioteconomia/abnt/abnt.component.ts
@@ -15,6 +15,7 @@ import { AbntService } from './../services/abnt.service';
 export class AbntComponent {
 
   cards$: Observable<ABNT[]>;
+  breakpoint!: number;
   usuario$= this.autenticacaoFirebaseService.usuarioLogado$;
   cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
@@ -37,4 +38,12 @@ export class AbntComponent {
         })
       )
     }
+
+    ngOnInit(): void {
+      this.breakpoint = (window.innerWidth <= 600) ? 1 : 2;
+    }
+
+    handleSize(event: any) {
+      this.breakpoint = (event.target.innerWidth <= 600) ? 1 : 2;
+      }
 }
diff --git a/src/app/biblioteconomia/basedados/basedados.component.html b/src/app/biblioteconomia/basedados/basedados.component.html
@@ -6,7 +6,7 @@
     <span>BASES DE DADOS DE BIBLIOTECONOMIA</span>
   </mat-toolbar>
   <h2 class="mat-h2">Estas são algumas Bases de Dados na área de Biblioteconomia:</h2>
-  <mat-grid-list cols="2" rowHeight="300px">
+  <mat-grid-list [cols]="breakpoint" rowHeight="300px" (window:resize)="handleSize($event)">
     <mat-grid-tile class="container" *ngFor="let card of cards$ | async" [colspan]="card.cols" [rowspan]="card.rows">
       <mat-card class="dashboard-card">
         <mat-card-header>

diff --git a/src/app/biblioteconomia/basedados/basedados.component.ts b/src/app/biblioteconomia/basedados/basedados.component.ts
@@ -15,6 +15,7 @@ import { BasedadosService } from './../services/basedados.service';
 export class BasedadosComponent {
 
   cards$: Observable<BaseDados[]>;
+  breakpoint!: number;
   usuario$= this.autenticacaoFirebaseService.usuarioLogado$;
   cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
@@ -37,4 +38,12 @@ export class BasedadosComponent {
         })
       )
     }
+
+    ngOnInit(): void {
+      this.breakpoint = (window.innerWidth <= 600) ? 1 : 2;
+    }
+
+    handleSize(event: any) {
+      this.breakpoint = (event.target.innerWidth <= 600) ? 1 : 2;
+      }
 }
diff --git a/src/app/biblioteconomia/bibvirtuais/bibvirtuais.component.html b/src/app/biblioteconomia/bibvirtuais/bibvirtuais.component.html
@@ -7,7 +7,7 @@
   </mat-toolbar>
   <h2 class="mat-h2">Estas são algumas das principais bibliotecas virtuais disponíveis nas plataformas digitais:</h2>
 
-  <mat-grid-list cols="2" rowHeight="180px">
+  <mat-grid-list [cols]="breakpoint" rowHeight="180px" (window:resize)="handleSize($event)">
     <mat-grid-tile class="container" *ngFor="let card of cards$ | async" [colspan]="card.cols" [rowspan]="card.rows">
       <mat-card class="dashboard-card">
         <mat-card-header>

diff --git a/src/app/biblioteconomia/bibvirtuais/bibvirtuais.component.ts b/src/app/biblioteconomia/bibvirtuais/bibvirtuais.component.ts
@@ -14,6 +14,7 @@ import { Component, OnInit } from '@angular/core';
 export class BibvirtuaisComponent {
 
   cards$: Observable<BibliotecasVirtuais[]>;
+  breakpoint!: number;
   usuario$= this.autenticacaoFirebaseService.usuarioLogado$;
   cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
@@ -37,4 +38,12 @@ export class BibvirtuaisComponent {
       )
     }
 
+    ngOnInit(): void {
+      this.breakpoint = (window.innerWidth <= 600) ? 1 : 2;
+    }
+
+    handleSize(event: any) {
+      this.breakpoint = (event.target.innerWidth <= 600) ? 1 : 2;
+      }
+
 }
diff --git a/src/app/criticas/critica/critica.component.html b/src/app/criticas/critica/critica.component.html
@@ -9,8 +9,8 @@
       </mat-form-field>
     </div>
     <div class="grid-container" *ngIf="result$ | async as busca">
-      <mat-grid-list cols="2" rowHeight="200px">
-        <mat-grid-tile *ngFor="let busca of result$| async"  [colspan]="busca.cols" [rowspan]="busca.rows">
+      <mat-grid-list [cols]="breakpoint" rowHeight="200px" (window:resize)="handleSize($event)">
+        <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>
@@ -36,7 +36,7 @@
       </button>
       <span>NORMAS TÉCNICAS ABNT</span>
     </mat-toolbar>
-    <mat-grid-list cols="2" rowHeight="200px">
+    <mat-grid-list [cols]="breakpoint" rowHeight="200px" (window:resize)="handleSize($event)">
       <mat-grid-tile *ngFor="let critica of criticas$ | async" [colspan]="critica.cols" [rowspan]="critica.rows">
         <mat-card class="dashboard-card">
           <mat-card-title-group>

diff --git a/src/app/criticas/critica/critica.component.ts b/src/app/criticas/critica/critica.component.ts
@@ -16,6 +16,7 @@ export class CriticaComponent {
   criticas$: Observable<Critica[]>;
   result$?: Observable<Critica[]>
   value!: string;
+  breakpoint!: number;
 
   criticas= this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
@@ -42,6 +43,7 @@ export class CriticaComponent {
   @ViewChild('searchInput') searchInput!: ElementRef
 
   ngAfterViewInit(): void {
+    this.breakpoint = (window.innerWidth <= 600) ? 1 : 2;
     fromEvent(this.searchInput.nativeElement, 'keyup').pipe(
       filter(Boolean),
       debounceTime(400),
@@ -64,4 +66,8 @@ export class CriticaComponent {
       data: resenha
     })
   }
+
+  handleSize(event: any) {
+    this.breakpoint = (event.target.innerWidth <= 600) ? 1 : 2;
+    }
 }
diff --git a/src/app/feed/feed.component.html b/src/app/feed/feed.component.html
@@ -9,7 +9,7 @@
 </div>
 
 <div *ngIf="results$ | async as search">
-  <mat-grid-list cols="2" rowHeight="350px">
+  <mat-grid-list [cols]="breakpoint" rowHeight="350px" (window:resize)="handleSize($event)">
     <mat-grid-tile *ngFor="let result of results$ | async" [colspan]="result.cols" [rowspan]="result.rows">
       <mat-card class="dashboard-card">
         <mat-card-header>
@@ -41,33 +41,8 @@ <h1 class="mat-h1" *ngIf="usuario$ | async as usuario">Bem vindo(a), {{usuario.d
 
   </form>
 
-  <mat-grid-list cols="2" rowHeight="350px">
-    <mat-grid-tile *ngFor="let card of cards$ | async" [colspan]="card.cols" [rowspan]="card.rows">
-      <mat-card class="dashboard-card">
-        <mat-card-header>
-          <div mat-card-avatar class="example-header-image"></div>
-          <mat-card-title>{{card.titulo}}</mat-card-title>
-          <mat-card-subtitle>{{card.subtitulo}}</mat-card-subtitle>
-        </mat-card-header>
-        <img mat-card-image [src]="card.img" [alt]="card.titulo">
-        <mat-card-content class="dashboard-card-content">
-          <div>{{card.conteudo}}</div>
-        </mat-card-content>
-        <mat-nav-list>
-          <mat-list-item *ngFor="let link of card.link">
-            <a matLine [href]="link.ref">{{ link.texto }}</a>
-            <button mat-icon-button matTooltip="Mais informações">
-              <mat-icon>info</mat-icon>
-            </button>
-            <mat-divider></mat-divider>
-          </mat-list-item>
-        </mat-nav-list>
-      </mat-card>
-    </mat-grid-tile>
-  </mat-grid-list>
-
-  <mat-grid-list cols="2" rowHeight="350px">
-    <mat-grid-tile *ngFor="let card of cards$ | async" [colspan]="card.cols" [rowspan]="card.rows">
+  <mat-grid-list [cols]="breakpoint" rowHeight="350px" (window:resize)="handleSize($event)">
+    <mat-grid-tile *ngFor="let card of cards$ | async"  [rowspan]="card.rows">
       <mat-card class="dashboard-card">
         <mat-card-header>
           <div mat-card-avatar class="example-header-image"></div>

diff --git a/src/app/feed/feed.component.ts b/src/app/feed/feed.component.ts
@@ -17,6 +17,7 @@ export class FeedComponent implements OnInit, AfterViewInit{
   value!: string;
   formulario!: FormGroup;
   cards$: Observable<Dashboard[]>;
+  breakpoint!: number;
   usuario$= this.autenticacaoFirebaseService.usuarioLogado$;
   cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
@@ -30,6 +31,7 @@ export class FeedComponent implements OnInit, AfterViewInit{
   @ViewChild('searchInput') searchInput!: ElementRef
 
   ngOnInit(): void {
+    this.breakpoint = (window.innerWidth <= 600) ? 1 : 2;
     this.formulario = new FormGroup({
       titulo: new FormControl('')
     })
@@ -68,4 +70,8 @@ export class FeedComponent implements OnInit, AfterViewInit{
         .subscribe();
     }
 
+    handleSize(event: any) {
+      this.breakpoint = (event.target.innerWidth <= 600) ? 1 : 2;
+      }
+
 }
diff --git a/src/app/reportagem/reportagem.component.html b/src/app/reportagem/reportagem.component.html
@@ -9,7 +9,7 @@
     apelo por bem estar pessoal, criatividade e autoconhecimento. A literatura brasileira é rica de grandes
     obras escritas por artistas consagrados e reconhecidos mundialmente.
   </mat-card>
-  <mat-grid-list cols="2" rowHeight="350px">
+  <mat-grid-list [cols]="breakpoint" rowHeight="350px" (window:resize)="handleSize($event)">
     <mat-grid-tile *ngFor="let reportagem of reportagem$ | async" [colspan]="reportagem.cols" [rowspan]="reportagem.rows">
       <mat-card class="reportagem-card">
         <img mat-card-image [src]="reportagem.img" alt="Livros">

diff --git a/src/app/reportagem/reportagem.component.ts b/src/app/reportagem/reportagem.component.ts
@@ -1,5 +1,5 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { catchError, Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -16,6 +16,7 @@ export class ReportagemComponent {
 
   reportagem$: Observable<Reportagem[]>;
   usuario$= this.autenticacaoFirebaseService.usuarioLogado$;
+  breakpoint!: number;
   reportagens= this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
       if (matches) {
@@ -37,4 +38,12 @@ export class ReportagemComponent {
         })
       )
     }
+
+    ngOnInit(): void {
+      this.breakpoint = (window.innerWidth <= 600) ? 1 : 2;
+    }
+
+    handleSize(event: any) {
+      this.breakpoint = (event.target.innerWidth <= 600) ? 1 : 2;
+      }
 }
diff --git a/src/app/sagas/sagas.component.html b/src/app/sagas/sagas.component.html
@@ -9,8 +9,8 @@
       </mat-form-field>
     </div>
     <div class="grid-container" *ngIf="result$ | async as busca">
-      <mat-grid-list cols="2" rowHeight="250px">
-        <mat-grid-tile *ngFor="let busca of result$| async"  [colspan]="busca.cols" [rowspan]="busca.rows">
+      <mat-grid-list [cols]="breakpoint" rowHeight="250px" (window:resize)="handleSize($event)">
+        <mat-grid-tile *ngFor="let busca of result$| async">
           <mat-card class="dashboard-card">
             <mat-card-header>
               <div mat-card-avatar class="example-header-image"></div>
@@ -34,8 +34,8 @@
       </button>
       <span>AS 10 SAGAS LITERÁRIAS MAIS FAMOSAS</span>
     </mat-toolbar>
-    <mat-grid-list cols="2" rowHeight="250px">
-      <mat-grid-tile *ngFor="let sagas of sagas$ | async" [colspan]="sagas.cols" [rowspan]="sagas.rows">
+    <mat-grid-list [cols]="breakpoint" rowHeight="250px" (window:resize)="handleSize($event)">
+      <mat-grid-tile *ngFor="let sagas of sagas$ | async">
         <mat-card class="dashboard-card">
           <mat-card-header>
             <div mat-card-avatar class="example-header-image"></div>

diff --git a/src/app/sagas/sagas.component.ts b/src/app/sagas/sagas.component.ts
@@ -6,7 +6,6 @@ import { catchError, fromEvent, Observable,filter, debounceTime, distinctUntilCh
 import { SagasService } from '../servicosInterface/sagas.service';
 import { map } from 'rxjs/operators';
 import { SagasDialogoComponent } from '../sagas-dialogo/sagas-dialogo.component';
-import { ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-sagas',
@@ -18,6 +17,7 @@ export class SagasComponent implements AfterViewInit {
   sagas$: Observable<Sagas[]>;
   result$?: Observable<Sagas[]>
   value!: string;
+  breakpoint!: number;
 
   sagas= this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
@@ -44,6 +44,7 @@ export class SagasComponent implements AfterViewInit {
   @ViewChild('searchInput') searchInput!: ElementRef
 
   ngAfterViewInit(): void {
+    this.breakpoint = (window.innerWidth <= 700) ? 1 : 2;
     fromEvent(this.searchInput.nativeElement, 'keyup').pipe(
       filter(Boolean),
       debounceTime(400),
@@ -61,6 +62,10 @@ export class SagasComponent implements AfterViewInit {
     ).subscribe()
   }
 
+  handleSize(event: any) {
+    this.breakpoint = (event.target.innerWidth <= 700) ? 1 : 2;
+    }
+
   abrirSagas(livros: [{nome:string}]){
     this.telaSagas.open(SagasDialogoComponent,{
       data: livros

diff --git a/src/app/sugestoes/sugestoes.component.html b/src/app/sugestoes/sugestoes.component.html
@@ -8,8 +8,8 @@
       </mat-form-field>
     </div>
     <div class="grid-container" *ngIf="result$ | async as busca">
-      <mat-grid-list cols="2" rowHeight="180px">
-        <mat-grid-tile *ngFor="let busca of result$ | async" [colspan]="busca.cols" [rowspan]="busca.rows">
+      <mat-grid-list [cols]="breakpoint" rowHeight="180px" (window:resize)="handleSize($event)">
+        <mat-grid-tile *ngFor="let busca of result$ | async">
           <mat-card class="dashboard-card">
             <mat-card-header>
               <mat-card-title>{{busca.titulo}}</mat-card-title>
@@ -32,8 +32,8 @@
       </button>
       <span>SUGESTÕES DE LIVROS</span>
     </mat-toolbar>
-    <mat-grid-list cols="2" rowHeight="180px">
-      <mat-grid-tile *ngFor="let card of cards$ | async" [colspan]="card.cols" [rowspan]="card.rows">
+    <mat-grid-list [cols]="breakpoint" rowHeight="180px" (window:resize)="handleSize($event)">
+      <mat-grid-tile *ngFor="let card of cards$ | async">
         <mat-card class="dashboard-card">
           <mat-card-header>
             <!-- <div mat-card-avatar class="example-header-image"></div> -->

diff --git a/src/app/sugestoes/sugestoes.component.ts b/src/app/sugestoes/sugestoes.component.ts
@@ -17,6 +17,7 @@ export class SugestoesComponent {
   cards$: Observable <Sugestoes[]>;
   result$?: Observable<Sugestoes[]>
   value!: string;
+  breakpoint!: number;
 
   cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
     map(({ matches }) => {
@@ -42,6 +43,7 @@ export class SugestoesComponent {
   @ViewChild('searchInput') searchInput!: ElementRef
 
   ngAfterViewInit(): void {
+    this.breakpoint = (window.innerWidth <= 600) ? 1 : 2;
     fromEvent(this.searchInput.nativeElement, 'keyup').pipe(
       filter(Boolean),
       debounceTime(400),
@@ -58,4 +60,8 @@ export class SugestoesComponent {
       })
     ).subscribe()
   }
+
+  handleSize(event: any) {
+    this.breakpoint = (event.target.innerWidth <= 600) ? 1 : 2;
+    }
 }
diff --git a/src/assets/dashboard.json b/src/assets/dashboard.json
@@ -8,8 +8,8 @@
       {"ref":"https://www.theenemy.com.br/social/criticas/review-the-witcher-temporada-2#:~:text=Honestamente%2C%20a%20breve%20apari%C3%A7%C3%A3o%20da,Ciri%20em%20termos%20de%20magia.", "texto":"The Enemy"},
       {"ref":"https://jovemnerd.com.br/nerdbunker/the-witcher-vale-a-pena-os-livros/","texto":"Jovem Nerd"}
     ],
-    "cols": 2,
-    "rows": 3
+    "cols": 1,
+    "rows": 2
   },
   {
     "titulo": "Dica de Livros: Ler e Pensar",