kangaroo-and-rabbit/karusic
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

[DEV] update display better

Browse Source
This commit is contained in:
Edouard DUPIN 2024-01-27 18:09:29 +01:00
parent 247064e412
commit 883866d5f6
14 changed files with 647 additions and 578 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/app/component/element-player-audio/element-player-audio.ts
View File

@ -137,7 +137,7 @@ export class ElementPlayerAudioComponent implements OnInit {
self.mediaSource = self.httpService.createRESTCall2({ self.mediaSource = self.httpService.createRESTCall2({
api: `data/${self.currentLMedia.dataId}/unknowMediaName.webm`, //${self.generatedName}`, api: `data/${self.currentLMedia.dataId}/unknowMediaName.webm`, //${self.generatedName}`,
addURLToken: true, addURLToken: true,
}); }).replace("http://localhost:19080", "https://atria-soft.org");
}).catch(() => { }).catch(() => {
console.error("error not ùmanaged in audio player ... 111"); console.error("error not ùmanaged in audio player ... 111");
}) })

31
front/src/app/scene/album/album.html
View File

@ -1,11 +1,6 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title colomn_mutiple"> <div class="fill-title">
<div class="cover-area"> <div class="description-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="title">
{{name}} {{name}}
</div> </div>
@ -15,18 +10,22 @@
<div class="description" *ngIf="albumDescription"> <div class="description" *ngIf="albumDescription">
{{albumDescription}} {{albumDescription}}
</div> </div>
<div class="description" *ngIf="albumDescription"> <div class="button-area">
{{albumDescription}} <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>
<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> </div>
<div class="fill-content colomn_mutiple" *ngIf="tracks"> <div class="fill-content colomn_single" *ngIf="tracks">
<div class="clear"></div> <div class="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div> <div class="title" *ngIf="tracks.length > 1">Tracks:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div> <div class="title" *ngIf="tracks.length == 1">Track:</div>

207
front/src/app/scene/album/album.ts
View File

@ -4,117 +4,116 @@
* @license PROPRIETARY (see license file) * @license PROPRIETARY (see license file)
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Media } from 'app/model'; import { Media } from 'app/model';
import { ArtistService, DataService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service'; import { ArtistService, DataService, ArianeService, AlbumService, TrackService, PlayerService } from 'app/service';
@Component({ @Component({
selector: 'app-album', selector: 'app-album',
templateUrl: './album.html' templateUrl: './album.html'
}) })
export class AlbumScene implements OnInit { export class AlbumScene implements OnInit {
public idArtist = -1; public idArtist = -1;
public idAlbum = -1; public idAlbum = -1;
public name: string = ''; public name: string = '';
public description: string = undefined; public description: string = undefined;
public covers: Array<string> = undefined; public covers: Array<string> = undefined;
public albumName: string = ''; public albumName: string = '';
public albumDescription: string = undefined; public albumDescription: string = undefined;
public albumCovers: string[] = undefined; public albumCovers: string[] = undefined;
public tracksIds: number[] = undefined; public tracksIds: number[] = undefined;
public tracks: Media[] = undefined; public tracks: Media[] = undefined;
constructor( constructor(
private artistService: ArtistService, private artistService: ArtistService,
private albumService: AlbumService, private albumService: AlbumService,
private trackService: TrackService, private trackService: TrackService,
private arianeService: ArianeService, private arianeService: ArianeService,
private playerService: PlayerService, private playerService: PlayerService,
private dataService: DataService) { private dataService: DataService) {
} }
ngOnInit() { ngOnInit() {
// this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId')); // this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId'));
// this.idType = parseInt(this.route.snapshot.paramMap.get('typeId')); // this.idType = parseInt(this.route.snapshot.paramMap.get('typeId'));
this.idArtist = this.arianeService.getArtistId(); this.idArtist = this.arianeService.getArtistId();
this.idAlbum = this.arianeService.getAlbumId(); this.idAlbum = this.arianeService.getAlbumId();
let self = this; let self = this;
this.artistService.get(this.idArtist) this.artistService.get(this.idArtist)
.then((response) => { .then((response) => {
self.name = response.name; self.name = response.name;
self.description = response.description; self.description = response.description;
self.covers = this.dataService.getCoverListUrl(response.covers); self.covers = this.dataService.getCoverListUrl(response.covers);
}).catch((response) => { }).catch((response) => {
self.description = undefined; self.description = undefined;
self.name = '???'; self.name = '???';
self.covers = undefined; self.covers = undefined;
// no check just ==> an error occured on album // no check just ==> an error occured on album
}); });
this.albumService.get(this.idAlbum) this.albumService.get(this.idAlbum)
.then((response) => { .then((response) => {
self.albumName = response.name; self.albumName = response.name;
self.albumDescription = response.description; self.albumDescription = response.description;
self.albumCovers = this.dataService.getCoverListUrl(response.covers); self.albumCovers = this.dataService.getCoverListUrl(response.covers);
}).catch((response) => { }).catch((response) => {
self.albumDescription = undefined; self.albumDescription = undefined;
self.albumName = '???'; self.albumName = '???';
self.albumCovers = undefined; self.albumCovers = undefined;
// no check just ==> an error occured on album // no check just ==> an error occured on album
}); });
//console.log("all the tracks: " + self.tracksIds); //console.log("all the tracks: " + self.tracksIds);
this.trackService.getWithAlbum(self.idAlbum) this.trackService.getWithAlbum(self.idAlbum)
.then((response2: Media[]) => { .then((response2: Media[]) => {
self.tracks = response2; self.tracks = response2;
//console.log(`>>>>BBB get tracks : ${JSON.stringify(response2, null, 2)}`); //console.log(`>>>>BBB get tracks : ${JSON.stringify(response2, null, 2)}`);
}).catch((response) => { }).catch((response) => {
//console.log(`>>>>BBB plop`); //console.log(`>>>>BBB plop`);
self.tracks = undefined; self.tracks = undefined;
}); });
} }
onSelectTrack(event: any, idSelected: number):void { onSelectTrack(event: any, idSelected: number): void {
if (event.ctrlKey === false) { if (event.ctrlKey === false) {
//this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} ); //this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} );
// TODO: add on global player ... // TODO: add on global player ...
//this.playerService.play(idSelected); //this.playerService.play(idSelected);
let elements: number[] = []; let elements: number[] = [];
let valuePlayed: number = undefined; 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); elements.push(this.tracks[iii].id);
//console.log(`plop: ${this.tracks[iii].id} == ${idSelected} ==> ${this.tracks[iii].name}`); //console.log(`plop: ${this.tracks[iii].id} == ${idSelected} ==> ${this.tracks[iii].name}`);
if (this.tracks[iii].id == idSelected) { if (this.tracks[iii].id == idSelected) {
//console.log(` ==> find`); //console.log(` ==> find`);
valuePlayed = iii; valuePlayed = iii;
} }
} }
this.playerService.playInList(valuePlayed, elements); this.playerService.playInList(valuePlayed, elements);
} else { } else {
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} ); this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
} }
} }
playAll(event: any):void { playAll(event: any): void {
let elements: number[] = []; 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); elements.push(this.tracks[iii].id);
} }
this.playerService.clear(); this.playerService.clear();
this.playerService.setNewPlaylist(elements); this.playerService.setNewPlaylist(elements);
} }
playShuffe(event: any):void { playShuffle(event: any): void {
let elements: number[] = []; 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); elements.push(this.tracks[iii].id);
} }
this.playerService.clear(); this.playerService.clear();
this.playerService.setNewPlaylistShuffle(elements); this.playerService.setNewPlaylistShuffle(elements);
} }
} }

