Add responsive layout for Trading page

src/store/modules/layout.ts

@@ -19,6 +19,7 @@ export enum DashboardLayout {
 export enum LayoutGetters {
   getDashboardLayoutSm = 'getDashboardLayoutSm',
   getDashboardLayout = 'getDashboardLayout',
+  getTradingLayoutSm = 'getTradingLayoutSm',
   getTradingLayout = 'getTradingLayout',
   getLayoutLocked = 'getLayoutLocked',
 }
@@ -45,6 +46,15 @@ const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
   { i: TradeLayout.tradeHistory, x: 3, y: 25, w: 9, h: 10 },
 ];
 
+// Currently only multiPane is visible
+const DEFAULT_TRADING_LAYOUT_SM: GridItemData[] = [
+  { i: TradeLayout.multiPane, x: 0, y: 0, w: 12, h: 10 },
+  { i: TradeLayout.chartView, x: 0, y: 10, w: 12, h: 0 },
+  { i: TradeLayout.tradeDetail, x: 0, y: 19, w: 12, h: 0 },
+  { i: TradeLayout.openTrades, x: 0, y: 8, w: 12, h: 0 },
+  { i: TradeLayout.tradeHistory, x: 0, y: 25, w: 12, h: 0 },
+];
+
 const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
   { i: DashboardLayout.botComparison, x: 0, y: 0, w: 8, h: 6 } /* Bot Comparison */,
   { i: DashboardLayout.dailyChart, x: 8, y: 0, w: 4, h: 6 },
@@ -110,6 +120,9 @@ export default {
     [LayoutGetters.getDashboardLayout](state) {
       return state.dashboardLayout;
     },
+    [LayoutGetters.getTradingLayoutSm]() {
+      return [...DEFAULT_TRADING_LAYOUT_SM];
+    },
     [LayoutGetters.getTradingLayout](state) {
       return state.tradingLayout;
     },

src/views/Trading.vue

@@ -5,11 +5,15 @@
     :layout="gridLayout"
     :vertical-compact="false"
     :margin="[5, 5]"
-    :is-resizable="!getLayoutLocked"
+    :responsive-layouts="responsiveGridLayouts"
-    :is-draggable="!getLayoutLocked"
+    :is-resizable="!isLayoutLocked"
+    :is-draggable="!isLayoutLocked"
+    :responsive="true"
     @layout-updated="layoutUpdatedEvent"
+    @breakpoint-changed="breakpointChanged"
   >
     <GridItem
+      v-if="gridLayoutMultiPane.h != 0"
       :i="gridLayoutMultiPane.i"
       :x="gridLayoutMultiPane.x"
       :y="gridLayoutMultiPane.y"
@@ -48,6 +52,7 @@
       </DraggableContainer>
     </GridItem>
     <GridItem
+      v-if="gridLayoutOpenTrades.h != 0"
       :i="gridLayoutOpenTrades.i"
       :x="gridLayoutOpenTrades.x"
       :y="gridLayoutOpenTrades.y"
@@ -66,6 +71,7 @@
       </DraggableContainer>
     </GridItem>
     <GridItem
+      v-if="gridLayoutTradeHistory.h != 0"
       :i="gridLayoutTradeHistory.i"
       :x="gridLayoutTradeHistory.x"
       :y="gridLayoutTradeHistory.y"
@@ -84,7 +90,7 @@
       </DraggableContainer>
     </GridItem>
     <GridItem
-      v-if="detailTradeId"
+      v-if="detailTradeId && gridLayoutTradeDetail.h != 0"
       :i="gridLayoutTradeDetail.i"
       :x="gridLayoutTradeDetail.x"
       :y="gridLayoutTradeDetail.y"
@@ -98,6 +104,7 @@
       </DraggableContainer>
     </GridItem>
     <GridItem
+      v-if="gridLayoutTradeDetail.h != 0"
       :i="gridLayoutChartView.i"
       :x="gridLayoutChartView.x"
       :y="gridLayoutChartView.y"
@@ -182,13 +189,34 @@ export default class Trading extends Vue {
 
   @layoutNs.Getter [LayoutGetters.getTradingLayout]!: GridItemData[];
 
+  @layoutNs.Getter [LayoutGetters.getTradingLayoutSm]!: GridItemData[];
+
   @layoutNs.Action [LayoutActions.setTradingLayout];
 
   @layoutNs.Getter [LayoutGetters.getLayoutLocked]: boolean;
 
+  currentBreakpoint = '';
+
+  localGridLayout: GridItemData[] = [];
+
+  get isLayoutLocked() {
+    return this.getLayoutLocked || !this.isResizableLayout;
+  }
+
+  get isResizableLayout() {
+    return ['', 'md', 'lg', 'xl'].includes(this.currentBreakpoint);
+  }
+
   get gridLayout(): GridItemData[] {
+    if (this.isResizableLayout) {
       return this.getTradingLayout;
     }
+    return this.localGridLayout;
+  }
+
+  set gridLayout(newLayout) {
+    // Dummy setter to make gridLayout happy. Updates happen through layoutUpdated.
+  }
 
   get gridLayoutMultiPane(): GridItemData {
     return findGridLayout(this.gridLayout, TradeLayout.multiPane);
@@ -210,9 +238,26 @@ export default class Trading extends Vue {
     return findGridLayout(this.gridLayout, TradeLayout.chartView);
   }
 
+  mounted() {
+    this.localGridLayout = [...this.getTradingLayoutSm];
+  }
+
   layoutUpdatedEvent(newLayout) {
+    if (this.isResizableLayout) {
       this.setTradingLayout(newLayout);
     }
+  }
+
+  get responsiveGridLayouts() {
+    return {
+      sm: this[LayoutGetters.getTradingLayoutSm],
+    };
+  }
+
+  breakpointChanged(newBreakpoint) {
+    // console.log('breakpoint:', newBreakpoint);
+    this.currentBreakpoint = newBreakpoint;
+  }
 }
 </script>