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");
}) })

29
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">
</div> <i class="material-icons">play_arrow</i>
<button class="button color-button color-shadow-black" (click)="playAll($event)" type="submit">
<i class="material-icons">play_arrow</i> Play All
</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> </div>
<div class="fill-content colomn_mutiple" *ngIf="tracks"> <div class="cover-area">
<div class="cover" *ngIf="covers" >
<img src="{{covers[0]}}"/>
</div>
</div>
</div>
<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>

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

@ -107,7 +107,7 @@
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);
@ -117,4 +117,3 @@
} }
} }

26
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">
<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> </div>
<div class="fill-content colomn_mutiple" *ngIf="albums"> <div class="cover-area">
<div class="cover" *ngIf="covers" >
<img src="{{covers[0]}}"/>
</div>
</div>
</div>
<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>

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

@ -101,7 +101,7 @@
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()
@ -118,4 +118,3 @@
} }
} }

31
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> </div>
<div class="fill-content colomn_mutiple" *ngIf="tracks"> <div class="cover-area" *ngIf="covers" >
<div class="cover">
<img src="{{covers[0]}}"/>
</div>
</div>
</div>
<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>

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

@ -107,7 +107,7 @@ export class ArtistAlbumScene implements OnInit {
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);

28
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">
<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> </div>
<div class="fill-content colomn_mutiple" *ngIf="albums"> <div class="cover-area" *ngIf="covers" >
<div class="cover">
<img src="{{covers[0]}}"/>
</div>
</div>
</div>
<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>

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

@ -111,7 +111,7 @@ export class ArtistScene implements OnInit {
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()

26
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">
<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> </div>
<div class="fill-content colomn_mutiple" *ngIf="artists"> <div class="cover-area">
<div class="cover" *ngIf="covers" >
<img src="{{covers[0]}}"/>
</div>
</div>
</div>
<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>

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

@ -75,7 +75,7 @@ export class ArtistsScene implements OnInit {
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()

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

@ -69,7 +69,7 @@ export class DataService {
} }
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;
} }

330
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%; }
.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 { .cover-area {
float: right; display: flex;
width: 100%; align-items: flex-start;
.cover { flex: 1;
align: center; max-width: 400px;
width: 60%;
margin: 0 auto;
img { img {
width: 100%; 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-cover {
width: 100%;
}
.description-area-no-cover {
width: 100%;
}
.description-area { .description-area {
float: left; flex: 3;
min-width: 200px;
.title { .title {
font-size: 45px; font-size: 27px;
font-weight: bold; font-weight: bold;
line-height: 60px; line-height: 60px;
width:100%;
align: left;
text-align: left;
vertical-align: middle; vertical-align: middle;
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-transform: uppercase; text-transform: uppercase;
font-family: "Roboto","Helvetica","Arial",sans-serif;
} }
.sub-title-main { .sub-title-main {
font-size: 33px; font-size: 22px;
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
width: 100%; width: 100%;
align: center; //margin: 10px 0 10px 0;
text-align: left;
vertical-align: middle;
margin: 10px 0 10px 0;
font-family: "Roboto","Helvetica","Arial",sans-serif;
} }
.sub-title { .sub-title {
font-size: 33px; font-size: 22px;
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
width: 100%; width: 100%;
align: left;
text-align: left;
vertical-align: middle;
margin: 10px 0 10px 0;
font-family: "Roboto","Helvetica","Arial",sans-serif;
} }
.description { .description {
//background-color: orange; font-size: 15px;
font-size: 24px;
width: ~"calc(100% - 14px * 2)";//calc(100% - 40px * 2 - 14px * 2);
text-align: left; text-align: left;
vertical-align: middle;
//margin: 0 40px 10px 40px;
background: rgba(150, 150, 150, 0.9);
//border-radius: 7px;
padding: 14px; padding: 14px;
font-family: "Roboto","Helvetica","Arial",sans-serif;
}
} }
} }
.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;
@ -125,13 +123,16 @@
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%;
@ -146,7 +147,7 @@
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;
@ -159,9 +160,11 @@
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%;
}
}
} }
} }
@ -196,36 +193,42 @@
} }
} }
@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,6 +284,12 @@
} }
} }
.colomn_single {
margin-left: 50px;
margin-right: 50px;
}
// portrait // portrait
@media screen and (orientation:portrait) { @media screen and (orientation:portrait) {
.clear { .clear {
@ -293,103 +302,101 @@
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;
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 { .cover-area {
//position:relative; display: flex;
float: right; align-items: flex-start;
//right: 0px; flex: 1;
width: 300px; max-width: 400px;
//height: 100%;
.cover {
width: 100%;
margin: auto;
img { img {
width: 100%; 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-cover {
width: ~"calc( 100% - 302px)";
}
.description-area-no-cover {
width: 100%;
}
.description-area { .description-area {
//position: sticky; flex: 3;
float: left; min-width: 200px;
//height: 100%; color: rgb(204, 204, 204);
//margin: 0;
//border: solid 1px;
//border-color: rgba(255, 0, 0, 0.7);
.title { .title {
//background-color: green; font-size: 27px;
font-size: 45px;
font-weight: bold; font-weight: bold;
line-height: 60px; line-height: 60px;
width:100%;
align: left;
text-align: left;
vertical-align: middle; vertical-align: middle;
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-transform: uppercase; text-transform: uppercase;
font-family: "Roboto","Helvetica","Arial",sans-serif;
} }
.sub-title-main { .sub-title-main {
font-size: 33px; font-size: 22px;
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
width: 100%; width: 100%;
align: center; //margin: 10px 0 10px 0;
text-align: left;
vertical-align: middle;
margin: 10px 0 10px 0;
font-family: "Roboto","Helvetica","Arial",sans-serif;
} }
.sub-title { .sub-title {
font-size: 33px; font-size: 22px;
font-weight: bold; font-weight: bold;
line-height: 40px; line-height: 40px;
width: 100%; width: 100%;
align: left;
text-align: left;
vertical-align: middle;
margin: 10px 0 10px 0;
font-family: "Roboto","Helvetica","Arial",sans-serif;
} }
.description { .description {
//background-color: orange; font-size: 20px;
font-size: 24px;
text-align: left; 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; padding: 14px;
font-family: "Roboto","Helvetica","Arial",sans-serif;
}
} }
} }
.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;
@ -407,13 +414,16 @@
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%;
@ -439,11 +449,19 @@
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)";
@ -590,10 +616,12 @@
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,35 +655,42 @@
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;
} }
@ -669,12 +708,16 @@
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;
@ -682,23 +725,32 @@
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;