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

ameloriation du style de la partie user

Browse source
This commit is contained in:
MiharyR 2021-11-24 21:34:27 +01:00
parent 1e5b9bd49c
commit cd1f323686
26 changed files with 333 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/app/user/search/video-grid/video-grid.component.html
View file

@ -2,7 +2,7 @@
<!-- Grille -->
<div style="height: 93%">
<div style="height: 93%; background-color: white; padding-top: 7px;">
<mat-grid-list cols="3" rowHeight="33%">
<mat-grid-tile colspan="1" rowspan="1" *ngFor="let k of [0,1,2,3,4,5,6,7,8]">
<div class="myCell" *ngIf="indexPage+k < tabVideo.length" [title]="tabVideo[indexPage+k].title">
@ -19,13 +19,13 @@
<mat-grid-list cols="12" style="margin: 0px 0px 0px 0px; font-size: small">
<!-- logo -->
<mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video">
<mat-grid-tile [colspan]="2" [rowspan]="2" class="mat-grid-tile-info-video" (click)="onVideo(tabVideo[indexPage+k])">
<img *ngIf="tabVideo[indexPage+k].source==='youtube'" src="/assets/logo_plateforms/youtube.png" alt="ytb" width="20px" height="15px">
<img *ngIf="tabVideo[indexPage+k].source==='dailymotion'" src="/assets/logo_plateforms/dailymotion.png" alt="dlm" width="20px" height="20px">
</mat-grid-tile>
<!-- title + views + publishedAt -->
<mat-grid-tile [colspan]="8" [rowspan]="2" class="mat-grid-tile-info-video">
<mat-grid-tile [colspan]="8" [rowspan]="2" class="mat-grid-tile-info-video" (click)="onVideo(tabVideo[indexPage+k])">
<div style="position: absolute; left: 1px; text-align: left">
{{tronquage(tabVideo[indexPage+k].title)}}
<br>
@ -54,7 +54,7 @@
<!-- Paginator -->
<div class="btnContainer">
<div class="paginatorContainer">
<!-- btn précédent -->
<button mat-button class="btnPaginator" [disabled]="indexPage<=0" (click)="indexPage=indexPage-9"> < Précédent </button> &nbsp;

33
src/app/user/search/video-grid/video-grid.component.scss
View file

@ -7,12 +7,20 @@ mat-grid-list {
mat-grid-tile {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: solid 1px black;
//border: solid 1px black;
}
.myCell {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
margin: 7px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background-color: #f0f0f0;
border: solid 1px black;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
cursor: pointer;
}
.myCell:hover {
background-color: #d2d2d2;
}
@ -20,22 +28,24 @@ mat-grid-tile {
.imgsContainer {
width: 20vw;
//width: 20vw;
width: 18vw;
height: 15vh;
}
.imgPlay {
position: absolute;
margin-left: 9vw;
width: 3vw;
margin-left: 8vw;
width: 2.5vw;
margin-top: 5vh;
height: 6vh;
height: 5vh;
padding: 0px 0px 0px 0px;
}
.imgVideo {
border: solid 1px black;
width: 20vw;
//border: solid 1px black;
//width: 20vw;
width: 18vw;
height: 15vh;
padding: 0px 0px 0px 0px;
}
@ -57,10 +67,11 @@ mat-icon {
// ---------------------------------------------------------------------------------------------
.btnContainer {
.paginatorContainer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
padding: 5px 0px 0px 0px;
text-align: center;
background-color: white;
}
.btnPaginator {