-
- -
{#if groups?.length || editable}
@@ -260,8 +257,13 @@
{/if} -
- +
+ (blobHandled = ev.detail)} + />
{#if !$error} @@ -380,27 +382,26 @@ } .inspect.detail { - .hide-detail { - display: none; - } - - .show-detail { - display: unset; - } - - &:not(.blob) { - .blob-viewer { - display: none; - } - } - .main-content { + position: relative; flex-direction: row; - .blob-viewer { - min-width: 75%; - } + justify-content: end; + } + + .blob-viewer { + width: 73%; + position: absolute; + left: 1%; + top: 0; + } + + .detail-col { + width: 25%; + } + + &.blob { .detail-col { - overflow-y: auto; + flex-grow: 0; } } } diff --git a/webui/src/components/display/BlobViewer.svelte b/webui/src/components/display/BlobViewer.svelte index 2f4f632..f558398 100644 --- a/webui/src/components/display/BlobViewer.svelte +++ b/webui/src/components/display/BlobViewer.svelte @@ -9,12 +9,14 @@ import VideoViewer from "./blobs/VideoViewer.svelte"; import UpLink from "./UpLink.svelte"; import { API_URL } from "../../lib/api"; + import { createEventDispatcher } from "svelte"; + const dispatch = createEventDispatcher(); export let address: string; export let editable: boolean; export let detail: boolean; - export let handled = false; + let handled = false; $: ({ entity, entityInfo } = useEntity(address)); @@ -38,6 +40,8 @@ $: handled = audio || video || image || text || pdf || model || web || fragment; + $: dispatch("handled", handled); + let imageLoaded = null;