Add picture on group page

src/app/components/group/group.component.html

@@ -7,7 +7,7 @@
           <img class="profile-picture" [src]="groupProfile.picture"/>
           <mat-icon id="icon">camera_alt</mat-icon>
         </div>
-        <div *ngIf="!isAdmin">
+        <div *ngIf="!isAdmin" (click)="openPfpLightbox()">
           <img class="profile-picture" [src]="groupProfile.picture"/>
         </div>
 
@@ -63,7 +63,7 @@
           <img class="profile-picture" [src]="groupProfile.picture"/>
           <mat-icon id="icon">camera_alt</mat-icon>
         </div>
-        <div *ngIf="!isAdmin">
+        <div *ngIf="!isAdmin" (click)="openPfpLightbox()">
           <img class="profile-picture" [src]="groupProfile.picture"/>
         </div>
         <span id="username">{{groupProfile.name}}</span>
@@ -108,7 +108,7 @@
       </mat-toolbar-row>
     </mat-toolbar>
     <div id="accordion">
-      <mat-accordion>
+      <mat-accordion multi="true">
         <mat-expansion-panel *ngIf="groupProfile.events.length > 0" expanded>
           <mat-expansion-panel-header>
             <mat-panel-title>
@@ -139,7 +139,7 @@
             </mat-card>
           </div>
         </mat-expansion-panel>
-        <mat-expansion-panel [expanded]="groupProfile.events.length < 1">
+        <mat-expansion-panel expanded>
           <mat-expansion-panel-header>
             <mat-panel-title>
               Members

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

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});
+  }
+
 }