- Add saldo to member's list

src/components/CCurrencyValue/CCurrencyValue.vue

@@ -1,22 +1,35 @@
 <template>
-  <div v-if="value !== null" :class="`text-h5 bordo_stondato_stretto full-width`"
-  :style="(!$q.screen.lt.sm ? `min-width: 250px; ` : ``) + (color_border ? `border-color: ` + color_border + `!important;`: '')">
-    <div class="text-center text-h7-dense text-italic text-grey-14">
-      {{ label }}
-    </div>
-    <div>
-      <q-field
-        dense
-        borderless
-        :readonly="readonly"
-        type="number"
-        rounded
-        class="q-px-sm text-h5"
-        color="green"
-      >
-        <template v-slot:prepend>
+  <div v-if="small">
+    <q-chip
+      dense class="cltexth4 chipbooked shadow-5 q-pa-sm2"
+      size="md"
+      :color="value > 0 ? `green` : value === 0 ? `gray` : `red`" text-color="white"
+      icon="fas fa-coins">
+      {{ tools.roundDec2(value) }} <span class="text-currency">&nbsp;<em class="q-pa-xxs text-white rounded-borders shadow-2" :style="`background-color: ` + (color ? color : '#ff5500')">{{ symbol }}</em></span>
+    </q-chip>
+  </div>
+  <div v-else>
+    <div v-if="value !== null" :class="`text-h5 ` + small ? `bordo_stondato_small`: `bordo_stondato_stretto` + ` full-width`"
+         :style="(!$q.screen.lt.sm && !small ? `min-width: 250px; ` : small ? ` max-width: 120px;` : ``) + (color_border ? `border-color: ` + color_border + `!important;`: '')">
+      <div class="text-center text-h7-dense text-italic text-grey-14">
+      <span v-if="small">
+        <em class="q-px-xs text-white rounded-borders" :style="`background-color: ` + (color ? color : '#ff5500')">{{ symbol }}</em>
+      </span>
+        <span v-else>{{ label }}</span>
+      </div>
+      <div>
+        <q-field
+          dense
+          borderless
+          :readonly="readonly"
+          type="number"
+          rounded
+          :class="!small ? `q-px-sm text-h5`: `q-px-xs text-h7`"
+          :color="value > 0 ? `green` : `red`"
+        >
+          <template v-slot:prepend>
             <!--<img src="https://cdn.quasar.dev/logo-v2/svg/logo.svg">-->
-            <q-btn v-if="tips"
+            <q-btn v-if="tips && !small"
                    icon="fas fa-info"
                    color="primary" text-color="white"
                    round
@@ -25,22 +38,23 @@
             >
 
             </q-btn>
-            <q-icon v-else name="fas fa-coins" size="sm"/>
-        </template>
-        <template v-slot:control>
-          <div class="align_elem_right">{{valueextra}}{{ tools.roundDec2(value) }}
-            <q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{tips}}</q-tooltip>
-          </div>
-        </template>
-        <template v-slot:append>
-          <div class="text-h5">
-            <em class="q-px-sm text-white rounded-borders" :style="`background-color: ` + (color ? color : '#ff5500')">{{ symbol }}</em>
-          </div>
-        </template>
+            <q-icon v-else name="fas fa-coins" :size="small ? `xs`: `sm`"/>
+          </template>
+          <template v-slot:control>
+            <div :class="`align_elem_right `+ small ? `text-h7` : ``">{{ valueextra }}{{ tools.roundDec2(value) }}
+              <q-tooltip :offset="[10, 10]" v-model="showingtooltip">{{ tips }}</q-tooltip>
+            </div>
+          </template>
+          <template v-slot:append>
+            <div v-if="!small" :class="small ? `text-h7-dense` : `text-h5`">
+              <em class="q-px-sm text-white rounded-borders" :style="`background-color: ` + (color ? color : '#ff5500')">{{ symbol }}</em>
+            </div>
+          </template>
+
+        </q-field>
+      </div>
 
-      </q-field>
     </div>
-
   </div>
 </template>