Skip to content

Commit 815fc8d

Browse files
4ban4ban
committed
Add hovering explanation for rank
1 parent 7f439e2 commit 815fc8d

File tree

1 file changed

+35
-46
lines changed

1 file changed

+35
-46
lines changed

‎src/pages/Index.vue

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
<div class="col-md col-sm-12 col-xs-12">
88
<div class="row items-center">
99
<div class="text-h6 text-uppercase text-vgrey">vdexnode <q-badge color="vgreen" text-color="vblack" align="middle" transparent>{{ version }}</q-badge></div>
10-
<q-btn color="vgrey" size="11px" flat round icon="fas fa-question" class="q-mx-sm" @click="helpDialog = true" />
10+
<q-btn color="vgrey" size="11px" flat round icon="fas fa-question" class="q-mx-sm" @click="helpDialog = true" >
11+
<q-tooltip content-class="bg-vgreen text-vdark" content-style="font-size: 16px" :offset="[10, 10]">Click to know more</q-tooltip>
12+
</q-btn>
1113
</div>
1214
<div class="text-italic text-vgrey">Rent your computer to earn VTX</div>
1315
</div>
@@ -74,7 +76,13 @@
7476
</q-item>
7577
<q-item>
7678
<q-item-section>
77-
<q-item-label>Rank</q-item-label>
79+
<q-item-label>
80+
Rank
81+
<q-badge color="vgreen" class="text-vdark" @click="rankDialog = true">
82+
<q-icon name="fas fa-question" color="vdark"/>
83+
<q-tooltip content-class="bg-vgreen text-vdark" content-style="font-size: 16px" :offset="[10, 10]">Click to know more</q-tooltip>
84+
</q-badge>
85+
</q-item-label>
7886
<q-item-label class="code text-vgreen" caption>{{ identity.rank }}</q-item-label>
7987
</q-item-section>
8088
<q-item-section side top>
@@ -126,9 +134,10 @@
126134
<div class="col self-center">
127135
<div class="text-italic">
128136
List of nodes on the network.
129-
<q-btn flat round size="sm" color="vgreen" icon="fas fa-question" class="">
137+
<q-badge color="vgreen" class="text-vdark">
138+
<q-icon name="fas fa-question" color="vdark"/>
130139
<q-tooltip content-class="bg-vgreen text-vdark" content-style="font-size: 16px" :offset="[10, 10]">List of the nodes is automatically updated every 5 minutes</q-tooltip>
131-
</q-btn>
140+
</q-badge>
132141
</div>
133142
<div class="text-italic text-caption">*You are required to vote for 21 nodes per day to activate the distribution of VTX.</div>
134143
</div>
@@ -169,7 +178,7 @@
169178
<div class="text-italic text-caption">*See rules for details.</div>
170179
<template v-slot:action>
171180
<q-btn color="vgreen" class="text-vdark q-mx-xs" v-on:click="vote()" v-if="voting_list.length > 0">Vote now</q-btn>
172-
<div v-if="voting_list.length <= 0">Choose nodes to vote</div>
181+
<div v-if="voting_list.length <= 0">Choose nodes</div>
173182
</template>
174183
</q-banner>
175184
<div class="bg-vdark inset-shadow" v-if="nodes.length > 0">
@@ -185,7 +194,6 @@
185194
</div>
186195
</div>
187196
</div>
188-
189197
<!-- Error dialog -->
190198
<q-dialog v-model="errorDialog">
191199
<q-card style="min-width: 50vw; max-width: 70vw;" class="bg-negative text-vgrey">
@@ -249,42 +257,6 @@
249257
</q-card-actions>
250258
</q-card>
251259
</q-dialog>
252-
<!-- Add node dialog -->
253-
<!-- <q-dialog v-model="addNodeDialog">
254-
<q-card style="min-width: 50vw; max-width: 70vw;" class="bg-vgrey">
255-
<q-card-section>
256-
<div class="text-h6">Add the node into the distribution contract</div>
257-
</q-card-section>
258-
<q-card-section>
259-
Your account is: {{ identity.account_name }}
260-
</q-card-section>
261-
<q-card-section style="max-height: 50vh" class="scroll">
262-
<pre>{{ addNodeMessage }}</pre>
263-
</q-card-section>
264-
<q-card-actions align="right">
265-
<q-btn flat label="Close" color="vdark" v-close-popup />
266-
<q-btn flat label="Add" color="vblack" @click=addNode />
267-
</q-card-actions>
268-
</q-card>
269-
</q-dialog> -->
270-
<!-- register node dialog -->
271-
<!-- <q-dialog v-model="registerNodeDialog">
272-
<q-card style="min-width: 50vw; max-width: 70vw;" class="bg-vgrey">
273-
<q-card-section>
274-
<div class="text-h6">Register the node into the voting contract</div>
275-
</q-card-section>
276-
<q-card-section>
277-
Your account is: {{ identity.account_name }}
278-
</q-card-section>
279-
<q-card-section style="max-height: 50vh" class="scroll">
280-
<pre>{{ registerNodeMessage }}</pre>
281-
</q-card-section>
282-
<q-card-actions align="right">
283-
<q-btn flat label="Close" color="vdark" v-close-popup />
284-
<q-btn flat label="Register" color="vblack" @click=registerNode />
285-
</q-card-actions>
286-
</q-card>
287-
</q-dialog> -->
288260
<!-- Private key update dialog -->
289261
<q-dialog v-model="privateDialog" @show="$refs.input.focus()">
290262
<q-card style="min-width: 50vw; max-width: 70vw;" class="bg-vgrey">
@@ -369,6 +341,26 @@
369341
</q-card-actions>
370342
</q-card>
371343
</q-dialog>
344+
<!-- Rank dialog -->
345+
<q-dialog v-model="rankDialog">
346+
<q-card style="min-width: 50vw; max-width: 70vw;" class="bg-vgrey">
347+
<q-card-section>
348+
<div class="text-h6">Rank</div>
349+
</q-card-section>
350+
<q-card-section style="max-height: 60vh" class="scroll">
351+
<div class="text-subtitle1">How the rank works</div>
352+
<ul>
353+
<li>Rank is your position among all registered nodes based on the vote points.</li>
354+
<li>Those users who vote for your node give you their points based on the power of their vote. The sum of points and its position harm the other nodes forms the rank. Foe example #1 means you have the most vote points.</li>
355+
<li>The power of the vote depends on the VTX balance. The more VTX you have, the stronger your vote.</li>
356+
<li>Votes are divided by the number of nodes for which you vote. For example, if the strength of your vote is 10 points and you vote for 1 node, you give all 10 points to this node, but if you vote for 5 nodes, each will receive 2 points only.</li>
357+
</ul>
358+
</q-card-section>
359+
<q-card-actions align="right">
360+
<q-btn flat label="Got it" v-close-popup />
361+
</q-card-actions>
362+
</q-card>
363+
</q-dialog>
372364
</q-page>
373365
</q-page-container>
374366
</q-layout>
@@ -433,17 +425,14 @@ export default {
433425
nodes: [],
434426
voting_list: [],
435427
privateDialog: false,
436-
// addNodeDialog: false,
437-
// addNodeMessage: '',
438-
// registerNodeDialog: false,
439-
// registerNodeMessage: '',
440428
errorDialog: false,
441429
errorMessage: '',
442430
resultDialog: false,
443431
resultMessage: '',
444432
helpDialog: false,
445433
votedDialog: false,
446434
rulesDialog: false,
435+
rankDialog: false,
447436
isPwd: true,
448437
isPrvt: true,
449438
running_nodes: 0,

0 commit comments

Comments
 (0)