[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 {
|
||||
font-size: 2em;
|
||||
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -177,7 +177,7 @@
|
|||
{#if $entity}
|
||||
<UpObject banner {address} on:resolved />
|
||||
{:else}
|
||||
<Spinner />
|
||||
<Spinner centered />
|
||||
{/if}
|
||||
</h2>
|
||||
{#if groups?.length}
|
||||
|
@ -242,7 +242,7 @@
|
|||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<Spinner />
|
||||
<Spinner centered />
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="error">
|
||||
|
|
|
@ -46,7 +46,7 @@
|
|||
</header>
|
||||
<div class="text" class:markdown={mode === "markdown"}>
|
||||
{#await textContent}
|
||||
<Spinner />
|
||||
<Spinner centered />
|
||||
{:then text}
|
||||
{#if mode === "markdown"}
|
||||
{@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>
|
||||
|
||||
<style>
|
||||
.spinner.centered {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.lds-ripple {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
@ -22,8 +32,8 @@
|
|||
}
|
||||
@keyframes lds-ripple {
|
||||
0% {
|
||||
top: .5em;
|
||||
left: .5em;
|
||||
top: 0.5em;
|
||||
left: 0.5em;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 1;
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
<div class="image" class:loaded={loaded == address || !handled}>
|
||||
{#if handled && loaded != address}
|
||||
<div class="spinner">
|
||||
<Spinner />
|
||||
<Spinner centered />
|
||||
</div>
|
||||
{/if}
|
||||
{#if handled}
|
||||
|
|
|
@ -50,7 +50,7 @@
|
|||
<section class="roots">
|
||||
<h2>Roots</h2>
|
||||
{#await roots}
|
||||
<Spinner />
|
||||
<Spinner centered />
|
||||
{:then data}
|
||||
<ul>
|
||||
{#each data as root}
|
||||
|
@ -81,7 +81,7 @@
|
|||
<section class="latest">
|
||||
<h2>Most recently added files</h2>
|
||||
{#await latestFiles}
|
||||
<Spinner />
|
||||
<Spinner centered />
|
||||
{:then data}
|
||||
<table>
|
||||
{#each data as file}
|
||||
|
|
|
@ -68,7 +68,7 @@
|
|||
<section class="objects">
|
||||
{#await objects}
|
||||
<h2>Objects</h2>
|
||||
<Spinner />
|
||||
<Spinner centered />
|
||||
{:then objects}
|
||||
{#if objects.length}
|
||||
<h2>Objects</h2>
|
||||
|
@ -101,7 +101,7 @@
|
|||
</section>
|
||||
{:else}
|
||||
<div class="global">
|
||||
<Spinner />
|
||||
<Spinner centered />
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
|
|
Loading…
Reference in a new issue