Merge pull request #119 from FelipeMarques06/melhoriasVisuais

Melhorias no CDD e na toolbar das páginas
FelipeMarques06 · Feb 2, 2022 · ac61b85 · ac61b85
2 parents 6b2692d + 6210ff6
commit ac61b85
Show file tree

Hide file tree

Showing 30 changed files with 134 additions and 96 deletions.
diff --git a/src/app/ajuda/ajuda.component.html b/src/app/ajuda/ajuda.component.html
@@ -1,6 +1,11 @@
 
 <div class="grid-container">
-  <h1>Possíveis Erros do BookShelf</h1>
+  <mat-toolbar color="accent">
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with error_outline icon" matTooltip="Erros">
+      <mat-icon>error_outline</mat-icon>
+    </button>
+    <span>POSSÍVEIS ERROS</span>
+  </mat-toolbar>
 
   <mat-accordion>
     <mat-expansion-panel (opened)="panelOpenState = true"

diff --git a/src/app/artes/artes.component.html b/src/app/artes/artes.component.html
@@ -1,9 +1,10 @@
 <mat-card>
   <div *ngIf=" livrosArtes$ | async as livrosArtes; else loading;">
     <mat-toolbar color="accent">
-      <div class="titulo">
-        <h1 class="mat-h1"> OS 10 PRINCIPAIS LIVROS DE ARTES</h1>
-      </div>
+      <button mat-icon-button class="example-icon" aria-label="Example icon-button with color_lens icon" matTooltip="Artes">
+        <mat-icon>color_lens</mat-icon>
+      </button>
+      <span>OS 10 PRINCIPAIS LIVROS DE ARTES</span>
     </mat-toolbar>
     <table mat-table [dataSource]="livrosArtes" class="mat-elevation-z8">
 

