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

feat: add important style

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-20 13:36:05 +08:00
parent 53292e1308
commit 9be8a49097
18 changed files with 58 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/CardParameter.vue
View File

@ -30,7 +30,7 @@ function calculateValue(value: any) {
>
<div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
<div
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4"
>
<div
v-for="(item, index) of props.cardItem?.items"

8
src/components/ProposalListItem.vue
View File

@ -42,7 +42,7 @@ const proposalInfo = ref();
</script>
<template>
<div class="bg-white dark:bg-[#28334e] rounded text-sm">
<table class="table-compact w-full table-fixed hidden lg:table">
<table class="table-compact w-full table-fixed hidden lg:!table">
<tbody>
<tr v-for="(item, index) in proposals?.proposals" :key="index">
<td class="px-4 w-20">
@ -102,7 +102,7 @@ const proposalInfo = ref();
</div>
</div>
<div
class="truncate col-span-2 md:col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:flex md:justify-start"
class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start"
>
{{ format.toDay(item.voting_end_time, 'from') }}
</div>
@ -134,7 +134,7 @@ const proposalInfo = ref();
</tbody>
</table>
<div class="lg:hidden">
<div class="lg:!hidden">
<div
v-for="(item, index) in proposals?.proposals"
:key="index"
@ -228,7 +228,7 @@ const proposalInfo = ref();
</div>
<input type="checkbox" id="proposal-detail-modal" class="modal-toggle" />
<label for="proposal-detail-modal" class="modal sm:modal-middle">
<label for="proposal-detail-modal" class="modal sm:!modal-middle">
<label class="modal-box relative" for="">
<label
for="proposal-detail-modal"

2
src/layouts/components/ChainProfile.vue
View File

@ -93,7 +93,7 @@ chainStore.$subscribe((m, s) => {
</div>
</Transition>
<div
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden lg:block"
class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden lg:!block"
>
{{ chainStore.connErr || chainStore.endpoint.address }}
</div>

14
src/layouts/components/DefaultLayout.vue
View File

@ -43,14 +43,14 @@ const showDiscord = window.location.host.search("ping.pub") > -1
<!-- sidebar -->
<div
class="w-64 fixed z-50 left-0 top-0 bottom-0 overflow-auto bg-base-100 border-r border-gray-100 dark:border-gray-700"
:class="{ block: sidebarShow, 'hidden force-block': !sidebarShow }"
:class="{ block: sidebarShow, 'hidden xl:!block': !sidebarShow }"
>
<div class="flex items-center pl-4 py-4 mb-1">
<img class="w-10 h-10" src="../../assets/logo.svg" />
<h1 class="flex-1 ml-3 text-2xl font-semibold dark:text-white">
Ping.pub
</h1>
<div class="pr-4 cursor-pointer xl:hidden" @click="sidebarShow = false">
<div class="pr-4 cursor-pointer xl:!hidden" @click="sidebarShow = false">
<Icon icon="mdi-close" class="text-3xl" />
</div>
</div>
@ -216,13 +216,13 @@ const showDiscord = window.location.host.search("ping.pub") > -1
</a>
</div>
</div>
<div class="xl:ml-64 px-5">
<div class="xl:!ml-64 px-5">
<!-- header -->
<div
class="flex items-center py-3 bg-base-100 mb-4 rounded px-4 sticky top-0 z-10 mt-4 shadow"
>
<div
class="text-2xl pr-3 cursor-pointer xl:hidden"
class="text-2xl pr-3 cursor-pointer xl:!hidden"
@click="sidebarShow = true"
>
<Icon icon="mdi-menu" />
@ -233,11 +233,11 @@ const showDiscord = window.location.host.search("ping.pub") > -1
<div class="flex-1 w-0"></div>
<!-- <NavSearchBar />-->
<NavBarI18n class="hidden md:inline-block" />
<NavbarThemeSwitcher class="hidden md:inline-block" />
<NavBarI18n class="hidden md:!inline-block" />
<NavbarThemeSwitcher class="hidden md:!inline-block" />
<NavBarWallet
class="block truncate md:inline-block text-xs md:text-sm"
class="block truncate md:!inline-block text-xs md:!text-sm"
/>
</div>

2
src/layouts/components/NavFooter.vue
View File

@ -15,7 +15,7 @@
>
</div>
<div
class="grid-flow-col gap-4 md:place-self-center md:justify-self-end hidden md:grid"
class="grid-flow-col gap-4 md:!place-self-center md:!justify-self-end hidden md:!grid"
>
<a
class="link link-primary no-underline"

6
src/modules/[chain]/account/[address].vue
View File

@ -120,11 +120,11 @@ loadAccount(props.address);
<!-- Assets -->
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title mb-4">Assets</h2>
<div class="grid md:grid-cols-3">
<div class="md:col-span-1">
<div class="grid md:!grid-cols-3">
<div class="md:!col-span-1">
<DonutChart :series="totalAmountByCategory" :labels="labels" />
</div>
<div class="mt-4 md:col-span-2 md:mt-0 md:ml-4">
<div class="mt-4 md:!col-span-2 md:!mt-0 md:!ml-4">
<!-- button -->
<div class="flex justify-end mb-4 pr-5">
<label

6
src/modules/[chain]/block/index.vue
View File

@ -32,7 +32,7 @@ const list = computed(() => {
>
</div>
<div v-show="tab === 'blocks'" class="grid xl:grid-cols-6 md:grid-cols-4 grid-cols-1">
<div v-show="tab === 'blocks'" class="grid xl:!grid-cols-6 md:!grid-cols-4 grid-cols-1">
<RouterLink
v-for="item in list"
@ -40,7 +40,7 @@ const list = computed(() => {
:to="`/${chain}/block/${item.block.header.height}`"
>
<div class="flex justify-between">
<h3 class="text-md font-bold sm:text-lg">
<h3 class="text-md font-bold sm:!text-lg">
{{ item.block.header.height }}
</h3>
<span class="rounded text-xs whitespace-nowrap font-medium text-green-600">
@ -48,7 +48,7 @@ const list = computed(() => {
</span>
</div>
<div class="flex justify-between tooltip" data-tip="Block Proposor">
<div class="mt-2 hidden text-sm sm:block truncate">
<div class="mt-2 hidden text-sm sm:!block truncate">
<span>{{ format.validator(item.block?.header?.proposer_address) }}</span>
</div>
<span class="text-right mt-1 whitespace-nowrap"> {{ item.block?.data?.txs.length }} txs </span>

10
src/modules/[chain]/gov/[proposal_id].vue
View File

@ -164,7 +164,7 @@ const processList = computed(() => {
<template>
<div>
<div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
<h2 class="card-title flex flex-col md:justify-between md:flex-row">
<h2 class="card-title flex flex-col md:!justify-between md:!flex-row">
<p class="truncate w-full">
{{ proposal_id }}. {{ proposal.content?.title }}
</p>
@ -185,9 +185,9 @@ const processList = computed(() => {
<ObjectElement :value="proposal.content" />
</div>
</div>
<!-- grid lg:grid-cols-3 auto-rows-max-->
<!-- flex-col lg:flex-row flex -->
<div class="gap-4 mb-4 grid lg:grid-cols-3 auto-rows-max">
<!-- grid lg:!!grid-cols-3 auto-rows-max-->
<!-- flex-col lg:!!flex-row flex -->
<div class="gap-4 mb-4 grid lg:!!grid-cols-3 auto-rows-max">
<!-- flex-1 -->
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
<h2 class="card-title mb-1">Tally</h2>
@ -227,7 +227,7 @@ const processList = computed(() => {
</div>
<div
class="bg-base-100 px-4 pt-3 pb-5 rounded shadow lg:col-span-2"
class="bg-base-100 px-4 pt-3 pb-5 rounded shadow lg:!!col-span-2"
>
<h2 class="card-title">Timeline</h2>

6
src/modules/[chain]/ibc/[connection_id].vue
View File

@ -42,9 +42,9 @@ function color(v: string) {
</script>
<template>
<div>
<div class="px-4 pt-3 pb-4 bg-base-100 rounded mb-4 shadow py-24 sm:py-32">
<div class="mx-auto max-w-7xl px-6 lg:px-8">
<dl class="grid grid-cols-1 gap-x-8 text-center lg:grid-cols-3">
<div class="px-4 pt-3 pb-4 bg-base-100 rounded mb-4 shadow py-24 sm:!py-32">
<div class="mx-auto max-w-7xl px-6 lg:!px-8">
<dl class="grid grid-cols-1 gap-x-8 text-center lg:!grid-cols-3">
<div class="mx-auto flex items-center">
<div>
<div

12
src/modules/[chain]/index.vue
View File

@ -134,7 +134,7 @@ const color = computed(() => {
<div>
<div
class="dropdown dropdown-hover w-full md:w-[400px] mt-[16px] md:mt-[36px]"
class="dropdown dropdown-hover w-full md:!w-[400px] mt-[16px] md:!mt-[36px]"
>
<label>
<div
@ -167,7 +167,7 @@ const color = computed(() => {
</label>
<div class="dropdown-content pt-1">
<div
class="h-64 overflow-auto w-full md:w-[400px] shadow rounded"
class="h-64 overflow-auto w-full md:!w-[400px] shadow rounded"
>
<ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
<li
@ -201,7 +201,7 @@ const color = computed(() => {
<a
:color="store.trustColor"
class="mt-5 text-white btn btn-success w-full md:w-[400px] flex items-center"
class="mt-5 text-white btn btn-success w-full md:!w-[400px] flex items-center"
:href="ticker.trade_url"
target="_blank"
>
@ -210,7 +210,7 @@ const color = computed(() => {
</div>
</div>
<div class="flex-1 hidden md:block">
<div class="flex-1 hidden md:!block">
<PriceMarketChart />
</div>
</div>
@ -231,7 +231,7 @@ const color = computed(() => {
</div>
</div>
<div class="grid grid-cols-2 gap-4 md:grid-cols-3 lg:grid-cols-6">
<div class="grid grid-cols-2 gap-4 md:!grid-cols-3 lg:!grid-cols-6">
<div v-for="item in store.stats">
<CardStatisticsVertical v-bind="item" />
</div>
@ -260,7 +260,7 @@ const color = computed(() => {
>
</div>
<div
class="grid grid-cols-1 md:grid-cols-4 auto-cols-auto gap-4 px-4 pb-6"
class="grid grid-cols-1 md:!grid-cols-4 auto-cols-auto gap-4 px-4 pb-6"
>
<div class="bg-gray-100 dark:bg-[#373f59] rounded-sm px-4 py-3">
<div class="text-sm mb-1">Balance</div>

2
src/modules/[chain]/params/index.vue
View File

@ -16,7 +16,7 @@ onMounted(() => {
<div class="bg-base-100 px-4 pt-3 pb-4 rounded">
<div class="text-base mb-3 text-main">{{ chain.title }}</div>
<div
class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4"
class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4"
>
<div
v-for="(item, index) of chain.items"

4
src/modules/[chain]/staking/[validator].vue
View File

@ -139,7 +139,7 @@ onMounted(() => {
<template>
<div>
<div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow border-indigo-500">
<div class="flex flex-col lg:flex-row pt-2 pb-1">
<div class="flex flex-col lg:!flex-row pt-2 pb-1">
<div class="flex-1">
<div class="flex">
<div class="avatar mr-4 relative w-24 rounded-lg overflow-hidden">
@ -300,7 +300,7 @@ onMounted(() => {
<div class="text-sm px-4 pt-3 border-t">{{ v.description?.details }}</div>
</div>
<div class="mt-3 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="mt-3 grid grid-cols-1 md:!grid-cols-3 gap-4">
<div class="h-100">
<CommissionRate :commission="v.commission"></CommissionRate>
</div>

8
src/modules/[chain]/uptime/customize.vue
View File

@ -119,10 +119,10 @@ function color(v: string) {
<template>
<div>
<div class="overflow-x-auto w-full card ">
<div class="lg:flex lg:items-center lg:justify-between bg-base-100 p-5">
<div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
<div class="min-w-0 flex-1">
<h2 class="text-2xl font-bold leading-7 sm:truncate sm:text-3xl sm:tracking-tight">My Validators</h2>
<div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
<h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">My Validators</h2>
<div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
<div class="mt-2 flex items-center text-sm text-gray-500">
<svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
@ -136,7 +136,7 @@ function color(v: string) {
</div>
</div>
</div>
<div class="mt-5 flex lg:ml-4 lg:mt-0">
<div class="mt-5 flex lg:!ml-4 lg:!mt-0">
</div>
</div>

2
src/modules/[chain]/uptime/index.vue
View File

@ -135,7 +135,7 @@ function changeTab(v: string) {
<input type="text" v-model="keyword" placeholder="Keywords to filter validators"
class="input input-sm w-full flex-1" />
</div>
<div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-x-4 mt-4" :class="tab === '2'?'':'hidden'">
<div class="grid grid-cols-1 md:!grid-cols-3 xl:!grid-cols-4 2xl:!grid-cols-6 gap-x-4 mt-4" :class="tab === '2'?'':'hidden'">
<div v-for="({v, signing, hex}, i) in list" :key="i">
<div class="flex items-center justify-between py-0">
<label class="text-truncate text-sm">

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

@ -122,10 +122,10 @@ async function addAddress(acc: AccountEntry) {
<template>
<div>
<div class="overflow-x-auto w-full card ">
<div class="lg:flex lg:items-center lg:justify-between bg-base-100 p-5">
<div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
<div class="min-w-0 flex-1">
<h2 class="text-2xl font-bold leading-7 sm:truncate sm:text-3xl sm:tracking-tight">Accounts</h2>
<div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
<h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">Accounts</h2>
<div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
<div class="mt-2 flex items-center text-sm text-gray-500">
<svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
@ -139,8 +139,8 @@ async function addAddress(acc: AccountEntry) {
</div>
</div>
</div>
<div class="mt-5 flex lg:ml-4 lg:mt-0">
<span class="hidden sm:block">
<div class="mt-5 flex lg:!ml-4 lg:!mt-0">
<span class="hidden sm:!block">
<a href="#address-modal"
class="inline-flex items-center 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"
@ -154,7 +154,7 @@ async function addAddress(acc: AccountEntry) {
</a>
</span>
<span class="ml-3 hidden sm:block">
<span class="ml-3 hidden sm:!block">
<button type="button"
class="inline-flex items-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm"
@click="toggleEdit">
@ -196,7 +196,7 @@ async function addAddress(acc: AccountEntry) {
</div>
<div>
<div class="font-bold capitalize">{{ acc.chainName }}</div>
<div class="text-sm opacity-50 hidden md:block">{{ acc.address }}</div>
<div class="text-sm opacity-50 hidden md:!block">{{ acc.address }}</div>
</div>
</div>
</RouterLink>
@ -258,7 +258,7 @@ async function addAddress(acc: AccountEntry) {
</div>
<div>
<div class="font-bold capitalize">{{ acc.chainName }}</div>
<div class="text-sm opacity-50 hidden md:block">{{ acc.address }}</div>
<div class="text-sm opacity-50 hidden md:!block">{{ acc.address }}</div>
</div>
</div>
</td>

8
src/modules/wallet/portfolio.vue
View File

@ -91,10 +91,10 @@ const tokenList = computed(() => {
</script>
<template>
<div class="overflow-x-auto w-full card ">
<div class="lg:flex lg:items-center lg:justify-between bg-base-100 p-5">
<div class="lg:!flex lg:!items-center lg:!justify-between bg-base-100 p-5">
<div class="min-w-0 flex-1">
<h2 class="text-2xl font-bold leading-7 sm:truncate sm:text-3xl sm:tracking-tight">Portfolio</h2>
<div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap sm:space-x-6">
<h2 class="text-2xl font-bold leading-7 sm:!truncate sm:!text-3xl sm:!tracking-tight">Portfolio</h2>
<div class="mt-1 flex flex-col sm:!mt-0 sm:!flex-row sm:!flex-wrap sm:!space-x-6">
<div class="mt-2 flex items-center text-sm text-gray-500">
<svg class="mr-1.5 h-5 w-5 flex-shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
@ -108,7 +108,7 @@ const tokenList = computed(() => {
</div>
</div>
</div>
<div class="mt-5 flex lg:ml-4 lg:mt-0">
<div class="mt-5 flex lg:!ml-4 lg:!mt-0">
</div>
</div>

8
src/pages/index.vue
View File

@ -29,13 +29,13 @@ const chains = computed(() => {
<template>
<div class="">
<div class="flex items-center justify-center mb-6 mt-10">
<div class="w-8 md:w-16 rounded-full mr-3">
<div class="w-8 md:!w-16 rounded-full mr-3">
<img src="/logo.svg" />
</div>
<h1 class="text-primary text-3xl md:text-6xl font-bold mr-2">
<h1 class="text-primary text-3xl md:!text-6xl font-bold mr-2">
Ping dashboard
</h1>
<div class="badge badge-primary badge-outline mt-1 text-sm md:mt-8">
<div class="badge badge-primary badge-outline mt-1 text-sm md:!mt-8">
Beta
</div>
</div>
@ -65,7 +65,7 @@ const chains = computed(() => {
</VTextField>
<div
class="grid grid-cols-2 gap-4 mt-6 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-5"
class="grid grid-cols-2 gap-4 mt-6 md:!grid-cols-3 lg:!grid-cols-4 2xl:!grid-cols-5"
>
<ChainSummary
v-for="(chain, index) in chains"

7
src/style.css
View File

@ -34,10 +34,3 @@
position: relative;
z-index: 2;
}
@media (min-width: 1280px){
.force-block{
display: block !important;
}
}