30
front/src/app/scene/album/albums.html
View File

@ -1,26 +1,28 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title colomn_mutiple"> <div class="fill-title">
<div class="cover-area"> <div class="description-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="title">
{{name}} {{name}}
</div> </div>
<div class="description" *ngIf="description"> <div class="description" *ngIf="description">
{{description}} {{description}}
</div> </div>
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit"> <div class="button-area">
<i class="material-icons">play_arrow</i> Play All <button class="circular-button" (click)="playAll($event)" type="submit">
</button> <i class="material-icons">play_arrow</i>
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit"> </button>
<i class="material-icons">shuffle</i> Shuffle <button class="circular-button" (click)="playShuffle($event)" type="submit">
</button> <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> </div>
<div class="fill-content colomn_mutiple" *ngIf="albums"> <div class="fill-content colomn_single" *ngIf="albums">
<div class="clear"></div> <div class="clear"></div>
<div class="title" *ngIf="albums.length > 1">Albums:</div> <div class="title" *ngIf="albums.length > 1">Albums:</div>
<div class="title" *ngIf="albums.length == 1">Album:</div> <div class="title" *ngIf="albums.length == 1">Album:</div>

193
front/src/app/scene/album/albums.ts
View File

@ -4,17 +4,17 @@
* @license PROPRIETARY (see license file) * @license PROPRIETARY (see license file)
*/ */
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { ArtistService, DataService, ArianeService, AlbumService, PlayerService, TrackService } from 'app/service'; import { ArtistService, DataService, ArianeService, AlbumService, PlayerService, TrackService } from 'app/service';
import { NodeData } from 'common/model'; import { NodeData } from 'common/model';
@Component({ @Component({
selector: 'app-albums', selector: 'app-albums',
templateUrl: './albums.html' templateUrl: './albums.html'
}) })
export class AlbumsScene implements OnInit { export class AlbumsScene implements OnInit {
public name: string = ''; public name: string = '';
public description: string = undefined; public description: string = undefined;
public covers: string[] = undefined; public covers: string[] = undefined;
@ -23,99 +23,98 @@
public countSubElement: number = undefined; public countSubElement: number = undefined;
countTrack: (id: number) => Promise<Number>; countTrack: (id: number) => Promise<Number>;
getArtistsString: (id: number) => Promise<String[]>; getArtistsString: (id: number) => Promise<String[]>;
constructor( constructor(
private albumService: AlbumService, private albumService: AlbumService,
private artistService: ArtistService, private artistService: ArtistService,
private arianeService: ArianeService, private arianeService: ArianeService,
private trackService: TrackService, private trackService: TrackService,
private playerService: PlayerService, private playerService: PlayerService,
private dataService: DataService) { private dataService: DataService) {
} }
countTrackCallback(albumId: number) : Promise<Number> { countTrackCallback(albumId: number): Promise<Number> {
return this.albumService.countTrack(albumId); return this.albumService.countTrack(albumId);
} }
getArtistsStringCallback(albumId: number) : Promise<String[]> { getArtistsStringCallback(albumId: number): Promise<String[]> {
//console.log(`request all artist for album: {albumId}`) //console.log(`request all artist for album: {albumId}`)
return this.albumService.getArtists(albumId); return this.albumService.getArtists(albumId);
} }
ngOnInit() { ngOnInit() {
this.getArtistsString = (id:number) => {return self.getArtistsStringCallback(id);}; this.getArtistsString = (id: number) => { return self.getArtistsStringCallback(id); };
this.countTrack = (id:number) => {return self.countTrackCallback(id);}; this.countTrack = (id: number) => { return self.countTrackCallback(id); };
let self = this; let self = this;
self.name = "All Albums"; self.name = "All Albums";
self.description = "View all albums (no specific artist)"; self.description = "View all albums (no specific artist)";
//console.log(`get parameter id: ${ this.idArtist}`); //console.log(`get parameter id: ${ this.idArtist}`);
this.albumService.getOrder() this.albumService.getOrder()
.then((response: NodeData[]) => { .then((response: NodeData[]) => {
//console.log(`>>>> get album : ${JSON.stringify(response)}`) //console.log(`>>>> get album : ${JSON.stringify(response)}`)
self.albums = response; self.albums = response;
}).catch((response) => { }).catch((response) => {
self.albums = undefined; self.albums = undefined;
}); });
// TODO later: get all orfan tracks ... // TODO later: get all orfan tracks ...
/* /*
this.artistService.getTrack(this.idArtist) this.artistService.getTrack(this.idArtist)
.then((response: NodeData[]) => { .then((response: NodeData[]) => {
//console.log(`>>>> get track : ${JSON.stringify(response)}`) //console.log(`>>>> get track : ${JSON.stringify(response)}`)
self.tracks = response; self.tracks = response;
}).catch((response) => { }).catch((response) => {
self.tracks = undefined; self.tracks = undefined;
}); });
*/ */
} }
onSelectAlbum(event: any, idSelected: number):void { onSelectAlbum(event: any, idSelected: number): void {
if (event.ctrlKey) { if (event.ctrlKey) {
this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 } ); this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 });
} else { } 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 { onSelectTrack(event: any, idSelected: number): void {
if (event.ctrlKey) { if (event.ctrlKey) {
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} ); this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
} else { } else {
this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} ); this.arianeService.navigateTrack({ trackId: idSelected, newWindows: event.which === 2 });
} }
} }
playAll(event: any):void { playAll(event: any): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.trackService.getData() this.trackService.getData()
.then((response: NodeData[]) => { .then((response: NodeData[]) => {
let ids = []; let ids = [];
response.forEach(element => { response.forEach(element => {
ids.push(element.id); ids.push(element.id);
}); });
self.playerService.setNewPlaylist(ids); self.playerService.setNewPlaylist(ids);
}) })
.catch(() => { .catch(() => {
console.log(`error to get list o ftrack ...`) console.log(`error to get list o ftrack ...`)
}); });
} }
playShuffe(event: any):void { playShuffle(event: any): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.trackService.getData() this.trackService.getData()
.then((response: NodeData[]) => { .then((response: NodeData[]) => {
let ids = []; let ids = [];
response.forEach(element => { response.forEach(element => {
ids.push(element.id); ids.push(element.id);
}); });
self.playerService.setNewPlaylistShuffle(ids); self.playerService.setNewPlaylistShuffle(ids);
}) })
.catch(() => { .catch(() => {
console.log(`error to get list o ftrack ...`) console.log(`error to get list o ftrack ...`)
}); });
} }
} }

