zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

resolve the duplicaated the loading class

Browse Source
This commit is contained in:
liangping 2023-06-15 14:28:03 +08:00
parent e9b4afd7fa
commit 78d2d8b36e
3 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -15,7 +15,7 @@
<div class="loading-logo"> <div class="loading-logo">
<img src="/logo.svg" alt="Logo" /> <img src="/logo.svg" alt="Logo" />
</div> </div>
<div class="loading"> <div class="pre-loading">
<div class="effect-1 effects"></div> <div class="effect-1 effects"></div>
<div class="effect-2 effects"></div> <div class="effect-2 effects"></div>
<div class="effect-3 effects"></div> <div class="effect-3 effects"></div>

16
public/loader.css
View File

@ -8,7 +8,7 @@
inset-inline-start: calc(50% - 75px); inset-inline-start: calc(50% - 75px);
} }
.loading { .pre-loading {
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
border: 3px solid transparent; border: 3px solid transparent;
@ -19,9 +19,9 @@
inset-inline-start: calc(50% - 27.5px); inset-inline-start: calc(50% - 27.5px);
} }
.loading .effect-1, .pre-loading .effect-1,
.loading .effect-2, .pre-loading .effect-2,
.loading .effect-3 { .pre-loading .effect-3 {
position: absolute; position: absolute;
box-sizing: border-box; box-sizing: border-box;
border: 3px solid transparent; border: 3px solid transparent;
@ -31,19 +31,19 @@
inline-size: 100%; inline-size: 100%;
} }
.loading .effect-1 { .pre-loading .effect-1 {
animation: rotate 1s ease infinite; animation: rotate 1s ease infinite;
} }
.loading .effect-2 { .pre-loading .effect-2 {
animation: rotate-opacity 1s ease infinite 0.1s; animation: rotate-opacity 1s ease infinite 0.1s;
} }
.loading .effect-3 { .pre-loading .effect-3 {
animation: rotate-opacity 1s ease infinite 0.2s; animation: rotate-opacity 1s ease infinite 0.2s;
} }
.loading .effects { .pre-loading .effects {
transition: all 0.3s ease; transition: all 0.3s ease;
} }

10
src/modules/wallet/accounts.vue
View File

@ -261,7 +261,7 @@ async function loadBalances(endpoint: string, address: string) {
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<div v-for="{ key, subaccounts } in accounts" class="bg-base-100 rounded-xl my-5 p-5"> <div v-for="{ key, subaccounts } in accounts" class="bg-base-100 rounded-xl my-5 py-5 px-2">
<div class="flex justify-self-center"> <div class="flex justify-self-center">
<div class="mr-2 p-2"> <div class="mr-2 p-2">
<svg :fill="chainStore.current?.themeColor || '#666CFF'" height="28px" width="28px" version="1.1" id="Capa_1" <svg :fill="chainStore.current?.themeColor || '#666CFF'" height="28px" width="28px" version="1.1" id="Capa_1"
@ -287,7 +287,7 @@ async function loadBalances(endpoint: string, address: string) {
</svg> </svg>
</div> </div>
<div> <div>
<div class=" font-bold overflow-hidden">{{ key }}</div> <div class=" max-w-md overflow-hidden"><div class="font-bold">{{ key }}</div></div>
<div class="dropdown"> <div class="dropdown">
<label tabindex="0" class="">{{ subaccounts.length }} addresses</label> <label tabindex="0" class="">{{ subaccounts.length }} addresses</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box z-50"> <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-200 rounded-box z-50">
@ -295,9 +295,9 @@ async function loadBalances(endpoint: string, address: string) {
<a> <a>
<img :src="x.account.logo" class="w-8 h-8 mr-2" /> <img :src="x.account.logo" class="w-8 h-8 mr-2" />
<span class="font-bold capitalize">{{ x.account.chainName }} <br> <span class="font-bold capitalize">{{ x.account.chainName }} <br>
<span class="text-xs font-normal">{{ x.account.address }}</span> <span class="text-xs font-normal sm:w-16 sm:overflow-hidden">{{ x.account.address }}</span>
</span> </span>
<label class="btn btn-error btn-xs" @click="removeAddress(x.account.address)">Remove</label> <label class=" btn btn-xs !btn-error" @click="removeAddress(x.account.address)">Remove</label>
</a> </a>
</li> </li>
</ul> </ul>
@ -344,7 +344,7 @@ async function loadBalances(endpoint: string, address: string) {
</div> </div>
</div> </div>
<div class=" text-center bg-base-100 rounded-xl p-4"> <div class=" text-center bg-base-100 rounded-xl my-4 p-4">
<a href="#address-modal" <a href="#address-modal"
class="inline-flex items-center ml-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"> class="inline-flex items-center ml-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
<svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">