feat: Adjust table width (#549)

sidestream-tech · Dec 5, 2022 · bb70a42 · bb70a42
1 parent 32a547c
commit bb70a42
Show file tree

Hide file tree

Showing 19 changed files with 118 additions and 30 deletions.
diff --git a/frontend/components/auction/collateral/CollateralAuction.vue b/frontend/components/auction/collateral/CollateralAuction.vue
@@ -21,7 +21,7 @@
                         <tr>
                             <td>Auction Ends</td>
                             <td>
-                                <time-till :date="auction.endDate" />
+                                <TimeTill :date="auction.endDate" />
                             </td>
                         </tr>
                         <tr>
@@ -77,7 +77,7 @@
                         <tr>
                             <td>Estimated Profitability Time</td>
                             <td>
-                                <time-till-profitable :auction="auction" />
+                                <TimeTillProfitable :auction="auction" />
                             </td>
                         </tr>
                         <tr>
@@ -89,7 +89,7 @@
                                     />
                                     <span>Updating...</span>
                                 </div>
-                                <time-till v-else :date="auction.fetchedAt" />
+                                <TimeTill v-else :date="auction.fetchedAt" />
                             </td>
                         </tr>
                         <template v-if="isTableExpanded">
@@ -188,7 +188,7 @@
                         <format-currency :value="auction.approximateUnitPrice" currency="DAI" /> (meaning
                         <format-currency :value="auction.approximateUnitPrice" currency="DAI" />
                         per <format-currency :currency="auction.collateralSymbol" /> on average) after
-                        <time-till :date="auction.endDate" />.
+                        <TimeTill :date="auction.endDate" />.
                     </template>
                 </TextBlock>
 
@@ -281,7 +281,7 @@ import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
 import Loading from '~/components/common/other/Loading.vue';
 import Explain from '~/components/common/other/Explain.vue';
 import TimeTillProfitable from '~/components/auction/collateral/TimeTillProfitable.vue';
-import CollateralAuctionEventsBlock from '~/components/auction/collateral/CollateralAuctionEventsBlock';
+import CollateralAuctionEventsBlock from '~/components/auction/collateral/CollateralAuctionEventsBlock.vue';
 import AuctionRestartPanel from '~/components/panels/AuctionRestartPanel.vue';
 import LoadingIcon from '~/assets/icons/loading.svg';
 

diff --git a/frontend/components/auction/collateral/CollateralAuctionBidTransactionTable.vue b/frontend/components/auction/collateral/CollateralAuctionBidTransactionTable.vue
@@ -3,7 +3,7 @@
         <div class="flex justify-between">
             <div>Auction Ends</div>
             <div>
-                <time-till :date="auctionTransaction.endDate" />
+                <TimeTill :date="auctionTransaction.endDate" />
             </div>
         </div>
         <div class="flex justify-between">

diff --git a/frontend/components/auction/collateral/CollateralAuctionSwapTransactionTable.vue b/frontend/components/auction/collateral/CollateralAuctionSwapTransactionTable.vue
@@ -2,7 +2,7 @@
     <TextBlock class="flex flex-col space-y-1">
         <div class="flex w-full justify-between">
             <div>Auction Ends</div>
-            <div class="RightInfo"><time-till :date="auctionTransaction.endDate" /></div>
+            <div class="RightInfo"><TimeTill :date="auctionTransaction.endDate" /></div>
         </div>
         <div class="flex w-full justify-between">
             <div>Auction Amount</div>

diff --git a/frontend/components/auction/collateral/CollateralAuctionsTable.stories.js b/frontend/components/auction/collateral/CollateralAuctionsTable.stories.js
@@ -12,6 +12,7 @@ const common = {
         auctions: fakeAuctions,
         selectedAuctionId: randomSelectedAuction.id,
         lastUpdated: new Date(faker.date.recent()),
+        isLoading: false,
     }),
 };
 
@@ -21,6 +22,20 @@ storiesOf('Auction/Collateral/CollateralAuctionsTable', module)
         template:
             '<CollateralAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" />',
     }))
