[ui] under 1080px screen height, scroll entire content of browse scroll

feat/vaults
Tomáš Mládek 2022-02-15 23:31:17 +01:00
parent c27c9dbb0a
commit a1f1847ead
No known key found for this signature in database
GPG Key ID: 65E225C8B3E2ED8A
1 changed files with 58 additions and 42 deletions

View File

@ -181,6 +181,8 @@
<Spinner centered /> <Spinner centered />
{/if} {/if}
</h2> </h2>
</header>
<div class="main-content">
{#if groups?.length || editable} {#if groups?.length || editable}
<section class="groups labelborder"> <section class="groups labelborder">
<header><h3>Groups</h3></header> <header><h3>Groups</h3></header>
@ -210,61 +212,63 @@
</div> </div>
</section> </section>
{/if} {/if}
</header> <BlobPreview {address} {editable} {detail} />
<BlobPreview {address} {editable} {detail} /> <NotesEditor {address} {editable} on:change={onChange} />
<NotesEditor {address} {editable} on:change={onChange} /> {#if !$error}
{#if !$error} {#if Boolean($allTypeEntries)}
{#if Boolean($allTypeEntries)} <div class="attributes">
<div class="attributes"> {#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
{#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)} <AttributeView
<AttributeView {entries}
{entries} type={allTypes[typeAddr]}
type={allTypes[typeAddr]} {editable}
{editable} on:change={onChange}
on:change={onChange} />
/> {/each}
{/each}
{#if currentUntypedAttributes.length > 0 || editable} {#if currentUntypedAttributes.length > 0 || editable}
<AttributeView <AttributeView
title="Other attributes" title="Other attributes"
{editable} {editable}
entries={currentUntypedAttributes} entries={currentUntypedAttributes}
on:change={onChange} on:change={onChange}
/> />
{/if} {/if}
{#if currentBacklinks.length > 0} {#if currentBacklinks.length > 0}
<AttributeView <AttributeView
title={`Referred to (${$entity.backlinks.length})`} title={`Referred to (${$entity.backlinks.length})`}
entries={currentBacklinks} entries={currentBacklinks}
reverse reverse
on:change={onChange} on:change={onChange}
/> />
{/if} {/if}
</div> </div>
{:else}
<Spinner centered />
{/if}
{:else} {:else}
<Spinner centered /> <div class="error">
{$error}
</div>
{/if} {/if}
{:else} </div>
<div class="error">
{$error}
</div>
{/if}
</div> </div>
<style scoped lang="scss"> <style scoped lang="scss">
@use "./util"; @use "./util";
.inspect { header h2 {
margin-bottom: 0;
}
.inspect,
.main-content {
flex: auto; flex: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
min-height: 0;
h2 {
margin-bottom: 0;
}
} }
.groups { .groups {
@ -292,6 +296,18 @@
overflow-y: auto; overflow-y: auto;
} }
@media screen and (max-height: 1080px) {
.main-content {
overflow-y: scroll;
// min-height: 0;
}
.attributes {
height: unset;
overflow-y: unset;
}
}
.error { .error {
color: red; color: red;
} }