PW-747: Fix Responsive Behaviour and OX Axis Formatting

src/App.vue

@@ -22,7 +22,9 @@
           </div>
           <div class="app-content">
             <router-view :parent-loading="loading || !nodeIsConnected" />
-            <p class="app-disclaimer" v-html="t('disclaimer')" />
+            <div class="app-disclaimer-container">
+              <p class="app-disclaimer" v-html="t('disclaimer')" />
+            </div>
           </div>
           <footer class="app-footer">
             <div class="sora-logo">
@@ -506,7 +508,7 @@ i.icon-divider {
   @include icon-styles;
 }
 
-@include large-desktop {
+@include desktop {
   .app-main.app-main--has-charts {
     .app-menu {
       position: relative;
@@ -515,13 +517,33 @@ i.icon-divider {
       width: 100%;
       padding-left: $basic-spacing * 2;
       .app-disclaimer {
-        margin-left: $basic-spacing-small * 3;
+        $margin-left: 10px;
+        max-width: calc(#{$bridge-width} + #{$margin-left});
+        padding-right: $inner-spacing-big;
+        padding-left: calc(#{$inner-spacing-big} + #{$margin-left});
+        &-container {
+          margin-left: auto;
+          margin-right: auto;
+          max-width: calc(#{$bridge-width} * 2 + #{$basic-spacing-small});
+        }
       }
     }
+
+    .block-number-link {
+      z-index: 0;
+    }
   }
+}
 
-  .block-number-link {
-    z-index: 0;
+@include large-desktop {
+  .app-main.app-main--has-charts {
+    .app-content {
+      .app-disclaimer {
+        &-container {
+          max-width: calc(#{$bridge-width} * 3 + #{$basic-spacing-small} * 4);
+        }
+      }
+    }
   }
 }
 </style>
@@ -547,7 +569,7 @@ $sora-logo-width: 173.7px;
     &__about {
       overflow: hidden;
 
-      .app-content .app-disclaimer {
+      .app-content .app-disclaimer-container {
         min-width: 800px;
         width: 100%;
         max-width: 900px;
@@ -565,7 +587,7 @@ $sora-logo-width: 173.7px;
     flex: 1;
     margin: auto;
 
-    .app-disclaimer {
+    .app-disclaimer-container {
       margin-left: auto;
       margin-bottom: $inner-spacing-big;
       margin-right: auto;
@@ -623,7 +645,7 @@ $sora-logo-width: 173.7px;
 @include tablet {
   .app-footer {
     flex-direction: row;
-    .app-disclaimer {
+    .app-disclaimer-container {
       padding-right: $inner-spacing-large;
     }
   }

src/components/Swap/Chart.vue

@@ -9,33 +9,29 @@
             <span v-if="tokenTo">/{{ tokenTo.symbol }}</span>
           </div>
         </div>
-
-        <div class="s-flex chart-controls">
-          <div class="chart-filters">
-            <s-tabs type="rounded" :value="selectedFilter.name" @click="selectFilter">
-              <s-tab
-                v-for="filter in filters"
-                :key="filter.name"
-                :name="filter.name"
-                :label="filter.label"
-                :disabled="parentLoading || loading"
-              />
-            </s-tabs>
-          </div>
-
-          <div class="s-flex chart-types">
-            <s-button
-              v-for="{ type, icon, active } in chartTypeButtons"
-              :key="type"
-              type="action"
-              size="small"
-              :class="['chart-type', { 's-pressed': active }]"
+        <div class="chart-filters">
+          <s-tabs type="rounded" :value="selectedFilter.name" @click="selectFilter">
+            <s-tab
+              v-for="filter in filters"
+              :key="filter.name"
+              :name="filter.name"
+              :label="filter.label"
               :disabled="parentLoading || loading"
-              @click="selectChartType(type)"
-            >
-              <component :is="icon" :class="{ active }" />
-            </s-button>
-          </div>
+            />
+          </s-tabs>
+        </div>
+        <div class="s-flex chart-types">
+          <s-button
+            v-for="{ type, icon, active } in chartTypeButtons"
+            :key="type"
+            type="action"
+            size="small"
+            :class="['chart-type', { 's-pressed': active }]"
+            :disabled="parentLoading || loading"
+            @click="selectChartType(type)"
+          >
+            <component :is="icon" :class="{ active }" />
+          </s-button>
         </div>
       </div>
     </div>
@@ -265,6 +261,8 @@ export default class SwapChart extends Mixins(
     max: 0,
   };
 
+  newDaysArray: Array<number> = [];
+
   updatePrices = debouncedInputHandler(this.getHistoricalPrices, 250);
 
   chartType: CHART_TYPES = CHART_TYPES.LINE;
@@ -322,9 +320,9 @@ export default class SwapChart extends Mixins(
   get timeFormat(): string {
     switch (this.selectedFilter.type) {
       case SUBQUERY_TYPES.AssetSnapshotTypes.DAY:
-        return 'DD MMM';
+        return 'll';
       default:
-        return 'HH:mm';
+        return 'LT';
     }
   }
 
@@ -383,17 +381,46 @@ export default class SwapChart extends Mixins(
       },
       xAxis: {
         type: 'category',
-        data: this.chartData.map((item) => item.timestamp),
+        data: this.chartData.map((item, index, arr) => {
+          if (index === 0 || new Date(arr[index - 1].timestamp).getDate() !== new Date(item.timestamp).getDate()) {
+            this.newDaysArray.push(index);
+          }
+          return item.timestamp;
+        }),
         axisTick: {
           show: false,
         },
         axisLine: {
           show: false,
         },
         axisLabel: {
-          formatter: (value: string) => {
+          formatter: (value: string, index: number) => {
+            const prevIndexes: Array<number> = [];
+            if (
+              this.selectedFilter.type === SUBQUERY_TYPES.AssetSnapshotTypes.HOUR &&
+              typeof common.xAxis.axisLabel.interval === 'number' &&
+              index > common.xAxis.axisLabel.interval
+            ) {
+              for (let i = index; i >= index - common.xAxis.axisLabel.interval; i--) {
+                prevIndexes.push(i);
+              }
+            }
+            if (
+              this.selectedFilter.name === TIMEFRAME_TYPES.MONTH ||
+              (this.selectedFilter.name === TIMEFRAME_TYPES.WEEK &&
+                this.newDaysArray.length &&
+                prevIndexes.some((item) => this.newDaysArray.includes(item)))
+            ) {
+              return dayjs(+value).format('MMM DD');
+            }
             return dayjs(+value).format(this.timeFormat);
           },
+          interval:
+            this.selectedFilter.name === TIMEFRAME_TYPES.WEEK
+              ? 10
+              : this.selectedFilter.name === TIMEFRAME_TYPES.MONTH
+              ? 40
+              : 'auto',
           color: this.theme.color.base.content.secondary,
           ...this.axisLabelCSS,
         },
@@ -597,6 +624,7 @@ export default class SwapChart extends Mixins(
     this.withApi(async () => {
       await this.withLoading(async () => {
         try {
+          this.newDaysArray = [];
           const addresses = [this.tokenFrom?.address, this.tokenTo?.address].filter(Boolean);
           const collections = await Promise.all(
             addresses.map((address, index) => this.fetchData(address, this.selectedFilter, this.pageInfos[index]))
@@ -734,6 +762,7 @@ export default class SwapChart extends Mixins(
 </script>
 
 <style lang="scss">
+$skeleton-label-width: 34px;
 .charts {
   &-price {
     display: flex;
@@ -771,6 +800,8 @@ export default class SwapChart extends Mixins(
 }
 
 .chart-filters {
+  width: 100%;
+  order: 1;
   .el-tabs__header {
     margin-bottom: 0;
   }
@@ -803,7 +834,7 @@ export default class SwapChart extends Mixins(
 
 .charts-skeleton {
   $margin-right: #{$inner-spacing-mini / 2};
-  $label-width: 34px;
+  $skeleton-label-width-mobile: calc((100% - #{$margin-right} * 10) / 11);
   $skeleton-spacing: 18px;
   position: relative;
   .el-loading-mask {
@@ -833,29 +864,29 @@ export default class SwapChart extends Mixins(
         width: 42px;
       }
       + .charts-skeleton-line {
-        margin-top: 23px;
+        margin-top: 19px;
       }
     }
   }
   &-line {
     display: flex;
     align-items: center;
     flex-grow: 0;
-    margin-top: 27px;
+    margin-top: 22px;
     &--lables {
       justify-content: space-between;
       margin-top: $inner-spacing-medium;
-      padding-left: calc(#{$margin-right} + #{$label-width});
+      padding-left: calc(#{$margin-right} + #{$skeleton-label-width});
     }
   }
   &-label.el-skeleton__item.el-skeleton__rect {
     height: 8px;
-    width: $label-width;
+    width: $skeleton-label-width-mobile;
     margin-bottom: 0;
     margin-right: $margin-right;
   }
   &-border.el-skeleton__rect {
-    width: calc(100% - 38px);
+    width: calc(100% - $skeleton-label-width-mobile - $margin-right);
     height: 1px;
   }
   &-error {
@@ -885,7 +916,7 @@ export default class SwapChart extends Mixins(
   }
 }
 
-@include large-desktop {
+@include desktop {
   .container--charts {
     position: relative;
     z-index: 1;
@@ -896,11 +927,34 @@ export default class SwapChart extends Mixins(
     }
   }
 }
+
+@include large-desktop {
+  .charts-skeleton {
+    &-price {
+      &-impact {
+        + .charts-skeleton-line {
+          margin-top: 20px;
+        }
+      }
+    }
+    &-line {
+      margin-top: 26px;
+    }
+    &-label.el-skeleton__item.el-skeleton__rect {
+      max-width: $skeleton-label-width;
+    }
+  }
+  .chart-filters {
+    margin-left: auto;
+    width: auto;
+    order: initial;
+  }
+}
 </style>
 
 <style lang="scss" scoped>
 .chart {
-  height: 323px;
+  height: 283px;
 }
 .tokens {
   display: flex;
@@ -950,9 +1004,9 @@ export default class SwapChart extends Mixins(
   align-items: center;
 }
 
-.chart-controls {
-  & > *:not(:last-child) {
-    margin-right: $inner-spacing-medium;
+@include large-desktop {
+  .chart {
+    height: 323px;
   }
 }
 </style>

src/views/Swap.vue

@@ -577,7 +577,12 @@ export default class Swap extends Mixins(
 </script>
 
 <style lang="scss">
-@include large-desktop {
+.app-main--has-charts {
+  .container--charts {
+    min-width: calc(#{$bridge-width} * 0.75);
+  }
+}
+@include desktop {
   .app-main--has-charts {
     .swap-container {
       display: flex;
@@ -596,9 +601,14 @@ export default class Swap extends Mixins(
     .el-form--actions {
       flex-shrink: 0;
     }
+  }
+}
+
+@include large-desktop {
+  .app-main--has-charts {
     .container--charts {
       min-width: $bridge-width;
-      max-width: 100%;
+      max-width: calc(#{$bridge-width} * 2);
       flex-grow: 1;
     }
   }