parent
57b64ed669
commit
44b64bf246
|
@ -3,7 +3,7 @@
|
||||||
import { BLOB_TYPE_ADDR } from "upend/constants";
|
import { BLOB_TYPE_ADDR } from "upend/constants";
|
||||||
import { identify, useEntity } from "../lib/entity";
|
import { identify, useEntity } from "../lib/entity";
|
||||||
import HashBadge from "./HashBadge.svelte";
|
import HashBadge from "./HashBadge.svelte";
|
||||||
import Marquee from "./Marquee.svelte";
|
import Ellipsis from "./Ellipsis.svelte";
|
||||||
import UpLink from "./UpLink.svelte";
|
import UpLink from "./UpLink.svelte";
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
@ -41,21 +41,19 @@
|
||||||
<div class="address" class:identified={Boolean(inferredIds)} class:banner>
|
<div class="address" class:identified={Boolean(inferredIds)} class:banner>
|
||||||
<HashBadge {address} />
|
<HashBadge {address} />
|
||||||
<div class="separator" />
|
<div class="separator" />
|
||||||
<Marquee>
|
|
||||||
<div class="label" class:resolving title={label}>
|
<div class="label" class:resolving title={label}>
|
||||||
{#if banner && isFile}
|
{#if banner && isFile}
|
||||||
<a href="/api/raw/{address}" target="_blank">
|
<a href="/api/raw/{address}" target="_blank">
|
||||||
{label}
|
<Ellipsis value={label} />
|
||||||
</a>
|
</a>
|
||||||
{:else if link}
|
{:else if link}
|
||||||
<UpLink to={{ entity: address }}>
|
<UpLink to={{ entity: address }}>
|
||||||
{label}
|
<Ellipsis value={label} />
|
||||||
</UpLink>
|
</UpLink>
|
||||||
{:else}
|
{:else}
|
||||||
{label}
|
<Ellipsis value={label} />
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</Marquee>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
@ -84,6 +82,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
flex-grow: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.separator {
|
.separator {
|
||||||
width: 0.5em;
|
width: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
<script lang="ts">
|
||||||
|
export let value: string;
|
||||||
|
|
||||||
|
$: valueStart = value.substring(0, value.length - 7);
|
||||||
|
$: valueEnd = value.substring(value.length - 7, value.length);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="ellipsis">
|
||||||
|
<div class="start">{valueStart}</div>
|
||||||
|
<div class="end">{valueEnd}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.ellipsis {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
* {
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.start {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.end {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,77 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { onMount } from "svelte";
|
|
||||||
|
|
||||||
export let speed = 50;
|
|
||||||
|
|
||||||
let root: HTMLDivElement | undefined;
|
|
||||||
let inner: HTMLDivElement | undefined;
|
|
||||||
|
|
||||||
let overflowed = false;
|
|
||||||
let running = false;
|
|
||||||
let shiftWidth = "unset";
|
|
||||||
let animLength = "unset";
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
const resizeObserver = new ResizeObserver(() => {
|
|
||||||
if (!root) return;
|
|
||||||
overflowed = root.scrollWidth > root.clientWidth;
|
|
||||||
shiftWidth = `-${inner.clientWidth - root.clientWidth}px`;
|
|
||||||
animLength = `${inner.clientWidth / speed}s`;
|
|
||||||
});
|
|
||||||
resizeObserver.observe(inner);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="marquee"
|
|
||||||
class:overflowed
|
|
||||||
class:running
|
|
||||||
on:mouseenter={() => (running = true)}
|
|
||||||
on:mouseleave={() => (running = false)}
|
|
||||||
style={`--shift-width: ${shiftWidth}; --anim-length: ${animLength}`}
|
|
||||||
bind:this={root}
|
|
||||||
>
|
|
||||||
<div class="inner" bind:this={inner}>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.marquee {
|
|
||||||
height: 1.1em;
|
|
||||||
overflow: hidden;
|
|
||||||
flex-grow: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inner {
|
|
||||||
white-space: nowrap;
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
:global {
|
|
||||||
.overflowed .inner {
|
|
||||||
animation: marquee var(--anim-length) ease-in-out infinite;
|
|
||||||
animation-play-state: paused;
|
|
||||||
--padding: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overflowed.running .inner {
|
|
||||||
animation-play-state: running;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes marquee {
|
|
||||||
0% {
|
|
||||||
transform: translateX(var(--padding));
|
|
||||||
}
|
|
||||||
|
|
||||||
50% {
|
|
||||||
transform: translateX(calc(var(--shift-width) - var(--padding)));
|
|
||||||
}
|
|
||||||
|
|
||||||
100% {
|
|
||||||
transform: translateX(var(--padding));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -2,7 +2,7 @@
|
||||||
import filesize from "filesize";
|
import filesize from "filesize";
|
||||||
import { format, fromUnixTime } from "date-fns";
|
import { format, fromUnixTime } from "date-fns";
|
||||||
import type { OrderedListing } from "upend/types";
|
import type { OrderedListing } from "upend/types";
|
||||||
import Marquee from "../Marquee.svelte";
|
import Ellipsis from "../Ellipsis.svelte";
|
||||||
import Address from "../Address.svelte";
|
import Address from "../Address.svelte";
|
||||||
import { createEventDispatcher, getContext } from "svelte";
|
import { createEventDispatcher, getContext } from "svelte";
|
||||||
import type { AttributeChange } from "../../types/base";
|
import type { AttributeChange } from "../../types/base";
|
||||||
|
@ -192,9 +192,7 @@
|
||||||
|
|
||||||
{#if showAttribute}
|
{#if showAttribute}
|
||||||
<td class:formatted={Boolean(formatAttribute(entry.attribute))}>
|
<td class:formatted={Boolean(formatAttribute(entry.attribute))}>
|
||||||
<Marquee>
|
<Ellipsis value={formatAttribute(entry.attribute) || entry.attribute} />
|
||||||
{formatAttribute(entry.attribute) || entry.attribute}
|
|
||||||
</Marquee>
|
|
||||||
</td>
|
</td>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
@ -220,9 +218,7 @@
|
||||||
formatValue(entry.value.c, entry.attribute)
|
formatValue(entry.value.c, entry.attribute)
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Marquee>
|
<Ellipsis value={formatValue(entry.value.c, entry.attribute) || entry.value.c} />
|
||||||
{formatValue(entry.value.c, entry.attribute) || entry.value.c}
|
|
||||||
</Marquee>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</text-input>
|
</text-input>
|
||||||
|
|
Loading…
Reference in New Issue