GH #52 payment documentation

- adding the inline documentation - simplifying the component
eosdac · Jul 6, 2020 · c2ee7ea · c2ee7ea
1 parent 5a1fee0
commit c2ee7ea
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 27 deletions.
diff --git a/src/i18n/en_US/index.js b/src/i18n/en_US/index.js
@@ -483,9 +483,10 @@ export default {
   },
 
   'mypayments': {
+    description: 'Emoluments of each Custodian during a term shall be the mean of the Candidate Emoluments Declaration of Custodians appointed for such term divided by the total of custodians, and shall be paid to each Custodian automatically and at the expiration of each term held by such Custodian or as otherwise provided by Nomination Directive.',
     'pending_payments': 'Pending Payments',
     'total': 'Total',
-    'no_payments': 'No payments due',
+    'no_payments': 'No payments due.',
     'claim': 'claim',
     'update_requested_pay': 'Update Requested Pay',
     'your_current_pay': 'Your current pay amount is set to {currentpay}. The max amount allowed is {max}.',

diff --git a/src/pages/custodian/my-payments.vue b/src/pages/custodian/my-payments.vue
@@ -12,18 +12,17 @@
                 {{$t('mypayments.pending_payments')}} ({{ pendingpay.length }})
               </q-item-section>
             </q-item>
-
           </q-card-section>
+          <q-separator />
 
-          <q-card-section v-if="pendingpay.length">
-            <div class="q-pa-md">
-              <span class="text-bold">{{$t('mypayments.total')}} {{ totalPayAmount }}</span>
-            </div>
-          </q-card-section>
-          <q-card-section v-else>
-            <div class="q-pa-md">
+          <q-card-section>
+            <p>{{$t('mypayments.description')}}</p>
+            <p v-if="pendingpay.length" class="text-bold">
+              {{$t('mypayments.total')}} {{ totalPayAmount }}
+            </p>
+            <p v-else>
               {{$t('mypayments.no_payments')}}
-            </div>
+            </p>
           </q-card-section>
 
           <q-card-actions align="right" v-if="pendingpay.length">
@@ -46,26 +45,27 @@
             </q-item>
 
           </q-card-section>
+          <q-separator />
 
           <q-card-section>
-            <div class="q-pa-md">
-              <p>
-                {{$t('mypayments.your_current_pay', {
-                  currentpay: getIsCandidate.requestedpay,
-                  max: maxPaymentLabel
-                })}}
-              </p>
-              <div class="text-negative" v-if="requestedPayInvalid"><strong>{{$t('mypayments.pay_invalid')}}</strong></div>
-              <q-item class="q-pl-none">
-                <q-item-section avatar>
-                  <q-icon name="icon-type-2"/>
-                </q-item-section>
-
-                <q-item-section>
-                  <asset-input :allowed="allowed" v-model="newRequestedPay" :max="maxPaymentAmount" />
-                </q-item-section>
-              </q-item>
+            <p>
+              {{$t('mypayments.your_current_pay', {
+                currentpay: getIsCandidate.requestedpay,
+                max: maxPaymentLabel
+              })}}
+            </p>
+            <div class="text-negative" v-if="requestedPayInvalid">
+              <strong>{{$t('mypayments.pay_invalid')}}</strong>
             </div>
+            <q-item class="q-pl-none">
+              <q-item-section avatar>
+                <q-icon name="icon-type-2"/>
+              </q-item-section>
+
+              <q-item-section>
+                <asset-input :allowed="allowed" v-model="newRequestedPay" :max="maxPaymentAmount" />
+              </q-item-section>
+            </q-item>
           </q-card-section>
 
           <q-card-actions align="right">