feat: add important style

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
+3 -3
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
+3 -3
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>
+5 -5
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>
+3 -3
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
+6 -6
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>
+1 -1
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"
+2 -2
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>
+4 -4
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>
+1 -1
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">
+8 -8
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>
+4 -4
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>