[ui] only attrs scroll in browse

feat/vaults
Tomáš Mládek 2021-11-30 00:29:27 +01:00
parent c0a9ba685c
commit ce8bee0446
5 changed files with 34 additions and 16 deletions

View File

@ -88,10 +88,10 @@
</h2> </h2>
<blob-preview :address="address" /> <blob-preview :address="address" />
{#if !$error} {#if !$error}
<div> <div class="attributes">
{#each Object.entries(typedAttributes) as [typeAddr, attributes] (typeAddr)} {#each Object.entries(typedAttributes) as [typeAddr, attributes] (typeAddr)}
<AttributeView <AttributeView
{editable} {editable}
{address} {address}
type={allTypes[typeAddr]} type={allTypes[typeAddr]}
{attributes} {attributes}
@ -124,6 +124,21 @@
</div> </div>
<style scoped lang="scss"> <style scoped lang="scss">
.inspect {
flex: auto;
display: flex;
flex-direction: column;
& > * {
padding: 0 1rem;
}
}
.attributes {
flex: auto;
height: 0; // https://stackoverflow.com/a/14964944
overflow-y: auto;
}
.hr { .hr {
position: relative; position: relative;
margin: 2rem 0 1rem 0; margin: 2rem 0 1rem 0;

View File

@ -90,7 +90,7 @@
<th>Value</th> <th>Value</th>
</tr> </tr>
{#each attributes as [id, entry] (id)} {#each attributes as [id, entry] (id)}
<tr v-for="[id, entry] in limitedAttributes"> <tr>
{#if editable} {#if editable}
<td class="attr-action"> <td class="attr-action">
<sl-icon-button name="x-circle" on:click={removeEntry(id)} /> <sl-icon-button name="x-circle" on:click={removeEntry(id)} />

View File

@ -25,9 +25,9 @@
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.5rem; padding: 0 0.5rem;
height: 3.5rem;
border-bottom: 1px solid var(--foreground); border-bottom: 1px solid var(--foreground);
margin-bottom: 0.5rem;
background: var(--background); background: var(--background);

View File

@ -56,29 +56,32 @@
<style scoped lang="scss"> <style scoped lang="scss">
.browser { .browser {
display: flex; display: flex;
// margin-left: -2rem;
// margin-right: -2rem;
// padding: 0 2rem;
overflow-x: auto; overflow-x: auto;
// header margin magic
height: calc(100% - 3.5rem - 1rem - 1px);
margin-top: 1rem;
} }
.view { .view {
height: 100%;
min-width: 30em; min-width: 30em;
max-width: 30em; max-width: 30em;
display: flex;
flex-direction: column;
border-left: 1px solid var(--foreground); border-left: 1px solid var(--foreground);
border-right: 1px solid var(--foreground); border-right: 1px solid var(--foreground);
margin: 1rem 0;
padding: 0 1rem;
header { header {
position: relative; position: relative;
margin: 0; margin: 0 1rem;
min-height: 1em; min-height: 1em;
flex: none;
.this-button { .this-button {
position: absolute; position: absolute;
left: 50%; left: 50%;

View File

@ -3301,8 +3301,8 @@ __metadata:
"upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.": "upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
version: 0.0.1 version: 0.0.1
resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=be37a5&locator=svelte-app%40workspace%3A." resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=01d4ae&locator=svelte-app%40workspace%3A."
checksum: 9c82ef4a75d51feb2c7d345fdbc941d0205ea5f4deaf1ee1dc49378a860a47d42b63ae4602e0f12e1a6cf482c8fb4da495941b45a7e396f840264403c4a1977d checksum: 08a1d2aee4fd4797e08d4ed2729afdfe849d5904c8369f7887285766ede64eb60cd450a7bdf91338ba8a4dd6e41309012cb1ca191b44ea6a328052ba4a86b537
languageName: node languageName: node
linkType: hard linkType: hard