Merge pull request #1719 from gradido/decay-icon-deacy-information

larger icon and deacy information if center
This commit is contained in:
Alexander Friedland 2022-04-01 14:23:56 +02:00 committed by GitHub
commit fbc2fe38a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 81 additions and 71 deletions

View File

@ -1,17 +1,20 @@
<template> <template>
<div class="decayinformation-decay"> <div class="decayinformation-decay">
<b-row>
<b-col cols="1"></b-col>
<b-col cols="11">
<div class="d-flex"> <div class="d-flex">
<div class="text-center pb-3 gradido-max-width"> <div class="text-center pb-3 gradido-max-width">
<b-icon icon="droplet-half" height="12" class="mb-2" /> <b-icon icon="droplet-half" class="mr-2" />
<b>{{ $t('decay.calculation_decay') }}</b> <b>{{ $t('decay.calculation_decay') }}</b>
</div> </div>
</div> </div>
<b-row> <b-row>
<b-col cols="6" class="text-right"> <b-col cols="5" class="text-right">
<div>{{ $t('decay.decay') }}</div> <div>{{ $t('decay.decay') }}</div>
</b-col> </b-col>
<b-col cols="6"> <b-col cols="7">
<div> <div>
{{ previousBookedBalance | GDD }} {{ previousBookedBalance | GDD }}
{{ decay | GDD }} {{ $t('math.equal') }} {{ decay | GDD }} {{ $t('math.equal') }}
@ -19,6 +22,8 @@
</div> </div>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
</b-row>
</div> </div>
</template> </template>
<script> <script>

View File

@ -1,5 +1,8 @@
<template> <template>
<div class="decayinformation-long"> <div class="decayinformation-long">
<b-row>
<b-col cols="1"></b-col>
<b-col cols="11">
<div class="d-flex"> <div class="d-flex">
<div class="text-center pb-3 gradido-max-width"> <div class="text-center pb-3 gradido-max-width">
<b-icon icon="droplet-half" class="mr-2" /> <b-icon icon="droplet-half" class="mr-2" />
@ -8,10 +11,10 @@
</div> </div>
<b-row> <b-row>
<b-col cols="6" class="text-right"> <b-col cols="5" class="text-right">
<div>{{ $t('decay.last_transaction') }}</div> <div>{{ $t('decay.last_transaction') }}</div>
</b-col> </b-col>
<b-col cols="6"> <b-col cols="7">
<div> <div>
<span> <span>
{{ $d(new Date(decay.start), 'long') }} {{ $d(new Date(decay.start), 'long') }}
@ -20,20 +23,20 @@
</b-col> </b-col>
</b-row> </b-row>
<b-row> <b-row>
<b-col cols="6" class="text-right"> <b-col cols="5" class="text-right">
<div>{{ $t('decay.past_time') }}</div> <div>{{ $t('decay.past_time') }}</div>
</b-col> </b-col>
<b-col cols="6"> <b-col cols="7">
<span v-if="duration">{{ durationText }}</span> <span v-if="duration">{{ durationText }}</span>
</b-col> </b-col>
</b-row> </b-row>
<!-- Decay--> <!-- Decay-->
<b-row> <b-row>
<b-col cols="6" class="text-right"> <b-col cols="5" class="text-right">
<div>{{ $t('decay.decay') }}</div> <div>{{ $t('decay.decay') }}</div>
</b-col> </b-col>
<b-col cols="6">{{ decay.decay | GDD }}</b-col> <b-col cols="7">{{ decay.decay | GDD }}</b-col>
</b-row> </b-row>
<hr class="mt-2 mb-2" /> <hr class="mt-2 mb-2" />
<b-row> <b-row>
@ -44,23 +47,25 @@
<!-- Type--> <!-- Type-->
<b-row> <b-row>
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys--> <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
<b-col cols="6" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</b-col> <b-col cols="5" class="text-right">{{ $t(`decay.types.${typeId.toLowerCase()}`) }}</b-col>
<b-col cols="6">{{ amount | GDD }}</b-col> <b-col cols="7">{{ amount | GDD }}</b-col>
</b-row> </b-row>
<!-- Decay--> <!-- Decay-->
<b-row> <b-row>
<b-col cols="6" class="text-right">{{ $t('decay.decay') }}</b-col> <b-col cols="5" class="text-right">{{ $t('decay.decay') }}</b-col>
<b-col cols="6">{{ decay.decay | GDD }}</b-col> <b-col cols="7">{{ decay.decay | GDD }}</b-col>
</b-row> </b-row>
<!-- Total--> <!-- Total-->
<b-row> <b-row>
<b-col cols="6" class="text-right"> <b-col cols="5" class="text-right">
<div>{{ $t('decay.total') }}</div> <div>{{ $t('decay.total') }}</div>
</b-col> </b-col>
<b-col cols="6"> <b-col cols="7">
<b>{{ (Number(amount) + Number(decay.decay)) | GDD }}</b> <b>{{ (Number(amount) + Number(decay.decay)) | GDD }}</b>
</b-col> </b-col>
</b-row> </b-row>
</b-col>
</b-row>
</div> </div>
</template> </template>
<script> <script>