[ui] spinner explicit centering
This commit is contained in:
parent
c0e5035b38
commit
4822069fdf
7 changed files with 21 additions and 15 deletions
|
@ -77,9 +77,5 @@
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
|
|
||||||
position: relative;
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -177,7 +177,7 @@
|
||||||
{#if $entity}
|
{#if $entity}
|
||||||
<UpObject banner {address} on:resolved />
|
<UpObject banner {address} on:resolved />
|
||||||
{:else}
|
{:else}
|
||||||
<Spinner />
|
<Spinner centered />
|
||||||
{/if}
|
{/if}
|
||||||
</h2>
|
</h2>
|
||||||
{#if groups?.length}
|
{#if groups?.length}
|
||||||
|
@ -242,7 +242,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
<Spinner />
|
<Spinner centered />
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
<div class="error">
|
<div class="error">
|
||||||
|
|
|
@ -46,7 +46,7 @@
|
||||||
</header>
|
</header>
|
||||||
<div class="text" class:markdown={mode === "markdown"}>
|
<div class="text" class:markdown={mode === "markdown"}>
|
||||||
{#await textContent}
|
{#await textContent}
|
||||||
<Spinner />
|
<Spinner centered />
|
||||||
{:then text}
|
{:then text}
|
||||||
{#if mode === "markdown"}
|
{#if mode === "markdown"}
|
||||||
{@html text}
|
{@html text}
|
||||||
|
|
|
@ -1,9 +1,19 @@
|
||||||
<div class="spinner lds-ripple">
|
<script lang="ts">
|
||||||
|
export let centered = false;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="spinner lds-ripple" class:centered>
|
||||||
<div />
|
<div />
|
||||||
<div />
|
<div />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.spinner.centered {
|
||||||
|
position: relative;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
|
||||||
.lds-ripple {
|
.lds-ripple {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -22,8 +32,8 @@
|
||||||
}
|
}
|
||||||
@keyframes lds-ripple {
|
@keyframes lds-ripple {
|
||||||
0% {
|
0% {
|
||||||
top: .5em;
|
top: 0.5em;
|
||||||
left: .5em;
|
left: 0.5em;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
|
@ -16,7 +16,7 @@
|
||||||
<div class="image" class:loaded={loaded == address || !handled}>
|
<div class="image" class:loaded={loaded == address || !handled}>
|
||||||
{#if handled && loaded != address}
|
{#if handled && loaded != address}
|
||||||
<div class="spinner">
|
<div class="spinner">
|
||||||
<Spinner />
|
<Spinner centered />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{#if handled}
|
{#if handled}
|
||||||
|
|
|
@ -50,7 +50,7 @@
|
||||||
<section class="roots">
|
<section class="roots">
|
||||||
<h2>Roots</h2>
|
<h2>Roots</h2>
|
||||||
{#await roots}
|
{#await roots}
|
||||||
<Spinner />
|
<Spinner centered />
|
||||||
{:then data}
|
{:then data}
|
||||||
<ul>
|
<ul>
|
||||||
{#each data as root}
|
{#each data as root}
|
||||||
|
@ -81,7 +81,7 @@
|
||||||
<section class="latest">
|
<section class="latest">
|
||||||
<h2>Most recently added files</h2>
|
<h2>Most recently added files</h2>
|
||||||
{#await latestFiles}
|
{#await latestFiles}
|
||||||
<Spinner />
|
<Spinner centered />
|
||||||
{:then data}
|
{:then data}
|
||||||
<table>
|
<table>
|
||||||
{#each data as file}
|
{#each data as file}
|
||||||
|
|
|
@ -68,7 +68,7 @@
|
||||||
<section class="objects">
|
<section class="objects">
|
||||||
{#await objects}
|
{#await objects}
|
||||||
<h2>Objects</h2>
|
<h2>Objects</h2>
|
||||||
<Spinner />
|
<Spinner centered />
|
||||||
{:then objects}
|
{:then objects}
|
||||||
{#if objects.length}
|
{#if objects.length}
|
||||||
<h2>Objects</h2>
|
<h2>Objects</h2>
|
||||||
|
@ -101,7 +101,7 @@
|
||||||
</section>
|
</section>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="global">
|
<div class="global">
|
||||||
<Spinner />
|
<Spinner centered />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{:else}
|
{:else}
|
||||||
|
|
Loading…
Reference in a new issue