Merge pull request #801 from bitfinexcom/revert-794-dynamic-table-width

Revert "(improvements) Tables responsiveness"
bitfinexcom · Apr 5, 2024 · 3804689 · 3804689
2 parents afcca69 + 2370321
commit 3804689
Show file tree

Hide file tree

Showing 20 changed files with 220 additions and 326 deletions.
diff --git a/src/components/AccountSummary/AccountSummary.js b/src/components/AccountSummary/AccountSummary.js
@@ -112,6 +112,7 @@ class AccountSummary extends PureComponent {
               />
             </>
           )}
+          <br />
           <PaidFees
             t={t}
             isNoData={isNoData}

diff --git a/src/components/AccountSummary/AccountSummary.leo.js b/src/components/AccountSummary/AccountSummary.leo.js
@@ -70,19 +70,12 @@ const AccountSummaryLeo = ({
 
 AccountSummaryLeo.propTypes = {
   data: PropTypes.shape({
-    leoLev: PropTypes.number,
-    leoAmountAvg: PropTypes.number,
-  }),
+    leoLev: PropTypes.number.isRequired,
+    leoAmountAvg: PropTypes.number.isRequired,
+  }).isRequired,
   t: PropTypes.func.isRequired,
   isNoData: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
 }
 
-AccountSummaryLeo.defaultProps = {
-  data: PropTypes.shape({
-    leoLev: 0,
-    leoAmountAvg: 0,
-  }),
-}
-
 export default memo(AccountSummaryLeo)
