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 @@
-
+
0" expanded>
@@ -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});
+ }
+
}