wip layout responsive

sora-xor · Mar 5, 2024 · f57fe95 · f57fe95
1 parent 5251275
commit f57fe95
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 53 deletions.
diff --git a/src/components/mixins/ScrollableTableMixin.ts b/src/components/mixins/ScrollableTableMixin.ts
@@ -56,6 +56,7 @@ export default class ScrollableTableMixin extends Mixins(
   }
 
   public initScrollbar(): void {
+    console.log(this.tableComponent);
     if (!this.tableComponent) return;
 
     const Scrollbar = Vue.extend(SScrollbar);

diff --git a/src/components/pages/Swap/TransactionsWidget.vue b/src/components/pages/Swap/TransactionsWidget.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-widget extensive title="All trades" tooltip="Some text" class="swap-transactions-widget">
+  <base-widget full extensive title="All trades" tooltip="Some text" class="swap-transactions-widget">
     <s-table
       ref="table"
       v-loading="loadingState"
@@ -315,6 +315,10 @@ export default class SwapTransactionsWidget extends Mixins(ScrollableTableMixin)
     this.interval = null;
   }
 
+  async mounted() {
+    console.log('widget mounted');
+  }
+
   beforeDestroy(): void {
     this.resetDataSubscription();
   }

diff --git a/src/components/shared/Chart/ChartSkeleton.vue b/src/components/shared/Chart/ChartSkeleton.vue
@@ -71,11 +71,7 @@ $skeleton-label-width: 34px;
   width: 100%;
 
   .chart {
-    height: 293px;
-
-    @include tablet {
-      height: 336px;
-    }
+    height: calc(100% - 51px);
 
     &-price {
       display: flex;

diff --git a/src/components/shared/Widget/Base.vue b/src/components/shared/Widget/Base.vue
@@ -1,5 +1,5 @@
 <template>
-  <s-card :class="['base-widget', { delimeter }]" border-radius="small" shadow="always" size="big" primary>
+  <s-card :class="['base-widget', { delimeter, full }]" border-radius="small" shadow="always" size="big" primary>
     <template #header v-if="hasHeader">
       <div class="base-widget-block base-widget-header">
         <div :class="['base-widget-block', 'base-widget-title', { primary: primaryTitle }]">
@@ -34,6 +34,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 export default class BaseWidget extends Vue {
   @Prop({ default: '', type: String }) readonly title!: string;
   @Prop({ default: '', type: String }) readonly tooltip!: string;
+  @Prop({ default: false, type: Boolean }) readonly full!: boolean;
   @Prop({ default: false, type: Boolean }) readonly delimeter!: boolean;
   @Prop({ default: false, type: Boolean }) readonly extensive!: boolean;
   @Prop({ default: false, type: Boolean }) readonly primaryTitle!: boolean;
@@ -46,9 +47,6 @@ export default class BaseWidget extends Vue {
 
 <style lang="scss">
 .base-widget {
-  max-width: 100%;
-  max-height: 100%;
-
   &.s-card.neumorphic.s-size-big {
     padding: 0;
 
@@ -75,6 +73,14 @@ $between: $top / 2;
 $left: $inner-spacing-medium;
 
 .base-widget {
+  display: flex;
+  flex-flow: column nowrap;
+
+  &.full {
+    width: 100%;
+    height: 100%;
+  }
+
   &-block {
     display: flex;
     align-items: center;

diff --git a/src/components/shared/Widget/Grid/Grid.vue b/src/components/shared/Widget/Grid/Grid.vue
@@ -1,12 +1,13 @@
 <template>
   <div ref="gridWrapper" class="grid-wrapper">
     <grid-layout
-      :layout="currentLayout"
+      :layout.sync="layout"
+      :responsive-layouts="layouts"
       :col-num="columns"
       :cols="cols"
       :breakpoints="breakpoints"
       :row-height="rowHeight"
-      :is-draggable="false"
+      :is-draggable="true"
       :is-resizable="false"
       :is-mirrored="false"
       :responsive="true"
@@ -17,7 +18,7 @@
       @layout-ready="onReady"
     >
       <grid-item
-        v-for="item in currentLayout"
+        v-for="item in layout"
         :key="item.i"
         :x="item.x"
         :y="item.y"
@@ -27,7 +28,7 @@
         class="grid-item"
       >
         <template v-if="ready">
-          <slot v-bind="widgets[item.i]" />
+          <slot v-bind="item" />
         </template>
       </grid-item>
     </grid-layout>
@@ -52,9 +53,9 @@ const DEFAULT_BREAKPOINTS = {
   xss: 0,
 };
 const DEFAULT_COLS = {
-  lg: 12,
-  md: 8,
-  sm: 8,
+  lg: 24,
+  md: 12,
+  sm: 12,
   xs: 4,
   xss: 4,
 };
@@ -66,9 +67,9 @@ const DEFAULT_COLS = {
   },
 })
 export default class WidgetsGrid extends Vue {
-  @Prop({ required: true, type: Array }) readonly widgets!: any;
+  @Prop({ required: true, type: Object }) readonly layouts!: any;
   @Prop({ default: 12, type: Number }) readonly columns!: number;
-  @Prop({ default: 100, type: Number }) readonly rowHeight!: number;
+  @Prop({ default: 30, type: Number }) readonly rowHeight!: number;
   @Prop({ default: 16, type: Number }) readonly margin!: number;
   @Prop({ default: true, type: Boolean }) readonly verticalCompact!: boolean;
   @Prop({ default: () => DEFAULT_COLS, type: Object }) readonly cols!: any;
@@ -92,46 +93,40 @@ export default class WidgetsGrid extends Vue {
   onReady = debounce(this.setReady);
   gridLayouts = {};
   breakpoint = DEFAULT_BREAKPOINT;
-  originalLayout = [];
+  layout = [];
 
   created() {
-    this.originalLayout = this.widgets.map((widget, i) => ({
-      i,
-      x: widget.spatialData.x,
-      y: widget.spatialData.y,
-      w: widget.spatialData.w,
-      h: widget.spatialData.h,
-    }));
+    this.layout = this.layouts[DEFAULT_BREAKPOINT];
   }
 
-  mounted(): void {
-    this.updateCurrentBreakpoint();
-    window.addEventListener('resize', this.updateCurrentBreakpoint);
-  }
+  // mounted(): void {
+  //   this.updateCurrentBreakpoint();
+  //   window.addEventListener('resize', this.updateCurrentBreakpoint);
+  // }
 
-  beforeDestroy(): void {
-    window.removeEventListener('resize', this.updateCurrentBreakpoint);
-  }
+  // beforeDestroy(): void {
+  //   window.removeEventListener('resize', this.updateCurrentBreakpoint);
+  // }
 
-  get currentLayout() {
-    return this.gridLayouts[this.breakpoint] ?? this.originalLayout;
-  }
+  // get currentLayout() {
+  //   return this.gridLayouts[this.breakpoint] ?? this.originalLayout;
+  // }
 
-  updateCurrentBreakpoint(): void {
-    const { breakpoints, gridWrapper } = this;
+  // updateCurrentBreakpoint(): void {
+  //   const { breakpoints, gridWrapper } = this;
 
-    if (!gridWrapper) return;
+  //   if (!gridWrapper) return;
 
-    const { clientWidth } = gridWrapper;
+  //   const { clientWidth } = gridWrapper;
 
-    const currentBreakpoint = Object.keys(breakpoints).find((key) => clientWidth >= breakpoints[key]);
+  //   const currentBreakpoint = Object.keys(breakpoints).find((key) => clientWidth >= breakpoints[key]);
 
-    this.breakpoint = currentBreakpoint ?? DEFAULT_BREAKPOINT;
-  }
+  //   this.breakpoint = currentBreakpoint ?? DEFAULT_BREAKPOINT;
+  // }
 
   setReady(): void {
+    console.log('setReady');
     this.ready = true;
-    this.$emit('init');
   }
 }
 </script>
diff --git a/src/components/shared/Widget/PriceChart.vue b/src/components/shared/Widget/PriceChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <base-widget v-loading="parentLoading">
+  <base-widget full v-loading="parentLoading">
     <template #title>
       <tokens-row border :assets="tokens" size="medium" />
       <div v-if="tokenA" class="token-title">

diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -1,6 +1,6 @@
 <template>
-  <widgets-grid :widgets="widgets" class="swap-container">
-    <template v-slot="{ id }">
+  <widgets-grid :layouts="layouts" class="swap-container">
+    <template v-slot="{ i: id }">
       <template v-if="id === 'form'">
         <swap-form-widget :parent-loading="parentLoading" />
       </template>
@@ -46,11 +46,18 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
   @action.swap.setTokenFromAddress private setTokenFromAddress!: (address?: string) => Promise<void>;
   @action.swap.setTokenToAddress private setTokenToAddress!: (address?: string) => Promise<void>;
 
-  widgets = [
-    { spatialData: { x: 0, y: 0, w: 3, h: 8 }, id: 'form' },
-    { spatialData: { x: 3, y: 0, w: 5, h: 5 }, id: 'chart' },
-    { spatialData: { x: 3, y: 5, w: 5, h: 5 }, id: 'transactions' },
-  ];
+  layouts = {
+    lg: [
+      { x: 0, y: 0, w: 6, h: 15, i: 'form' },
+      { x: 6, y: 0, w: 12, h: 15, i: 'chart' },
+      { x: 18, y: 0, w: 6, h: 15, i: 'transactions' },
+    ],
+    md: [
+      { x: 0, y: 0, w: 4, h: 20, i: 'form' },
+      { x: 4, y: 0, w: 8, h: 12, i: 'chart' },
+      { x: 4, y: 12, w: 8, h: 14, i: 'transactions' },
+    ],
+  };
 
   @Watch('tokenFrom')
   @Watch('tokenTo')