35
front/src/app/scene/artist/artist-album.html
View File

@ -1,30 +1,31 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title colomn_mutiple"> <div class="fill-title">
<div class="cover-area"> <div class="description-area">
<div class="cover" *ngIf="covers" > <div class="shadow-text title">
<img src="{{covers[0]}}"/>
</div>
</div>
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div class="title">
{{name}} {{name}}
</div> </div>
<div class="title"> <div class="shadow-text sub-title-main">
{{albumName}} {{albumName}}
</div> </div>
<div class="description" *ngIf="albumDescription"> <div class="description" *ngIf="albumDescription">
{{albumDescription}} {{albumDescription}}
</div> </div>
<div class="clear"></div> <div class="button-area">
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit"> <button class="circular-button" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i> Play All <i class="material-icons">play_arrow</i>
</button> </button>
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit"> <button class="circular-button" (click)="playShuffle($event)" type="submit">
<i class="material-icons">shuffle</i> Shuffle <i class="material-icons">shuffle</i>
</button> </button>
</div>
</div>
<div class="cover-area" *ngIf="covers" >
<div class="cover">
<img src="{{covers[0]}}"/>
</div>
</div> </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="clear"></div>
<div class="title" *ngIf="tracks.length > 1">Tracks:</div> <div class="title" *ngIf="tracks.length > 1">Tracks:</div>
<div class="title" *ngIf="tracks.length == 1">Track:</div> <div class="title" *ngIf="tracks.length == 1">Track:</div>

46
front/src/app/scene/artist/artist-album.ts
View File

