swap page custom layout

sora-xor · Mar 5, 2024 · 93b5d37 · 93b5d37
1 parent 2aa7f66
commit 93b5d37
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 33 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -269,10 +269,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     window.addEventListener('resize', this.setResponsiveClassDebounced);
   }
 
-  private get isSwapPageWithCharts(): boolean {
-    return this.$route.name === PageNames.Swap && this.chartsEnabled;
-  }
-
   private get mobileCssClasses(): string[] | undefined {
     return getMobileCssClasses();
   }
@@ -281,10 +277,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     return this.$route.name === PageNames.About;
   }
 
-  get isCurrentPageTooWide(): boolean {
-    return this.isAboutPage || this.isSwapPageWithCharts || this.$route.name === PageNames.Tokens;
-  }
-
   get dsProviderClasses(): string[] | BreakpointClass {
     return this.mobileCssClasses?.length ? [...this.mobileCssClasses, this.responsiveClass] : this.responsiveClass;
   }
@@ -295,9 +287,6 @@ export default class App extends Mixins(mixins.TransactionMixin, NodeErrorMixin)
     if (this.$route.name) {
       cssClasses.push(`${baseClass}--${this.$route.name.toLowerCase()}`);
     }
-    if (this.isSwapPageWithCharts) {
-      cssClasses.push(`${baseClass}--has-charts`);
-    }
     return cssClasses;
   }
 
@@ -569,7 +558,7 @@ i.icon-divider {
 
 @include desktop {
   .app-main {
-    &.app-main--swap.app-main--has-charts {
+    &.app-main--swap {
       .app-menu {
         &:not(.collapsed) {
           position: relative;

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

diff --git a/src/components/shared/Widget/Base.vue b/src/components/shared/Widget/Base.vue
@@ -74,6 +74,9 @@ $between: $top / 2;
 $left: $inner-spacing-medium;
 
 .base-widget {
+  display: flex;
+  flex-flow: column nowrap;
+
   &-block {
     display: flex;
     align-items: center;

diff --git a/src/views/Swap.vue b/src/views/Swap.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="swap-container">
     <swap-form-widget :parent-loading="parentLoading" />
-    <swap-chart-widget :parent-loading="parentLoading" v-if="chartsEnabled" class="swap-chart" />
-    <swap-transactions-widget :parent-loading="parentLoading" />
+    <div class="column">
+      <swap-chart-widget :parent-loading="parentLoading" v-if="chartsEnabled" class="swap-chart" />
+      <swap-transactions-widget :parent-loading="parentLoading" />
+    </div>
   </div>
 </template>
 
@@ -72,29 +74,17 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
 }
 </script>
 
-<style lang="scss">
-.app-main--has-charts {
-  .swap-chart {
-    flex-grow: 1;
-    max-width: $inner-window-width;
-
-    @include desktop {
-      max-width: initial;
-    }
-  }
-}
-</style>
-
 <style lang="scss" scoped>
 .swap-container {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: flex-start;
   gap: $inner-spacing-medium;
-
-  @include desktop {
-    flex-flow: row nowrap;
-  }
+}
+.column {
+  display: flex;
+  gap: $inner-spacing-medium;
+  flex-flow: column nowrap;
 }
 </style>