still image height adaptable

dhlab-basel · Jan 26, 2024 · 154e8f8 · 154e8f8
1 parent ab966a7
commit 154e8f8
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/src/app/dsp-ui-lib/viewer/representation/still-image/still-image.component.scss b/src/app/dsp-ui-lib/viewer/representation/still-image/still-image.component.scss
@@ -34,13 +34,12 @@ $bright: #ccc;
   }
 
   .content {
-    height: $full-height;
+    height: 100%;
     width: 100%;
 
     .osd-container {
       color: $bright;
       background-color: $dark;
-      height: $osd-height;
 
       &.fullscreen {
         max-width: 100vw;
@@ -57,6 +56,21 @@ $bright: #ccc;
   }
 }
 
+.big-osd-container {
+  height: 1300px;
+
+  .osd-container {
+    height: 1300px;
+  }
+}
+
+.small-osd-container {
+  .osd-container {
+    height: 500px;
+  }
+}
+
+
 
 /*
  Overlay styling

diff --git a/src/app/dsp-ui-lib/viewer/representation/still-image/still-image.component.ts b/src/app/dsp-ui-lib/viewer/representation/still-image/still-image.component.ts
@@ -97,6 +97,7 @@ export class StillImageComponent implements OnChanges, OnDestroy {
     @Input() images: StillImageRepresentation[];
     @Input() imageCaption?: string;
     @Input() activateRegion?: string; // highlight a region
+    @Input() smallContainer: boolean = false;
 
     @Output() regionClicked = new EventEmitter<string>();
 
@@ -127,6 +128,13 @@ export class StillImageComponent implements OnChanges, OnDestroy {
     }
 
     ngOnChanges(changes: SimpleChanges) {
+        const osdContainer = (document.getElementsByClassName('content') as HTMLCollectionOf<HTMLElement>)[0];
+        if (this.smallContainer) {
+            osdContainer?.classList.add('small-osd-container');
+        } else {
+            osdContainer?.classList.add('big-osd-container');
+        }
+
         if (changes['images'] && changes['images'].isFirstChange()) {
             this._setupViewer();
         }

diff --git a/src/app/resource/letter/letter.component.html b/src/app/resource/letter/letter.component.html
@@ -176,7 +176,7 @@ <h4 class="subheading-2">
             </section>
 
             <!-- OSD viewer -->
-            <dsp-still-image #OSDViewer class="osd-viewer"
+            <dsp-still-image #OSDViewer class="osd-viewer" [smallContainer]="true"
                 *ngIf="resource?.incomingStillImageRepresentations?.length > 0;"
                 [images]="resource?.stillImageRepresentationsToDisplay">
             </dsp-still-image>

diff --git a/src/app/resource/page/page.component.html b/src/app/resource/page/page.component.html
@@ -43,7 +43,7 @@ <h4 class="subheading-2">{{props?.seqnum[0].propertyLabel}}: </h4>
         </div>
 
         <div *ngIf="!isLoading && resource?.stillImageRepresentationsToDisplay.length > 0">
-            <dsp-still-image #OSDViewer class="osd-viewer" [images]="resource?.stillImageRepresentationsToDisplay"
+            <dsp-still-image #OSDViewer class="osd-viewer" [smallContainer]="true" [images]="resource?.stillImageRepresentationsToDisplay"
                 [activateRegion]="activeRegion" (regionClicked)="regionActive($event)">
             </dsp-still-image>
         </div>