[DEV] update display better
This commit is contained in:
parent
247064e412
commit
883866d5f6
@ -137,7 +137,7 @@ export class ElementPlayerAudioComponent implements OnInit {
|
||||
self.mediaSource = self.httpService.createRESTCall2({
|
||||
api: `data/${self.currentLMedia.dataId}/unknowMediaName.webm`, //${self.generatedName}`,
|
||||
addURLToken: true,
|
||||
});
|
||||
}).replace("http://localhost:19080", "https://atria-soft.org");
|
||||
}).catch(() => {
|
||||
console.error("error not ùmanaged in audio player ... 111");
|
||||
})
|
||||
|
||||
@ -1,11 +1,6 @@
|
||||
<div class="generic-page">
|
||||
<div class="fill-title colomn_mutiple">
|
||||
<div class="cover-area">
|
||||
<div class="cover" *ngIf="covers" >
|
||||
<img src="{{covers[0]}}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
|
||||
<div class="fill-title">
|
||||
<div class="description-area">
|
||||
<div class="title">
|
||||
{{name}}
|
||||
</div>
|
||||
@ -15,18 +10,22 @@
|
||||
<div class="description" *ngIf="albumDescription">
|
||||
{{albumDescription}}
|
||||
</div>
|
||||
<div class="description" *ngIf="albumDescription">
|
||||
{{albumDescription}}
|
||||
<div class="button-area">
|
||||
<button class="circular-button" (click)="playAll($event)" type="submit">
|
||||
<i class="material-icons">play_arrow</i>
|
||||
</button>
|
||||
<button class="circular-button" (click)="playShuffle($event)" type="submit">
|
||||
<i class="material-icons">shuffle</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cover-area">
|
||||
<div class="cover" *ngIf="covers" >
|
||||
<img src="{{covers[0]}}"/>
|
||||
</div>
|
||||
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit">
|
||||
<i class="material-icons">play_arrow</i> Play All
|
||||
</button>
|
||||
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit">
|
||||
<i class="material-icons">shuffle</i> Shuffle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fill-content colomn_mutiple" *ngIf="tracks">
|
||||
<div class="fill-content colomn_single" *ngIf="tracks">
|
||||
<div class="clear"></div>
|
||||
<div class="title" *ngIf="tracks.length > 1">Tracks:</div>
|
||||
<div class="title" *ngIf="tracks.length == 1">Track:</div>
|
||||
|
||||
@ -4,117 +4,116 @@
|
||||
* @license PROPRIETARY (see license file)
|
||||
*/
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Media } from 'app/model';
|
||||
|
||||
import { ArtistService, DataService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-album',
|
||||
templateUrl: './album.html'
|
||||
})
|
||||
|
||||
export class AlbumScene implements OnInit {
|
||||
public idArtist = -1;
|
||||
public idAlbum = -1;
|
||||
public name: string = '';
|
||||
public description: string = undefined;
|
||||
public covers: Array<string> = undefined;
|
||||
public albumName: string = '';
|
||||
public albumDescription: string = undefined;
|
||||
public albumCovers: string[] = undefined;
|
||||
|
||||
public tracksIds: number[] = undefined;
|
||||
public tracks: Media[] = undefined;
|
||||
|
||||
constructor(
|
||||
private artistService: ArtistService,
|
||||
private albumService: AlbumService,
|
||||
private trackService: TrackService,
|
||||
private arianeService: ArianeService,
|
||||
private playerService: PlayerService,
|
||||
private dataService: DataService) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId'));
|
||||
// this.idType = parseInt(this.route.snapshot.paramMap.get('typeId'));
|
||||
this.idArtist = this.arianeService.getArtistId();
|
||||
this.idAlbum = this.arianeService.getAlbumId();
|
||||
let self = this;
|
||||
this.artistService.get(this.idArtist)
|
||||
.then((response) => {
|
||||
self.name = response.name;
|
||||
self.description = response.description;
|
||||
self.covers = this.dataService.getCoverListUrl(response.covers);
|
||||
}).catch((response) => {
|
||||
self.description = undefined;
|
||||
self.name = '???';
|
||||
self.covers = undefined;
|
||||
// no check just ==> an error occured on album
|
||||
});
|
||||
this.albumService.get(this.idAlbum)
|
||||
.then((response) => {
|
||||
self.albumName = response.name;
|
||||
self.albumDescription = response.description;
|
||||
self.albumCovers = this.dataService.getCoverListUrl(response.covers);
|
||||
}).catch((response) => {
|
||||
self.albumDescription = undefined;
|
||||
self.albumName = '???';
|
||||
self.albumCovers = undefined;
|
||||
// no check just ==> an error occured on album
|
||||
});
|
||||
|
||||
//console.log("all the tracks: " + self.tracksIds);
|
||||
this.trackService.getWithAlbum(self.idAlbum)
|
||||
.then((response2: Media[]) => {
|
||||
self.tracks = response2;
|
||||
//console.log(`>>>>BBB get tracks : ${JSON.stringify(response2, null, 2)}`);
|
||||
}).catch((response) => {
|
||||
//console.log(`>>>>BBB plop`);
|
||||
self.tracks = undefined;
|
||||
});
|
||||
}
|
||||
|
||||
onSelectTrack(event: any, idSelected: number):void {
|
||||
if (event.ctrlKey === false) {
|
||||
//this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} );
|
||||
// TODO: add on global player ...
|
||||
//this.playerService.play(idSelected);
|
||||
|
||||
let elements: number[] = [];
|
||||
let valuePlayed: number = undefined;
|
||||
for (let iii=0; iii< this.tracks.length; iii++) {
|
||||
elements.push(this.tracks[iii].id);
|
||||
//console.log(`plop: ${this.tracks[iii].id} == ${idSelected} ==> ${this.tracks[iii].name}`);
|
||||
if (this.tracks[iii].id == idSelected) {
|
||||
//console.log(` ==> find`);
|
||||
valuePlayed = iii;
|
||||
}
|
||||
}
|
||||
this.playerService.playInList(valuePlayed, elements);
|
||||
|
||||
} else {
|
||||
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} );
|
||||
}
|
||||
}
|
||||
playAll(event: any):void {
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { Media } from 'app/model';
|
||||
|
||||
import { ArtistService, DataService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service';
|
||||
|
||||
@Component({
|
||||
selector: 'app-album',
|
||||
templateUrl: './album.html'
|
||||
})
|
||||
|
||||
export class AlbumScene implements OnInit {
|
||||
public idArtist = -1;
|
||||
public idAlbum = -1;
|
||||
public name: string = '';
|
||||
public description: string = undefined;
|
||||
public covers: Array<string> = undefined;
|
||||
public albumName: string = '';
|
||||
public albumDescription: string = undefined;
|
||||
public albumCovers: string[] = undefined;
|
||||
|
||||
public tracksIds: number[] = undefined;
|
||||
public tracks: Media[] = undefined;
|
||||
|
||||
constructor(
|
||||
private artistService: ArtistService,
|
||||
private albumService: AlbumService,
|
||||
private trackService: TrackService,
|
||||
private arianeService: ArianeService,
|
||||
private playerService: PlayerService,
|
||||
private dataService: DataService) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
// this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId'));
|
||||
// this.idType = parseInt(this.route.snapshot.paramMap.get('typeId'));
|
||||
this.idArtist = this.arianeService.getArtistId();
|
||||
this.idAlbum = this.arianeService.getAlbumId();
|
||||
let self = this;
|
||||
this.artistService.get(this.idArtist)
|
||||
.then((response) => {
|
||||
self.name = response.name;
|
||||
self.description = response.description;
|
||||
self.covers = this.dataService.getCoverListUrl(response.covers);
|
||||
}).catch((response) => {
|
||||
self.description = undefined;
|
||||
self.name = '???';
|
||||
self.covers = undefined;
|
||||
// no check just ==> an error occured on album
|
||||
});
|
||||
this.albumService.get(this.idAlbum)
|
||||
.then((response) => {
|
||||
self.albumName = response.name;
|
||||
self.albumDescription = response.description;
|
||||
self.albumCovers = this.dataService.getCoverListUrl(response.covers);
|
||||
}).catch((response) => {
|
||||
self.albumDescription = undefined;
|
||||
self.albumName = '???';
|
||||
self.albumCovers = undefined;
|
||||
// no check just ==> an error occured on album
|
||||
});
|
||||
|
||||
//console.log("all the tracks: " + self.tracksIds);
|
||||
this.trackService.getWithAlbum(self.idAlbum)
|
||||
.then((response2: Media[]) => {
|
||||
self.tracks = response2;
|
||||
//console.log(`>>>>BBB get tracks : ${JSON.stringify(response2, null, 2)}`);
|
||||
}).catch((response) => {
|
||||
//console.log(`>>>>BBB plop`);
|
||||
self.tracks = undefined;
|
||||
});
|
||||
}
|
||||
|
||||
onSelectTrack(event: any, idSelected: number): void {
|
||||
if (event.ctrlKey === false) {
|
||||
//this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} );
|
||||
// TODO: add on global player ...
|
||||
//this.playerService.play(idSelected);
|
||||
|
||||
let elements: number[] = [];
|
||||
let valuePlayed: number = undefined;
|
||||
for (let iii = 0; iii < this.tracks.length; iii++) {
|
||||
elements.push(this.tracks[iii].id);
|
||||
//console.log(`plop: ${this.tracks[iii].id} == ${idSelected} ==> ${this.tracks[iii].name}`);
|
||||
if (this.tracks[iii].id == idSelected) {
|
||||
//console.log(` ==> find`);
|
||||
valuePlayed = iii;
|
||||
}
|
||||
}
|
||||
this.playerService.playInList(valuePlayed, elements);
|
||||
|
||||
} else {
|
||||
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
|
||||
}
|
||||
}
|
||||
playAll(event: any): void {
|
||||
let elements: number[] = [];
|
||||
for (let iii=0; iii< this.tracks.length; iii++) {
|
||||
for (let iii = 0; iii < this.tracks.length; iii++) {
|
||||
elements.push(this.tracks[iii].id);
|
||||
}
|
||||
this.playerService.clear();
|
||||
this.playerService.setNewPlaylist(elements);
|
||||
}
|
||||
playShuffe(event: any):void {
|
||||
}
|
||||
playShuffle(event: any): void {
|
||||
let elements: number[] = [];
|
||||
for (let iii=0; iii< this.tracks.length; iii++) {
|
||||
for (let iii = 0; iii < this.tracks.length; iii++) {
|
||||
elements.push(this.tracks[iii].id);
|
||||
}
|
||||
this.playerService.clear();
|
||||
this.playerService.setNewPlaylistShuffle(elements);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,26 +1,28 @@
|
||||
<div class="generic-page">
|
||||
<div class="fill-title colomn_mutiple">
|
||||
<div class="cover-area">
|
||||
<div class="cover" *ngIf="covers" >
|
||||
<img src="{{covers[0]}}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
|
||||
<div class="fill-title">
|
||||
<div class="description-area">
|
||||
<div class="title">
|
||||
{{name}}
|
||||
</div>
|
||||
<div class="description" *ngIf="description">
|
||||
{{description}}
|
||||
</div>
|
||||
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit">
|
||||
<i class="material-icons">play_arrow</i> Play All
|
||||
</button>
|
||||
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit">
|
||||
<i class="material-icons">shuffle</i> Shuffle
|
||||
</button>
|
||||
<div class="button-area">
|
||||
<button class="circular-button" (click)="playAll($event)" type="submit">
|
||||
<i class="material-icons">play_arrow</i>
|
||||
</button>
|
||||
<button class="circular-button" (click)="playShuffle($event)" type="submit">
|
||||
<i class="material-icons">shuffle</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cover-area">
|
||||
<div class="cover" *ngIf="covers" >
|
||||
<img src="{{covers[0]}}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fill-content colomn_mutiple" *ngIf="albums">
|
||||
<div class="fill-content colomn_single" *ngIf="albums">
|
||||
<div class="clear"></div>
|
||||
<div class="title" *ngIf="albums.length > 1">Albums:</div>
|
||||
<div class="title" *ngIf="albums.length == 1">Album:</div>
|
||||
|
||||
@ -4,17 +4,17 @@
|
||||
* @license PROPRIETARY (see license file)
|
||||
*/
|
||||
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { ArtistService, DataService, ArianeService, AlbumService, PlayerService, TrackService } from 'app/service';
|
||||
import { NodeData } from 'common/model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-albums',
|
||||
templateUrl: './albums.html'
|
||||
})
|
||||
|
||||
export class AlbumsScene implements OnInit {
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
import { ArtistService, DataService, ArianeService, AlbumService, PlayerService, TrackService } from 'app/service';
|
||||
import { NodeData } from 'common/model';
|
||||
|
||||
@Component({
|
||||
selector: 'app-albums',
|
||||
templateUrl: './albums.html'
|
||||
})
|
||||
|
||||
export class AlbumsScene implements OnInit {
|
||||
public name: string = '';
|
||||
public description: string = undefined;
|
||||
public covers: string[] = undefined;
|
||||
@ -23,99 +23,98 @@
|
||||
public countSubElement: number = undefined;
|
||||
countTrack: (id: number) => Promise<Number>;
|
||||
getArtistsString: (id: number) => Promise<String[]>;
|
||||
|
||||
|
||||
constructor(
|
||||
private albumService: AlbumService,
|
||||
private artistService: ArtistService,
|
||||
private arianeService: ArianeService,
|
||||
private trackService: TrackService,
|
||||
private playerService: PlayerService,
|
||||
private dataService: DataService) {
|
||||
|
||||
private albumService: AlbumService,
|
||||
private artistService: ArtistService,
|
||||
private arianeService: ArianeService,
|
||||
private trackService: TrackService,
|
||||
private playerService: PlayerService,
|
||||
private dataService: DataService) {
|
||||
|
||||
}
|
||||
|
||||
countTrackCallback(albumId: number) : Promise<Number> {
|
||||
|
||||
countTrackCallback(albumId: number): Promise<Number> {
|
||||
return this.albumService.countTrack(albumId);
|
||||
}
|
||||
|
||||
getArtistsStringCallback(albumId: number) : Promise<String[]> {
|
||||
}
|
||||
|
||||
getArtistsStringCallback(albumId: number): Promise<String[]> {
|
||||
//console.log(`request all artist for album: {albumId}`)
|
||||
return this.albumService.getArtists(albumId);
|
||||
}
|
||||
ngOnInit() {
|
||||
this.getArtistsString = (id:number) => {return self.getArtistsStringCallback(id);};
|
||||
this.countTrack = (id:number) => {return self.countTrackCallback(id);};
|
||||
let self = this;
|
||||
self.name = "All Albums";
|
||||
self.description = "View all albums (no specific artist)";
|
||||
|
||||
//console.log(`get parameter id: ${ this.idArtist}`);
|
||||
this.albumService.getOrder()
|
||||
.then((response: NodeData[]) => {
|
||||
//console.log(`>>>> get album : ${JSON.stringify(response)}`)
|
||||
self.albums = response;
|
||||
}).catch((response) => {
|
||||
self.albums = undefined;
|
||||
});
|
||||
// TODO later: get all orfan tracks ...
|
||||
/*
|
||||
this.artistService.getTrack(this.idArtist)
|
||||
.then((response: NodeData[]) => {
|
||||
//console.log(`>>>> get track : ${JSON.stringify(response)}`)
|
||||
self.tracks = response;
|
||||
}).catch((response) => {
|
||||
self.tracks = undefined;
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
onSelectAlbum(event: any, idSelected: number):void {
|
||||
this.getArtistsString = (id: number) => { return self.getArtistsStringCallback(id); };
|
||||
this.countTrack = (id: number) => { return self.countTrackCallback(id); };
|
||||
let self = this;
|
||||
self.name = "All Albums";
|
||||
self.description = "View all albums (no specific artist)";
|
||||
|
||||
//console.log(`get parameter id: ${ this.idArtist}`);
|
||||
this.albumService.getOrder()
|
||||
.then((response: NodeData[]) => {
|
||||
//console.log(`>>>> get album : ${JSON.stringify(response)}`)
|
||||
self.albums = response;
|
||||
}).catch((response) => {
|
||||
self.albums = undefined;
|
||||
});
|
||||
// TODO later: get all orfan tracks ...
|
||||
/*
|
||||
this.artistService.getTrack(this.idArtist)
|
||||
.then((response: NodeData[]) => {
|
||||
//console.log(`>>>> get track : ${JSON.stringify(response)}`)
|
||||
self.tracks = response;
|
||||
}).catch((response) => {
|
||||
self.tracks = undefined;
|
||||
});
|
||||
*/
|
||||
}
|
||||
|
||||
|
||||
|
||||
onSelectAlbum(event: any, idSelected: number): void {
|
||||
if (event.ctrlKey) {
|
||||
this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 } );
|
||||
this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 });
|
||||
} else {
|
||||
this.arianeService.navigateAlbum({albumId: idSelected, newWindows: event.which === 2 } );
|
||||
this.arianeService.navigateAlbum({ albumId: idSelected, newWindows: event.which === 2 });
|
||||
}
|
||||
}
|
||||
|
||||
onSelectTrack(event: any, idSelected: number):void {
|
||||
if (event.ctrlKey) {
|
||||
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} );
|
||||
} else {
|
||||
this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} );
|
||||
}
|
||||
}
|
||||
playAll(event: any):void {
|
||||
this.playerService.clear();
|
||||
let self = this;
|
||||
this.trackService.getData()
|
||||
.then((response: NodeData[]) => {
|
||||
let ids = [];
|
||||
response.forEach(element => {
|
||||
ids.push(element.id);
|
||||
});
|
||||
self.playerService.setNewPlaylist(ids);
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(`error to get list o ftrack ...`)
|
||||
});
|
||||
}
|
||||
playShuffe(event: any):void {
|
||||
this.playerService.clear();
|
||||
let self = this;
|
||||
this.trackService.getData()
|
||||
.then((response: NodeData[]) => {
|
||||
let ids = [];
|
||||
response.forEach(element => {
|
||||
ids.push(element.id);
|
||||
});
|
||||
self.playerService.setNewPlaylistShuffle(ids);
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(`error to get list o ftrack ...`)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
onSelectTrack(event: any, idSelected: number): void {
|
||||
if (event.ctrlKey) {
|
||||
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
|
||||
} else {
|
||||
this.arianeService.navigateTrack({ trackId: idSelected, newWindows: event.which === 2 });
|
||||
}
|
||||
}
|
||||
playAll(event: any): void {
|
||||
this.playerService.clear();
|
||||
let self = this;
|
||||
this.trackService.getData()
|
||||
.then((response: NodeData[]) => {
|
||||
let ids = [];
|
||||
response.forEach(element => {
|
||||
ids.push(element.id);
|
||||
});
|
||||
self.playerService.setNewPlaylist(ids);
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(`error to get list o ftrack ...`)
|
||||
});
|
||||
}
|
||||
playShuffle(event: any): void {
|
||||
this.playerService.clear();
|
||||
let self = this;
|
||||
this.trackService.getData()
|
||||
.then((response: NodeData[]) => {
|
||||
let ids = [];
|
||||
response.forEach(element => {
|
||||
ids.push(element.id);
|
||||
});
|
||||
self.playerService.setNewPlaylistShuffle(ids);
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(`error to get list o ftrack ...`)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,30 +1,31 @@
|
||||
<div class="generic-page">
|
||||
<div class="fill-title colomn_mutiple">
|
||||
<div class="cover-area">
|
||||
<div class="cover" *ngIf="covers" >
|
||||
<img src="{{covers[0]}}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
|
||||
<div class="title">
|
||||
<div class="fill-title">
|
||||
<div class="description-area">
|
||||
<div class="shadow-text title">
|
||||
{{name}}
|
||||
</div>
|
||||
<div class="title">
|
||||
<div class="shadow-text sub-title-main">
|
||||
{{albumName}}
|
||||
</div>
|
||||
<div class="description" *ngIf="albumDescription">
|
||||
{{albumDescription}}
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit">
|
||||
<i class="material-icons">play_arrow</i> Play All
|
||||
</button>
|
||||
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit">
|
||||
<i class="material-icons">shuffle</i> Shuffle
|
||||
</button>
|
||||
<div class="button-area">
|
||||
<button class="circular-button" (click)="playAll($event)" type="submit">
|
||||
<i class="material-icons">play_arrow</i>
|
||||
</button>
|
||||
<button class="circular-button" (click)="playShuffle($event)" type="submit">
|
||||
<i class="material-icons">shuffle</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cover-area" *ngIf="covers" >
|
||||
<div class="cover">
|
||||
<img src="{{covers[0]}}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fill-content colomn_mutiple" *ngIf="tracks">
|
||||
<div class="fill-content colomn_single" *ngIf="tracks">
|
||||
<div class="clear"></div>
|
||||
<div class="title" *ngIf="tracks.length > 1">Tracks:</div>
|
||||
<div class="title" *ngIf="tracks.length == 1">Track:</div>
|
||||
|
||||
@ -28,11 +28,11 @@ export class ArtistAlbumScene implements OnInit {
|
||||
public tracks: Media[] = undefined;
|
||||
|
||||
constructor(
|
||||
private artistService: ArtistService,
|
||||
private albumService: AlbumService,
|
||||
private trackService: TrackService,
|
||||
private arianeService: ArianeService,
|
||||
private playerService: PlayerService,
|
||||
private artistService: ArtistService,
|
||||
private albumService: AlbumService,
|
||||
private trackService: TrackService,
|
||||
private arianeService: ArianeService,
|
||||
private playerService: PlayerService,
|
||||
private dataService: DataService) {
|
||||
|
||||
}
|
||||
@ -65,7 +65,7 @@ export class ArtistAlbumScene implements OnInit {
|
||||
self.albumCovers = undefined;
|
||||
// no check just ==> an error occured on album
|
||||
});
|
||||
|
||||
|
||||
//console.log("all the tracks: " + self.tracksIds);
|
||||
this.trackService.getWithAlbum(self.idAlbum)
|
||||
.then((response2: Media[]) => {
|
||||
@ -77,7 +77,7 @@ export class ArtistAlbumScene implements OnInit {
|
||||
});
|
||||
}
|
||||
|
||||
onSelectTrack(event: any, idSelected: number):void {
|
||||
onSelectTrack(event: any, idSelected: number): void {
|
||||
if (event.ctrlKey === false) {
|
||||
//this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} );
|
||||
// TODO: add on global player ...
|
||||
@ -85,7 +85,7 @@ export class ArtistAlbumScene implements OnInit {
|
||||
|
||||
let elements: number[] = [];
|
||||
let valuePlayed: number = undefined;
|
||||
for (let iii=0; iii< this.tracks.length; iii++) {
|
||||
for (let iii = 0; iii < this.tracks.length; iii++) {
|
||||
elements.push(this.tracks[iii].id);
|
||||
//console.log(`plop: ${this.tracks[iii].id} == ${idSelected} ==> ${this.tracks[iii].name}`);
|
||||
if (this.tracks[iii].id == idSelected) {
|
||||
@ -96,23 +96,23 @@ export class ArtistAlbumScene implements OnInit {
|
||||
this.playerService.playInList(valuePlayed, elements);
|
||||
|
||||
} else {
|
||||
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} );
|
||||
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
|
||||
}
|
||||
}
|
||||
playAll(event: any):void {
|
||||
let elements: number[] = [];
|
||||
for (let iii=0; iii< this.tracks.length; iii++) {
|
||||
elements.push(this.tracks[iii].id);
|
||||
}
|
||||
this.playerService.clear();
|
||||
this.playerService.setNewPlaylist(elements);
|
||||
playAll(event: any): void {
|
||||
let elements: number[] = [];
|
||||
for (let iii = 0; iii < this.tracks.length; iii++) {
|
||||
elements.push(this.tracks[iii].id);
|
||||
}
|
||||
this.playerService.clear();
|
||||
this.playerService.setNewPlaylist(elements);
|
||||
}
|
||||
playShuffe(event: any):void {
|
||||
let elements: number[] = [];
|
||||
for (let iii=0; iii< this.tracks.length; iii++) {
|
||||
elements.push(this.tracks[iii].id);
|
||||
}
|
||||
this.playerService.clear();
|
||||
this.playerService.setNewPlaylistShuffle(elements);
|
||||
playShuffle(event: any): void {
|
||||
let elements: number[] = [];
|
||||
for (let iii = 0; iii < this.tracks.length; iii++) {
|
||||
elements.push(this.tracks[iii].id);
|
||||
}
|
||||
this.playerService.clear();
|
||||
this.playerService.setNewPlaylistShuffle(elements);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,26 +1,28 @@
|
||||
<div class="generic-page">
|
||||
<div class="fill-title colomn_mutiple">
|
||||
<div class="cover-area">
|
||||
<div class="cover" *ngIf="covers" >
|
||||
<img src="{{covers[0]}}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
|
||||
<div class="title">
|
||||
<div class="fill-title">
|
||||
<div class="description-area ">
|
||||
<div class="shadow-text title">
|
||||
{{name}}
|
||||
</div>
|
||||
<div class="description" *ngIf="description">
|
||||
{{description}}
|
||||
</div>
|
||||
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit">
|
||||
<i class="material-icons">play_arrow</i> Play All
|
||||
</button>
|
||||
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit">
|
||||
<i class="material-icons">shuffle</i> Shuffle
|
||||
</button>
|
||||
<div class="button-area">
|
||||
<button class="circular-button" (click)="playAll($event)" type="submit">
|
||||
<i class="material-icons">play_arrow</i>
|
||||
</button>
|
||||
<button class="circular-button" (click)="playShuffle($event)" type="submit">
|
||||
<i class="material-icons">shuffle</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cover-area" *ngIf="covers" >
|
||||
<div class="cover">
|
||||
<img src="{{covers[0]}}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fill-content colomn_mutiple" *ngIf="albums">
|
||||
<div class="fill-content colomn_single" *ngIf="albums">
|
||||
<div class="clear"></div>
|
||||
<div class="title" *ngIf="albums.length > 1">Albums:</div>
|
||||
<div class="title" *ngIf="albums.length == 1">Album:</div>
|
||||
|
||||
@ -25,20 +25,20 @@ export class ArtistScene implements OnInit {
|
||||
countTrack: (id: number) => Promise<Number>;
|
||||
|
||||
constructor(
|
||||
private albumService: AlbumService,
|
||||
private artistService: ArtistService,
|
||||
private playerService: PlayerService,
|
||||
private arianeService: ArianeService,
|
||||
private albumService: AlbumService,
|
||||
private artistService: ArtistService,
|
||||
private playerService: PlayerService,
|
||||
private arianeService: ArianeService,
|
||||
private dataService: DataService) {
|
||||
|
||||
}
|
||||
|
||||
countTrackCallback(albumId: number) : Promise<Number> {
|
||||
|
||||
countTrackCallback(albumId: number): Promise<Number> {
|
||||
return this.albumService.countTrack(albumId);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.countTrack = (id:number) => {return self.countTrackCallback(id);};
|
||||
this.countTrack = (id: number) => { return self.countTrackCallback(id); };
|
||||
// this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId'));
|
||||
// this.idType = parseInt(this.route.snapshot.paramMap.get('typeId'));
|
||||
this.idArtist = this.arianeService.getArtistId();
|
||||
@ -76,48 +76,48 @@ export class ArtistScene implements OnInit {
|
||||
|
||||
|
||||
|
||||
onSelectAlbum(event: any, idSelected: number):void {
|
||||
onSelectAlbum(event: any, idSelected: number): void {
|
||||
if (event.ctrlKey) {
|
||||
this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 } );
|
||||
this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 });
|
||||
} else {
|
||||
this.arianeService.navigateArtist({artistId: this.idArtist, albumId: idSelected, newWindows: event.which === 2 } );
|
||||
this.arianeService.navigateArtist({ artistId: this.idArtist, albumId: idSelected, newWindows: event.which === 2 });
|
||||
}
|
||||
}
|
||||
|
||||
onSelectTrack(event: any, idSelected: number):void {
|
||||
onSelectTrack(event: any, idSelected: number): void {
|
||||
if (event.ctrlKey === false) {
|
||||
this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} );
|
||||
this.arianeService.navigateTrack({ trackId: idSelected, newWindows: event.which === 2 });
|
||||
} else {
|
||||
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} );
|
||||
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
|
||||
}
|
||||
}
|
||||
|
||||
getAllTracksIds(): Promise<number[]> {
|
||||
let elements: number[] = [];
|
||||
for (let iii=0; iii< this.albums.length; iii++) {
|
||||
for (let iii = 0; iii < this.albums.length; iii++) {
|
||||
elements.push(this.albums[iii].id);
|
||||
}
|
||||
return this.albumService.getAllTracksForAlbums(elements);
|
||||
}
|
||||
|
||||
playAll(event: any):void {
|
||||
this.playerService.clear();
|
||||
playAll(event: any): void {
|
||||
this.playerService.clear();
|
||||
let self = this;
|
||||
this.getAllTracksIds()
|
||||
this.getAllTracksIds()
|
||||
.then((response: number[]) => {
|
||||
self.playerService.setNewPlaylist(response);
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(`error to get list o ftrack ...`)
|
||||
});
|
||||
}
|
||||
playShuffe(event: any):void {
|
||||
this.playerService.clear();
|
||||
playShuffle(event: any): void {
|
||||
this.playerService.clear();
|
||||
let self = this;
|
||||
this.getAllTracksIds()
|
||||
this.getAllTracksIds()
|
||||
.then((response: number[]) => {
|
||||
self.playerService.setNewPlaylistShuffle(response);
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(`error to get list o ftrack ...`)
|
||||
});
|
||||
|
||||
@ -1,26 +1,28 @@
|
||||
<div class="generic-page">
|
||||
<div class="fill-title colomn_mutiple">
|
||||
<div class="cover-area">
|
||||
<div class="cover" *ngIf="covers" >
|
||||
<img src="{{covers[0]}}"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fill-title">
|
||||
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
|
||||
<div class="title">
|
||||
<div class="shadow-text title">
|
||||
{{name}}
|
||||
</div>
|
||||
<div class="description" *ngIf="description">
|
||||
{{description}}
|
||||
</div>
|
||||
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit">
|
||||
<i class="material-icons">play_arrow</i> Play All
|
||||
</button>
|
||||
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit">
|
||||
<i class="material-icons">shuffle</i> Shuffle
|
||||
</button>
|
||||
<div class="button-area">
|
||||
<button class="circular-button" (click)="playAll($event)" type="submit">
|
||||
<i class="material-icons">play_arrow</i>
|
||||
</button>
|
||||
<button class="circular-button" (click)="playShuffle($event)" type="submit">
|
||||
<i class="material-icons">shuffle</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cover-area">
|
||||
<div class="cover" *ngIf="covers" >
|
||||
<img src="{{covers[0]}}"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fill-content colomn_mutiple" *ngIf="artists">
|
||||
<div class="fill-content colomn_single" *ngIf="artists">
|
||||
<div class="clear"></div>
|
||||
<div class="title" *ngIf="artists.length > 1">Artists:</div>
|
||||
<div class="title" *ngIf="artists.length == 1">Artist:</div>
|
||||
|
||||
@ -24,18 +24,18 @@ export class ArtistsScene implements OnInit {
|
||||
countAlbum: (id: number) => Promise<Number>;
|
||||
|
||||
constructor(
|
||||
private artistService: ArtistService,
|
||||
private albumService: AlbumService,
|
||||
private trackService: TrackService,
|
||||
private playerService: PlayerService,
|
||||
private arianeService: ArianeService) {
|
||||
private artistService: ArtistService,
|
||||
private albumService: AlbumService,
|
||||
private trackService: TrackService,
|
||||
private playerService: PlayerService,
|
||||
private arianeService: ArianeService) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
let self = this;
|
||||
this.countTrack = (id:number) => {return self.countTrackCallback(id);};
|
||||
this.countAlbum = (id:number) => {return self.countAlbumCallback(id);};
|
||||
this.countTrack = (id: number) => { return self.countTrackCallback(id); };
|
||||
this.countAlbum = (id: number) => { return self.countAlbumCallback(id); };
|
||||
// this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId'));
|
||||
// this.idType = parseInt(this.route.snapshot.paramMap.get('typeId'));
|
||||
this.artistService.getOrder()
|
||||
@ -46,46 +46,46 @@ export class ArtistsScene implements OnInit {
|
||||
self.artists = undefined;
|
||||
});
|
||||
}
|
||||
onSelectArtist(event: any, idSelected: number):void {
|
||||
onSelectArtist(event: any, idSelected: number): void {
|
||||
if (event.ctrlKey) {
|
||||
this.arianeService.navigateArtistEdit({id: idSelected, newWindows:event.which === 2} );
|
||||
this.arianeService.navigateArtistEdit({ id: idSelected, newWindows: event.which === 2 });
|
||||
} else {
|
||||
this.arianeService.navigateArtist({artistId: idSelected, newWindows:event.which === 2} );
|
||||
this.arianeService.navigateArtist({ artistId: idSelected, newWindows: event.which === 2 });
|
||||
}
|
||||
}
|
||||
|
||||
countTrackCallback(artistId: number) : Promise<Number> {
|
||||
countTrackCallback(artistId: number): Promise<Number> {
|
||||
return this.artistService.countTrack(artistId);
|
||||
}
|
||||
countAlbumCallback(artistId: number) : Promise<Number> {
|
||||
countAlbumCallback(artistId: number): Promise<Number> {
|
||||
return this.artistService.countAlbum(artistId);
|
||||
}
|
||||
playAll(event: any):void {
|
||||
this.playerService.clear();
|
||||
playAll(event: any): void {
|
||||
this.playerService.clear();
|
||||
let self = this;
|
||||
this.trackService.getData()
|
||||
this.trackService.getData()
|
||||
.then((response: NodeData[]) => {
|
||||
let ids = [];
|
||||
response.forEach(element => {
|
||||
ids.push(element.id);
|
||||
});
|
||||
self.playerService.setNewPlaylist(ids);
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(`error to get list o ftrack ...`)
|
||||
});
|
||||
}
|
||||
playShuffe(event: any):void {
|
||||
this.playerService.clear();
|
||||
playShuffle(event: any): void {
|
||||
this.playerService.clear();
|
||||
let self = this;
|
||||
this.trackService.getData()
|
||||
this.trackService.getData()
|
||||
.then((response: NodeData[]) => {
|
||||
let ids = [];
|
||||
response.forEach(element => {
|
||||
ids.push(element.id);
|
||||
});
|
||||
self.playerService.setNewPlaylistShuffle(ids);
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(`error to get list o ftrack ...`)
|
||||
});
|
||||
|
||||
@ -12,26 +12,26 @@ import { HTTPMimeType, HTTPRequestModel, HttpWrapperService, ModelResponseHttp }
|
||||
@Injectable()
|
||||
export class DataService {
|
||||
// 0: Not hide password; 1 hide password;
|
||||
private serviceName:string = 'data';
|
||||
private serviceName: string = 'data';
|
||||
|
||||
constructor(private http: HttpWrapperService) {
|
||||
console.log('Start DataService');
|
||||
}
|
||||
|
||||
getData():any {
|
||||
getData(): any {
|
||||
return this.http.getSpecific(this.serviceName);
|
||||
}
|
||||
|
||||
get(_id:number):any {
|
||||
get(_id: number): any {
|
||||
return this.http.getSpecific([this.serviceName, _id]);
|
||||
}
|
||||
|
||||
uploadFile(_form:FormData, _progress:any = null) {
|
||||
uploadFile(_form: FormData, _progress: any = null) {
|
||||
// return this.http.uploadFileMultipart(this.serviceName, null, _file);
|
||||
return this.http.uploadMultipart(`${this.serviceName }/upload/`, _form, _progress);
|
||||
return this.http.uploadMultipart(`${this.serviceName}/upload/`, _form, _progress);
|
||||
}
|
||||
|
||||
getImage(_id:number) : Promise<ModelResponseHttp> {
|
||||
getImage(_id: number): Promise<ModelResponseHttp> {
|
||||
return this.http.requestImage({
|
||||
endPoint: this.serviceName,
|
||||
requestType: HTTPRequestModel.GET,
|
||||
@ -39,7 +39,7 @@ export class DataService {
|
||||
contentType: HTTPMimeType.JSON,
|
||||
});
|
||||
}
|
||||
getImageThumbnail(_id:number) : Promise<ModelResponseHttp> {
|
||||
getImageThumbnail(_id: number): Promise<ModelResponseHttp> {
|
||||
return this.http.requestImage({
|
||||
endPoint: this.serviceName + "/thumbnail/" + _id,
|
||||
requestType: HTTPRequestModel.GET,
|
||||
@ -64,12 +64,12 @@ export class DataService {
|
||||
* @returns the url of the cover
|
||||
*/
|
||||
getCoverListUrl(coverIds?: number[]): string[] | undefined {
|
||||
if(!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) {
|
||||
if (!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
let covers = [] as string[];
|
||||
for(let iii = 0; iii < coverIds.length; iii++) {
|
||||
covers.push(this.getCoverUrl(coverIds[iii]));
|
||||
for (let iii = 0; iii < coverIds.length; iii++) {
|
||||
covers.push(this.getCoverUrl(coverIds[iii]).replace("http://localhost:19080", "https://atria-soft.org"));
|
||||
}
|
||||
return covers;
|
||||
}
|
||||
@ -90,11 +90,11 @@ export class DataService {
|
||||
* @returns the url of the cover
|
||||
*/
|
||||
getCoverListThumbnailUrl(coverIds?: number[]): string[] | undefined {
|
||||
if(!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) {
|
||||
if (!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) {
|
||||
return undefined;
|
||||
}
|
||||
let covers = [] as string[];
|
||||
for(let iii = 0; iii < coverIds.length; iii++) {
|
||||
for (let iii = 0; iii < coverIds.length; iii++) {
|
||||
covers.push(this.getCoverThumbnailUrl(coverIds[iii]));
|
||||
}
|
||||
return covers;
|
||||
|
||||
@ -1,113 +1,111 @@
|
||||
|
||||
|
||||
// landscape
|
||||
@media screen and (orientation:landscape) {
|
||||
.clear {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.clear-end {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 100%;
|
||||
clear: both;
|
||||
text-align: center;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.button-area {
|
||||
grid-gap: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
button {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.generic-page {
|
||||
.fill-title {
|
||||
display:block;
|
||||
position:fixed;
|
||||
left: 0px;
|
||||
top: 50px;
|
||||
width: 400px;
|
||||
float: left;
|
||||
padding: 1%;
|
||||
.cover-area {
|
||||
float: right;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 5px;
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.shadow-text {
|
||||
text-align: left;
|
||||
text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
color: rgb(204, 204, 204);
|
||||
}
|
||||
|
||||
.cover-area {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
.cover {
|
||||
align: center;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
box-shadow: 0 0 40px black;
|
||||
border-radius: 25px;
|
||||
min-width: 150px;
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
}
|
||||
.description-area-cover {
|
||||
width: 100%;
|
||||
}
|
||||
.description-area-no-cover {
|
||||
width: 100%;
|
||||
}
|
||||
.description-area {
|
||||
float: left;
|
||||
.title {
|
||||
font-size: 45px;
|
||||
font-weight: bold;
|
||||
line-height: 60px;
|
||||
width:100%;
|
||||
align: left;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin: 10px 0 10px 0;
|
||||
text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
|
||||
text-transform: uppercase;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
}
|
||||
.sub-title-main {
|
||||
font-size: 33px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
width:100%;
|
||||
align: center;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin: 10px 0 10px 0;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
}
|
||||
.sub-title {
|
||||
font-size: 33px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
width:100%;
|
||||
align: left;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin: 10px 0 10px 0;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
}
|
||||
.description {
|
||||
//background-color: orange;
|
||||
font-size: 24px;
|
||||
width: ~"calc(100% - 14px * 2)";//calc(100% - 40px * 2 - 14px * 2);
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
//margin: 0 40px 10px 40px;
|
||||
background: rgba(150, 150, 150, 0.9);
|
||||
//border-radius: 7px;
|
||||
padding: 14px;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
}
|
||||
|
||||
.cover {
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.description-area {
|
||||
flex: 3;
|
||||
min-width: 200px;
|
||||
|
||||
.title {
|
||||
font-size: 27px;
|
||||
font-weight: bold;
|
||||
line-height: 60px;
|
||||
vertical-align: middle;
|
||||
//margin: 10px 0 10px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sub-title-main {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
width: 100%;
|
||||
//margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-content {
|
||||
display:block;
|
||||
//position:relative;
|
||||
margin: 0 0 0 430px;
|
||||
padding: 0px;
|
||||
float: left;
|
||||
.title {
|
||||
font-size: 33px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
width:100%;
|
||||
align: left;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin: 10px 0 10px 0;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: 20px;
|
||||
padding: 1px;
|
||||
@ -118,20 +116,23 @@
|
||||
overflow: hidden;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
will-change: box-shadow;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.4s;
|
||||
float:left;
|
||||
float: left;
|
||||
|
||||
//display:inline;
|
||||
&:hover {
|
||||
box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -141,27 +142,29 @@
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.item-list {
|
||||
font-size: 20px;
|
||||
padding: 1px;
|
||||
height: 110px;
|
||||
width: 80%;
|
||||
width: 95%;
|
||||
margin: 5px auto 5px auto;
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
will-change: box-shadow;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: rgba(256, 256, 256, 0.3);
|
||||
border-radius: 7px;
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -172,13 +175,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.cover {
|
||||
width: 30%;
|
||||
//margin: 0 auto;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,43 +186,49 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 3700px) and (max-width: 3910px) and (orientation:landscape){
|
||||
@media all and (min-width: 3700px) and (max-width: 3910px) and (orientation:landscape) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 15)";
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@media all and (min-width: 3390px) and (max-width: 3700px) and (orientation:landscape){
|
||||
|
||||
@media all and (min-width: 3390px) and (max-width: 3700px) and (orientation:landscape) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 14)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 3180px) and (max-width: 3390px) and (orientation:landscape) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 13)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
@media all and (min-width: 2970px) and (max-width: 3180px) and (orientation:landscape){
|
||||
|
||||
@media all and (min-width: 2970px) and (max-width: 3180px) and (orientation:landscape) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 12)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2760px) and (max-width: 2970px) and (orientation:landscape) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 11)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2550px) and (max-width: 2760px) and (orientation:landscape) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 10)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2340px) and (max-width: 2550px) and (orientation:landscape) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 9)";
|
||||
@ -281,115 +284,119 @@
|
||||
}
|
||||
}
|
||||
|
||||
.colomn_single {
|
||||
margin-left: 50px;
|
||||
margin-right: 50px;
|
||||
}
|
||||
|
||||
|
||||
// portrait
|
||||
@media screen and (orientation:portrait) {
|
||||
.clear {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.clear-end {
|
||||
clear: both;
|
||||
text-align: center;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.button-area {
|
||||
grid-gap: 5px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-flow: row wrap;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.generic-page {
|
||||
.fill-title {
|
||||
display:block;
|
||||
position:relative;
|
||||
//width: 100%;
|
||||
//height: 400px;
|
||||
padding: 1%;
|
||||
.cover-area {
|
||||
//position:relative;
|
||||
float: right;
|
||||
//right: 0px;
|
||||
width: 300px;
|
||||
//height: 100%;
|
||||
.cover {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.description-area-cover {
|
||||
width: ~"calc( 100% - 302px)";
|
||||
}
|
||||
.description-area-no-cover {
|
||||
width: 100%;
|
||||
}
|
||||
.description-area {
|
||||
//position: sticky;
|
||||
float: left;
|
||||
//height: 100%;
|
||||
//margin: 0;
|
||||
//border: solid 1px;
|
||||
//border-color: rgba(255, 0, 0, 0.7);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
grid-gap: 5px;
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
//background-color: green;
|
||||
font-size: 45px;
|
||||
font-weight: bold;
|
||||
line-height: 60px;
|
||||
width:100%;
|
||||
align: left;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin: 10px 0 10px 0;
|
||||
text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
|
||||
text-transform: uppercase;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
}
|
||||
.sub-title-main {
|
||||
font-size: 33px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
width:100%;
|
||||
align: center;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin: 10px 0 10px 0;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
}
|
||||
.sub-title {
|
||||
font-size: 33px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
width:100%;
|
||||
align: left;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin: 10px 0 10px 0;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
}
|
||||
.description {
|
||||
//background-color: orange;
|
||||
font-size: 24px;
|
||||
text-align: left;
|
||||
width: ~"calc(100% - 14px * 2)";//calc(100% - 40px * 2 - 14px * 2);
|
||||
vertical-align: middle;
|
||||
//margin: 0 40px 10px 40px;
|
||||
background: rgba(150, 150, 150, 0.9);
|
||||
//border-radius: 7px;
|
||||
padding: 14px;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
}
|
||||
.shadow-text {
|
||||
text-align: left;
|
||||
text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
color: rgb(204, 204, 204);
|
||||
}
|
||||
|
||||
.cover-area {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
box-shadow: 0 0 40px black;
|
||||
border-radius: 25px;
|
||||
min-width: 150px;
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.description-area {
|
||||
flex: 3;
|
||||
min-width: 200px;
|
||||
color: rgb(204, 204, 204);
|
||||
|
||||
.title {
|
||||
font-size: 27px;
|
||||
font-weight: bold;
|
||||
line-height: 60px;
|
||||
vertical-align: middle;
|
||||
//margin: 10px 0 10px 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sub-title-main {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
width: 100%;
|
||||
//margin: 10px 0 10px 0;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 20px;
|
||||
text-align: left;
|
||||
padding: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.fill-content {
|
||||
.title {
|
||||
font-size: 33px;
|
||||
font-weight: bold;
|
||||
line-height: 40px;
|
||||
width:100%;
|
||||
align: left;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
margin: 10px 0 10px 0;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
}
|
||||
|
||||
.item {
|
||||
font-size: 20px;
|
||||
padding: 1px;
|
||||
@ -400,20 +407,23 @@
|
||||
overflow: hidden;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
will-change: box-shadow;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition-duration: 0.4s;
|
||||
float:left;
|
||||
float: left;
|
||||
|
||||
//display:inline;
|
||||
&:hover {
|
||||
box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -423,7 +433,7 @@
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.item-list {
|
||||
font-size: 20px;
|
||||
padding: 1px;
|
||||
@ -434,16 +444,24 @@
|
||||
overflow: hidden;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
font-weight: 500;
|
||||
will-change: box-shadow;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: rgba(256, 256, 256, 0.3);
|
||||
background: rgba(156, 156, 156, 0.5);
|
||||
border-radius: 7px;
|
||||
|
||||
.material-icons {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
//display:inline;
|
||||
&:hover {
|
||||
background-color: rgba(156, 156, 156, 1);
|
||||
box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
@ -454,15 +472,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.cover {
|
||||
width: 30%;
|
||||
//margin: 0 auto;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 3510px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 15)";
|
||||
@ -476,78 +489,91 @@
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2990px) and (max-width: 3300px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 14)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2780px) and (max-width: 2990px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 13)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2570px) and (max-width: 2780px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 12)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2360px) and (max-width: 2570px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 11)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 2150px) and (max-width: 2360px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 10)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1940px) and (max-width: 2150px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 9)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1730px) and (max-width: 1940px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 8)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1520px) and (max-width: 1730px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 7)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1310px) and (max-width: 1520px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 6)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1100px) and (max-width: 1310px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 5)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 890px) and (max-width: 1100px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 4)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 680px) and (max-width: 890px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 3)";
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 680px) and (orientation:portrait) {
|
||||
.colomn_mutiple {
|
||||
width: ~"calc(210px * 2)";
|
||||
@ -562,7 +588,7 @@
|
||||
font-size: 45px;
|
||||
font-weight: bold;
|
||||
line-height: 60px;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
align: center;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
@ -570,30 +596,32 @@
|
||||
margin: 10px 0 10px 0;
|
||||
text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
|
||||
text-transform: uppercase;
|
||||
font-family: "Roboto","Helvetica","Arial",sans-serif;
|
||||
font-family: "Roboto", "Helvetica", "Arial", sans-serif;
|
||||
}
|
||||
|
||||
.fill-all{
|
||||
|
||||
.fill-all {
|
||||
//width:100%;
|
||||
max-width:80%;
|
||||
height:100%;
|
||||
max-width: 80%;
|
||||
height: 100%;
|
||||
margin: 20px auto;
|
||||
padding: 20px;
|
||||
border:0;
|
||||
border: 0;
|
||||
background-color: rgba(200, 200, 200, 0.5);
|
||||
box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
|
||||
.message-big {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
font-size: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.request_raw2 {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 160px;
|
||||
|
||||
.label {
|
||||
width: 15%;
|
||||
margin-right: 10px;
|
||||
@ -601,10 +629,12 @@
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 75%;
|
||||
float: left;
|
||||
display: block;
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
@ -612,10 +642,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.request_raw {
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
height: 45px;
|
||||
|
||||
.label {
|
||||
width: 15%;
|
||||
margin-right: 10px;
|
||||
@ -623,84 +655,104 @@
|
||||
float: left;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 75%;
|
||||
float: left;
|
||||
display: block;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.input_add {
|
||||
width: 5%;
|
||||
float: right;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.send_value {
|
||||
width: 300px;
|
||||
margin: 0 auto;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hide-element {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.cover {
|
||||
position:relative;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
//margin: 0 auto;
|
||||
overflow:hidden;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
display: block;
|
||||
|
||||
|
||||
.cover-image {
|
||||
position:absolute;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 250px;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
.cover-no-image {
|
||||
position:absolute;
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
height: 240px;
|
||||
margin: 0 auto;
|
||||
border: solid 5px;
|
||||
border-color: rgba(0, 0, 0, 0.7);
|
||||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
.cover-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-ms-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
};
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
.button-remove {
|
||||
font-size:75px;
|
||||
font-size: 75px;
|
||||
color: #F00000;
|
||||
}
|
||||
|
||||
.button-add {
|
||||
font-size:75px;
|
||||
font-size: 75px;
|
||||
color: #00F000;
|
||||
}
|
||||
}
|
||||
|
||||
@ -104,6 +104,7 @@ html {
|
||||
|
||||
|
||||
.circular-button {
|
||||
position: relative;
|
||||
border-radius: 50%;
|
||||
font-size: 24px;
|
||||
height: 56px;
|
||||
@ -294,7 +295,7 @@ label {
|
||||
background-attachment: fixed;
|
||||
background-position: 50% 50%;
|
||||
|
||||
z-index: -1;
|
||||
z-index: -100;
|
||||
}
|
||||
|
||||
|
||||
@ -302,6 +303,18 @@ label {
|
||||
* FLEX TOOLS
|
||||
*****************************************************************************/
|
||||
|
||||
.flex-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flex-column-last {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.flex-column-first {
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
.flex-row {
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user