Skip to content

Commit

Permalink
layout without options
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nikita-Polyakov
Nikita-Polyakov committed Apr 1, 2024
1 parent 6874366 commit 538d05a
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 34 deletions.
8 changes: 4 additions & 4 deletions src/components/pages/Swap/Widget/Transactions.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</div>
</template>
</s-table-column>
<s-table-column width="106" header-align="right" align="right">
<s-table-column header-align="right" align="right">
<template #header>
<span>{{ t('removeLiquidity.input') }}</span>
</template>
Expand All @@ -31,7 +31,7 @@
/>
</template>
</s-table-column>
<s-table-column width="106" header-align="left" align="left">
<s-table-column header-align="left" align="left">
<template #header>
<span>{{ t('removeLiquidity.output') }}</span>
</template>
Expand All @@ -43,7 +43,7 @@
/>
</template>
</s-table-column>
<s-table-column width="112" header-align="left" align="left">
<s-table-column header-align="left" align="left">
<template #header>
<span>{{ t('transfers.from') }}</span>
</template>
Expand All @@ -58,7 +58,7 @@
</div>
</template>
</s-table-column>
<s-table-column width="112" header-align="left" align="left">
<s-table-column header-align="left" align="left">
<template #header>
<span>{{ t('transfers.to') }}</span>
</template>
Expand Down
70 changes: 40 additions & 30 deletions src/views/Swap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
:flat="options.flat"
:loading="parentLoading"
:default-layouts="DefaultLayouts"
compact
v-model="widgets"
>
<template v-slot:[SwapWidgets.Form]="props">
Expand Down Expand Up @@ -70,8 +71,8 @@ enum SwapWidgets {
Transactions = 'swapTransactions',
Distribution = 'swapDistribution',
// additional
PriceChartA = 'swapTokenAPriceChart',
PriceChartB = 'swapTokenBPriceChart',
// PriceChartA = 'swapTokenAPriceChart',
// PriceChartB = 'swapTokenBPriceChart',
}
@Component({
Expand Down Expand Up @@ -102,60 +103,60 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
{ x: 0, y: 20, w: 6, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
{ x: 0, y: 24, w: 6, h: 8, minW: 4, minH: 8, i: SwapWidgets.Distribution },
{ x: 6, y: 0, w: 9, h: 20, minW: 4, minH: 16, i: SwapWidgets.Chart },
{ x: 6, y: 20, w: 9, h: 16, minW: 4, minH: 16, i: SwapWidgets.PriceChartA },
{ x: 6, y: 36, w: 9, h: 16, minW: 4, minH: 16, i: SwapWidgets.PriceChartB },
{ x: 15, y: 0, w: 9, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
{ x: 15, y: 0, w: 9, h: 20, minW: 4, minH: 20, i: SwapWidgets.Transactions },
// { x: 6, y: 20, w: 9, h: 16, minW: 4, minH: 16, i: SwapWidgets.PriceChartA },
// { x: 6, y: 36, w: 9, h: 16, minW: 4, minH: 16, i: SwapWidgets.PriceChartB },
],
md: [
{ x: 0, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
{ x: 0, y: 20, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
{ x: 0, y: 24, w: 4, h: 8, minW: 4, minH: 8, i: SwapWidgets.Distribution },
{ x: 4, y: 0, w: 6, h: 20, minW: 4, minH: 16, i: SwapWidgets.Chart },
{ x: 4, y: 20, w: 6, h: 16, minW: 4, minH: 16, i: SwapWidgets.PriceChartA },
{ x: 10, y: 0, w: 6, h: 20, minW: 4, minH: 20, i: SwapWidgets.Transactions },
{ x: 10, y: 20, w: 6, h: 16, minW: 4, minH: 16, i: SwapWidgets.PriceChartB },
{ x: 0, y: 0, w: 5, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
{ x: 0, y: 20, w: 5, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
{ x: 5, y: 20, w: 5, h: 8, minW: 4, minH: 8, i: SwapWidgets.Distribution },
{ x: 5, y: 0, w: 11, h: 20, minW: 4, minH: 16, i: SwapWidgets.Chart },
{ x: 10, y: 20, w: 6, h: 20, minW: 4, minH: 20, i: SwapWidgets.Transactions },
// { x: 4, y: 20, w: 6, h: 16, minW: 4, minH: 16, i: SwapWidgets.PriceChartA },
// { x: 10, y: 20, w: 6, h: 16, minW: 4, minH: 16, i: SwapWidgets.PriceChartB },
],
sm: [
{ x: 0, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
{ x: 0, y: 20, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
{ x: 0, y: 24, w: 4, h: 8, minW: 4, minH: 8, i: SwapWidgets.Distribution },
{ x: 4, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
{ x: 4, y: 20, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartA },
{ x: 8, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Transactions },
{ x: 8, y: 20, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartB },
{ x: 0, y: 24, w: 4, h: 9, minW: 4, minH: 9, i: SwapWidgets.Distribution },
{ x: 4, y: 0, w: 8, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
{ x: 4, y: 20, w: 8, h: 20, minW: 4, minH: 20, i: SwapWidgets.Transactions },
// { x: 4, y: 20, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartA },
// { x: 8, y: 20, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartB },
],
xs: [
{ x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
{ x: 0, y: 4, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
{ x: 0, y: 24, w: 4, h: 8, minW: 4, minH: 8, i: SwapWidgets.Distribution },
{ x: 0, y: 44, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartA },
{ x: 4, y: 44, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartB },
{ x: 4, y: 0, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
{ x: 4, y: 20, w: 4, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
{ x: 4, y: 20, w: 4, h: 16, minW: 4, minH: 16, i: SwapWidgets.Transactions },
// { x: 0, y: 44, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartA },
// { x: 4, y: 44, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartB },
],
xss: [
{ x: 0, y: 0, w: 4, h: 4, minW: 4, minH: 4, i: SwapWidgets.Customise },
{ x: 0, y: 4, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Form },
{ x: 0, y: 24, w: 4, h: 8, minW: 4, minH: 8, i: SwapWidgets.Distribution },
{ x: 0, y: 36, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.Chart },
{ x: 0, y: 56, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartA },
{ x: 0, y: 76, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartB },
// { x: 0, y: 56, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartA },
// { x: 0, y: 76, w: 4, h: 20, minW: 4, minH: 20, i: SwapWidgets.PriceChartB },
{ x: 0, y: 96, w: 4, h: 24, minW: 4, minH: 24, i: SwapWidgets.Transactions },
],
};
options = {
edit: false,
flat: true,
// edit: false,
// flat: false,
};
widgets: WidgetsVisibilityModel = {
[SwapWidgets.Form]: true,
// [SwapWidgets.Form]: true,
[SwapWidgets.Chart]: true,
[SwapWidgets.Distribution]: true,
[SwapWidgets.Transactions]: true,
[SwapWidgets.PriceChartA]: false,
[SwapWidgets.PriceChartB]: false,
[SwapWidgets.Transactions]: false,
// [SwapWidgets.PriceChartA]: false,
// [SwapWidgets.PriceChartB]: false,
};
get labels(): Record<string, string> {
Expand All @@ -164,8 +165,8 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
[SwapWidgets.Chart]: this.t('priceChartText'),
[SwapWidgets.Distribution]: this.t('swap.route'),
[SwapWidgets.Transactions]: this.tc('transactionText', 2),
[SwapWidgets.PriceChartA]: this.t('priceChartText', { symbol: this.tokenFrom?.symbol ?? '' }),
[SwapWidgets.PriceChartB]: this.t('priceChartText', { symbol: this.tokenTo?.symbol ?? '' }),
// [SwapWidgets.PriceChartA]: this.t('priceChartText', { symbol: this.tokenFrom?.symbol ?? '' }),
// [SwapWidgets.PriceChartB]: this.t('priceChartText', { symbol: this.tokenTo?.symbol ?? '' }),
};
}
Expand Down Expand Up @@ -203,3 +204,12 @@ export default class Swap extends Mixins(mixins.LoadingMixin, TranslationMixin,
}
}
</script>

<style lang="scss" scoped>
@include tablet(true) {
.swap-container {
max-width: $inner-window-width;
margin: auto;
}
}
</style>

0 comments on commit 538d05a

Please sign in to comment.