[ui] scroll detail-mode columns into view
This commit is contained in:
parent
4dcaeda3e9
commit
50aa34ef61
2 changed files with 30 additions and 15 deletions
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from "svelte";
|
||||
import { createEventDispatcher, tick } from "svelte";
|
||||
import { normUrl } from "../util/history";
|
||||
|
||||
import Inspect from "./Inspect.svelte";
|
||||
|
@ -14,6 +14,7 @@
|
|||
let detail = only;
|
||||
let detailChanged = false;
|
||||
$: if (!detailChanged) detail = only;
|
||||
$: if (detailChanged) tick().then(() => dispatch("detail", detail));
|
||||
|
||||
function visit() {
|
||||
window.open(normUrl(`/browse/${address}`), "_blank");
|
||||
|
|
|
@ -19,13 +19,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
$: {
|
||||
addresses;
|
||||
$: scrollToVisible(addresses.length - 1);
|
||||
|
||||
root?.scrollTo({
|
||||
left: root.scrollWidth,
|
||||
behavior: "smooth",
|
||||
});
|
||||
function scrollToVisible(idx: number) {
|
||||
console.log(`Scrolling to ${idx}`);
|
||||
const target = root?.querySelector(
|
||||
`[data-index='${idx}']`
|
||||
)?.firstElementChild as HTMLElement;
|
||||
|
||||
if (target) {
|
||||
root?.scrollTo({
|
||||
left: target.offsetLeft,
|
||||
behavior: "smooth",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onIdentified(index: number, ev: CustomEvent<string[]>) {
|
||||
|
@ -43,17 +50,20 @@
|
|||
|
||||
<div class="browser" bind:this={root}>
|
||||
{#each addresses as address, index}
|
||||
<BrowseColumn
|
||||
{address}
|
||||
{index}
|
||||
only={addresses.length === 1}
|
||||
on:close={() => close(index)}
|
||||
on:resolved={(ev) => onIdentified(index, ev)}
|
||||
/>
|
||||
<div class="column" data-index={index}>
|
||||
<BrowseColumn
|
||||
{address}
|
||||
{index}
|
||||
only={addresses.length === 1}
|
||||
on:close={() => close(index)}
|
||||
on:resolved={(ev) => onIdentified(index, ev)}
|
||||
on:detail={(ev) => ev.detail && scrollToVisible(index)}
|
||||
/>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style scoped lang="scss">
|
||||
<style lang="scss">
|
||||
.browser {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
|
@ -65,4 +75,8 @@
|
|||
margin-top: 1rem;
|
||||
margin-bottom: var(--footer-height);
|
||||
}
|
||||
|
||||
.column {
|
||||
display: contents;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue