diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html index d081455..652f47b 100644 --- a/src/app/components/group/group.component.html +++ b/src/app/components/group/group.component.html @@ -7,7 +7,7 @@ camera_alt -
+
@@ -63,7 +63,7 @@ camera_alt
-
+
{{groupProfile.name}} @@ -108,7 +108,7 @@
- + @@ -139,7 +139,7 @@
- + Members diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass index 65d8b8e..591a4b7 100644 --- a/src/app/components/group/group.component.sass +++ b/src/app/components/group/group.component.sass @@ -73,13 +73,14 @@ $mat-card-header-size: 100px !default // in IE, but we're using it as a progressive enhancement. .profile-picture + cursor: pointer height: $mat-card-header-size width: $mat-card-header-size border-radius: 50% flex-shrink: 0 background-size: cover transition-duration: 0.5s - z-index: 10 + z-index: 99 object-fit: cover .card diff --git a/src/app/components/group/group.component.ts b/src/app/components/group/group.component.ts index 3a739e4..014483b 100644 --- a/src/app/components/group/group.component.ts +++ b/src/app/components/group/group.component.ts @@ -9,6 +9,7 @@ import {Group} from 'src/app/models/group'; import {Event} from 'src/app/models/event'; import {MatDialog, MatDialogRef} from '@angular/material/dialog'; import {DialogGroupFileUploadComponent} from './fileUpload/fileUpload.component'; +import {Lightbox} from 'ngx-lightbox'; // DIALOG COMPONENT to create events @Component({ @@ -85,6 +86,7 @@ export class GroupComponent implements OnInit { private requestService: RequestService, private data: DatasharingService, private groupService: GroupService, + private lightbox: Lightbox, private datasharingService: DatasharingService) { router.events.forEach((event) => { // check if url changes @@ -196,4 +198,11 @@ export class GroupComponent implements OnInit { }); } + openPfpLightbox() { + this.lightbox.open([{ + src: this.groupProfile.picture, + thumb: this.groupProfile.picture, + }], 0, {disableScrolling: true}); + } + }