From 9893292ac8b20a684b39ef47ad61014cfff51af2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Sat, 19 Mar 2022 23:15:51 +0100
Subject: [PATCH] [ui] various layout fixes - fragment overflow, imageviewer
 disappeared, pdf iframe height

- add uplink passthrough
- fix delete button position
---
 webui/src/components/Inspect.svelte            |  1 +
 webui/src/components/display/BlobViewer.svelte | 18 ++++++++----------
 webui/src/components/display/UpLink.svelte     |  5 +++++
 .../display/blobs/FragmentViewer.svelte        |  1 +
 .../display/blobs/ImageViewer.svelte           |  2 ++
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/webui/src/components/Inspect.svelte b/webui/src/components/Inspect.svelte
index 067a7e4..12b8741 100644
--- a/webui/src/components/Inspect.svelte
+++ b/webui/src/components/Inspect.svelte
@@ -327,6 +327,7 @@
 
     .attributes {
       height: unset;
+      min-height: unset;
       overflow-y: unset;
     }
   }
diff --git a/webui/src/components/display/BlobViewer.svelte b/webui/src/components/display/BlobViewer.svelte
index 487009d..3475c76 100644
--- a/webui/src/components/display/BlobViewer.svelte
+++ b/webui/src/components/display/BlobViewer.svelte
@@ -38,7 +38,7 @@
 </script>
 
 {#if handled}
-  <div class="preview" class:detail class:image>
+  <div class="preview" class:detail class:full={image || pdf}>
     {#if text}
       <div class="text">
         <TextViewer {address} />
@@ -91,7 +91,7 @@
       />
     {/if}
     {#if fragment}
-      <UpLink to={{ entity: String($entity.get("ANNOTATES")) }}>
+      <UpLink passthrough to={{ entity: String($entity.get("ANNOTATES")) }}>
         <FragmentViewer {address} {detail} />
       </UpLink>
     {/if}
@@ -104,16 +104,13 @@
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    max-height: 25em;
+    min-height: 33vh;
+    max-height: 50vh;
 
-    &.detail {
-      max-height: 50vh;
-    }
-
-    &.detail.image {
+    &.detail.full {
       max-height: unset;
       flex-grow: 1;
-      min-height: 0;
+      // min-height: 0;
     }
   }
 
@@ -125,7 +122,8 @@
   }
 
   iframe {
-    width: 100%;
+    width: 99%;
+    flex-grow: 1;
   }
 
   .text {
diff --git a/webui/src/components/display/UpLink.svelte b/webui/src/components/display/UpLink.svelte
index 80ea3e1..7650b9c 100644
--- a/webui/src/components/display/UpLink.svelte
+++ b/webui/src/components/display/UpLink.svelte
@@ -13,6 +13,7 @@
     attribute?: string;
     value?: { t: VALUE_TYPE; c: string };
   };
+  export let passthrough = false;
 
   const context = getContext("browse") as BrowseContext | undefined;
   const index = context ? context.index : readable(0);
@@ -41,6 +42,7 @@
 
 <a
   class="uplink"
+  class:passthrough
   href="/#/browse/{to.entity}"
   on:click|preventDefault={onClick}
 >
@@ -51,4 +53,7 @@
   :global(.uplink) {
     text-decoration: none;
   }
+  :global(.uplink.passthrough) {
+    display: contents;
+  }
 </style>
diff --git a/webui/src/components/display/blobs/FragmentViewer.svelte b/webui/src/components/display/blobs/FragmentViewer.svelte
index eb2d49d..37a1c03 100644
--- a/webui/src/components/display/blobs/FragmentViewer.svelte
+++ b/webui/src/components/display/blobs/FragmentViewer.svelte
@@ -44,6 +44,7 @@
 
   img {
     max-width: 100%;
+    box-sizing: border-box;
     min-height: 0;
     &.imageLoaded {
       border: 2px dashed colors.$yellow;
diff --git a/webui/src/components/display/blobs/ImageViewer.svelte b/webui/src/components/display/blobs/ImageViewer.svelte
index 654e176..d510069 100644
--- a/webui/src/components/display/blobs/ImageViewer.svelte
+++ b/webui/src/components/display/blobs/ImageViewer.svelte
@@ -168,6 +168,8 @@
     anno.on("deleteAnnotation", async (annotation) => {
       await deleteEntry(annotation.id);
     });
+
+    imageLoaded = true;
   }
 </script>