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