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; object-fit: cover;
border-radius: 1em; border-radius: 1em;
opacity: .9; 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); 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 { &:hover {
opacity: 1;
cursor: pointer; cursor: pointer;
opacity: 1;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.32),0 2px 10px 0 rgba(0,0,0,.24); 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(() => { .finally(() => {
this.isLoading = false; this.isLoading = false;
this.isLoaded = true; this.isLoaded = true;
}) });
} }
selectPicture(picture: Picture): void { selectPicture(picture: Picture): void {
console.log(picture.id); this.dialogRef.close(picture.id);
} }
closeDialog(): void { closeDialog(): void {

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

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

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

@@ -79,7 +79,16 @@
flex-direction: row; flex-direction: row;
div { 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; flex-direction: column;
justify-content: center; justify-content: center;
&:nth-last-child { &.picture-container {
img { img {
flex: 1; flex: 1;
object-fit: cover; object-fit: cover;
width: 100%; width: 100%;
cursor: pointer; 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);
}
} }
} }
} }