Skip to content

Commit f71c33c

Browse files
GusevPMGusevPM
committed
Add horizontal banner and fix some bugs
1 parent beecc41 commit f71c33c

7 files changed

Lines changed: 116 additions & 45 deletions

File tree

‎components/LeftSidebar.vue‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import NavLink from "@/components/modules/navigation/NavLink.vue"
1010
/** Utils */
1111
import { getNetworkName } from "@/services/utils/general"
1212
import { StatusMap } from "@/services/constants/node"
13+
import { isMobile } from "@/services/utils"
1314
1415
/** Store */
1516
import { useAppStore } from "~/store/app"
@@ -19,10 +20,6 @@ const appStore = useAppStore()
1920
const nodeStore = useNodeStore()
2021
const modalsStore = useModalsStore()
2122
22-
const { isMobile } = useDevice()
23-
console.log('useDevice()', useDevice());
24-
console.log('isMobile', isMobile);
25-
2623
const head = computed(() => appStore.lastHead)
2724
2825
const mainLinks = reactive([
@@ -179,7 +176,7 @@ const handleNavigate = (url) => {
179176
</Flex>
180177
</NuxtLink>
181178

182-
<Button @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="mini" :class="$style.close_btn">
179+
<Button v-if="isMobile()" @click="appStore.showSidebar = !appStore.showSidebar" type="secondary" size="mini" :class="$style.close_btn">
183180
<Icon name="close" size="14" color="primary" />
184181
</Button>
185182
</Flex>
@@ -254,15 +251,6 @@ const handleNavigate = (url) => {
254251
<Text v-else size="12" weight="600" color="tertiary">{{ nodeStore.percentage.toFixed(0) }}%</Text>
255252
</Flex>
256253

257-
<!-- <Flex justify="end" :class="$style.ad">
258-
<Flex justify="end" direction="column" gap="8">
259-
<Text size="12" weight="500" color="brand">Introducing Celenium API</Text>
260-
<Text size="12" weight="500" height="140" color="secondary">
261-
Unlock the power of Celestia: Scalable, Secure and Modular.
262-
</Text>
263-
</Flex>
264-
</Flex> -->
265-
266254
<Dropdown position="end" fullWidth>
267255
<Flex align="center" gap="8" justify="between" :class="$style.network_selector">
268256
<Flex align="center" gap="8">

‎components/modals/SendModal.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -322,7 +322,7 @@ const handleContinue = async () => {
322322
{
323323
denom: "utia",
324324
amount: DecUtils.getTenExponentN(6)
325-
.mul(new Dec(parseFloat(amount.value)))
325+
.mul(new Dec(parseFloat(amount.value.replace(/\s/g, ''))))
326326
.truncate()
327327
.toString(),
328328
},

‎components/modules/namespace/NamespaceOverview.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import BlobsTable from "./tables/BlobsTable.vue"
1111
import MessagesTable from "./tables/MessagesTable.vue"
1212
1313
/** Services */
14-
import { comma, formatBytes, getNamespaceID, midHex, space } from "@/services/utils"
14+
import { comma, formatBytes, getNamespaceID, shortHex, midHex, space } from "@/services/utils"
1515
1616
/** API */
1717
import { fetchNamespaceBlobs, fetchNamespaceMessagesById, fetchNamespaceRollups } from "@/services/api/namespace"
@@ -231,7 +231,7 @@ const handleViewRawMessages = () => {
231231
<Text size="12" weight="600" color="secondary">Base64 ID</Text>
232232
233233
<Flex align="center" gap="10">
234-
<Text size="13" weight="600" color="primary">{{ midHex(namespace.hash) }} </Text>
234+
<Text size="13" weight="600" color="primary">{{ shortHex(namespace.hash) }} </Text>
235235
236236
<CopyButton :text="namespace.hash" />
237237
</Flex>

‎components/modules/stats/RollupsBubbleChart.vue‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -258,9 +258,6 @@ const buildChart = (chart, data) => {
258258
.attr("y", d => {
259259
let cy = y(d.fee)
260260
if (cy > height - 30) {
261-
console.log('cy', cy);
262-
console.log('height', height);
263-
264261
return height - 30 - z(d.size) - 1
265262
}
266263

‎components/shared/AdvBanner.vue‎

Lines changed: 95 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,27 @@ const props = defineProps({
77
type: String,
88
required: false,
99
},
10+
orientation: {
11+
type: String,
12+
default: 'vertical',
13+
},
1014
})
1115
12-
const adv = computed(() => {
16+
const adv = ref({})
17+
const isDisplayed = ref(true)
18+
19+
onMounted(() => {
1320
if (props.advName) {
14-
return getAdvByName(props.advName)
21+
adv.value = getAdvByName(props.advName)
1522
} else {
16-
return getRandomAdv()
23+
adv.value = getRandomAdv()
1724
}
1825
})
1926
</script>
2027

2128
<template>
22-
<NuxtLink v-if="adv.link" :to="adv.link" target="_blank">
23-
<Flex direction="column" gap="12" :class="$style.ad">
29+
<NuxtLink v-if="adv.link" :to="adv.link" target="_blank" :class="[orientation === 'horizontal' && $style.wrapper_horizontal, !isDisplayed && $style.not_display]">
30+
<Flex v-if="orientation === 'vertical'" direction="column" gap="12" :class="$style.ad_vertical">
2431
<Flex direction="column" gap="8">
2532
<Flex align="center" gap="6">
2633
<Icon v-if="adv.icon" :name="adv.icon" size="14" color="brand" />
@@ -30,17 +37,50 @@ const adv = computed(() => {
3037
<Text size="13" weight="600" color="tertiary" height="140"> {{ adv.body }} </Text>
3138
</Flex>
3239

33-
<Text size="13" weight="600" color="brand"> {{ adv.footer }} </Text>
40+
<!-- <Text size="13" weight="600" color="brand" :class="$style.footer"> {{ adv.footer }} </Text> -->
41+
<Flex align="center" justify="between">
42+
<Text size="13" weight="600" color="brand" :class="$style.footer"> {{ adv.footer }} </Text>
43+
44+
<Icon @click.prevent.stop="isDisplayed = false" name="close" size="16" color="secondary" :class="$style.close_icon" />
45+
</Flex>
46+
</Flex>
47+
<Flex
48+
v-else-if="orientation === 'horizontal'"
49+
align="center"
50+
justify="between"
51+
gap="12"
52+
wide
53+
:class="$style.ad_horizontal"
54+
>
55+
<Flex align="center" gap="12">
56+
<Flex align="center" gap="6">
57+
<Icon v-if="adv.icon" :name="adv.icon" size="14" color="brand" />
58+
<Text size="13" weight="600" color="primary"> {{ adv.header }} </Text>
59+
</Flex>
60+
61+
<Text size="13" weight="600" color="tertiary" height="140"> {{ adv.body }} </Text>
62+
</Flex>
63+
64+
<Flex align="center" gap="8">
65+
<Text size="13" weight="600" color="brand"> {{ adv.footer }} </Text>
66+
67+
<Icon @click.prevent.stop="isDisplayed = false" name="close" size="16" color="secondary" :class="$style.close_icon" />
68+
</Flex>
3469
</Flex>
3570
</NuxtLink>
3671
</template>
3772

3873
<style module>
39-
.wrapper {
40-
width: fit-content;
74+
.wrapper_horizontal {
75+
width: 100%;
76+
padding: 8px 24px 0px 24px;
4177
}
4278
43-
.ad {
79+
.not_display {
80+
display: none;
81+
}
82+
83+
.ad_vertical {
4484
position: relative;
4585
4686
border-radius: 12px;
@@ -52,19 +92,60 @@ const adv = computed(() => {
5292
5393
&:hover {
5494
background: var(--op-3);
95+
96+
.close_icon {
97+
display: block;
98+
}
99+
}
100+
101+
& .footer {
102+
padding: 2px;
103+
}
104+
& .close_icon {
105+
display: none;
106+
padding: 2px;
107+
108+
border-radius: 12px;
109+
110+
transition: all 0.2s ease;
111+
112+
&:hover {
113+
background: var(--op-10);
114+
transform: scale(1.1);
115+
}
116+
}
117+
}
118+
119+
.ad_horizontal {
120+
position: relative;
121+
width: 100%;
122+
123+
border-radius: 12px;
124+
box-shadow: inset 0 0 0 2px var(--op-10);
125+
126+
padding: 8px 16px;
127+
128+
transition: all 0.2s ease;
129+
130+
&:hover {
131+
background: var(--op-3);
132+
133+
.close_icon {
134+
display: block;
135+
}
55136
}
56137
57138
& .close_icon {
58-
position: absolute;
59-
top: 16px;
60-
right: 16px;
139+
display: none;
140+
padding: 2px;
61141
62-
cursor: pointer;
142+
border-radius: 12px;
63143
64144
transition: all 0.2s ease;
65145
66146
&:hover {
67-
fill: var(--txt-secondary);
147+
background: var(--op-10);
148+
transform: scale(1.1);
68149
}
69150
}
70151
}

‎layouts/default.vue‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,17 @@
1+
<script setup>
2+
/** Components */
3+
import AdvBanner from "@/components/shared/AdvBanner.vue"
4+
5+
</script>
6+
17
<template>
28
<Flex direction="column">
39
<Flex justify="center" :class="$style.wrapper">
410
<LeftSidebar :class="$style.sidebar" />
511

612
<Flex direction="column" align="center" :class="$style.content">
713
<Feed />
14+
<AdvBanner orientation="horizontal" />
815
<ActionBar />
916

1017
<Flex direction="column" align="center" wide :class="$style.container">

‎services/constants/advertising.js‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,23 @@ const advertisements = [
44
link: 'https://api-plans.celenium.io',
55
icon: 'slash',
66
header: 'Try out Celenium API',
7-
body: 'Unlock the power of Celestia: Scalable, Secure and Modular Blockchain.',
8-
footer: 'Get started ->',
9-
weight: 50,
7+
body: 'The power of Celestia: Scalable, Secure and Modular Blockchain.',
8+
footer: 'Get started',
9+
weight: 0.5,
1010
},
1111
{
1212
name: 'celenium_survey',
13-
link: 'https://forms.gle/qHL1yicTDVxTdvp69',
14-
icon: 'slash',
13+
link: 'https://t.co/4nBFExP2VR',
14+
icon: 'validator',
1515
header: 'Celenium survey',
16-
body: 'Please take 5 minutes and answer a few questions about Celenium.',
17-
footer: 'Take the survey ->',
18-
weight: 50,
16+
body: 'Please take 5 minutes and answer a few questions.',
17+
footer: 'Take the survey',
18+
weight: 0.5,
1919
},
2020
]
2121

22-
const totalWeight = 100
23-
2422
export function getRandomAdv() {
25-
const randomNum = Math.random() * totalWeight
23+
const randomNum = Math.random()
2624

2725
let cumWeight = 0
2826
for (let ad of advertisements) {

0 commit comments

Comments
 (0)