diff --git a/src/components/AccountSummary/_AccountSummary.scss b/src/components/AccountSummary/_AccountSummary.scss
@@ -1,15 +1,14 @@
 .section-account-summary {
   &-data {
-    width: 100%;
     display: flex;
     flex-wrap: wrap;
-    flex-direction: row;
     align-items: flex-end;
-    justify-content: space-between;
+    justify-content: flex-start;
 
     &-item {
-      width: 49%;
-      min-width: 400px;
+      width: fit-content;
+      max-width: calc(100vw - 20px);
+      margin-right: 20px;
       margin-bottom: 35px;
 
       .collapsed-table {
@@ -50,16 +49,6 @@
   }
 }
 
-@media screen and (max-width: 1210px) {
-  .section-account-summary {
-    &-data {
-      &-item {
-        width: 100%;
-      }
-    }
-  }
-}
-
 @media screen and (max-width: 768px) {
   .section-account-summary {
     &-data {
@@ -74,8 +63,8 @@
       &-item {
         width: 100%;
         margin-right: 0;
-        min-width: inherit;
       }
     }
   }
 }
+
diff --git a/src/components/AppSummary/AppSummary.value.js b/src/components/AppSummary/AppSummary.value.js
@@ -86,7 +86,7 @@ const AccountSummaryValue = () => {
           </div>
         )}
         <Chart
-          height={375}
+          aspect={1.5}
           data={chartData}
           showLegend={false}
           dataKeys={presentCurrencies}

diff --git a/src/components/AppSummary/_AppSummary.scss b/src/components/AppSummary/_AppSummary.scss
@@ -19,7 +19,7 @@
   &-data-row {
     display: flex;
     flex-wrap: wrap;
-    max-width: 100%;
+    max-width: 1000px;
     min-height: 441px;
     align-items: flex-start;
     justify-content: space-between;
@@ -29,14 +29,14 @@
   &-title-row {
     display: flex;
     min-height: 35px;
-    max-width: 100%;
+    max-width: 1000px;
     align-items: center;
     justify-content: space-between;
   }
 
   &-item {
     width: 48%;
-    min-width: 300px;
+    max-width: 460px;
     min-height: 270px;
 
     &-title {
@@ -150,7 +150,7 @@
 
   .app-summary-item-title--row {
     display: flex;
-    max-width: 100%;
+    max-width: 1000px;
     position: relative;
     align-items: center;
     justify-content: space-between;
@@ -348,15 +348,15 @@
   .loading-container {
     display: flex;
     min-height: 300px;
-    max-width: 100%;
+    max-width: 1000px;
 
     .loading {
       margin: auto;
     }
   }
 
   .no-data {
-    max-width: 100%;
+    max-width: 1000px;
     min-height: 300px;
 
     &-wrapper {
@@ -366,8 +366,8 @@
 }
 
 .chart-item {
-  width: 48%;
-  margin-right: 15px;
+  width: 50%;
+  max-width: 500px;
 
   .app-summary-item-sub-title {
     margin-bottom: 11px;
@@ -464,41 +464,25 @@
   }
 }
 
-@media screen and (max-width: 1020px) {
+@media screen and (max-width: 547px) {
   .app-summary {
     &-data-row {
       display: flex;
       flex-direction: column;
       margin-bottom: 0;
     }
-
     &-item {
       width: 100%;
       margin-bottom: 30px;
     }
-
-    .chart-item {
-      width: 100%;
-      margin-right: 0;
-    }
-  }
-}
-
-@media screen and (max-width: 855px) {
-  .app-summary {
-    &-item {
-      .line-chart {
-        width:107%;
-      }
-    }
   }
 }
 
-@media screen and (max-width: 450px) {
+@media screen and (max-width: 400px) {
   .app-summary {
     &-item {
       .line-chart {
-        width:115%;
+        width:120%;
       }
     }
   }

diff --git a/src/components/ConcentrationRisk/ConcentrationRisk.js b/src/components/ConcentrationRisk/ConcentrationRisk.js
@@ -156,12 +156,10 @@ class ConcentrationRisk extends PureComponent {
     } else {
       showContent = (
         <div className='concentration-risk-data'>
-          <div className='concentration-risk-data-table'>
-            <DataTable
-              tableColumns={tableColumns}
-              numRows={isLoading ? 5 : tableData.length}
-            />
-          </div>
+          <DataTable
+            tableColumns={tableColumns}
+            numRows={isLoading ? 5 : tableData.length}
+          />
           <div className='concentration-risk-data-chart'>
             <PieChart data={chartData} />
           </div>

diff --git a/src/components/ConcentrationRisk/_ConcentrationRisk.scss b/src/components/ConcentrationRisk/_ConcentrationRisk.scss
@@ -1,18 +1,13 @@
 .concentration-risk-data {
-  width: 100%;
   display: flex;
 
-  &-table {
-    width: 50%;
-    margin-right: 100px;
-
-    .data-table-container {
-      flex: 0 0 400px;
-      height: fit-content;
-    }
+  .bitfinex-table {
+    height: fit-content;
+    flex: 0 0 400px;
   }
 
   &-chart {
+    width: 100%;
     margin-left: 15px;
 
     .recharts-wrapper {
@@ -28,19 +23,12 @@
   }
 }
 
-@media screen and (max-width: 1020px) {
+@media screen and (max-width: 850px) {
   .concentration-risk-data {
     flex-wrap: wrap;
-    flex-direction: column;
-    align-items: center;
 
-    &-table {
-      width: 100%;
-      margin-right: 0;
-
-      .bitfinex-table {
-        margin: 0 auto 25px auto;
-      }
+    .bitfinex-table {
+      margin: 0 auto 25px auto;
     }
 
     &-chart {

diff --git a/src/components/Snapshots/TickersSnapshot/TickersSnapshot.js b/src/components/Snapshots/TickersSnapshot/TickersSnapshot.js
@@ -30,7 +30,7 @@ const TickersSnapshot = ({
   })
 
   return (
-    <div className='tickers'>
+    <>
       <div className='tables-row no-table-scroll'>
         <div className='tables-row-item'>
           <div>{t('positions.title')}</div>
@@ -47,7 +47,7 @@ const TickersSnapshot = ({
           />
         </div>
       </div>
-    </div>
+    </>
   )
 }
 

diff --git a/src/components/Snapshots/_Snapshots.scss b/src/components/Snapshots/_Snapshots.scss
diff --git a/src/components/Wallets/Wallets.data.js b/src/components/Wallets/Wallets.data.js
@@ -40,36 +40,34 @@ const WalletsData = ({
   })
 
   return (
-    <div className='wallets'>
-      <div className='tables-row no-table-scroll'>
-        <div className='tables-row-item'>
-          <div>{t('wallets.header.exchange')}</div>
-          <DataTable
-            tableColumns={exchangeColumns}
-            numRows={exchangeData.length || 1}
-          />
-        </div>
-        <div className='tables-row-item'>
-          <div>{t('wallets.header.margin')}</div>
-          <DataTable
-            tableColumns={marginColumns}
-            numRows={marginData.length || 1}
-          />
-        </div>
-        <div className='tables-row-item'>
-          <div>{t('wallets.header.funding')}</div>
-          <DataTable
-            tableColumns={fundingColumns}
-            numRows={fundingData.length || 1}
-          />
-        </div>
-        <div className='tables-row-item'>
-          <div>{t('wallets.header.capital-raise')}</div>
-          <DataTable
-            tableColumns={contributionColumns}
-            numRows={contributionData.length || 1}
-          />
-        </div>
+    <div className='tables-row no-table-scroll'>
+      <div className='tables-row-item'>
+        <div>{t('wallets.header.exchange')}</div>
+        <DataTable
+          tableColumns={exchangeColumns}
+          numRows={exchangeData.length || 1}
+        />
+      </div>
+      <div className='tables-row-item'>
+        <div>{t('wallets.header.margin')}</div>
+        <DataTable
+          tableColumns={marginColumns}
+          numRows={marginData.length || 1}
+        />
+      </div>
+      <div className='tables-row-item'>
+        <div>{t('wallets.header.funding')}</div>
+        <DataTable
+          tableColumns={fundingColumns}
+          numRows={fundingData.length || 1}
+        />
+      </div>
+      <div className='tables-row-item'>
+        <div>{t('wallets.header.capital-raise')}</div>
+        <DataTable
+          tableColumns={contributionColumns}
+          numRows={contributionData.length || 1}
+        />
       </div>
     </div>
   )

diff --git a/src/components/Wallets/_Wallets.scss b/src/components/Wallets/_Wallets.scss
-Original file line number
+Diff line change
@@ Expand Up / @@ -112,6 +112,7 @@ class AccountSummary extends PureComponent { @@
                   />
                 </>
               )}
+              <br />
               <PaidFees
                 t={t}
                 isNoData={isNoData}
@@ Expand Down @@