sandre/SkydiveLogs
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Zoom correct des images uploadées dans le

Browse Source 
profil utilisateur.
This commit is contained in:
Sébastien André
2021-04-07 10:24:41 +02:00
parent 6b927be26a
commit ec2b53955d
2 changed files with 38 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.css
View File

@@ -1,33 +1,36 @@
.slide-modal { .imgmodal {
display: none; display: none;
position: fixed; position: fixed;
z-index: 1; z-index: 1000;
padding-top: 10px; padding-top: 10px;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
background-color: #000000; background-color: #000000;
} }
.slide-modal-content {
/* position: relative; */
margin: auto;
padding: 0;
width: 100%;
max-width: 1200px;
}
.close { .imgbox {
color: white; display: grid;
position: absolute; height: 100%;
top: 10px; }
right: 25px;
font-size: 35px; .center-fit {
font-weight: bold; max-width: 100%;
} max-height: 100vh;
margin: auto;
.cursor { }
cursor: pointer;
} .close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.cursor {
cursor: pointer;
}

6
Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html
View File

@@ -40,9 +40,9 @@
<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator> <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
</div> </div>
<div id="imgModal" class="slide-modal" [ngStyle]="{'display': (showPopin === true) ? 'block' : 'none'}"> <div class="imgmodal" [ngStyle]="{'display': (showPopin === true) ? 'block' : 'none'}">
<span class="close cursor" (click)="closeModal()">&times;</span> <span class="close cursor" (click)="closeModal()">&times;</span>
<div class="slide-modal-content"> <div class="imgbox">
<img class="images" src="{{ popinImage }}" (click)="closeModal()" style="width: 100%; display: table;"> <img class="center-fit cursor" src="{{ popinImage }}" (click)="closeModal()">
</div> </div>
</div> </div>