[ui] workable search display
This commit is contained in:
parent
53b72abff1
commit
3c3cbaf9b2
2 changed files with 48 additions and 18 deletions
|
@ -52,11 +52,13 @@
|
||||||
|
|
||||||
border: 0.12em solid var(--foreground);
|
border: 0.12em solid var(--foreground);
|
||||||
border-radius: 0.2em;
|
border-radius: 0.2em;
|
||||||
padding: 0.5em;
|
|
||||||
|
|
||||||
font-family: var(--monospace-font);
|
font-family: var(--monospace-font);
|
||||||
line-break: anywhere;
|
line-break: anywhere;
|
||||||
|
|
||||||
|
width: var(--width);
|
||||||
|
height: var(--height);
|
||||||
|
|
||||||
&.identified {
|
&.identified {
|
||||||
font-family: var(--default-font);
|
font-family: var(--default-font);
|
||||||
font-size: 0.95em;
|
font-size: 0.95em;
|
||||||
|
@ -64,11 +66,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
:global(.main) {
|
:global(.main) {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
text-decoration: none;
|
margin: 0 .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
:global(.main > *){
|
||||||
|
min-width: 0;
|
||||||
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -83,7 +94,7 @@
|
||||||
|
|
||||||
.note {
|
.note {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-size: .66em;
|
font-size: 0.66em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -48,7 +48,7 @@
|
||||||
<div>
|
<div>
|
||||||
{#if !$error}
|
{#if !$error}
|
||||||
{#if $result}
|
{#if $result}
|
||||||
<section>
|
<section class="exact">
|
||||||
<h2>Exact</h2>
|
<h2>Exact</h2>
|
||||||
{#if exact.length}
|
{#if exact.length}
|
||||||
exakt
|
exakt
|
||||||
|
@ -56,23 +56,24 @@
|
||||||
Create?
|
Create?
|
||||||
{/if}
|
{/if}
|
||||||
</section>
|
</section>
|
||||||
{#await objects}
|
|
||||||
<section>
|
<section class="objects">
|
||||||
<h2>Objects</h2>
|
<h2>Objects</h2>
|
||||||
|
{#await objects}
|
||||||
<Spinner />
|
<Spinner />
|
||||||
</section>
|
{:then objects}
|
||||||
{:then objects}
|
|
||||||
<section>
|
|
||||||
<h2>Objects</h2>
|
|
||||||
<ul>
|
<ul>
|
||||||
{#each objects as address}
|
{#each objects as address}
|
||||||
<li><UpObjectCard {address} /></li>
|
<li>
|
||||||
|
<UpObjectCard {address} --width="100%" --height="100%" />
|
||||||
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
</section>
|
{/await}
|
||||||
{/await}
|
</section>
|
||||||
|
|
||||||
{#if entries.length}
|
{#if entries.length}
|
||||||
<section>
|
<section class="raw">
|
||||||
<h2>Raw results</h2>
|
<h2>Raw results</h2>
|
||||||
<ul>
|
<ul>
|
||||||
{#each entries as entry}
|
{#each entries as entry}
|
||||||
|
@ -106,9 +107,27 @@
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
.objects {
|
||||||
margin: 1em auto;
|
ul {
|
||||||
max-width: 66em;
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
justify-items: center;
|
||||||
|
|
||||||
|
margin: 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 14rem;
|
||||||
|
height: 8rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.raw {
|
||||||
|
li {
|
||||||
|
margin: 1em auto;
|
||||||
|
max-width: 66em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.global {
|
.global {
|
||||||
|
|
Loading…
Reference in a new issue