@ -28,11 +28,11 @@ export class ArtistAlbumScene implements OnInit {
public tracks: Media[] = undefined; public tracks: Media[] = undefined;
constructor( constructor(
private artistService: ArtistService, private artistService: ArtistService,
private albumService: AlbumService, private albumService: AlbumService,
private trackService: TrackService, private trackService: TrackService,
private arianeService: ArianeService, private arianeService: ArianeService,
private playerService: PlayerService, private playerService: PlayerService,
private dataService: DataService) { private dataService: DataService) {
} }
@ -65,7 +65,7 @@ export class ArtistAlbumScene implements OnInit {
self.albumCovers = undefined; self.albumCovers = undefined;
// no check just ==> an error occured on album // no check just ==> an error occured on album
}); });
//console.log("all the tracks: " + self.tracksIds); //console.log("all the tracks: " + self.tracksIds);
this.trackService.getWithAlbum(self.idAlbum) this.trackService.getWithAlbum(self.idAlbum)
.then((response2: Media[]) => { .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) { if (event.ctrlKey === false) {
//this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} ); //this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} );
// TODO: add on global player ... // TODO: add on global player ...
@ -85,7 +85,7 @@ export class ArtistAlbumScene implements OnInit {
let elements: number[] = []; let elements: number[] = [];
let valuePlayed: number = undefined; 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); elements.push(this.tracks[iii].id);
//console.log(`plop: ${this.tracks[iii].id} == ${idSelected} ==> ${this.tracks[iii].name}`); //console.log(`plop: ${this.tracks[iii].id} == ${idSelected} ==> ${this.tracks[iii].name}`);
if (this.tracks[iii].id == idSelected) { if (this.tracks[iii].id == idSelected) {
@ -96,23 +96,23 @@ export class ArtistAlbumScene implements OnInit {
this.playerService.playInList(valuePlayed, elements); this.playerService.playInList(valuePlayed, elements);
} else { } else {
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} ); this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
} }
} }
playAll(event: any):void { playAll(event: any): void {
let elements: number[] = []; 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); elements.push(this.tracks[iii].id);
} }
this.playerService.clear(); this.playerService.clear();
this.playerService.setNewPlaylist(elements); this.playerService.setNewPlaylist(elements);
} }
playShuffe(event: any):void { playShuffle(event: any): void {
let elements: number[] = []; 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); elements.push(this.tracks[iii].id);
} }
this.playerService.clear(); this.playerService.clear();
this.playerService.setNewPlaylistShuffle(elements); this.playerService.setNewPlaylistShuffle(elements);
} }
} }

32
front/src/app/scene/artist/artist.html
View File

