diff --git a/webui/src/lib/components/display/UpEntry.svelte b/webui/src/lib/components/display/UpEntry.svelte
index 8fca93f..73cd35b 100644
--- a/webui/src/lib/components/display/UpEntry.svelte
+++ b/webui/src/lib/components/display/UpEntry.svelte
@@ -2,6 +2,7 @@
import type { UpEntry } from '@upnd/upend';
import { attributeLabels } from '$lib/util/labels';
import UpObject from './UpObject.svelte';
+ import Ellipsis from '$lib/components/utils/Ellipsis.svelte';
export let resolve = true;
export let entry: UpEntry;
@@ -12,13 +13,13 @@
- {$attributeLabels[entry.attribute] || entry.attribute}
+
{#if entry.value.t === 'Address'}
{:else}
- {entry.value.c}
+
{/if}
@@ -41,14 +42,21 @@
}
.attribute {
+ position: relative;
+ top: 0.2em;
flex-grow: 1;
text-align: center;
font-weight: 300;
- &::before {
- content: '→\00a0';
- }
&::after {
content: '\00a0→';
+
+ position: absolute;
+ top: calc(-50% + 2px);
+ left: calc(50% - 2px);
+
+ transform: translateX(-50%);
+ font-size: 0.66em;
+ font-weight: normal;
}
}
diff --git a/webui/src/stories/Selector.stories.ts b/webui/src/stories/Selector.stories.ts
index 659d22b..654733c 100644
--- a/webui/src/stories/Selector.stories.ts
+++ b/webui/src/stories/Selector.stories.ts
@@ -1,5 +1,6 @@
import type { Meta, StoryObj } from '@storybook/svelte';
import Selector from '../lib/components/utils/Selector.svelte';
+import NarrowDecorator from './NarrowDecorator.svelte';
const meta: Meta = {
title: 'Widgets/Selector',
@@ -80,3 +81,10 @@ export const MultipleValues: Story = {
types: ['String', 'Number']
}
};
+
+export const Narrow: Story = {
+ args: {
+ types: AllValues.args!.types
+ },
+ decorators: [() => NarrowDecorator as any]
+};
diff --git a/webui/src/stories/UpEntry.stories.ts b/webui/src/stories/UpEntry.stories.ts
new file mode 100644
index 0000000..bc64910
--- /dev/null
+++ b/webui/src/stories/UpEntry.stories.ts
@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/svelte';
+import { UpEntry, UpListing } from '@upnd/upend';
+import { entryAddress, videoAddress } from './common';
+import NarrowDecorator from './NarrowDecorator.svelte';
+import UpEntryComponent from '../lib/components/display/UpEntry.svelte';
+
+const entry = new UpEntry(
+ entryAddress,
+ {
+ entity: videoAddress,
+ attribute: 'ATTRIBUTE_PERHAPS_LONG',
+ value: { t: 'String', c: 'This Is A Video' },
+ provenance: 'MOCK',
+ timestamp: new Date().toISOString()
+ },
+ new UpListing({})
+);
+
+const meta: Meta = {
+ title: 'Display/UpEntry',
+ component: UpEntryComponent,
+ tags: ['autodocs'],
+ args: {
+ entry
+ },
+ argTypes: {
+ address: {
+ defaultValue: entry,
+ name: 'Entry'
+ },
+ onResolved: {
+ action: 'resolved'
+ }
+ }
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const Overflow: Story = {
+ args: {
+ labels: ['qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm'.repeat(3)]
+ },
+ decorators: [() => NarrowDecorator as any]
+};
diff --git a/webui/src/stories/common.ts b/webui/src/stories/common.ts
index a500f8a..1e49ef1 100644
--- a/webui/src/stories/common.ts
+++ b/webui/src/stories/common.ts
@@ -7,3 +7,5 @@ export const videoAddress = 'zb2rhnhv2Me2ZWohSYp7kyf1KAQbZ1zsLficHsaWTgoex67iJ';
export const videoVerticalAddress = 'zb2rhocWjf4rc39Wi7TDv6KaVxs2iTQqN6CVYR6m7M8AYgp9c';
export const stlAddress = 'zb2rhbprcQL38kifW8aMW8cvgWymtaBEe6fK9n3nzDum25Paf';
+
+export const entryAddress = 'zb2rhkxWUCBYuXGF4dCEDWrR48V19ujimULcSGvThknLEBrDm';