+    .add('Reset Updated Timer', () => ({
+        ...common,
+        created() {
+            setInterval(() => {
+                this.isLoading = true;
+                setTimeout(() => {
+                    this.isLoading = false;
+                }, 1000);
+                this.lastUpdated = new Date(faker.date.recent());
+            }, 10 * 1000);
+        },
+        template:
+            '<CollateralAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" :is-loading="isLoading" />',
+    }))
     .add('Fetching With Auctions', () => ({
         ...common,
         template: '<CollateralAuctionsTable :auctions="auctions" :last-updated="lastUpdated" :is-loading="true" />',

diff --git a/frontend/components/auction/collateral/CollateralAuctionsTable.vue b/frontend/components/auction/collateral/CollateralAuctionsTable.vue
@@ -10,6 +10,8 @@
             :custom-row="customRowEvents"
             :get-popup-container="() => $el"
             :locale="{ emptyText: 'No active auctions' }"
+            :table-layout="auto"
+            :scroll="{ x: 'max-content' }"
             class="AuctionsTable relative overflow-visible"
         >
             <div slot="collateralAmount" slot-scope="collateralAmount, record" class="flex items-center space-x-2">
@@ -42,16 +44,16 @@
                 <span v-else-if="!record.isActive" class="opacity-50"> Requires Restart </span>
                 <span v-else>
                     Ends in
-                    <time-till :date="endDate" />
+                    <TimeTill :date="endDate" />
                 </span>
             </div>
             <div slot="updatingStatus" class="opacity-50 font-normal">
                 <div v-if="isLoading" class="flex items-center space-x-2">
                     <LoadingIcon class="h-4 w-4 animate animate-spin fill-current dark:text-gray-300" />
                     <span>Updating...</span>
                 </div>
-                <span v-else-if="lastUpdated"> Last updated <TimeTill :date="lastUpdated" /></span>
-                <span v-else> Last updated unknown time ago </span>
+                <span v-else-if="lastUpdated">Updated <TimeTill :date="lastUpdated" /></span>
+                <span v-else>Updated <span class="opacity-50">unknown time</span> ago</span>
             </div>
             <div slot="action" slot-scope="text, record, index" class="w-full h-full">
                 <nuxt-link
@@ -186,7 +188,6 @@ export default Vue.extend({
                     dataIndex: 'endDate',
                     scopedSlots: { customRender: 'endDate' },
                     sorter: compareBy('endDate', (a: Date, b: Date) => compareAsc(a, b)),
-                    width: '200px',
                 },
                 {
                     slots: { title: 'updatingStatus', customRender: 'action' },

diff --git a/frontend/components/auction/collateral/TimeTillProfitable.vue b/frontend/components/auction/collateral/TimeTillProfitable.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <div v-if="transactionGrossProfitDate">
-            <time-till v-if="isProfitableBeforeEnding" :date="transactionGrossProfitDate" />
+            <TimeTill v-if="isProfitableBeforeEnding" :date="transactionGrossProfitDate" />
             <div v-else>Likely will not be profitable</div>
         </div>
         <div v-else-if="isAlreadyProfitable">Auction is profitable</div>

diff --git a/frontend/components/auction/debt/DebtAuction.vue b/frontend/components/auction/debt/DebtAuction.vue
@@ -31,7 +31,7 @@
                                 <span v-else-if="requiresRestart">Requires restart</span>
                                 <span v-else-if="auction.state === 'ready-for-collection'">Ended </span>
                                 <span v-else>Collected </span>
-                                <time-till
+                                <TimeTill
                                     v-if="auction.earliestEndDate && !requiresRestart"
                                     :date="auction.earliestEndDate"
                                 />
@@ -100,7 +100,7 @@
                                     />
                                     <span>Updating...</span>
                                 </div>
-                                <time-till v-else :date="auction.fetchedAt" />
+                                <TimeTill v-else :date="auction.fetchedAt" />
                             </td>
                         </tr>
                     </tbody>

diff --git a/frontend/components/auction/debt/DebtAuctionBidTransactionTable.vue b/frontend/components/auction/debt/DebtAuctionBidTransactionTable.vue
@@ -3,7 +3,7 @@
         <div class="flex justify-between">
             <div>Auction State</div>
             <div>
-                <time-till :date="auction.auctionEndDate" />
+                <TimeTill :date="auction.auctionEndDate" />
             </div>
         </div>
         <div class="flex justify-between">

diff --git a/frontend/components/auction/debt/DebtAuctionsTable.stories.js b/frontend/components/auction/debt/DebtAuctionsTable.stories.js
@@ -12,6 +12,7 @@ const common = {
         auctions: fakeAuctions,
         selectedAuctionId: randomSelectedAuction.id,
         lastUpdated: new Date(faker.date.recent()),
+        isLoading: false,
     }),
 };
 
@@ -21,6 +22,20 @@ storiesOf('Auction/Debt/DebtAuctionsTable', module)
         template:
             '<DebtAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" />',
     }))