@ -1,26 +1,28 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title colomn_mutiple"> <div class="fill-title">
<div class="cover-area"> <div class="description-area ">
<div class="cover" *ngIf="covers" > <div class="shadow-text title">
<img src="{{covers[0]}}"/>
</div>
</div>
<div [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div class="title">
{{name}} {{name}}
</div> </div>
<div class="description" *ngIf="description"> <div class="description" *ngIf="description">
{{description}} {{description}}
</div> </div>
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit"> <div class="button-area">
<i class="material-icons">play_arrow</i> Play All <button class="circular-button" (click)="playAll($event)" type="submit">
</button> <i class="material-icons">play_arrow</i>
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit"> </button>
<i class="material-icons">shuffle</i> Shuffle <button class="circular-button" (click)="playShuffle($event)" type="submit">
</button> <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> </div>
<div class="fill-content colomn_mutiple" *ngIf="albums"> <div class="fill-content colomn_single" *ngIf="albums">
<div class="clear"></div> <div class="clear"></div>
<div class="title" *ngIf="albums.length > 1">Albums:</div> <div class="title" *ngIf="albums.length > 1">Albums:</div>
<div class="title" *ngIf="albums.length == 1">Album:</div> <div class="title" *ngIf="albums.length == 1">Album:</div>

44
front/src/app/scene/artist/artist.ts
View File

@ -25,20 +25,20 @@ export class ArtistScene implements OnInit {
countTrack: (id: number) => Promise<Number>; countTrack: (id: number) => Promise<Number>;
constructor( constructor(
private albumService: AlbumService, private albumService: AlbumService,
private artistService: ArtistService, private artistService: ArtistService,
private playerService: PlayerService, private playerService: PlayerService,
private arianeService: ArianeService, private arianeService: ArianeService,
private dataService: DataService) { private dataService: DataService) {
} }
countTrackCallback(albumId: number) : Promise<Number> { countTrackCallback(albumId: number): Promise<Number> {
return this.albumService.countTrack(albumId); return this.albumService.countTrack(albumId);
} }
ngOnInit() { 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.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId'));
// this.idType = parseInt(this.route.snapshot.paramMap.get('typeId')); // this.idType = parseInt(this.route.snapshot.paramMap.get('typeId'));
this.idArtist = this.arianeService.getArtistId(); 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) { if (event.ctrlKey) {
this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 } ); this.arianeService.navigateAlbumEdit({ id: idSelected, newWindows: event.which === 2 });
} else { } 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) { if (event.ctrlKey === false) {
this.arianeService.navigateTrack({trackId: idSelected, newWindows:event.which === 2} ); this.arianeService.navigateTrack({ trackId: idSelected, newWindows: event.which === 2 });
} else { } else {
this.arianeService.navigateTrackEdit({ id: idSelected, newWindows:event.which === 2} ); this.arianeService.navigateTrackEdit({ id: idSelected, newWindows: event.which === 2 });
} }
} }
getAllTracksIds(): Promise<number[]> { getAllTracksIds(): Promise<number[]> {
let elements: 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); elements.push(this.albums[iii].id);
} }
return this.albumService.getAllTracksForAlbums(elements); return this.albumService.getAllTracksForAlbums(elements);
} }
playAll(event: any):void { playAll(event: any): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.getAllTracksIds() this.getAllTracksIds()
.then((response: number[]) => { .then((response: number[]) => {
self.playerService.setNewPlaylist(response); self.playerService.setNewPlaylist(response);
}) })
.catch(() => { .catch(() => {
console.log(`error to get list o ftrack ...`) console.log(`error to get list o ftrack ...`)
}); });
} }
playShuffe(event: any):void { playShuffle(event: any): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.getAllTracksIds() this.getAllTracksIds()
.then((response: number[]) => { .then((response: number[]) => {
self.playerService.setNewPlaylistShuffle(response); self.playerService.setNewPlaylistShuffle(response);
}) })
.catch(() => { .catch(() => {
console.log(`error to get list o ftrack ...`) console.log(`error to get list o ftrack ...`)
}); });

30
front/src/app/scene/artist/artists.html
View File

@ -1,26 +1,28 @@
<div class="generic-page"> <div class="generic-page">
<div class="fill-title colomn_mutiple"> <div class="fill-title">
<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 [className]="covers ? 'description-area description-area-cover' : 'description-area description-area-no-cover'">
<div class="title"> <div class="shadow-text title">
{{name}} {{name}}
</div> </div>
<div class="description" *ngIf="description"> <div class="description" *ngIf="description">
{{description}} {{description}}
</div> </div>
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit"> <div class="button-area">
<i class="material-icons">play_arrow</i> Play All <button class="circular-button" (click)="playAll($event)" type="submit">
</button> <i class="material-icons">play_arrow</i>
<button class="button color-button color-shadow-black" style="margin-left:10px;" (click)="playShuffe($event)" type="submit"> </button>
<i class="material-icons">shuffle</i> Shuffle <button class="circular-button" (click)="playShuffle($event)" type="submit">
</button> <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> </div>
<div class="fill-content colomn_mutiple" *ngIf="artists"> <div class="fill-content colomn_single" *ngIf="artists">
<div class="clear"></div> <div class="clear"></div>
<div class="title" *ngIf="artists.length > 1">Artists:</div> <div class="title" *ngIf="artists.length > 1">Artists:</div>
<div class="title" *ngIf="artists.length == 1">Artist:</div> <div class="title" *ngIf="artists.length == 1">Artist:</div>

40
front/src/app/scene/artist/artists.ts
View File

@ -24,18 +24,18 @@ export class ArtistsScene implements OnInit {
countAlbum: (id: number) => Promise<Number>; countAlbum: (id: number) => Promise<Number>;
constructor( constructor(
private artistService: ArtistService, private artistService: ArtistService,
private albumService: AlbumService, private albumService: AlbumService,
private trackService: TrackService, private trackService: TrackService,
private playerService: PlayerService, private playerService: PlayerService,
private arianeService: ArianeService) { private arianeService: ArianeService) {
} }
ngOnInit() { ngOnInit() {
let self = this; let self = this;
this.countTrack = (id:number) => {return self.countTrackCallback(id);}; this.countTrack = (id: number) => { return self.countTrackCallback(id); };
this.countAlbum = (id:number) => {return self.countAlbumCallback(id);}; this.countAlbum = (id: number) => { return self.countAlbumCallback(id); };
// this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId')); // this.idPlaylist = parseInt(this.route.snapshot.paramMap.get('universId'));
// this.idType = parseInt(this.route.snapshot.paramMap.get('typeId')); // this.idType = parseInt(this.route.snapshot.paramMap.get('typeId'));
this.artistService.getOrder() this.artistService.getOrder()
@ -46,46 +46,46 @@ export class ArtistsScene implements OnInit {
self.artists = undefined; self.artists = undefined;
}); });
} }
onSelectArtist(event: any, idSelected: number):void { onSelectArtist(event: any, idSelected: number): void {
if (event.ctrlKey) { if (event.ctrlKey) {
this.arianeService.navigateArtistEdit({id: idSelected, newWindows:event.which === 2} ); this.arianeService.navigateArtistEdit({ id: idSelected, newWindows: event.which === 2 });
} else { } 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); return this.artistService.countTrack(artistId);
} }
countAlbumCallback(artistId: number) : Promise<Number> { countAlbumCallback(artistId: number): Promise<Number> {
return this.artistService.countAlbum(artistId); return this.artistService.countAlbum(artistId);
} }
playAll(event: any):void { playAll(event: any): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.trackService.getData() this.trackService.getData()
.then((response: NodeData[]) => { .then((response: NodeData[]) => {
let ids = []; let ids = [];
response.forEach(element => { response.forEach(element => {
ids.push(element.id); ids.push(element.id);
}); });
self.playerService.setNewPlaylist(ids); self.playerService.setNewPlaylist(ids);
}) })
.catch(() => { .catch(() => {
console.log(`error to get list o ftrack ...`) console.log(`error to get list o ftrack ...`)
}); });
} }
playShuffe(event: any):void { playShuffle(event: any): void {
this.playerService.clear(); this.playerService.clear();
let self = this; let self = this;
this.trackService.getData() this.trackService.getData()
.then((response: NodeData[]) => { .then((response: NodeData[]) => {
let ids = []; let ids = [];
response.forEach(element => { response.forEach(element => {
ids.push(element.id); ids.push(element.id);
}); });
self.playerService.setNewPlaylistShuffle(ids); self.playerService.setNewPlaylistShuffle(ids);
}) })
.catch(() => { .catch(() => {
console.log(`error to get list o ftrack ...`) console.log(`error to get list o ftrack ...`)
}); });

24
front/src/app/service/data.ts
View File

@ -12,26 +12,26 @@ import { HTTPMimeType, HTTPRequestModel, HttpWrapperService, ModelResponseHttp }
@Injectable() @Injectable()
export class DataService { export class DataService {
// 0: Not hide password; 1 hide password; // 0: Not hide password; 1 hide password;
private serviceName:string = 'data'; private serviceName: string = 'data';
constructor(private http: HttpWrapperService) { constructor(private http: HttpWrapperService) {
console.log('Start DataService'); console.log('Start DataService');
} }
getData():any { getData(): any {
return this.http.getSpecific(this.serviceName); return this.http.getSpecific(this.serviceName);
} }
get(_id:number):any { get(_id: number): any {
return this.http.getSpecific([this.serviceName, _id]); 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.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({ return this.http.requestImage({
endPoint: this.serviceName, endPoint: this.serviceName,
requestType: HTTPRequestModel.GET, requestType: HTTPRequestModel.GET,
@ -39,7 +39,7 @@ export class DataService {
contentType: HTTPMimeType.JSON, contentType: HTTPMimeType.JSON,
}); });
} }
getImageThumbnail(_id:number) : Promise<ModelResponseHttp> { getImageThumbnail(_id: number): Promise<ModelResponseHttp> {
return this.http.requestImage({ return this.http.requestImage({
endPoint: this.serviceName + "/thumbnail/" + _id, endPoint: this.serviceName + "/thumbnail/" + _id,
requestType: HTTPRequestModel.GET, requestType: HTTPRequestModel.GET,
@ -64,12 +64,12 @@ export class DataService {
* @returns the url of the cover * @returns the url of the cover
*/ */
getCoverListUrl(coverIds?: number[]): string[] | undefined { getCoverListUrl(coverIds?: number[]): string[] | undefined {
if(!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) { if (!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) {
return undefined; return undefined;
} }
let covers = [] as string[]; let covers = [] as string[];
for(let iii = 0; iii < coverIds.length; iii++) { for (let iii = 0; iii < coverIds.length; iii++) {
covers.push(this.getCoverUrl(coverIds[iii])); covers.push(this.getCoverUrl(coverIds[iii]).replace("http://localhost:19080", "https://atria-soft.org"));
} }
return covers; return covers;
} }
@ -90,11 +90,11 @@ export class DataService {
* @returns the url of the cover * @returns the url of the cover
*/ */
getCoverListThumbnailUrl(coverIds?: number[]): string[] | undefined { getCoverListThumbnailUrl(coverIds?: number[]): string[] | undefined {
if(!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) { if (!isArrayOf(coverIds, isNumberFinite) || coverIds.length === 0) {
return undefined; return undefined;
} }
let covers = [] as string[]; 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])); covers.push(this.getCoverThumbnailUrl(coverIds[iii]));
} }
return covers; return covers;

496
front/src/generic_page.less
View File

@ -1,113 +1,111 @@
// landscape // landscape
@media screen and (orientation:landscape) { @media screen and (orientation:landscape) {
.clear { .clear {
display: block; clear: both;
float: left; text-align: center;
width: 100%;
} }
.clear-end { .clear-end {
display: block; clear: both;
float: left; text-align: center;
width: 100%;
height: 250px; height: 250px;
} }
.button-area {
grid-gap: 50px;
display: flex;
flex-direction: row;
button {
padding-left: 10px;
}
}
.generic-page { .generic-page {
.fill-title { .fill-title {
display:block; display: flex;
position:fixed; flex-direction: row;
left: 0px; grid-gap: 5px;
top: 50px; padding-top: 10px;
width: 400px; padding-left: 10px;
float: left; padding-right: 10px;
padding: 1%; }
.cover-area {
float: right; .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%; width: 100%;
.cover { box-shadow: 0 0 40px black;
align: center; border-radius: 25px;
width: 60%; min-width: 150px;
margin: 0 auto; max-width: 400px;
img { max-height: 400px;
width: 100%;
}
}
} }
.description-area-cover {
width: 100%; .cover {
} max-width: 400px;
.description-area-no-cover { margin-left: auto;
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;
}
} }
} }
.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 { .fill-content {
display:block;
//position:relative;
margin: 0 0 0 430px;
padding: 0px;
float: left;
.title { .title {
font-size: 33px; font-size: 33px;
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
width:100%; width: 100%;
align: left;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
} }
.item { .item {
font-size: 20px; font-size: 20px;
padding: 1px; padding: 1px;
@ -118,20 +116,23 @@
overflow: hidden; overflow: hidden;
line-height: normal; line-height: normal;
border: none; border: none;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500; font-weight: 500;
will-change: box-shadow; will-change: box-shadow;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition-duration: 0.4s; transition-duration: 0.4s;
float:left; float: left;
//display:inline; //display:inline;
&:hover { &:hover {
box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7); box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7);
} }
.material-icons { .material-icons {
vertical-align: middle; vertical-align: middle;
} }
.material-icons { .material-icons {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -141,27 +142,29 @@
width: 24px; width: 24px;
} }
} }
.item-list { .item-list {
font-size: 20px; font-size: 20px;
padding: 1px; padding: 1px;
height: 110px; height: 110px;
width: 80%; width: 95%;
margin: 5px auto 5px auto; margin: 5px auto 5px auto;
padding: 5px; padding: 5px;
overflow: hidden; overflow: hidden;
line-height: normal; line-height: normal;
border: none; border: none;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500; font-weight: 500;
will-change: box-shadow; will-change: box-shadow;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
background: rgba(256, 256, 256, 0.3); background: rgba(256, 256, 256, 0.3);
border-radius: 7px; border-radius: 7px;
.material-icons { .material-icons {
vertical-align: middle; vertical-align: middle;
} }
.material-icons { .material-icons {
position: absolute; position: absolute;
top: 50%; 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 { .colomn_mutiple {
width: ~"calc(210px * 15)"; width: ~"calc(210px * 15)";
margin: auto; 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 { .colomn_mutiple {
width: ~"calc(210px * 14)"; width: ~"calc(210px * 14)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 3180px) and (max-width: 3390px) and (orientation:landscape) { @media all and (min-width: 3180px) and (max-width: 3390px) and (orientation:landscape) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 13)"; width: ~"calc(210px * 13)";
margin: auto; 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 { .colomn_mutiple {
width: ~"calc(210px * 12)"; width: ~"calc(210px * 12)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 2760px) and (max-width: 2970px) and (orientation:landscape) { @media all and (min-width: 2760px) and (max-width: 2970px) and (orientation:landscape) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 11)"; width: ~"calc(210px * 11)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 2550px) and (max-width: 2760px) and (orientation:landscape) { @media all and (min-width: 2550px) and (max-width: 2760px) and (orientation:landscape) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 10)"; width: ~"calc(210px * 10)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 2340px) and (max-width: 2550px) and (orientation:landscape) { @media all and (min-width: 2340px) and (max-width: 2550px) and (orientation:landscape) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 9)"; width: ~"calc(210px * 9)";
@ -281,115 +284,119 @@
} }
} }
.colomn_single {
margin-left: 50px;
margin-right: 50px;
}
// portrait // portrait
@media screen and (orientation:portrait) { @media screen and (orientation:portrait) {
.clear { .clear {
clear: both; clear: both;
text-align: center; text-align: center;
} }
.clear-end { .clear-end {
clear: both; clear: both;
text-align: center; text-align: center;
height: 250px; height: 250px;
} }
.button-area {
grid-gap: 5px;
display: flex;
flex-direction: row;
flex-flow: row wrap;
max-width: 150px;
}
.generic-page { .generic-page {
.fill-title { .fill-title {
display:block; display: flex;
position:relative; flex-direction: row;
//width: 100%; grid-gap: 5px;
//height: 400px; padding-top: 10px;
padding: 1%; padding-left: 10px;
.cover-area { padding-right: 10px;
//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);
.title { .shadow-text {
//background-color: green; text-align: left;
font-size: 45px; text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
font-weight: bold; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
line-height: 60px; color: rgb(204, 204, 204);
width:100%; }
align: left;
text-align: left; .cover-area {
vertical-align: middle; display: flex;
margin: 10px 0 10px 0; align-items: flex-start;
text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white; flex: 1;
text-transform: uppercase; max-width: 400px;
font-family: "Roboto","Helvetica","Arial",sans-serif;
} img {
.sub-title-main { width: 100%;
font-size: 33px; box-shadow: 0 0 40px black;
font-weight: bold; border-radius: 25px;
line-height: 40px; min-width: 150px;
width:100%; max-width: 400px;
align: center; max-height: 400px;
text-align: left; }
vertical-align: middle;
margin: 10px 0 10px 0; .cover {
font-family: "Roboto","Helvetica","Arial",sans-serif; max-width: 400px;
} margin-left: auto;
.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;
}
} }
} }
.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 { .fill-content {
.title { .title {
font-size: 33px; font-size: 33px;
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
width:100%; width: 100%;
align: left;
text-align: left; text-align: left;
vertical-align: middle; vertical-align: middle;
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
} }
.item { .item {
font-size: 20px; font-size: 20px;
padding: 1px; padding: 1px;
@ -400,20 +407,23 @@
overflow: hidden; overflow: hidden;
line-height: normal; line-height: normal;
border: none; border: none;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500; font-weight: 500;
will-change: box-shadow; will-change: box-shadow;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition-duration: 0.4s; transition-duration: 0.4s;
float:left; float: left;
//display:inline; //display:inline;
&:hover { &:hover {
box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7); box-shadow: 2px 2px 4px 3px rgba(0, 0, 0, 0.7);
} }
.material-icons { .material-icons {
vertical-align: middle; vertical-align: middle;
} }
.material-icons { .material-icons {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -423,7 +433,7 @@
width: 24px; width: 24px;
} }
} }
.item-list { .item-list {
font-size: 20px; font-size: 20px;
padding: 1px; padding: 1px;
@ -434,16 +444,24 @@
overflow: hidden; overflow: hidden;
line-height: normal; line-height: normal;
border: none; border: none;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
font-weight: 500; font-weight: 500;
will-change: box-shadow; will-change: box-shadow;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
background: rgba(256, 256, 256, 0.3); background: rgba(156, 156, 156, 0.5);
border-radius: 7px; border-radius: 7px;
.material-icons { .material-icons {
vertical-align: middle; 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 { .material-icons {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -454,15 +472,10 @@
} }
} }
} }
.cover {
width: 30%;
//margin: 0 auto;
img {
width: 100%;
}
}
} }
} }
@media all and (min-width: 3510px) and (orientation:portrait) { @media all and (min-width: 3510px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 15)"; width: ~"calc(210px * 15)";
@ -476,78 +489,91 @@
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 2990px) and (max-width: 3300px) and (orientation:portrait) { @media all and (min-width: 2990px) and (max-width: 3300px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 14)"; width: ~"calc(210px * 14)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 2780px) and (max-width: 2990px) and (orientation:portrait) { @media all and (min-width: 2780px) and (max-width: 2990px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 13)"; width: ~"calc(210px * 13)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 2570px) and (max-width: 2780px) and (orientation:portrait) { @media all and (min-width: 2570px) and (max-width: 2780px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 12)"; width: ~"calc(210px * 12)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 2360px) and (max-width: 2570px) and (orientation:portrait) { @media all and (min-width: 2360px) and (max-width: 2570px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 11)"; width: ~"calc(210px * 11)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 2150px) and (max-width: 2360px) and (orientation:portrait) { @media all and (min-width: 2150px) and (max-width: 2360px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 10)"; width: ~"calc(210px * 10)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 1940px) and (max-width: 2150px) and (orientation:portrait) { @media all and (min-width: 1940px) and (max-width: 2150px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 9)"; width: ~"calc(210px * 9)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 1730px) and (max-width: 1940px) and (orientation:portrait) { @media all and (min-width: 1730px) and (max-width: 1940px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 8)"; width: ~"calc(210px * 8)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 1520px) and (max-width: 1730px) and (orientation:portrait) { @media all and (min-width: 1520px) and (max-width: 1730px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 7)"; width: ~"calc(210px * 7)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 1310px) and (max-width: 1520px) and (orientation:portrait) { @media all and (min-width: 1310px) and (max-width: 1520px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 6)"; width: ~"calc(210px * 6)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 1100px) and (max-width: 1310px) and (orientation:portrait) { @media all and (min-width: 1100px) and (max-width: 1310px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 5)"; width: ~"calc(210px * 5)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 890px) and (max-width: 1100px) and (orientation:portrait) { @media all and (min-width: 890px) and (max-width: 1100px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 4)"; width: ~"calc(210px * 4)";
margin: auto; margin: auto;
} }
} }
@media all and (min-width: 680px) and (max-width: 890px) and (orientation:portrait) { @media all and (min-width: 680px) and (max-width: 890px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 3)"; width: ~"calc(210px * 3)";
margin: auto; margin: auto;
} }
} }
@media all and (max-width: 680px) and (orientation:portrait) { @media all and (max-width: 680px) and (orientation:portrait) {
.colomn_mutiple { .colomn_mutiple {
width: ~"calc(210px * 2)"; width: ~"calc(210px * 2)";
@ -562,7 +588,7 @@
font-size: 45px; font-size: 45px;
font-weight: bold; font-weight: bold;
line-height: 60px; line-height: 60px;
width:100%; width: 100%;
align: center; align: center;
height: 50px; height: 50px;
text-align: center; text-align: center;
@ -570,30 +596,32 @@
margin: 10px 0 10px 0; margin: 10px 0 10px 0;
text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white; text-shadow: 1px 1px 2px white, 0 0 1em white, 0 0 0.2em white;
text-transform: uppercase; text-transform: uppercase;
font-family: "Roboto","Helvetica","Arial",sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
} }
.fill-all{ .fill-all {
//width:100%; //width:100%;
max-width:80%; max-width: 80%;
height:100%; height: 100%;
margin: 20px auto; margin: 20px auto;
padding: 20px; padding: 20px;
border:0; border: 0;
background-color: rgba(200, 200, 200, 0.5); background-color: rgba(200, 200, 200, 0.5);
box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6); box-shadow: 0px 2px 4px 0 rgba(0, 0, 0, 0.6);
} }
.message-big { .message-big {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
font-size: 50px; font-size: 50px;
text-align: center; text-align: center;
} }
.request_raw2 { .request_raw2 {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
height: 160px; height: 160px;
.label { .label {
width: 15%; width: 15%;
margin-right: 10px; margin-right: 10px;
@ -601,10 +629,12 @@
float: left; float: left;
display: block; display: block;
} }
.input { .input {
width: 75%; width: 75%;
float: left; float: left;
display: block; display: block;
textarea { textarea {
width: 100%; width: 100%;
font-size: 20px; font-size: 20px;
@ -612,10 +642,12 @@
} }
} }
} }
.request_raw { .request_raw {
width: 90%; width: 90%;
margin: 0 auto; margin: 0 auto;
height: 45px; height: 45px;
.label { .label {
width: 15%; width: 15%;
margin-right: 10px; margin-right: 10px;
@ -623,84 +655,104 @@
float: left; float: left;
display: block; display: block;
} }
.input { .input {
width: 75%; width: 75%;
float: left; float: left;
display: block; display: block;
input { input {
width: 100%; width: 100%;
font-size: 20px; font-size: 20px;
} }
select { select {
width: 100%; width: 100%;
font-size: 20px; font-size: 20px;
} }
textarea { textarea {
width: 100%; width: 100%;
font-size: 20px; font-size: 20px;
} }
} }
.input_add { .input_add {
width: 5%; width: 5%;
float: right; float: right;
display: block; display: block;
} }
} }
.send_value { .send_value {
width: 300px; width: 300px;
margin: 0 auto; margin: 0 auto;
padding: 10px; padding: 10px;
display: block; display: block;
} }
.hide-element { .hide-element {
display: none; display: none;
} }
.cover { .cover {
position:relative; position: relative;
width: 200px; width: 200px;
height: 250px; height: 250px;
//margin: 0 auto; //margin: 0 auto;
overflow:hidden; overflow: hidden;
float: left; float: left;
display: block; display: block;
.cover-image { .cover-image {
position:absolute; position: absolute;
width: 200px; width: 200px;
height: 250px; height: 250px;
img { img {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
height: auto; height: auto;
} }
}; }
;
.cover-no-image { .cover-no-image {
position:absolute; position: absolute;
width: 190px; width: 190px;
height: 240px; height: 240px;
margin: 0 auto; margin: 0 auto;
border: solid 5px; border: solid 5px;
border-color: rgba(0, 0, 0, 0.7); border-color: rgba(0, 0, 0, 0.7);
}; }
;
.cover-button { .cover-button {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
-ms-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}; }
;
button { button {
border: none; border: none;
background: none; background: none;
}; }
;
.button-remove { .button-remove {
font-size:75px; font-size: 75px;
color: #F00000; color: #F00000;
} }
.button-add { .button-add {
font-size:75px; font-size: 75px;
color: #00F000; color: #00F000;
} }
} }

15
front/src/styles.less
View File

@ -104,6 +104,7 @@ html {
.circular-button { .circular-button {
position: relative;
border-radius: 50%; border-radius: 50%;
font-size: 24px; font-size: 24px;
height: 56px; height: 56px;
@ -294,7 +295,7 @@ label {
background-attachment: fixed; background-attachment: fixed;
background-position: 50% 50%; background-position: 50% 50%;
z-index: -1; z-index: -100;
} }
@ -302,6 +303,18 @@ label {
* FLEX TOOLS * FLEX TOOLS
*****************************************************************************/ *****************************************************************************/
.flex-column {
display: flex;
flex-direction: column;
}
.flex-column-last {
margin-top: auto;
}
.flex-column-first {
margin-bottom: auto;
}
.flex-row { .flex-row {
display: flex; display: flex;