From cd653e5bd1b3dcd552ed60333944f60987269c4f Mon Sep 17 00:00:00 2001
From: NikoAnderson <nikolaus.g.anderson@gmail.com>
Date: Thu, 5 Oct 2023 15:21:34 -0400
Subject: [PATCH] structure details styling

---
 .../structure-details/structure-details.component.html    | 8 ++++----
 .../structure-details/structure-details.component.scss    | 6 +++++-
 .../structure-details/structure-details.component.ts      | 3 ++-
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/app/core/substance-details/structure-details/structure-details.component.html b/src/app/core/substance-details/structure-details/structure-details.component.html
index 6927bd995..0fecb79fa 100644
--- a/src/app/core/substance-details/structure-details/structure-details.component.html
+++ b/src/app/core/substance-details/structure-details/structure-details.component.html
@@ -71,8 +71,8 @@
         <mat-icon svgIcon="search"></mat-icon>
       </a>
     </div>
-    <img class="structure-img" *ngIf = "!substance.$$source || substance.$$source !== 'staging'" appSubstanceImage  size = "250" [entityId]="structure.id" [stereo]="showStereo" [version] ="substance.version">
-    <img class="structure-img" *ngIf = "substance.$$source && substance.$$source == 'staging'"   appSubstanceImage  size = "250" [entityId]="substance.uuid" [stereo]="showStereo">
+    <img class="structure-img" (click) = "openModal(structureTemplate)" *ngIf = "!substance.$$source || substance.$$source !== 'staging'" appSubstanceImage  size = "250" [entityId]="structure.id" [stereo]="showStereo" [version] ="substance.version">
+    <img class="structure-img" (click) = "openModal(structureTemplate)" *ngIf = "substance.$$source && substance.$$source == 'staging'"   appSubstanceImage  size = "250" [entityId]="substance.uuid" [stereo]="showStereo">
 
     <br/>
       <button class ="mat-raised-button mat-primary" [disabled]="structure.definedStereo == 0" (click)="toggleStereo()">{{showStereo === false ? 'Show' : 'Hide'}} Stereo</button>
@@ -111,8 +111,8 @@ <h3>Systematic Names:</h3>
 
 <ng-template #structureTemplate>
   <div mat-dialog-content>
-    <img class="structure-img-big" *ngIf = "!substance.$$source || substance.$$source !== 'staging'" appSubstanceImage  size = "250" [entityId]="structure.id" [stereo]="showStereo" [version] ="substance.version">
-    <img class="structure-img-big" *ngIf = "substance.$$source && substance.$$source == 'staging'"   appSubstanceImage  size = "250" [entityId]="substance.uuid" [stereo]="showStereo">
+    <img class="structure-img-big" *ngIf = "!substance.$$source || substance.$$source !== 'staging'" appSubstanceImage  size = "650" [entityId]="structure.id" [stereo]="showStereo" [version] ="substance.version">
+    <img class="structure-img-big" *ngIf = "substance.$$source && substance.$$source == 'staging'"   appSubstanceImage  size = "650" [entityId]="substance.uuid" [stereo]="showStereo">
 
   </div>
 </ng-template>
\ No newline at end of file
diff --git a/src/app/core/substance-details/structure-details/structure-details.component.scss b/src/app/core/substance-details/structure-details/structure-details.component.scss
index e93b598e6..5cdb686f8 100644
--- a/src/app/core/substance-details/structure-details/structure-details.component.scss
+++ b/src/app/core/substance-details/structure-details/structure-details.component.scss
@@ -15,10 +15,14 @@
 
 .structure-img-big {
     width: 100%;
-    height: 500px !important;
+    height: 95% !important;
 }
 
 
+.structure-img:hover {
+    cursor: zoom-in !important;
+}
+
 .blue-font ::ng-deep sub {
     margin-bottom: -10px;
 }
diff --git a/src/app/core/substance-details/structure-details/structure-details.component.ts b/src/app/core/substance-details/structure-details/structure-details.component.ts
index 1b3f12d77..b1d5d6f79 100644
--- a/src/app/core/substance-details/structure-details/structure-details.component.ts
+++ b/src/app/core/substance-details/structure-details/structure-details.component.ts
@@ -94,7 +94,8 @@ export class StructureDetailsComponent extends SubstanceCardBase implements OnIn
   openModal(templateRef) {
 
     const dialogRef = this.dialog.open(templateRef, {
-      width: '650px',
+      width: '800px',
+      height: '97%',
       panelClass: 'structure-image-panel',
     });
     this.overlayContainer.style.zIndex = '1002';