Merge pull request #346 from mybudget-ws/318-show-cent-with-other-styles

Show cents with other styles

src/components/amount.vue

@@ -1,6 +1,8 @@
 <template>
   <div :class='classes'>
-    <span class='value'>{{ formatedValue }}</span>
+    <span class='value'>
+      {{ valueRound }}<span class='cent'>.{{ valueCent }}</span>
+    </span>
     <span class='currency grey-text text-darken-1' :title='titleCurrency'>
       {{ formatedCurrency }}
     </span>
@@ -25,8 +27,16 @@ export default {
         'red-text text-darken-4';
     },
     formatedValue() {
-      const digits = (this.value | 0) == this.value ? 0 : 2;
-      return Money.format(Math.abs(this.value), digits);
+      return Money.format(Math.abs(this.value), 2);
+    },
+    valueParts() {
+      return this.formatedValue.split('.');
+    },
+    valueRound() {
+      return this.valueParts[0];
+    },
+    valueCent() {
+      return this.valueParts[1];
     },
     isCurrency() {
       return this.currency != null && this.currency != '';
@@ -46,9 +56,18 @@ export default {
 <style scoped lang='sass'>
 .value
   font-weight: 500
-  margin-right: 4px
+  letter-spacing: 0.2px
+  text-align: right
   white-space: nowrap
 
+.cent
+  font-size: 12px
+  font-weight: 200
+  margin-right: 4px
+
+  @media only screen and (max-width: 601px)
+    font-size: 14px
+
 .currency
   font-size: 12px
   font-weight: 300

src/components/transactions/list.vue

@@ -283,7 +283,7 @@ td
   white-space: nowrap
 
 .amount
-  width: 140px
+  width: 150px
   text-align: right
 
 .actions