+    .add('Reset Updated Timer', () => ({
+        ...common,
+        created() {
+            setInterval(() => {
+                this.isLoading = true;
+                setTimeout(() => {
+                    this.isLoading = false;
+                }, 1000);
+                this.lastUpdated = new Date(faker.date.recent());
+            }, 10 * 1000);
+        },
+        template:
+            '<DebtAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" :is-loading="isLoading" />',
+    }))
     .add('Fetching With Auctions', () => ({
         ...common,
         template: '<DebtAuctionsTable :auctions="auctions" :last-updated="lastUpdated" :is-loading="true" />',

diff --git a/frontend/components/auction/debt/DebtAuctionsTable.vue b/frontend/components/auction/debt/DebtAuctionsTable.vue
@@ -10,6 +10,8 @@
             :custom-row="customRowEvents"
             :get-popup-container="() => $el"
             :locale="{ emptyText: 'No active auctions' }"
+            :table-layout="auto"
+            :scroll="{ x: 'max-content' }"
             class="AuctionsTable relative overflow-visible"
         >
             <div slot="bidAmountDai" slot-scope="bidAmountDai">
@@ -45,15 +47,15 @@
                 <span v-else-if="state === 'requires-restart'"> Requires Restart </span>
                 <span v-else-if="state === 'ready-for-collection'"> Collectable since </span>
                 <span v-else> Expires in </span>
-                <time-till v-if="state !== 'requires-restart'" :date="record.earliestEndDate" />
+                <TimeTill v-if="state !== 'requires-restart'" :date="record.earliestEndDate" />
             </div>
             <div slot="updatingStatus" class="opacity-50 font-normal">
                 <div v-if="isLoading" class="flex items-center space-x-2">
                     <LoadingIcon class="h-4 w-4 animate animate-spin fill-current dark:text-gray-300" />
                     <span>Updating...</span>
                 </div>
-                <span v-else-if="lastUpdated"> Last updated <TimeTill :date="lastUpdated" /></span>
-                <span v-else> Last updated unknown time ago </span>
+                <span v-else-if="lastUpdated">Updated <TimeTill :date="lastUpdated" /></span>
+                <span v-else>Updated <span class="opacity-50">unknown time</span> ago</span>
             </div>
             <div slot="action" slot-scope="text, record, index" class="w-full h-full">
                 <nuxt-link
@@ -234,7 +236,6 @@ export default Vue.extend({
                 {
                     slots: { title: 'updatingStatus', customRender: 'action' },
                     scopedSlots: { customRender: 'action' },
-                    width: '20%',
                 },
             ];
         },

diff --git a/frontend/components/auction/surplus/SurplusAuction.vue b/frontend/components/auction/surplus/SurplusAuction.vue
@@ -93,7 +93,7 @@
                                     />
                                     <span>Updating...</span>
                                 </div>
-                                <time-till v-else :date="auction.fetchedAt" />
+                                <TimeTill v-else :date="auction.fetchedAt" />
                             </td>
                         </tr>
                     </tbody>

diff --git a/frontend/components/auction/surplus/SurplusAuctionsTable.stories.js b/frontend/components/auction/surplus/SurplusAuctionsTable.stories.js
@@ -12,6 +12,7 @@ const common = {
         auctions: fakeAuctions,
         selectedAuctionId: randomSelectedAuction.id,
         lastUpdated: new Date(faker.date.recent()),
+        isLoading: false,
     }),
 };
 
@@ -21,6 +22,20 @@ storiesOf('Auction/Surplus/SurplusAuctionsTable', module)
         template:
             '<SurplusAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" />',
     }))
+    .add('Reset Updated Timer', () => ({
+        ...common,
+        created() {
+            setInterval(() => {
+                this.isLoading = true;
+                setTimeout(() => {
+                    this.isLoading = false;
+                }, 1000);
+                this.lastUpdated = new Date(faker.date.recent());
+            }, 10 * 1000);
+        },
+        template:
+            '<SurplusAuctionsTable :auctions="auctions" :selectedAuctionId="selectedAuctionId" :last-updated="lastUpdated" :is-loading="isLoading" />',
+    }))
     .add('Fetching With Auctions', () => ({
         ...common,
         template: '<SurplusAuctionsTable :auctions="auctions" :last-updated="lastUpdated" :is-loading="true" />',

diff --git a/frontend/components/auction/surplus/SurplusAuctionsTable.vue b/frontend/components/auction/surplus/SurplusAuctionsTable.vue
@@ -10,6 +10,8 @@
             :custom-row="customRowEvents"
             :get-popup-container="() => $el"
             :locale="{ emptyText: 'No active auctions' }"
+            :table-layout="auto"
+            :scroll="{ x: 'max-content' }"
             class="AuctionsTable relative overflow-visible"
         >
             <div slot="auctionAmount" slot-scope="receiveAmountDAI">
@@ -48,8 +50,8 @@
                     <LoadingIcon class="h-4 w-4 animate animate-spin fill-current dark:text-gray-300" />
                     <span>Updating...</span>
                 </div>
-                <span v-else-if="lastUpdated"> Last updated <TimeTill :date="lastUpdated" /></span>
-                <span v-else> Last updated unknown time ago </span>
+                <span v-else-if="lastUpdated">Updated <TimeTill :date="lastUpdated" /></span>
+                <span v-else>Updated <span class="opacity-50">unknown time</span> ago</span>
             </div>
             <div slot="action" slot-scope="text, record, index" class="w-full h-full">
                 <nuxt-link

diff --git a/frontend/components/common/formatters/TimeTill.stories.js b/frontend/components/common/formatters/TimeTill.stories.js
@@ -23,4 +23,18 @@ storiesOf('Common/Formatters/TimeTill', module)
             date: new Date(Date.now() + 5000).toUTCString(),
         }),
         template: `<TimeTill :date="date" />`,
+    }))
+    .add('Recent Past', () => ({
+        components: { TimeTill },
+        data: () => ({
+            date: faker.date.recent(),
+        }),
+        template: `<TimeTill :date="date" />`,
+    }))
+    .add('Late Past', () => ({
+        components: { TimeTill },
+        data: () => ({
+            date: faker.date.past(),
+        }),
+        template: `<TimeTill :date="date" />`,
     }));
