web/storagenode: payout page scroll area extended

Change-Id: I937a5e7344a0c3507fe3aa2443458ee86c8f9af7
This commit is contained in:
NickolaiYurchenko 2020-05-06 16:31:42 +03:00 committed by Nikolay Yurchenko
parent 159df8b2e4
commit ff68a3c2bb

View File

@ -2,6 +2,7 @@
// See LICENSE for copying information.
<template>
<div class="payout-area-container-overflow">
<div class="payout-area-container">
<header class="payout-area-container__header">
<router-link to="/" class="payout-area-container__header__back-link">
@ -28,13 +29,14 @@
<SingleInfo width="48%" label="Total Held Amount" :value="totalHeld | centsToDollars" />
</section>
<HeldProgress v-if="selectedSatellite" class="payout-area-container__process-area" />
<!-- <section class="payout-area-container__held-history-container">-->
<!-- <div class="payout-area-container__held-history-container__header">-->
<!-- <p class="payout-area-container__held-history-container__header__title">Held Amount history</p>-->
<!-- </div>-->
<!-- <div class="payout-area-container__held-history-container__divider"></div>-->
<!-- <HeldHistoryTable />-->
<!-- </section>-->
<!-- <section class="payout-area-container__held-history-container">-->
<!-- <div class="payout-area-container__held-history-container__header">-->
<!-- <p class="payout-area-container__held-history-container__header__title">Held Amount history</p>-->
<!-- </div>-->
<!-- <div class="payout-area-container__held-history-container__divider"></div>-->
<!-- <HeldHistoryTable />-->
<!-- </section>-->
</div>
</div>
</template>
@ -109,13 +111,21 @@ export default class PayoutArea extends Vue {
</script>
<style scoped lang="scss">
.payout-area-container {
width: 822px;
font-family: 'font_regular', sans-serif;
.payout-area-container-overflow {
position: relative;
padding: 0 36px;
width: calc(100% - 72px);
overflow-y: scroll;
overflow-x: hidden;
min-height: calc(100vh - 89px - 89px - 50px);
padding-bottom: 50px;
display: flex;
justify-content: center;
}
.payout-area-container {
position: relative;
width: 822px;
font-family: 'font_regular', sans-serif;
height: 100%;
&__header {
width: 100%;
@ -228,6 +238,11 @@ export default class PayoutArea extends Vue {
@media screen and (max-width: 640px) {
.payout-area-container-overflow {
padding: 0 15px 80px 15px;
width: calc(100% - 30px);
}
.payout-area-container {
width: calc(100% - 20px - 20px);
padding-left: 20px;