Simplify mobile trade view

src/components/ftbot/CustomTradeList.vue

@@ -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;
 }

src/components/ftbot/CustomTradeListEntry.vue

@@ -1,23 +1,30 @@
 <template>
-  <div class="my-1 d-flex">
+  <div class="d-flex">
-    <div class="d-flex flex-column flex-fill text-left">
+    <div
-      <div class="d-flex justify-content-between">
+      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>
+        <small class="text-secondary">(#{{ trade.trade_id }})</small>
-      </div>
+      </span>
-      <ValuePair description="Amount">{{ trade.amount }}</ValuePair>
+      <!-- <ValuePair description="Amount">{{ trade.amount }}</ValuePair> -->
-      <ValuePair description="Open Rate">{{ formatPrice(trade.open_rate) }}</ValuePair>
+      <ValuePair v-if="showDetails" description="Open Rate">{{
-      <!-- <span>Open rate {{ formatPrice(trade.open_rate) }} </span> -->
+        formatPrice(trade.open_rate)
-      <ValuePair v-if="trade.close_rate || trade.current_rate" description="Close Rate">{{
-        formatPrice(trade.close_rate || trade.current_rate || 0)
       }}</ValuePair>
-      <ValuePair description="Open date"><DateTimeTZ :date="trade.open_timestamp" /></ValuePair>
+      <!-- <span>Open rate {{ formatPrice(trade.open_rate) }} </span> -->
-      <ValuePair v-if="trade.close_timestamp" description="Close date"
+      <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 {

src/components/layout/NavFooter.vue

@@ -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>