yvachot/PolyNotFound
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

amelioration du style de la partie user

Browse source
This commit is contained in:
MiharyR 2021-11-21 12:56:11 +01:00
parent 3dce1f6865
commit 7c24996e73
18 changed files with 137 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

55
src/app/user/search/page-search/page-search.component.html
View file

@ -10,34 +10,39 @@
<!-- --------------------------------------------------------------------- -->
<!-- [Search bar] + [Site de streaming] -->
<div class="row">
<div class="col-2"></div>
<div class="col-8" style="margin-bottom: 10px">
<!-- [Search bar] + [Sites de streaming] -->
<div style="width: 100%; margin: 0 auto;">
<!-- Search bar -->
<div class="row" style="margin-bottom: 10px">
<div>
<input type="search" placeholder="recherche..." class="inputSearchBar" [(ngModel)]="search"> &nbsp;
<button class="btnRechercher" (click)="onSearch()"> Rechercher </button>
</div>
<!-- Search bar -->
<div class="input-group" style="width: 100%; margin: 0 auto;">
<div class="form-outline" style="width: 100%; margin: 0 auto;">
<input type="search" placeholder="recherche..." class="inputSearchBar"/>
<button mat-icon-button (click)="onSearch()">
<mat-icon>search</mat-icon>
</button>
</div>
<!-- Site de streaming -->
<div class="row" style="margin-bottom: 10px">
<div>
<span *ngFor="let plateforme of tabPlateform">
&nbsp;
<input type="checkbox" [id]="plateforme.name" [name]="plateforme.name" style="margin-left: 5px" [(ngModel)]="plateforme.isSelected">
<img [src]="'/assets/logo_plateforms/'+plateforme.name+'.png'" alt="image" width="25px" height="25px" style="margin-left: 5px">
<label [for]="plateforme.name" style="margin-left: 5px"> {{plateforme.name}}</label>
&nbsp;
</span>
</div>
</div>
</div>
<div class="col-2"></div>
<!-- Sites de streaming -->
<div style="margin-bottom: 20px">
<!-- youtube -->
<span>
&nbsp;
<mat-checkbox id="youtube" name="youtube" style="margin-left: 5px" [(ngModel)]="tabPlateform[0].isSelected"></mat-checkbox>
<img src="/assets/logo_plateforms/youtube.png" alt="logo" width="30px" height="25px" style="margin-left: 5px">
<label for="youtube" style="margin-left: 5px">youtube</label>
&nbsp;
</span>
<!-- dailymotion -->
<span>
&nbsp;
<mat-checkbox id="dailymotion" name="dailymotion" style="margin-left: 5px" [(ngModel)]="tabPlateform[1].isSelected"></mat-checkbox>
<img src="/assets/logo_plateforms/dailymotion.png" alt="logo" width="25px" height="25px" style="margin-left: 5px">
<label for="dailymotion" style="margin-left: 5px">dailymotion</label>
&nbsp;
</span>
</div>
</div>

28
src/app/user/search/page-search/page-search.component.scss
View file

@ -17,13 +17,10 @@
//--------------------------------------------------------------------------------------------
.inputSearchBar {
width: 50%;
width: 40%;
font-size: large;
}
.btnRechercher {
border: solid black 1px;
border-bottom: 10px;
border-radius: 5px;
font-size: large;
}
//--------------------------------------------------------------------------------------------
@ -70,3 +67,24 @@
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
// -------------------------------------------------------------------------
// 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 {
border: solid 1px black !important;
background-color: white !important;
}