diff --git a/frontend/components/common/formatters/TimeTill.vue b/frontend/components/common/formatters/TimeTill.vue
@@ -41,7 +41,6 @@ export default Vue.extend({
             if (this.parsedDate) {
                 const now = new Date();
                 this.timeTill = formatInterval(now, this.parsedDate);
-
                 const duration = this.parsedDate.getTime() - now.getTime();
                 this.isEndingSoon = duration < ENDING_SOON_THRESHOLD && duration > 0;
             } else {

diff --git a/frontend/components/panels/CollectAuctionPanel.vue b/frontend/components/panels/CollectAuctionPanel.vue
@@ -2,7 +2,7 @@
     <BasePanel :current-state="currentStateAndTitle.name">
         <template #title>
             {{ currentStateAndTitle.title }}
-            <time-till v-if="auction.state === 'have-bids'" :date="auction.earliestEndDate" />
+            <TimeTill v-if="auction.state === 'have-bids'" :date="auction.earliestEndDate" />
         </template>
 
         <TextBlock v-if="auction.state === 'ready-for-collection'">

diff --git a/frontend/components/vault/VaultsTable.stories.js b/frontend/components/vault/VaultsTable.stories.js
@@ -12,6 +12,7 @@ const common = {
         vaultTransactions: fakeVaultTransaction,
         selectedVaultId: randomSelectedVault.id,
         lastUpdated: new Date(faker.date.recent()),
+        isLoading: false,
     }),
 };
 
@@ -21,6 +22,20 @@ storiesOf('Vault/VaultsTable', module)
         template:
             '<VaultsTable :vaultTransactions="vaultTransactions" :selectedVaultId="selectedVaultId" :last-updated="lastUpdated" />',
     }))
+    .add('Reset Updated Timer', () => ({
+        ...common,
+        created() {
+            setInterval(() => {
+                this.isLoading = true;
+                setTimeout(() => {
+                    this.isLoading = false;
+                }, 1000);
+                this.lastUpdated = new Date(faker.date.recent());
+            }, 10 * 1000);
+        },
+        template:
+            '<VaultsTable :vaultTransactions="vaultTransactions" :selectedVaultId="selectedVaultId" :last-updated="lastUpdated" :is-loading="isLoading" />',
+    }))
     .add('Fetching With Vaults', () => ({
         ...common,
         template:

diff --git a/frontend/components/vault/VaultsTable.vue b/frontend/components/vault/VaultsTable.vue
@@ -10,6 +10,8 @@
             :custom-row="customRowEvents"
             :get-popup-container="() => $el"
             :locale="{ emptyText: 'There are currently no vaults at risk.' }"
+            :table-layout="auto"
+            :scroll="{ x: 'max-content' }"
             class="VaultsTable relative overflow-visible"
         >
             <div slot="collateralAmount" slot-scope="collateralAmount, record">
@@ -44,8 +46,8 @@
                     <LoadingIcon class="h-4 w-4 animate animate-spin fill-current dark:text-gray-300" />
                     <span>Updating...</span>
                 </div>
-                <span v-else-if="lastUpdated"> Last updated <TimeTill :date="lastUpdated" /></span>
-                <span v-else> Last updated unknown time ago </span>
+                <span v-else-if="lastUpdated">Updated <TimeTill :date="lastUpdated" /></span>
+                <span v-else>Updated <span class="opacity-50">unknown time</span> ago</span>
             </div>
             <div slot="action" slot-scope="text, record, index" class="w-full h-full">
                 <nuxt-link
@@ -184,7 +186,6 @@ export default Vue.extend({
                 {
                     slots: { title: 'updatingStatus', customRender: 'action' },
                     scopedSlots: { customRender: 'action' },
-                    width: '20%',
                 },
             ];
         },