Skip to content

Commit 1749955

Browse files
xdeqxdeq
committed
fix(new nav)
1 parent 9a904ec commit 1749955

9 files changed

Lines changed: 145 additions & 89 deletions

File tree

‎components/ActionBar.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,5 +53,9 @@ const appStore = useAppStore()
5353
.wrapper {
5454
padding: 12px;
5555
}
56+
57+
.connection_btn {
58+
display: none;
59+
}
5660
}
5761
</style>

‎components/LeftSidebar.vue‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<script setup>
22
/** UI */
33
import Button from "@/components/ui/Button.vue"
4-
import Tooltip from "@/components/ui/Tooltip.vue"
54
import { Dropdown, DropdownItem, DropdownTitle, DropdownDivider } from "@/components/ui/Dropdown"
65
76
/** Components */
87
import NavLink from "@/components/modules/navigation/NavLink.vue"
98
9+
/** Utils */
10+
import { getNetworkName } from "@/services/utils/general"
11+
1012
/** Store */
1113
import { useAppStore } from "~/store/app"
1214
import { useModalsStore } from "~/store/modals"
@@ -152,7 +154,7 @@ const handleNavigate = (url) => {
152154
</Flex>
153155

154156
<Flex direction="column" gap="2">
155-
<NavLink v-for="link in mainLinks" :link="link" />
157+
<NavLink v-for="link in mainLinks" :link="link" @onClose="appStore.showSidebar = false" />
156158
</Flex>
157159

158160
<Flex direction="column" gap="2">
@@ -167,7 +169,7 @@ const handleNavigate = (url) => {
167169
</Flex>
168170

169171
<Flex v-if="!isModularLinksCollapsed" direction="column" gap="2">
170-
<NavLink v-for="link in modularLinks" :link="link" />
172+
<NavLink v-for="link in modularLinks" :link="link" @onClose="appStore.showSidebar = false" />
171173
</Flex>
172174
</Flex>
173175

@@ -183,7 +185,7 @@ const handleNavigate = (url) => {
183185
</Flex>
184186

185187
<Flex v-if="!isToolsLinkCollapsed" direction="column" gap="2">
186-
<NavLink v-for="link in toolsLinks" :link="link" />
188+
<NavLink v-for="link in toolsLinks" :link="link" @onClose="appStore.showSidebar = false" />
187189
</Flex>
188190
</Flex>
189191

@@ -194,7 +196,7 @@ const handleNavigate = (url) => {
194196
</Flex>
195197

196198
<Flex direction="column" gap="2">
197-
<NavLink v-for="link in newLinks" :link="link" />
199+
<NavLink v-for="link in newLinks" :link="link" @onClose="appStore.showSidebar = false" />
198200
</Flex>
199201
</Flex>
200202
</Flex>
@@ -213,7 +215,9 @@ const handleNavigate = (url) => {
213215
<Flex align="center" gap="8" justify="between" :class="$style.network_selector">
214216
<Flex align="center" gap="8">
215217
<Icon name="globe" size="14" :color="head.synced ? 'brand' : 'red'" />
216-
<Text size="13" weight="600" color="secondary">Mainnet</Text>
218+
<Text size="13" weight="600" color="secondary">
219+
{{ getNetworkName() }}
220+
</Text>
217221
</Flex>
218222

219223
<Icon name="chevron" size="14" color="secondary" />
@@ -253,7 +257,7 @@ const handleNavigate = (url) => {
253257
padding: 20px 0 20px 20px;
254258
255259
&.show {
256-
position: absolute;
260+
position: fixed;
257261
top: 0;
258262
bottom: 0;
259263
left: 0;

‎components/TheFooter.vue‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -199,8 +199,13 @@ const handleChangeTheme = (target) => {
199199
<Flex justify="center" :class="$style.bottom">
200200
<Flex wide align="center" gap="20" justify="between" :class="$style.bottom_container">
201201
<Flex align="center" gap="20">
202-
<Text size="12" weight="500" color="tertiary">Terms of use</Text>
203-
<Text size="12" weight="500" color="tertiary">Privacy policy</Text>
202+
<a href="https://www.pklabs.me/terms" target="_blank" style="line-height: 12px">
203+
<Text size="12" weight="500" color="tertiary">Terms of use</Text>
204+
</a>
205+
206+
<a href="https://www.pklabs.me/privacy" target="_blank" style="line-height: 12px">
207+
<Text size="12" weight="500" color="tertiary">Privacy policy</Text>
208+
</a>
204209
</Flex>
205210

206211
<a href="https://www.pklabs.me/" target="_blank" style="line-height: 12px">

‎components/modals/APIModal.vue‎

Lines changed: 83 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -102,8 +102,8 @@ const selectedBilling = ref("annually")
102102
<Flex direction="column" gap="16">
103103
<Text size="14" weight="600" color="primary">Celenium API</Text>
104104

105-
<Flex gap="32">
106-
<Flex direction="column" justify="between" :class="$style.left">
105+
<Flex gap="32" :class="$style.content">
106+
<Flex direction="column" justify="between" gap="20" :class="$style.left">
107107
<Flex direction="column" gap="20">
108108
<Flex direction="column" gap="8">
109109
<Text size="13" weight="600" color="secondary">Plans</Text>
@@ -202,80 +202,88 @@ const selectedBilling = ref("annually")
202202
</Flex>
203203
</Flex>
204204

205-
<Flex wide direction="column" gap="32" :class="$style.right">
206-
<Flex direction="column" gap="16">
207-
<Flex direction="column" gap="8">
208-
<Text size="14" weight="600" color="primary">{{ plans[selectedPlan].name }} Overview</Text>
209-
<Text size="13" weight="500" color="tertiary"
210-
>${{ plans[selectedPlan].price[selectedBilling] }} per month, billing {{ selectedBilling }}
211-
</Text>
205+
<Flex wide direction="column" gap="32" justify="between" :class="$style.right">
206+
<Flex direction="column" gap="32">
207+
<Flex direction="column" gap="16">
208+
<Flex direction="column" gap="8">
209+
<Text size="14" weight="600" color="primary">{{ plans[selectedPlan].name }} Overview</Text>
210+
<Text size="13" weight="500" color="tertiary"
211+
>${{ plans[selectedPlan].price[selectedBilling] }} per month, billing {{ selectedBilling }}
212+
</Text>
213+
</Flex>
214+
215+
<div class="divider_h" />
212216
</Flex>
213217

214-
<div class="divider_h" />
215-
</Flex>
218+
<Flex direction="column" gap="16">
219+
<Flex wide align="center" gap="8" justify="between">
220+
<Flex align="center" gap="8">
221+
<Icon name="zap-circle" size="14" color="brand" />
222+
<Text size="14" weight="600" color="primary">{{ comma(plans[selectedPlan].requests.rpd) }} </Text>
223+
</Flex>
216224

217-
<Flex direction="column" gap="16">
218-
<Flex wide align="center" gap="8" justify="between">
219-
<Flex align="center" gap="8">
220-
<Icon name="zap-circle" size="14" color="brand" />
221-
<Text size="14" weight="600" color="primary">{{ comma(plans[selectedPlan].requests.rpd) }} </Text>
225+
<Text size="13" weight="600" color="tertiary">Requests per Day</Text>
222226
</Flex>
227+
<Flex wide align="center" gap="8" justify="between">
228+
<Flex align="center" gap="8">
229+
<Icon name="zap-circle" size="14" color="brand" />
230+
<Text size="14" weight="600" color="primary">{{ comma(plans[selectedPlan].requests.rps) }}</Text>
231+
</Flex>
223232

224-
<Text size="13" weight="600" color="tertiary">Requests per Day</Text>
233+
<Text size="13" weight="600" color="tertiary">Requests per Second</Text>
234+
</Flex>
225235
</Flex>
226-
<Flex wide align="center" gap="8" justify="between">
236+
237+
<Flex direction="column" gap="16">
238+
<Flex align="center" gap="8">
239+
<Icon
240+
:name="plans[selectedPlan].access.blobs ? 'check-circle' : 'close-circle'"
241+
size="14"
242+
:color="plans[selectedPlan].access.blobs ? 'brand' : 'tertiary'"
243+
/>
244+
<Text size="13" weight="600" :color="plans[selectedPlan].access.blobs ? 'primary' : 'tertiary'">
245+
Blobs Access
246+
</Text>
247+
</Flex>
227248
<Flex align="center" gap="8">
228-
<Icon name="zap-circle" size="14" color="brand" />
229-
<Text size="14" weight="600" color="primary">{{ comma(plans[selectedPlan].requests.rps) }}</Text>
249+
<Icon
250+
:name="plans[selectedPlan].access.stats ? 'check-circle' : 'close-circle'"
251+
size="14"
252+
:color="plans[selectedPlan].access.stats ? 'brand' : 'tertiary'"
253+
/>
254+
<Text size="13" weight="600" :color="plans[selectedPlan].access.stats ? 'primary' : 'tertiary'">
255+
Statistics Access
256+
</Text>
257+
</Flex>
258+
<Flex align="center" gap="8">
259+
<Icon
260+
:name="plans[selectedPlan].access.rollups ? 'check-circle' : 'close-circle'"
261+
size="14"
262+
:color="plans[selectedPlan].access.rollups ? 'brand' : 'tertiary'"
263+
/>
264+
<Text size="13" weight="600" :color="plans[selectedPlan].access.rollups ? 'primary' : 'tertiary'">
265+
Rollups Data
266+
</Text>
230267
</Flex>
231-
232-
<Text size="13" weight="600" color="tertiary">Requests per Second</Text>
233268
</Flex>
234-
</Flex>
235269

236-
<Flex direction="column" gap="16">
237-
<Flex align="center" gap="8">
238-
<Icon
239-
:name="plans[selectedPlan].access.blobs ? 'check-circle' : 'close-circle'"
240-
size="14"
241-
:color="plans[selectedPlan].access.blobs ? 'brand' : 'tertiary'"
242-
/>
243-
<Text size="13" weight="600" :color="plans[selectedPlan].access.blobs ? 'primary' : 'tertiary'">
244-
Blobs Access
245-
</Text>
246-
</Flex>
247-
<Flex align="center" gap="8">
248-
<Icon
249-
:name="plans[selectedPlan].access.stats ? 'check-circle' : 'close-circle'"
250-
size="14"
251-
:color="plans[selectedPlan].access.stats ? 'brand' : 'tertiary'"
252-
/>
253-
<Text size="13" weight="600" :color="plans[selectedPlan].access.stats ? 'primary' : 'tertiary'">
254-
Statistics Access
255-
</Text>
256-
</Flex>
257-
<Flex align="center" gap="8">
258-
<Icon
259-
:name="plans[selectedPlan].access.rollups ? 'check-circle' : 'close-circle'"
260-
size="14"
261-
:color="plans[selectedPlan].access.rollups ? 'brand' : 'tertiary'"
262-
/>
263-
<Text size="13" weight="600" :color="plans[selectedPlan].access.rollups ? 'primary' : 'tertiary'">
264-
Rollups Data
265-
</Text>
270+
<Flex direction="column" gap="16">
271+
<Flex v-if="plans[selectedPlan].other.queryOp !== 'None'" align="center" gap="8">
272+
<Icon name="check-circle" size="14" color="secondary" />
273+
<Text size="13" weight="600" color="primary"
274+
>{{ plans[selectedPlan].other.queryOp }} Query Optimization</Text
275+
>
276+
</Flex>
277+
<Flex align="center" gap="8">
278+
<Icon name="check-circle" size="14" color="secondary" />
279+
<Text size="13" weight="600" color="primary">{{ plans[selectedPlan].other.support }} Support</Text>
280+
</Flex>
266281
</Flex>
267282
</Flex>
268283

269-
<Flex direction="column" gap="16">
270-
<Flex v-if="plans[selectedPlan].other.queryOp !== 'None'" align="center" gap="8">
271-
<Icon name="check-circle" size="14" color="secondary" />
272-
<Text size="13" weight="600" color="primary">{{ plans[selectedPlan].other.queryOp }} Query Optimization</Text>
273-
</Flex>
274-
<Flex align="center" gap="8">
275-
<Icon name="check-circle" size="14" color="secondary" />
276-
<Text size="13" weight="600" color="primary">{{ plans[selectedPlan].other.support }} Support</Text>
277-
</Flex>
278-
</Flex>
284+
<Button type="secondary" size="small" wide style="margin-bottom: 24px">
285+
Learn more about {{ plans[selectedPlan].name }}
286+
</Button>
279287
</Flex>
280288
</Flex>
281289
</Flex>
@@ -348,4 +356,16 @@ const selectedBilling = ref("annually")
348356
width: 12px;
349357
height: 12px;
350358
}
359+
360+
@media (max-width: 800px) {
361+
.content {
362+
flex-direction: column;
363+
gap: 24px;
364+
}
365+
366+
.left {
367+
width: 100%;
368+
height: initial;
369+
}
370+
}
351371
</style>

‎components/modules/block/BlockOverview.vue‎

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,7 @@ const handleViewRawTransactions = () => {
289289
<Flex align="center" gap="8">
290290
<Button @click="router.push(`/block/${block.height - 1}`)" type="secondary" size="mini" :disabled="block.height === 0">
291291
<Icon name="arrow-redo-right" size="16" color="secondary" :style="{ transform: 'scaleX(-1)' }" />
292-
Prev
292+
<Text :class="$style.block_nav__txt">Prev</Text>
293293
</Button>
294294

295295
<Button
@@ -298,7 +298,7 @@ const handleViewRawTransactions = () => {
298298
size="mini"
299299
:disabled="block.height === lastBlock?.height"
300300
>
301-
Next
301+
<Text :class="$style.block_nav__txt">Next</Text>
302302
<Icon name="arrow-redo-right" size="16" color="secondary" />
303303
</Button>
304304
</Flex>
@@ -310,10 +310,7 @@ const handleViewRawTransactions = () => {
310310
ODS
311311
</Button>
312312

313-
<BookmarkButton
314-
type="block"
315-
:id="block.height"
316-
/>
313+
<BookmarkButton type="block" :id="block.height" />
317314

318315
<div class="divider_v" />
319316

@@ -733,9 +730,7 @@ const handleViewRawTransactions = () => {
733730
<Flex align="center" gap="4">
734731
<Text size="13" weight="600" color="primary">{{ comma(tx.gas_used) }}</Text>
735732
<Text size="13" weight="600" color="tertiary">/</Text>
736-
<Text size="13" weight="600" color="secondary">{{
737-
comma(tx.gas_wanted)
738-
}}</Text></Flex
733+
<Text size="13" weight="600" color="secondary">{{ comma(tx.gas_wanted) }}</Text></Flex
739734
>
740735
</template>
741736
</Tooltip>
@@ -1042,5 +1037,9 @@ const handleViewRawTransactions = () => {
10421037
.hint {
10431038
display: none;
10441039
}
1040+
1041+
.block_nav__txt {
1042+
display: none;
1043+
}
10451044
}
10461045
</style>

‎components/modules/gas/GasPriceHeatmap.vue‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ const minValue = ref(0)
1818
const maxValue = ref(0)
1919
2020
const calculateOpacity = (val) => {
21-
const normalizedValue = (val - minValue.value) / (maxValue.value - minValue.value);
22-
const opacity = 0.2 + normalizedValue * 0.8;
21+
const normalizedValue = (val - minValue.value) / (maxValue.value - minValue.value)
22+
const opacity = 0.2 + normalizedValue * 0.8
2323
24-
return opacity;
24+
return opacity
2525
}
2626
2727
onMounted(async () => {
@@ -52,7 +52,7 @@ onMounted(async () => {
5252
})
5353
5454
Object.keys(seriesByDay.value).forEach((d) => {
55-
seriesByDay.value[d].reverse();
55+
seriesByDay.value[d].reverse()
5656
if (seriesByDay.value[d].length !== 24) {
5757
while (seriesByDay.value[d].length !== 24) {
5858
seriesByDay.value[d].push({
@@ -92,7 +92,7 @@ onMounted(async () => {
9292
:class="[!hour.value && $style.not_available]"
9393
:style="{ opacity: calculateOpacity(hour.value) }"
9494
>
95-
<Tooltip :disabled="!hour.value">
95+
<Tooltip side="top" :disabled="!hour.value">
9696
<div :class="$style.inner" />
9797
9898
<template #content>
@@ -103,7 +103,9 @@ onMounted(async () => {
103103
</Flex>
104104
<Flex align="center" gap="12" justify="between" wide>
105105
<Text color="secondary">Time</Text>
106-
<Text color="primary">{{ DateTime.fromISO(hour.time).setLocale("en").toFormat("LLL d, yyyy, H:mm") }}</Text>
106+
<Text color="primary">{{
107+
DateTime.fromISO(hour.time).setLocale("en").toFormat("LLL d, yyyy, H:mm")
108+
}}</Text>
107109
</Flex>
108110
</Flex>
109111
</template>

‎components/modules/navigation/NavLink.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import NavLink from "./NavLink.vue"
33
44
const route = useRoute()
55
6+
const emit = defineEmits(["onClose"])
67
const props = defineProps({
78
link: Object,
89
})
910
1011
const isExpanded = ref(false)
1112
1213
const handleClick = () => {
14+
emit("onClose")
1315
if (props.link.callback) props.link.callback()
1416
}
1517
</script>
@@ -23,7 +25,7 @@ const handleClick = () => {
2325
<Icon v-if="link.external" name="arrow-narrow-up-right" size="14" color="tertiary" />
2426
</Flex>
2527

26-
<Flex @click.prevent="isExpanded = !isExpanded" :class="$style.chevron_icon">
28+
<Flex @click.prevent.stop="isExpanded = !isExpanded" :class="$style.chevron_icon">
2729
<Icon
2830
v-if="link.children"
2931
name="chevron"

0 commit comments

Comments
 (0)