diff --git a/src/app/artes/artes.component.scss b/src/app/artes/artes.component.scss
@@ -1,5 +1,6 @@
 table {
   width: 100%;
+  text-align: center;
 }
 .example-spacer {
   flex: 1 1 auto;
@@ -18,3 +19,9 @@ table {
 .titulo{
   margin-left: 350px;
 }
+
+.mat-header-cell{
+  text-transform: uppercase;
+  font-size: 15px;
+  text-align: center;
+}
diff --git a/src/app/biblioteconomia/abnt/abnt.component.html b/src/app/biblioteconomia/abnt/abnt.component.html
@@ -1,8 +1,9 @@
 <div class="grid-container" *ngIf="cards$ | async as card; else loading">
   <mat-toolbar color="accent">
-    <div class="titulo">
-      <h1 class="mat-h1"> NORMAS TÉCNICAS ABNT </h1>
-    </div>
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with collections_bookmark icon" matTooltip="ABNT">
+      <mat-icon>collections_bookmark</mat-icon>
+    </button>
+    <span>NORMAS TÉCNICAS ABNT</span>
   </mat-toolbar>
   <mat-grid-list cols="2" rowHeight="300px">
     <mat-grid-tile class="container" *ngFor="let card of cards$ | async" [colspan]="card.cols" [rowspan]="card.rows">

diff --git a/src/app/biblioteconomia/basedados/basedados.component.html b/src/app/biblioteconomia/basedados/basedados.component.html
@@ -1,8 +1,9 @@
 <div class="grid-container" *ngIf="cards$ | async as card; else loading">
   <mat-toolbar color="accent">
-    <div class="titulo">
-      <h1 class="mat-h1"> BASES DE DADOS DE BIBLIOTECONOMIA </h1>
-    </div>
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with collections_bookmark icon" matTooltip="Base">
+      <mat-icon>collections_bookmark</mat-icon>
+    </button>
+    <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">

diff --git a/src/app/biblioteconomia/bibvirtuais/bibvirtuais.component.html b/src/app/biblioteconomia/bibvirtuais/bibvirtuais.component.html
@@ -1,8 +1,9 @@
 <div class="grid-container" *ngIf="cards$ | async as card; else loading">
   <mat-toolbar color="accent">
-    <div class="titulo">
-      <h1 class="mat-h1"> BIBLIOTECAS VIRTUAIS</h1>
-    </div>
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with collections_bookmark icon" matTooltip="Bib Virtual">
+      <mat-icon>collections_bookmark</mat-icon>
+    </button>
+    <span>BIBLIOTECAS VIRTUAIS</span>
   </mat-toolbar>
   <h2 class="mat-h2">Estas são algumas das principais bibliotecas virtuais disponíveis nas plataformas digitais:</h2>
 

diff --git a/src/app/biblioteconomia/isbn/isbn.component.html b/src/app/biblioteconomia/isbn/isbn.component.html
@@ -1,4 +1,10 @@
 <div class="grid-container">
+  <mat-toolbar color="accent">
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with qr_code_scanner icon" matTooltip="ISBN">
+      <mat-icon>qr_code_scanner</mat-icon>
+    </button>
+    <span>ISBN</span>
+  </mat-toolbar>
   <mat-grid-list cols="2" rowHeight="2:1">
     <mat-grid-tile [colspan]="2" [rowspan]="2"><img class="imgtitulo" src="../../assets/imagens/isbnbn.png"></mat-grid-tile>
   </mat-grid-list>

diff --git a/src/app/biblioteconomia/isbn/isbn.component.scss b/src/app/biblioteconomia/isbn/isbn.component.scss
@@ -6,20 +6,23 @@
 .titulo {
   font-size: 40px;
   text-align: center;
+  margin-bottom: 30px;
+
 }
 
 .subtitulo {
   font-size: 30px;
   text-align: center;
 }
 
-mat-grid-tile {
-  margin: 0 auto;
-}
+// mat-grid-tile {
+//   margin: 0 auto;
+// }
 
 .imgtitulo {
   display: block;
   width: 100%;
+  margin-top: 0%;
  }
 
  .imagem {
@@ -35,9 +38,17 @@ mat-grid-tile {
 }
 
 .grid-container {
-  margin: 20px;
+  margin: 5px;
   max-width: 1080px;
   margin-left: auto;
   margin-right: auto;
   text-align: center;
 }
+
+// .grid1{
+//   margin-right: 30px;
+// }
+
+mat-list{
+  justify-content: center;
+}
diff --git a/src/app/cdd/classes/classes.component.scss b/src/app/cdd/classes/classes.component.scss
@@ -1,5 +1,6 @@
 table {
   width: 100%;
+  text-align: center;
 }
 .example-spacer {
   flex: 1 1 auto;
@@ -17,3 +18,9 @@ table {
 .resultado-pesquisa {
   margin: 8px 0;
 }
+
+.mat-header-cell{
+  text-transform: uppercase;
+  font-size: 15px;
+  text-align: center;
+}
diff --git a/src/app/criticas/critica/critica.component.html b/src/app/criticas/critica/critica.component.html
@@ -31,9 +31,10 @@
 
   <div class="grid-container" *ngIf="criticas$ | async as critica; else loading">
     <mat-toolbar color="accent">
-      <div class="titulo">
-        <h1 class="mat-h1"> CRÍTICAS LITERÁRIAS</h1>
-      </div>
+      <button mat-icon-button class="example-icon" aria-label="Example icon-button with sticky_note_2 icon" matTooltip="Crítica">
+        <mat-icon>sticky_note_2</mat-icon>
+      </button>
+      <span>NORMAS TÉCNICAS ABNT</span>
     </mat-toolbar>
     <mat-grid-list cols="2" rowHeight="200px">
       <mat-grid-tile *ngFor="let critica of criticas$ | async" [colspan]="critica.cols" [rowspan]="critica.rows">

diff --git a/src/app/direito/direito.component.html b/src/app/direito/direito.component.html
@@ -1,9 +1,10 @@
 <mat-card>
   <div *ngIf=" livrosDireito$ | async as livrosDireito; else loading;">
     <mat-toolbar color="accent">
-      <div class="titulo">
-        <h1 class="mat-h1"> OS 10 PRINCIPAIS LIVROS DE DIREITO</h1>
-      </div>
+      <button mat-icon-button class="example-icon" aria-label="Example icon-button with gavel icon" matTooltip="Direito">
+        <mat-icon>gavel</mat-icon>
+      </button>
+      <span>OS 10 PRINCIPAIS LIVROS DE DIREITO</span>
     </mat-toolbar>
      <table mat-table [dataSource]="livrosDireito" class="mat-elevation-z8">
 

diff --git a/src/app/direito/direito.component.scss b/src/app/direito/direito.component.scss
@@ -1,5 +1,6 @@
 table {
   width: 100%;
+  text-align: center;
 }
 .example-spacer {
   flex: 1 1 auto;
@@ -15,6 +16,9 @@ table {
   margin: 0.5rem;
 }
 
-.titulo{
-  margin-left: 350px;
+.mat-header-cell{
+  text-transform: uppercase;
+  font-size: 15px;
+  text-align: center;
 }
+
diff --git a/src/app/duvidas/duvidas.component.html b/src/app/duvidas/duvidas.component.html
@@ -1,6 +1,10 @@
 <div class="grid-container">
-  <h1>Dúvidas Frequentes</h1>
-
+  <mat-toolbar color="accent">
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with help_outline icon" matTooltip="Dúvidas">
+      <mat-icon>help_outline</mat-icon>
+    </button>
+    <span>DÚVIDAS FREQUENTES</span>
+  </mat-toolbar>
   <mat-accordion>
     <mat-expansion-panel (opened)="panelOpenState = true"
                          (closed)="panelOpenState = false">

diff --git a/src/app/empreendedorismo/empreendedorismo.component.html b/src/app/empreendedorismo/empreendedorismo.component.html
@@ -1,9 +1,10 @@
 <mat-card>
   <div *ngIf=" livrosEmpreendedorismo$ | async as livrosEmpreendedorismo; else loading;">
     <mat-toolbar color="accent">
-      <div class="titulo">
-        <h1 class="mat-h1"> OS 10 PRINCIPAIS LIVROS DE EMPREENDEDORISMO</h1>
-      </div>
+      <button mat-icon-button class="example-icon" aria-label="Example icon-button with paid icon" matTooltip="Empreendedorismo">
+        <mat-icon>paid</mat-icon>
+      </button>
+      <span>OS 10 PRINCIPAIS LIVROS DE EMPREENDEDORISMO</span>
     </mat-toolbar>
 
     <table mat-table [dataSource]="livrosEmpreendedorismo$" class="mat-elevation-z8">

diff --git a/src/app/empreendedorismo/empreendedorismo.component.scss b/src/app/empreendedorismo/empreendedorismo.component.scss
@@ -1,5 +1,6 @@
 table {
   width: 100%;
+  text-align: center;
 }
 .example-spacer {
   flex: 1 1 auto;
@@ -15,6 +16,8 @@ table {
   margin: 0.5rem;
 }
 
-.titulo{
-  margin-left: 325px;
+.mat-header-cell{
+  text-transform: uppercase;
+  font-size: 15px;
+  text-align: center;
 }
diff --git a/src/app/navegacao/navegacao.component.html b/src/app/navegacao/navegacao.component.html
@@ -15,7 +15,7 @@
       <mat-expansion-panel hideToggle>
         <mat-expansion-panel-header>
           <mat-icon>home</mat-icon>
-          <mat-panel-title>
+          <mat-panel-title >
             Menu Principal
           </mat-panel-title>
         </mat-expansion-panel-header>

diff --git a/src/app/navegacao/navegacao.component.scss b/src/app/navegacao/navegacao.component.scss
@@ -30,5 +30,12 @@
 }
 
 .emailLateral{
-  padding: 5px;
+  padding: 8px;
+  background-color: #7E57C2;
+  text-align: center;
+  color: white;
+}
+
+mat-panel-title {
+  color: #7E57C2;
 }
diff --git a/src/app/psicologia/psicologia/psicologia.component.html b/src/app/psicologia/psicologia/psicologia.component.html
@@ -1,9 +1,10 @@
 <mat-card>
   <div *ngIf=" livrosPsicologia$ | async as livrosPsicologia; else loading;">
     <mat-toolbar color="accent">
-      <div class="titulo">
-        <h1 class="mat-h1"> OS 10 PRINCIPAIS LIVROS DA PSICOLOGIA CLÁSSICA E CONTEMPORÂNEA</h1>
-      </div>
+      <button mat-icon-button class="example-icon" aria-label="Example icon-button with psychology icon" matTooltip="Psicologia">
+        <mat-icon>psychology</mat-icon>
+      </button>
+      <span>OS 10 PRINCIPAIS LIVROS DA PSICOLOGIA CLÁSSICA E CONTEMPORÂNEA</span>
     </mat-toolbar>
     <table mat-table [dataSource]="livrosPsicologia" class="mat-elevation-z8">
 

diff --git a/src/app/psicologia/psicologia/psicologia.component.scss b/src/app/psicologia/psicologia/psicologia.component.scss
@@ -1,5 +1,6 @@
 table {
   width: 100%;
+  text-align: center;
 }
 .example-spacer {
   flex: 1 1 auto;
@@ -15,6 +16,8 @@ table {
   margin: 0.5rem;
 }
 
-.titulo{
-  margin-left: 200px;
+.mat-header-cell{
+  text-transform: uppercase;
+  font-size: 15px;
+  text-align: center;
 }
diff --git a/src/app/reportagem/reportagem.component.html b/src/app/reportagem/reportagem.component.html
@@ -1,13 +1,14 @@
 <div class="grid-container">
   <mat-toolbar color="accent">
-    <div class="titulo">
-      <h1 class="mat-h1" *ngIf="usuario$ | async as usuario"> REPORTAGENS ESPECIAIS DO MÊS DE JANEIRO</h1>
-    </div>
+    <button mat-icon-button class="example-icon" aria-label="Example icon-button with video_camera_front icon" matTooltip="Reportagens Especiais">
+      <mat-icon>video_camera_front</mat-icon>
+    </button>
+    <span>REPORTAGENS ESPECIAIS DO MÊS DE JANEIRO</span>
   </mat-toolbar>
-  <p class="mat-h3">Os livros exibidos são destaque do mês de janeiro de 2022. Com gêneros variados, eles possuem grande
+  <mat-card class="mat-h3">Os livros exibidos são destaque do mês de janeiro de 2022. Com gêneros variados, eles possuem grande
     apelo por bem estar pessoal, criatividade e autoconhecimento. A literatura brasileira é rica de grandes
     obras escritas por artistas consagrados e reconhecidos mundialmente.
-  </p>
+  </mat-card>
   <mat-grid-list cols="2" rowHeight="350px">
     <mat-grid-tile *ngFor="let reportagem of reportagem$ | async" [colspan]="reportagem.cols" [rowspan]="reportagem.rows">
       <mat-card class="reportagem-card">

diff --git a/src/app/reportagem/reportagem.component.scss b/src/app/reportagem/reportagem.component.scss
@@ -19,13 +19,14 @@
 
 .reportagem-card-content {
   text-align: center;
+  padding-top: 15px;
 }
 
 .titulo-cont {
   text-align: left;
 }
 
-.titulo{
-  margin-left: 200px;
+.mat-h3{
+  text-align: justify;
 }
 
diff --git a/src/app/sagas/sagas.component.html b/src/app/sagas/sagas.component.html
@@ -9,7 +9,7 @@
       </mat-form-field>
     </div>
     <div class="grid-container" *ngIf="result$ | async as busca">
-      <mat-grid-list cols="2" rowHeight="350px">
+      <mat-grid-list cols="2" rowHeight="250px">
         <mat-grid-tile *ngFor="let busca of result$| async"  [colspan]="busca.cols" [rowspan]="busca.rows">
           <mat-card class="dashboard-card">
             <mat-card-header>
@@ -29,37 +29,12 @@
 
   <div class="grid-container" *ngIf="sagas$ | async as sagas; else loading">
     <mat-toolbar color="accent">
-      <div class="titulo">
-        <h1 class="mat-h1"> 10 PRINCIPAIS SAGAS LITERÁRIAS</h1>
-      </div>
+      <button mat-icon-button class="example-icon" aria-label="Example icon-button with history_edu icon" matTooltip="Sagas">
+        <mat-icon>history_edu</mat-icon>
+      </button>
+      <span>AS 10 SAGAS LITERÁRIAS MAIS FAMOSAS</span>
     </mat-toolbar>
-    <!-- <div>
-      <div>
-        <mat-form-field appearance="fill">
-          <mat-label>Buscar</mat-label>
-          <input matInput #searchInput />
-          <mat-icon matSuffix>search</mat-icon>
-        </mat-form-field>
-      </div>
-      <div class="grid-container" *ngIf="result$ | async as busca">
-        <mat-grid-list cols="2" rowHeight="350px">
-          <mat-grid-tile *ngFor="let busca of result$| async"  [colspan]="busca.cols" [rowspan]="busca.rows">
-            <mat-card class="dashboard-card">
-              <mat-card-header>
-                <div mat-card-avatar class="example-header-image"></div>
-                <mat-card-title>{{busca.titulo}}</mat-card-title>
-                <mat-card-subtitle>{{busca.autor}}</mat-card-subtitle>
-              </mat-card-header>
-              <img mat-card-image class="imgcard" [src]="busca.img" [alt]="busca.titulo" (click)="abrirSagas(busca.livros)" >
-              <mat-card-content class="dashboard-card-content">
-                <div>{{busca.descricao}}</div>
-              </mat-card-content>
-            </mat-card>
-          </mat-grid-tile>
-        </mat-grid-list>
-      </div>
-    </div> -->
-    <mat-grid-list cols="2" rowHeight="350px">
+    <mat-grid-list cols="2" rowHeight="250px">
       <mat-grid-tile *ngFor="let sagas of sagas$ | async" [colspan]="sagas.cols" [rowspan]="sagas.rows">
         <mat-card class="dashboard-card">
           <mat-card-header>