correction de CSS

src/app/advertiser/manageAds/drag-and-drop/drag-and-drop.component.html

@@ -1,7 +1,7 @@
 <div title="bobo" class="container" appDragAndDrop (fileDropped)="onFileDropped($event)">
     <input type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
-    <h3>Images</h3>
-    <img src="/src/assets/uploadFile.png" width="50" height="50" style="margin-top: 5px">
+    <div style="font-weight: bold">Images</div>
+    <img src="/assets/uploadFile.png" width="50" height="50" style="margin-top: 5px">
     <div style="font-style: italic; margin-top: 10px">Glisser déposer</div>
     <div style="font-style: italic">ou</div>
     <div style="font-style: italic" for="fileDropRef">Cliquer pour selectionner</div>

src/app/advertiser/manageAds/drag-and-drop/drag-and-drop.component.scss

@@ -1,6 +1,6 @@
 .container {
   width: 450px;
-  height: 220px;
+  height: 180px;
   padding: 20px 0px 20px 0px;
   text-align: center;
   border: dashed 1px #979797;
@@ -19,14 +19,6 @@ input {
 }
 
 
-h3 {
-  font-size: 20px;
-  font-weight: 600;
-  color: #38424c;
-}
-
-
-
 .fileover {
   animation: shake 1s;
   animation-iteration-count: infinite;

src/app/advertiser/manageAds/input-tags/input-tags.component.html

@@ -1,4 +1,4 @@
-<mat-form-field class="example-chip-list" appearance="fill">
+<mat-form-field class="example-chip-list" appearance="fill" style="font-size: small">
 
     <!-- ------------------------------------------------------------------------------------ -->
 

src/app/advertiser/manageAds/page-advertiser/page-advertiser.component.html

@@ -120,6 +120,9 @@
             </tr>
 
         </table>
+        <div style="width: 94%; margin: auto auto">
+            <mat-paginator [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons aria-label="Select page of periodic elements"></mat-paginator>
+        </div>
         <br><br>
 
     </div>

src/app/advertiser/manageAds/page-advertiser/page-advertiser.component.scss

@@ -2,6 +2,7 @@
   max-width: 100vw;
   height: 100vh;
   overflow-x: hidden;
+  font-size: small;
 }
 
 
@@ -12,8 +13,8 @@
   margin-left: 3%;
   font-size: larger;
   padding: 5px 20px 5px 20px;
+  font-size: small;
 }
-
 .lightTheme .btnAjouter {
   border-top: solid 1px #dcdcdc;
   border-right: solid 1px #dcdcdc;
@@ -21,7 +22,6 @@
   color: black;
   background-color: white;
 }
-
 .darkTheme .btnAjouter {
   border-top: solid 1px white;
   border-right: solid 1px white;
@@ -41,6 +41,7 @@
 table {
   margin: 0 auto;
   width: 94%;
+  font-size: small;
 }
 .darkTheme table { border: solid 2px white; }
 
@@ -48,16 +49,12 @@ th.mat-sort-header-sorted {
   color: black;
 }
 
-.lightTheme td {
-
-}
-.darkTheme td {
-  background-color: #646464;
-  color: white;
+td {
+  font-size: small;
 }
 
 input {
-  width: 25%;
-  font-size: x-large;
+  width: 30%;
+  font-size: large;
   border-radius: 5px;
 }

src/app/advertiser/manageAds/page-advertiser/page-advertiser.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {MatSort} from "@angular/material/sort";
 import {ThemeService} from "../../../utils/services/theme/theme.service";
 import {FictitiousDatasService} from "../../../utils/services/fictitiousDatas/fictitious-datas.service";
@@ -9,6 +9,7 @@ import {PopupAddOrUpdateAdComponent} from "../popup-add-or-update-ad/popup-add-o
 import {MatSnackBar} from "@angular/material/snack-bar";
 import {PopupDeleteAdComponent} from "../popup-delete-ad/popup-delete-ad.component";
 import {PopupVisualizeAdComponent} from "../popup-visualize-ad/popup-visualize-ad.component";
+import {MatPaginator} from "@angular/material/paginator";
 
 
 
@@ -17,11 +18,12 @@ import {PopupVisualizeAdComponent} from "../popup-visualize-ad/popup-visualize-a
   templateUrl: './page-advertiser.component.html',
   styleUrls: ['./page-advertiser.component.scss']
 })
-export class PageAdvertiserComponent implements OnInit
+export class PageAdvertiserComponent implements AfterViewInit
 {
     displayedColumns: string[] = [ 'title', 'tags', 'createdAt', 'lastUpdate', 'views', 'isVisible', 'update', 'delete', 'visualisation' ];
     dataSource ;
     @ViewChild(MatSort) sort: MatSort;
+    @ViewChild(MatPaginator) paginator: MatPaginator;
 
 
     constructor( public themeService: ThemeService,
@@ -30,12 +32,14 @@ export class PageAdvertiserComponent implements OnInit
                  private snackBar: MatSnackBar ) { }
 
 
-    ngOnInit(): void
+    ngAfterViewInit(): void
     {
         // --- FAUX CODE ---
         const tabAdvert = this.fictitiousDatasService.getTabAdvert(8);
         this.dataSource = new MatTableDataSource<Advert>(tabAdvert);
         this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+        this.dataSource = this.dataSource;
     }
 
 

src/app/advertiser/manageAds/popup-add-or-update-ad/popup-add-or-update-ad.component.scss

@@ -2,11 +2,12 @@
   background-image: none;
   overflow-y: hidden;
   overflow-x: hidden;
+  font-size: small;
 }
 
 h1 {
   text-align: center;
-  font-size: xx-large;
+  font-size: large;
   padding-bottom: 10px;
 }
 
@@ -14,7 +15,6 @@ h1 {
 // -------------------------------------------------------------------------
 
 
-
 .commentContainer {
   width: 100%;
 }
@@ -23,6 +23,10 @@ h1 {
   border: solid 1px grey;
 }
 
+button {
+  font-size: small;
+}
+
 
 // -------------------------------------------------------------------------
 // --- LightTheme ---

src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.scss

@@ -1,3 +1,11 @@
+.boite {
+  font-size: small;
+}
+
+button {
+  font-size: small;
+}
+
 img {
   margin: 0px 0px 10px 0px;
   width: 5vw;
@@ -6,3 +14,20 @@ img {
   border-radius: 50%;
   font-size: xxx-large;
 }
+
+// -------------------------------------------------------------------------
+
+// aura
+::ng-deep .mat-checkbox-ripple .mat-ripple-element {
+  background-color: grey !important;
+}
+
+// contenu coche
+::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background {
+  background-color: black !important;
+}
+
+// indeterminate
+::ng-deep .mat-checkbox .mat-checkbox-frame {
+  background-color: white !important;
+}

src/app/advertiser/myProfil/popup-update-advertiser/popup-update-advertiser.component.ts

@@ -40,6 +40,7 @@ export class PopupUpdateAdvertiserComponent implements OnInit
             gender: advertiser0.gender,
             interests: [],
             isActive: advertiser0.isActive,
+            isAccepted: advertiser0.isAccepted,
             createdAt: advertiser0.createdAt,
             updatedAt: advertiser0.updatedAt,
         };

src/app/advertiser/navbar-advertiser/navbar-advertiser.component.scss

@@ -1,7 +1,7 @@
 .navbar {
   background-color: black;
-  height: 75px;
-  font-size: x-large;
+  height: 50px;
+  font-size: medium;
   color: white;
 }
 
@@ -17,9 +17,8 @@
 .navbar-brand {
   font-family: cursive;
   font-weight: bold;
-  //font-style: oblique 90deg;
-  font-size: xxx-large;
-  margin-left: 30px;
+  font-size: x-large;
+  margin-left: 15px;
   color: white;
 }
 
@@ -35,7 +34,7 @@
 
 // Bonton deconnexion
 .btnDeconnexion {
-  font-size: x-large;
+  font-size: medium;
   margin: 0px 10px 0px 10px
 }
 .btnDeconnexion:hover {
@@ -52,8 +51,8 @@ img {
   border: solid 2px white;
   border-radius: 50px;
   margin: 0px 10px 0px 15px;
-  width: 50px;
-  height: 50px;
+  width: 40px;
+  height: 40px;
 }
 img:hover {
   cursor: pointer;