Merge pull request #2472 from Giveth/H_2471_improve_tables

H 2471 Improve tables view
Giveth · Sep 10, 2021 · f547e36 · f547e36
2 parents 46e1bda + 7ed3e07
commit f547e36
Show file tree

Hide file tree

Showing 10 changed files with 53 additions and 35 deletions.
diff --git a/src/components/Balances.jsx b/src/components/Balances.jsx
@@ -61,8 +61,8 @@ const Balances = ({ entity }) => {
   return (
     <div className="dashboard-table-view">
       {entity.donationCounters && entity.donationCounters.length > 0 && (
-        <div className="table-container">
-          <table className="table table-hover text-left mt-0">
+        <div className="table-container w-100">
+          <table className="table table-hover text-left mt-0 w-100">
             <thead>
               <tr>
                 <th className="td-donations-amount">Current balance</th>

diff --git a/src/components/LeaderBoard.jsx b/src/components/LeaderBoard.jsx
@@ -117,8 +117,8 @@ const LeaderBoard = props => {
       <div className="dashboard-table-view">
         {isLoading && total === 0 && <Loader className="relative" />}
         {aggregateDonations.length > 0 && (
-          <div className="table-container">
-            <table className="table table-hover mt-1">
+          <div className="table-container w-100">
+            <table className="table table-hover mt-1 w-100">
               <thead>
                 <tr>
                   {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}

diff --git a/src/components/ProfileDonationsTable.jsx b/src/components/ProfileDonationsTable.jsx
@@ -1,20 +1,26 @@
 import React, { Fragment, useEffect, useRef, useState } from 'react';
+import { Grid } from 'antd';
 import { paramsForServer } from 'feathers-hooks-common';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import Pagination from 'react-js-pagination';
 import moment from 'moment';
-import { convertEthHelper } from '../lib/helpers';
+import { convertEthHelper, shortenAddress } from '../lib/helpers';
 import { feathersClient } from '../lib/feathersClient';
 import Loader from './Loader';
 import { Donation } from '../models';
 import config from '../configuration';
 
-const ProfileCommunitiesTable = ({ userAddress }) => {
+const { useBreakpoint } = Grid;
+
+const ProfileDonationsTable = ({ userAddress }) => {
   const [isLoading, setLoading] = useState(true);
   const [donations, setDonations] = useState([]);
   const [total, setTotal] = useState(0);
   const [skipPages, setSkipPages] = useState(0);
+
+  const { xs } = useBreakpoint();
+  const visiblePages = xs ? 6 : 10;
   const itemsPerPage = 25;
   const isMounted = useRef(false);
 
@@ -126,11 +132,11 @@ const ProfileCommunitiesTable = ({ userAddress }) => {
                               target="_blank"
                               rel="noopener noreferrer"
                             >
-                              {d.giverAddress}
+                              {shortenAddress(d.giverAddress)}
                             </a>
                           </td>
                         ) : (
-                          <td className="td-tx-address">{d.giverAddress}</td>
+                          <td className="td-tx-address">{shortenAddress(d.giverAddress)}</td>
                         )}
                       </tr>
                     ))}
@@ -143,7 +149,7 @@ const ProfileCommunitiesTable = ({ userAddress }) => {
                       activePage={skipPages + 1}
                       itemsCountPerPage={itemsPerPage}
                       totalItemsCount={total}
-                      pageRangeDisplayed={10}
+                      pageRangeDisplayed={visiblePages}
                       onChange={handlePageChanged}
                     />
                   </div>
@@ -157,8 +163,8 @@ const ProfileCommunitiesTable = ({ userAddress }) => {
   );
 };
 
-ProfileCommunitiesTable.propTypes = {
+ProfileDonationsTable.propTypes = {
   userAddress: PropTypes.string.isRequired,
 };
 
-export default ProfileCommunitiesTable;
+export default ProfileDonationsTable;
diff --git a/src/components/views/MyDonations.jsx b/src/components/views/MyDonations.jsx
@@ -8,9 +8,9 @@ import { Context as Web3Context } from 'contextProviders/Web3Provider';
 import config from 'configuration';
 
 import { Helmet } from 'react-helmet';
-import { Modal } from 'antd';
+import { Grid, Modal } from 'antd';
 import Loader from '../Loader';
-import { convertEthHelper, txNotification } from '../../lib/helpers';
+import { convertEthHelper, txNotification, shortenAddress } from '../../lib/helpers';
 import { Context as UserContext } from '../../contextProviders/UserProvider';
 import AuthenticationWarning from '../AuthenticationWarning';
 import DonationService from '../../services/DonationService';
@@ -20,9 +20,9 @@ import DonationBlockchainService from '../../services/DonationBlockchainService'
 import confirmationDialog from '../../lib/confirmationDialog';
 import Web3ConnectWarning from '../Web3ConnectWarning';
 
+const { useBreakpoint } = Grid;
 const etherScanUrl = config.etherscan;
 const itemsPerPage = 20;
-const visiblePages = 10;
 
 /**
  * The my donations view
@@ -41,6 +41,8 @@ const MyDonations = () => {
     state: { currentUser },
   } = useContext(UserContext);
 
+  const { xs } = useBreakpoint();
+  const visiblePages = xs ? 6 : 10;
   const userAddress = currentUser.address;
 
   const donationSubscription = useRef();
@@ -289,7 +291,7 @@ const MyDonations = () => {
                                 target="_blank"
                                 rel="noopener noreferrer"
                               >
-                                {d.giverAddress}
+                                {shortenAddress(d.giverAddress)}
                               </a>
                             </td>
                           )}

diff --git a/src/components/views/Profile.jsx b/src/components/views/Profile.jsx
@@ -100,7 +100,7 @@ const Profile = props => {
       <div className="container-fluid page-layout dashboard-table-view">
         <div className="row">
           <div className="col-md-8 m-auto">
-            <div className="text-center">
+            <div className="text-left">
               {(isLoading || (!isLoading && !user.address)) && (
                 <Lottie
                   animationData={SearchAnimation}

diff --git a/src/components/views/myDelegations/DelegationsItem.jsx b/src/components/views/myDelegations/DelegationsItem.jsx
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import Donation from '../../../models/Donation';
 import DelegateButton from './DelegateButton';
 import config from '../../../configuration';
-import { convertEthHelper, getUserAvatar, getUserName } from '../../../lib/helpers';
+import { convertEthHelper, getUserAvatar, getUserName, shortenAddress } from '../../../lib/helpers';
 import { Context as UserContext } from '../../../contextProviders/UserProvider';
 import Campaign from '../../../models/Campaign';
 
@@ -55,7 +55,7 @@ function DelegationsItem({ donation }) {
           {getUserName(donation.giver)}
         </Link>
       </td>
-      <td className="td-tx-address">{donation.giverAddress}</td>
+      <td className="td-tx-address">{shortenAddress(donation.giverAddress)}</td>
       <td className="td-status">{donation.statusDescription}</td>
     </tr>
   );

diff --git a/src/components/views/myDelegations/DelegationsTable.jsx b/src/components/views/myDelegations/DelegationsTable.jsx
@@ -35,20 +35,20 @@ function DelegationsTable({
               ))}
             </tbody>
           </table>
+          {totalResults > itemsPerPage && (
+            <div className="text-center">
+              <Pagination
+                activePage={skipPages + 1}
+                itemsCountPerPage={itemsPerPage}
+                totalItemsCount={totalResults}
+                pageRangeDisplayed={pageRangeDisplayed}
+                onChange={handlePageChanged}
+              />
+            </div>
+          )}
         </div>
       )}
 
-      {delegations && totalResults > itemsPerPage && (
-        <div className="text-center">
-          <Pagination
-            activePage={skipPages + 1}
-            itemsCountPerPage={itemsPerPage}
-            totalItemsCount={totalResults}
-            pageRangeDisplayed={pageRangeDisplayed}
-            onChange={handlePageChanged}
-          />
-        </div>
-      )}
       {delegations && delegations.length === 0 && (
         <div className="text-center mt-5">
           <h3>There&apos;s nothing to delegate (yet)!</h3>

diff --git a/src/styles/_dashboard.scss b/src/styles/_dashboard.scss
@@ -6,7 +6,7 @@
 
   table {
     font-size: 0.8rem;
-    margin-top: 50px;
+    margin-top: 20px;
 
     @media (max-width: 768px) {
       font-size: 1rem;
@@ -23,7 +23,7 @@
 
     .td-name,
     .td-donated-to {
-      min-width: 350px;
+      min-width: 150px;
     }
 
     .td-donations-number,
@@ -44,6 +44,10 @@
       min-width: 100px;
     }
 
+    .td-tx-address {
+      min-width: 100px;
+    }
+
     .td-token-symbol {
       width: 100px;
       max-width: 100px;

diff --git a/src/styles/_generalCustomes.scss b/src/styles/_generalCustomes.scss
@@ -4,6 +4,16 @@
     }
 }
 
+.table-container {
+  max-width: 100%;
+  width: fit-content;
+
+  table {
+    max-width: 100%;
+    width: fit-content;
+  }
+}
+
 @media (min-width: 666px) {
   #donate-modal .eq-usd-value {
     position: absolute;

diff --git a/src/styles/_profileView.scss b/src/styles/_profileView.scss
@@ -4,10 +4,6 @@
     margin-top: 50px;
   }
 
-  table {
-    margin-top: 0;
-  }
-
   .table-container {
     position: relative;
     min-height: 200px;