florian/codiki-hexagonal
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Styling picture selection components.

Browse Source
This commit is contained in:
Florian THIERRY
2024-08-19 23:02:39 +02:00
parent 56ac024cba
commit b1d9344574
4 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app/pages/publication-edition/picture-selection-dialog/picture-selection-dialog.component.scss
View File

@@ -46,12 +46,12 @@
object-fit: cover;
border-radius: 1em;
opacity: .9;
transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
&:hover {
opacity: 1;
cursor: pointer;
opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
}
}

4
frontend/src/app/pages/publication-edition/picture-selection-dialog/picture-selection-dialog.component.ts
View File

@@ -38,11 +38,11 @@ export class PictureSelectionDialog implements OnInit {
.finally(() => {
this.isLoading = false;
this.isLoaded = true;
})
});
}
selectPicture(picture: Picture): void {
console.log(picture.id);
this.dialogRef.close(picture.id);
}
closeDialog(): void {

2
frontend/src/app/pages/publication-edition/publication-edition.component.html
View File

@@ -23,7 +23,7 @@
</mat-form-field>
</div>
<div>
<div class="picture-container">
<img src="/api/pictures/{{publication.illustrationId}}" (click)="displayPictureSectionDialog()" matTooltip="Click to change illustration"/>
</div>
</div>

23
frontend/src/app/pages/publication-edition/publication-edition.component.scss
View File

@@ -79,7 +79,16 @@
flex-direction: row;
div {
max-width: 50%;
flex: 1 0;
&.picture-container {
max-width: 20em;
img {
max-height: 15em;
max-width: 20em;
}
}
}
}
@@ -89,12 +98,22 @@
flex-direction: column;
justify-content: center;
&:nth-last-child {
&.picture-container {
img {
flex: 1;
object-fit: cover;
width: 100%;
cursor: pointer;
border-radius: 1em;
opacity: .9;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
transition: opacity .2s ease-in-out, box-shadow .2s ease-in-out;
&:hover {
cursor: pointer;
opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24);
}
}
}
}