ameloriation du style de la partie user
This commit is contained in:
MiharyR
parent
1e5b9bd49c
commit
cd1f323686
26 changed files with 333 additions and 85 deletions
|
|
@ -6,24 +6,29 @@
|
|||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- [UserList] [Mes AdList] [Historique] -->
|
||||
|
||||
<!-- [userList] [adList] -->
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/admin/userList"> Liste des utillisateurs </a>
|
||||
<a *ngIf="(url !== routes[0]) && (url !== routes[1])" [routerLink]="routes[1]" class="nav-link">Liste des utillisateurs</a>
|
||||
<a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Liste des utillisateurs</a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/admin/adList"> Liste des pubs </a>
|
||||
<a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Liste des pubs</a>
|
||||
<a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Liste des pubs</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mon profil -->
|
||||
<img [src]=urlImage
|
||||
onerror="this.onerror=null; this.src='assets/profil.png'"
|
||||
routerLink="/admin/myProfil"
|
||||
[routerLink]="routes[3]"
|
||||
alt="">
|
||||
|
||||
|
||||
<!-- Deconnexion -->
|
||||
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
|
||||
Deconnexion
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.navbar {
|
||||
background-color: black;
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
font-size: medium;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -23,16 +23,22 @@
|
|||
}
|
||||
|
||||
|
||||
// Recherche, Mes Playlists, Historique
|
||||
.monLi {
|
||||
margin: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
|
||||
.nav-link {
|
||||
color: white;
|
||||
}
|
||||
.nav-link:hover {
|
||||
color: grey;
|
||||
}
|
||||
.myActiveLink {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
// Bonton deconnexion
|
||||
.btnDeconnexion {
|
||||
font-size: medium;
|
||||
margin: 0px 10px 0px 10px
|
||||
|
|
@ -42,11 +48,6 @@
|
|||
}
|
||||
|
||||
|
||||
.monLi {
|
||||
margin: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
border: solid 2px white;
|
||||
border-radius: 50px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
|
||||
|
||||
|
|
@ -9,9 +10,18 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
export class NavbarAdminComponent
|
||||
{
|
||||
routes: string[] = [
|
||||
"/admin", // 0
|
||||
"/admin/userList", // 1
|
||||
"/admin/adList", // 2
|
||||
"/admin/myProfil", // 3
|
||||
];
|
||||
|
||||
url = this.router.url;
|
||||
|
||||
urlImage: string = "https://www.reference-gaming.com/assets/media/product/41195/figurine-pop-duck-tales-n-309-loulou.jpg?format=product-cover-large&k=1519639530" ;
|
||||
|
||||
constructor() { }
|
||||
constructor(private router: Router) { }
|
||||
|
||||
onDeconnexion(): void {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,27 +6,33 @@
|
|||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<!-- [adList] [viewsAd]-->
|
||||
|
||||
<!-- [adList] [adsPopularity] [subjectsPopularity] -->
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/adList"> Gestion des annonces </a>
|
||||
<a *ngIf="(url !== routes[0]) && (url !== routes[1])" [routerLink]="routes[1]" class="nav-link">Gestion des annonces</a>
|
||||
<a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Gestion des annonces</a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/adsPopularity"> Popularité des annonces </a>
|
||||
<a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Popularité des annonces</a>
|
||||
<a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Popularité des annonces</a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/advertiser/subjectsPopularity"> Popularité des domaines </a>
|
||||
<a *ngIf="url !== routes[3]" [routerLink]="routes[3]" class="nav-link">Popularité des domaines</a>
|
||||
<a *ngIf="url === routes[3]" [routerLink]="routes[3]" class="nav-link myActiveLink">Popularité des domaines</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mon profil -->
|
||||
<img [src]=urlImage
|
||||
onerror="this.onerror=null; this.src='assets/profil.png'"
|
||||
routerLink="/advertiser/myProfil"
|
||||
[routerLink]="routes[4]"
|
||||
alt="">
|
||||
|
||||
|
||||
<!-- Deconnexion -->
|
||||
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
|
||||
Deconnexion
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.navbar {
|
||||
background-color: black;
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
font-size: medium;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -28,13 +28,24 @@
|
|||
}
|
||||
|
||||
|
||||
// Recherche, Mes Playlists, Historique
|
||||
.nav-link {
|
||||
color: white;
|
||||
}
|
||||
.nav-link:hover {
|
||||
color: grey;
|
||||
}
|
||||
.myActiveLink {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
.btnDeconnexion {
|
||||
font-size: medium;
|
||||
margin: 0px 10px 0px 10px
|
||||
}
|
||||
.btnDeconnexion:hover {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
|
|
@ -49,16 +60,6 @@ img:hover {
|
|||
}
|
||||
|
||||
|
||||
// Bonton deconnexion
|
||||
.btnDeconnexion {
|
||||
font-size: medium;
|
||||
margin: 0px 10px 0px 10px
|
||||
}
|
||||
.btnDeconnexion:hover {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
|
||||
|
||||
|
|
@ -9,9 +10,19 @@ import { Component } from '@angular/core';
|
|||
})
|
||||
export class NavbarAdvertiserComponent
|
||||
{
|
||||
routes: string[] = [
|
||||
"/advertiser", // 0
|
||||
"/advertiser/adList", // 1
|
||||
"/advertiser/adsPopularity", // 2
|
||||
"/advertiser/subjectsPopularity", // 3
|
||||
"/advertiser/myProfil" // 4
|
||||
];
|
||||
|
||||
url = this.router.url;
|
||||
|
||||
urlImage: string = "https://www.figurines-goodies.com/1188-large_default/dewey-duck-tales-disney-funko-pop.jpg" ;
|
||||
|
||||
constructor() { }
|
||||
constructor(private router: Router) { }
|
||||
|
||||
onDeconnexion(): void {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@ import { PageWatchingVideoComponent } from './user/watching/page-watching-video/
|
|||
import {MatDatepickerModule} from "@angular/material/datepicker";
|
||||
import { PagesPopularityComponent } from './advertiser/pages-popularity/pages-popularity.component';
|
||||
import { ChartsModule } from 'ng2-charts';
|
||||
import { PopupDeletePlaylistComponent } from './user/myPlaylists/popup-delete-playlist/popup-delete-playlist.component';
|
||||
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -122,6 +123,7 @@ import { ChartsModule } from 'ng2-charts';
|
|||
InputInterestsAdminComponent,
|
||||
PageWatchingVideoComponent,
|
||||
PagesPopularityComponent,
|
||||
PopupDeletePlaylistComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.navbar {
|
||||
background-color: black;
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
font-size: medium;
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ input {
|
|||
position: relative;
|
||||
width: 20vw;
|
||||
height: 15vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.imgPlay {
|
||||
|
|
|
|||
|
|
@ -9,23 +9,35 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Liste des playlist -->
|
||||
<div class="row" style="margin: 0px">
|
||||
<div class="playlistListContainer">
|
||||
<div *ngFor="let playlist of tabPlaylist" class="playlistContainer">
|
||||
<button class="btnPlaylist" (click)="eventEmitter.emit(playlist)">
|
||||
|
||||
<div [class]="getClassOfPlaylistContainer(playlist)" (click)="eventEmitter.emit(playlist); playlistFocusedOn = playlist">
|
||||
<div class="col-2"></div>
|
||||
<div class="col-8" style="text-align: center">
|
||||
<span class="playlistName"> {{playlist.name}} </span><br>
|
||||
<span class="playListCount" *ngIf="playlist.videoIds.length <= 1"> {{playlist.videoIds.length}} vidéo </span>
|
||||
<span class="playListCount" *ngIf="playlist.videoIds.length > 1"> {{playlist.videoIds.length}} vidéos </span>
|
||||
</div>
|
||||
<div class="col-2" style="text-align: right">
|
||||
<button mat-icon-button (click)="onDeletePlaylist(playlist)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Bouton creer playlist-->
|
||||
<div class="row btnCreerPlaylistContainer" >
|
||||
<button mat-button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Creer playlist </button>
|
||||
<button mat-button class="btnCreerPlaylist" (click)="onCreatePlaylist()"> Créer une playlist </button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -35,23 +35,36 @@
|
|||
height: 60vh;
|
||||
overflow-y: scroll;
|
||||
padding: 0px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.playlistContainer {
|
||||
max-width: 100%;
|
||||
padding: 0px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
.btnPlaylist {
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border-bottom: solid 1px black;
|
||||
width: 100%;
|
||||
//width: 100%;
|
||||
width: 35vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.btnPlaylist:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.btnPlaylistFocus {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.btnPlaylistFocus:hover {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
|
||||
.playListCount {
|
||||
color: gray;
|
||||
font-style: italic;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
|
||||
import {ThemeService} from "../../../utils/services/theme/theme.service";
|
||||
import {PlaylistDB} from "../../../utils/interfaces/playlist";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
import {MatDialog} from "@angular/material/dialog";
|
||||
import {MatSnackBar} from "@angular/material/snack-bar";
|
||||
import {PopupCreatePlaylistComponent} from "../popup-create-playlist/popup-create-playlist.component";
|
||||
import {FictitiousVideosService} from "../../../utils/services/fictitiousDatas/fictitiousVideos/fictitious-videos.service";
|
||||
import {PopupDeletePlaylistComponent} from "../popup-delete-playlist/popup-delete-playlist.component";
|
||||
|
||||
|
||||
|
||||
|
|
@ -20,6 +20,7 @@ export class PlaylistListComponent implements OnInit
|
|||
@Output() eventEmitter = new EventEmitter<PlaylistDB>(); // pour envoyer au parent la playlist selectionner
|
||||
search: string = "" ; // contenu de la barre de recherche
|
||||
tabPlaylist: PlaylistDB[] = []; // playlist affichées
|
||||
playlistFocusedOn: PlaylistDB;
|
||||
|
||||
|
||||
constructor( public themeService: ThemeService,
|
||||
|
|
@ -30,15 +31,14 @@ export class PlaylistListComponent implements OnInit
|
|||
|
||||
ngOnInit(): void
|
||||
{
|
||||
//this.allPlaylists = this.fictitiousVideosService.getRandomTabPlaylistDB(10, 10);
|
||||
this.allPlaylists = this.fictitiousVideosService.getNoRandomTabPlaylistDB(10);
|
||||
this.tabPlaylist = [].concat(this.allPlaylists);
|
||||
}
|
||||
|
||||
|
||||
// s'execute lorsqu'on écrit sur la barre de recherche
|
||||
whileSearch()
|
||||
{
|
||||
console.log("whileSearch");
|
||||
this.tabPlaylist = [];
|
||||
for(let playlist of this.allPlaylists)
|
||||
{
|
||||
|
|
@ -47,6 +47,7 @@ export class PlaylistListComponent implements OnInit
|
|||
}
|
||||
|
||||
|
||||
// click sur créer playlist
|
||||
onCreatePlaylist(): void
|
||||
{
|
||||
const config = { data: this.tabPlaylist };
|
||||
|
|
@ -55,16 +56,52 @@ export class PlaylistListComponent implements OnInit
|
|||
.afterClosed()
|
||||
.subscribe(playlist => {
|
||||
|
||||
const config = { duration: 1000, panelClass: "custom-class" };
|
||||
const config = { duration: 1500, panelClass: "custom-class" };
|
||||
if((playlist === null) || (playlist === undefined)) {
|
||||
this.snackBar.open("Opération annulée", "", config);
|
||||
}
|
||||
else {
|
||||
this.allPlaylists.push(playlist);
|
||||
this.tabPlaylist.push(playlist);
|
||||
this.snackBar.open("La playlist a bien été créée ✔", "", config);
|
||||
this.snackBar.open(`La playlist '${playlist.name}' a bien été créée ✔`, "", config);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// click sur supprimer playlist
|
||||
onDeletePlaylist(playlist: PlaylistDB): void
|
||||
{
|
||||
const config = {data: playlist};
|
||||
this.dialog
|
||||
.open(PopupDeletePlaylistComponent, config)
|
||||
.afterClosed()
|
||||
.subscribe(retour => {
|
||||
|
||||
const config = { duration: 1500, panelClass: "custom-class" };
|
||||
if((retour === null) || (retour === undefined)) {
|
||||
this.snackBar.open("Opération annulée", "", config);
|
||||
}
|
||||
else {
|
||||
let index = this.allPlaylists.indexOf(playlist);
|
||||
if(index >= 0) this.allPlaylists.splice(index, 1);
|
||||
|
||||
index = this.tabPlaylist.indexOf(playlist);
|
||||
if(index >= 0) this.tabPlaylist.splice(index, 1);
|
||||
|
||||
this.eventEmitter.emit(null);
|
||||
this.playlistFocusedOn = null;
|
||||
this.snackBar.open(`La playlist '${playlist.name}' a bien été suprimée ✔`, "", config);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// retourne la class CSS de conteneur de playlist
|
||||
getClassOfPlaylistContainer(playlist: PlaylistDB): string
|
||||
{
|
||||
if(playlist === this.playlistFocusedOn) return "row btnPlaylist btnPlaylistFocus" ;
|
||||
else return "row btnPlaylist" ;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
<mat-dialog-content class="mat-typography">
|
||||
Êtes-vous sûr de vouloir supprimer <i>{{playlist.name}}</i> ?
|
||||
</mat-dialog-content>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button (click)="dialogRef.close()">Annuler</button>
|
||||
<button mat-button (click)="onValidate()" cdkFocusInitial>Valider</button>
|
||||
</mat-dialog-actions>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PopupDeletePlaylistComponent } from './popup-delete-playlist.component';
|
||||
|
||||
describe('PopupDeletePlaylistComponent', () => {
|
||||
let component: PopupDeletePlaylistComponent;
|
||||
let fixture: ComponentFixture<PopupDeletePlaylistComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ PopupDeletePlaylistComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PopupDeletePlaylistComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
import {Component, Inject, OnInit} from '@angular/core';
|
||||
import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
|
||||
import {MessageService} from "../../../utils/services/message/message.service";
|
||||
|
||||
@Component({
|
||||
selector: 'app-popup-delete-playlist',
|
||||
templateUrl: './popup-delete-playlist.component.html',
|
||||
styleUrls: ['./popup-delete-playlist.component.scss']
|
||||
})
|
||||
export class PopupDeletePlaylistComponent implements OnInit
|
||||
{
|
||||
playlist;
|
||||
|
||||
constructor( public dialogRef: MatDialogRef<PopupDeletePlaylistComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data,
|
||||
private messageService: MessageService ) { }
|
||||
|
||||
ngOnInit(): void
|
||||
{
|
||||
this.playlist = this.data;
|
||||
}
|
||||
|
||||
onValidate(): void
|
||||
{
|
||||
this.dialogRef.close(true);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -37,26 +37,24 @@
|
|||
<mat-grid-list cols="12" rowHeight="15vh">
|
||||
|
||||
<!-- btnAdd -->
|
||||
<mat-grid-tile [colspan]="1" [rowspan]="1">
|
||||
<mat-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<button mat-icon-button (click)="onAdd(video)">
|
||||
<mat-icon> add_circle </mat-icon>
|
||||
</button>
|
||||
</mat-grid-tile>
|
||||
|
||||
<!-- imgVideo -->
|
||||
<mat-grid-tile [colspan]="10" [rowspan]="1">
|
||||
<div class="col-8">
|
||||
<mat-grid-tile [colspan]="8" [rowspan]="1">
|
||||
<div style="margin: auto; width: 20vw; height: 15vh;">
|
||||
<div class="imgsContainer" (click)="onVideo(video)">
|
||||
<img class="imgPlay" src="/assets/play.png">
|
||||
<img class="imgVideo" [src]="video.imageUrl">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-grid-tile>
|
||||
|
||||
<!-- btnDelete -->
|
||||
<mat-grid-tile [colspan]="1" [rowspan]="1">
|
||||
<mat-grid-tile [colspan]="2" [rowspan]="1">
|
||||
<button mat-icon-button (click)="onDelete(video, i)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
position: relative;
|
||||
width: 20vw;
|
||||
height: 15vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.imgPlay {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -6,27 +6,33 @@
|
|||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
|
||||
<!-- [Recherche] [Mes Playlists] [Historique] -->
|
||||
<div class="collapse navbar-collapse">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/user/search"> Rechercher </a>
|
||||
<a *ngIf="(url !== routes[0]) && (url !== routes[1])" [routerLink]="routes[1]" class="nav-link">Rechercher</a>
|
||||
<a *ngIf="(url === routes[0]) || (url === routes[1])" [routerLink]="routes[1]" class="nav-link myActiveLink">Rechercher</a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/user/myPlaylists"> Mes playlists </a>
|
||||
<a *ngIf="url !== routes[2]" [routerLink]="routes[2]" class="nav-link">Mes playlists</a>
|
||||
<a *ngIf="url === routes[2]" [routerLink]="routes[2]" class="nav-link myActiveLink">Mes playlists</a>
|
||||
</li>
|
||||
<li class="nav-item active monLi">
|
||||
<a class="nav-link" routerLink="/user/history"> Historique </a>
|
||||
<a *ngIf="url !== routes[3]" [routerLink]="routes[3]" class="nav-link">Historique</a>
|
||||
<a *ngIf="url === routes[3]" [routerLink]="routes[3]" class="nav-link myActiveLink">Historique</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Mon profil -->
|
||||
<img [src]=urlImage
|
||||
onerror="this.onerror=null; this.src='assets/profil.png'"
|
||||
routerLink="/user/myProfil"
|
||||
[routerLink]="routes[4]"
|
||||
alt="">
|
||||
|
||||
|
||||
<!-- Deconnexion -->
|
||||
<button mat-button class="btnDeconnexion" (click)="onDeconnexion()" routerLink="/">
|
||||
Deconnexion
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.navbar {
|
||||
background-color: black;
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
font-size: medium;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -23,16 +23,22 @@
|
|||
}
|
||||
|
||||
|
||||
// Recherche, Mes Playlists, Historique
|
||||
.monLi {
|
||||
margin: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
|
||||
.nav-link {
|
||||
color: white;
|
||||
}
|
||||
.nav-link:hover {
|
||||
color: grey;
|
||||
}
|
||||
.myActiveLink {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
// Bonton deconnexion
|
||||
.btnDeconnexion {
|
||||
font-size: medium;
|
||||
margin: 0px 10px 0px 10px
|
||||
|
|
@ -42,11 +48,6 @@
|
|||
}
|
||||
|
||||
|
||||
.monLi {
|
||||
margin: 0px 10px 0px 10px;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
border: solid 2px white;
|
||||
border-radius: 50px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {Component} from '@angular/core';
|
||||
import {Router} from "@angular/router";
|
||||
|
||||
|
||||
|
||||
|
|
@ -9,9 +10,19 @@ import {Component} from '@angular/core';
|
|||
})
|
||||
export class NavbarUserComponent
|
||||
{
|
||||
routes: string[] = [
|
||||
"/user", // 0
|
||||
"/user/search", // 1
|
||||
"/user/myPlaylists", // 2
|
||||
"/user/history", // 3
|
||||
"/user/myProfil" // 4
|
||||
];
|
||||
|
||||
url = this.router.url;
|
||||
|
||||
urlImage: string = "https://www.figurines-goodies.com/1185-thickbox_default/huey-duck-tales-disney-funko-pop.jpg" ;
|
||||
|
||||
constructor() { }
|
||||
constructor(private router: Router) { }
|
||||
|
||||
onDeconnexion(): void {}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -202,13 +202,20 @@
|
|||
<!-- Liste des videos -->
|
||||
<div class="listVideoContainer">
|
||||
<div *ngFor="let video0 of videosInPlaylist; let i = index;">
|
||||
<div class="videoCell">
|
||||
<div class="imgsContainer" (click)="this.video = video0">
|
||||
<div [class]="getClassOfVideoCell(video0)" (click)="this.video = video0">
|
||||
<div class="imgsContainer">
|
||||
<img class="imgPlay" src="/assets/play.png">
|
||||
<img class="imgVideo" [src]="video0.imageUrl">
|
||||
</div>
|
||||
<div class="titleContainer">
|
||||
{{video0.title}}
|
||||
<div class="infoContainer">
|
||||
<div class="titleContainer">{{video0.title}}</div>
|
||||
<div class="viewsContainer">
|
||||
<!-- <span>{{video.views | number: '1.0-0'}}</span> <mat-icon>visibility</mat-icon> -->
|
||||
{{video.views | number: '1.0-0'}} vues
|
||||
</div>
|
||||
<span class="publishedAtContainer">
|
||||
Publiée le {{ video.publishedAt | date:'dd/LL/YYYY à HH:mm:ss' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -216,9 +223,11 @@
|
|||
|
||||
|
||||
<!-- Bordure basse -->
|
||||
<!--
|
||||
<div class="bottomBorder">
|
||||
<div style="visibility: hidden">a</div>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</div>
|
||||
</ng-template>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@
|
|||
.playlistContainer {
|
||||
border: solid 1px black;
|
||||
width: 98%;
|
||||
border-top-right-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.topBorder {
|
||||
|
|
@ -37,6 +39,8 @@
|
|||
text-align: left;
|
||||
padding: 5px 0px 5px 5px;
|
||||
border-bottom: solid 1px black;
|
||||
border-top-right-radius: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
|
||||
.listVideoContainer {
|
||||
|
|
@ -49,7 +53,19 @@
|
|||
margin: 0px 0px 0px 0px;
|
||||
padding: 10px 0px 10px 10px;
|
||||
border-bottom: solid 1px black;
|
||||
cursor: pointer;
|
||||
}
|
||||
.videoCell:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.videoCellFocus {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.videoCellFocus:hover {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
|
||||
// ----
|
||||
|
||||
|
|
@ -76,14 +92,40 @@
|
|||
padding: 0px 0px 0px 0px;
|
||||
}
|
||||
|
||||
.titleContainer {
|
||||
// ----
|
||||
|
||||
.infoContainer {
|
||||
display: table-cell;
|
||||
margin-left: 13vw;
|
||||
height: 10vh;
|
||||
padding-left: 2px;
|
||||
padding-left: 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.titleContainer {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.viewsContainer {
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: x-small;
|
||||
color: grey;
|
||||
}
|
||||
mat-icon {
|
||||
vertical-align: middle;
|
||||
//font-size: x-small;
|
||||
}
|
||||
|
||||
.publishedAtContainer {
|
||||
text-align: left;
|
||||
font-size: x-small;
|
||||
color: grey;
|
||||
}
|
||||
|
||||
|
||||
// ----
|
||||
|
||||
.bottomBorder {
|
||||
|
|
|
|||
|
|
@ -117,4 +117,13 @@ export class PageWatchingVideoComponent implements OnInit
|
|||
else if(source === 'dailymotion') videoUrl = "https://www.dailymotion.com/embed/video/" + videoId;
|
||||
return this._sanitizer.bypassSecurityTrustResourceUrl(videoUrl);
|
||||
}
|
||||
|
||||
|
||||
// retourne la classe CSS de videoCell
|
||||
getClassOfVideoCell(video0: VideoAll): string
|
||||
{
|
||||
if(video0 === this.video) return "videoCell videoCellFocus" ;
|
||||
else return "videoCell" ;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue