style(webui): link UpObject can be clicked whole
also slight refactor on UpObject especially banner and button sizing fixes
This commit is contained in:
parent
485cdd82d9
commit
18608df5a3
4 changed files with 36 additions and 30 deletions
|
@ -191,24 +191,17 @@
|
|||
{/if}
|
||||
<HashBadge {address} />
|
||||
<div class="label" class:resolving title={displayLabel}>
|
||||
<Editable
|
||||
value={{ t: 'String', c: displayLabel }}
|
||||
editable={banner}
|
||||
types={['String']}
|
||||
on:edit={onLabelEdit}
|
||||
>
|
||||
<div class="label-inner">
|
||||
{#if banner && hasFile}
|
||||
{#if banner && !link}
|
||||
<Editable value={{ t: 'String', c: displayLabel }} types={['String']} on:edit={onLabelEdit}>
|
||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||
</Editable>
|
||||
{:else if link}
|
||||
<UpLink to={{ entity: address }}>
|
||||
<UpLink passthrough to={{ entity: address }}>
|
||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||
</UpLink>
|
||||
{:else}
|
||||
<UpObjectLabel label={displayLabel} backpath={resolvedBackpath} />
|
||||
{/if}
|
||||
</div>
|
||||
</Editable>
|
||||
{#if $entity?.get(ATTR_KEY) && !$entity?.get(ATTR_KEY)?.toString()?.startsWith('TYPE_')}
|
||||
<div class="key">{$entity.get(ATTR_KEY)}</div>
|
||||
{/if}
|
||||
|
@ -314,10 +307,17 @@
|
|||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
margin-left: 0.25em;
|
||||
|
||||
:global(a) {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.label-inner {
|
||||
|
@ -351,8 +351,7 @@
|
|||
}
|
||||
|
||||
&:not(.banner) .key {
|
||||
flex-grow: 1;
|
||||
text-align: right;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.show-type .secondary,
|
||||
|
@ -384,15 +383,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
|
||||
:global(a) {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin: 0 0.1em;
|
||||
}
|
||||
|
@ -402,6 +392,7 @@
|
|||
}
|
||||
|
||||
.link-button {
|
||||
padding: 0.25em;
|
||||
opacity: 0.66;
|
||||
transition:
|
||||
opacity 0.2s,
|
||||
|
|
|
@ -24,7 +24,8 @@
|
|||
|
||||
<style lang="scss">
|
||||
.upobject-label {
|
||||
max-width: 100%;
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.backpath {
|
||||
|
|
|
@ -35,6 +35,7 @@
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
padding: 0.25em;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
|
|
@ -42,6 +42,12 @@ export const Link: Story = {
|
|||
}
|
||||
};
|
||||
|
||||
export const Keyed: Story = {
|
||||
args: {
|
||||
address: 'zb2rhmpmTFPxdhaxTQg5Ug3KHFU8DZNUPh8TaPY2v8UQVJbQk'
|
||||
}
|
||||
};
|
||||
|
||||
export const Banner: Story = {
|
||||
args: {
|
||||
banner: true
|
||||
|
@ -55,6 +61,13 @@ export const BannerWithLabels: Story = {
|
|||
}
|
||||
};
|
||||
|
||||
export const KeyedBanner: Story = {
|
||||
args: {
|
||||
address: 'zb2rhmpmTFPxdhaxTQg5Ug3KHFU8DZNUPh8TaPY2v8UQVJbQk',
|
||||
banner: true
|
||||
}
|
||||
};
|
||||
|
||||
export const Overflow: Story = {
|
||||
args: {
|
||||
labels: ['qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm'.repeat(3)]
|
||||
|
|
Loading…
Reference in a new issue