thm
/
upend
1
0
Fork 0
Code Issues 75 Pull Requests Packages Projects Releases 6 Wiki Activity

[ui] various styling/markup improvements

feat/vaults
Tomáš Mládek 2021-11-30 20:59:53 +01:00
parent f218f5c267
commit 49dea3705a
5 changed files with 22 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ui/src/components/Address.svelte
View File

@ -25,6 +25,7 @@
<div class="address" class:identified={Boolean(inferredIds)}> <div class="address" class:identified={Boolean(inferredIds)}>
<HashBadge {address} /> <HashBadge {address} />
<div class="separator" />
<Marquee> <Marquee>
{#if isFile} {#if isFile}
<UpLink to={{ entity: address }}> <UpLink to={{ entity: address }}>
@ -42,23 +43,25 @@
<style scoped lang="scss"> <style scoped lang="scss">
.address { .address {
font-family: var(--monospace-font);
display: flex; display: flex;
align-items: center; align-items: center;
&, padding: 0.1em;
& a {
line-break: anywhere; border: 0.1em solid var(--foreground);
} border-radius: 0.2em;
font-family: var(--monospace-font);
line-break: anywhere;
&.identified { &.identified {
font-family: var(--default-font); font-family: var(--default-font);
font-size: 0.95em; font-size: 0.95em;
line-break: auto; line-break: auto;
} }
}
.hash-badge { .separator {
margin-right: 0.5em; width: 0.5em;
}
} }
</style> </style>

3
ui/src/components/AttributeView.svelte
View File

@ -44,7 +44,6 @@
function processChange() { function processChange() {
// noop // noop
} }
</script> </script>
<section class="attribute-view"> <section class="attribute-view">
@ -95,7 +94,7 @@
margin-top: 1.66em; margin-top: 1.66em;
padding: 1ex 1em; padding: 1ex 1em;
border: 1px solid var(--foreground); border: 0.1em solid var(--foreground);
border-radius: 4px; border-radius: 4px;
header { header {

10
ui/src/components/HashBadge.svelte
View File

@ -41,18 +41,12 @@
}); });
</script> </script>
<div class="hash-badge"> <canvas bind:this={canvas} {width} height="3" title={address} />
<canvas bind:this={canvas} {width} height="3" title={address} />
</div>
<style scoped> <style scoped>
.hash-badge { canvas {
display: inline-block; display: inline-block;
height: 1em; height: 1em;
}
.hash-badge canvas {
height: 100%;
image-rendering: optimizeSpeed; image-rendering: optimizeSpeed;
} }
</style> </style>

2
ui/src/components/Marquee.svelte
View File

@ -52,7 +52,7 @@
.overflowed .inner { .overflowed .inner {
animation: marquee var(--anim-length) ease-in-out infinite; animation: marquee var(--anim-length) ease-in-out infinite;
animation-play-state: paused; animation-play-state: paused;
--padding: 0.5em; --padding: 0;
} }
.overflowed.running .inner { .overflowed.running .inner {

8
ui/src/components/UpLink.svelte
View File

@ -18,6 +18,12 @@
} }
</script> </script>
<Link to={routerTo}> <Link class="uplink" to={routerTo}>
<slot /> <slot />
</Link> </Link>
<style lang="scss">
:global(.uplink) {
text-decoration: none;
}
</style>