Simplify mobile trade view

This commit is contained in:
Matthias 2021-12-25 10:05:38 +01:00
parent 1578881e86
commit b85241e7c2
3 changed files with 44 additions and 20 deletions

View File

@ -1,11 +1,17 @@
<template>
<div class="h-100 overflow-auto w-100">
<div class="h-100 overflow-auto w-100 m-1">
<b-list-group>
<b-list-group-item v-for="trade in trades" :key="trade.trade_id">
<b-list-group-item
v-for="trade in trades"
:key="trade.trade_id"
class="border border-secondary rounded my-05 px-2"
>
<CustomTradeListEntry :trade="trade" :stake-currency-decimals="stakeCurrencyDecimals" />
</b-list-group-item>
</b-list-group>
<span v-if="trades.length == 0" class="mt-5">{{ emptyText }}</span>
<div class="w-100 d-flex justify-content-between">
<b-pagination
v-if="!activeTrades"
@ -230,6 +236,10 @@ export default class CustomTradeList extends Vue {
</script>
<style lang="scss" scoped>
.my-05 {
margin-top: 0.125rem;
margin-bottom: 0.125rem;
}
.card-body {
padding: 0 0.2em;
}

View File

@ -1,23 +1,30 @@
<template>
<div class="my-1 d-flex">
<div class="d-flex flex-column flex-fill text-left">
<div class="d-flex justify-content-between">
<div class="d-flex">
<div
class="col-8 px-1 d-flex flex-row flex-fill text-left justify-content-between align-items-center"
>
<span>
<span class="mr-2 font-weight-bold">{{ trade.pair }}</span>
<small>{{ trade.trade_id }} </small>
</div>
<ValuePair description="Amount">{{ trade.amount }}</ValuePair>
<ValuePair description="Open Rate">{{ formatPrice(trade.open_rate) }}</ValuePair>
<!-- <span>Open rate {{ formatPrice(trade.open_rate) }} </span> -->
<ValuePair v-if="trade.close_rate || trade.current_rate" description="Close Rate">{{
formatPrice(trade.close_rate || trade.current_rate || 0)
<small class="text-secondary">(#{{ trade.trade_id }})</small>
</span>
<!-- <ValuePair description="Amount">{{ trade.amount }}</ValuePair> -->
<ValuePair v-if="showDetails" description="Open Rate">{{
formatPrice(trade.open_rate)
}}</ValuePair>
<ValuePair description="Open date"><DateTimeTZ :date="trade.open_timestamp" /></ValuePair>
<ValuePair v-if="trade.close_timestamp" description="Close date"
<!-- <span>Open rate {{ formatPrice(trade.open_rate) }} </span> -->
<ValuePair
v-if="show_details && (trade.close_rate || trade.current_rate)"
description="Close Rate"
>{{ formatPrice(trade.close_rate || trade.current_rate || 0) }}</ValuePair
>
<small>
<DateTimeTZ :date="trade.open_timestamp" :date-only="true" title="open Date" />
</small>
<ValuePair v-if="showDetails && trade.close_timestamp" description="Close date"
><DateTimeTZ :date="trade.close_timestamp"
/></ValuePair>
<trade-profit :trade="trade" />
</div>
<trade-profit class="col-4" :trade="trade" />
</div>
</template>
@ -46,6 +53,10 @@ export default defineComponent({
type: Number,
required: true,
},
showDetails: {
type: Boolean,
default: false,
},
},
setup() {
return {

View File

@ -1,13 +1,16 @@
<template>
<footer>
<footer class="d-sm-none">
<hr class="my-0" />
<div class="d-flex flex-align-center justify-content-center">
<router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/open_trades">
Open Trades
</router-link>
<router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/trade_history">
Trade History
</router-link>
<router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/balance">
Balance
</router-link>
<router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/trades">
Trades
</router-link>
<router-link v-if="!canRunBacktest" class="nav-link navbar-nav" to="/dashboard">
Dashboard
</router-link>