diff --git a/src/components/Balances.jsx b/src/components/Balances.jsx index fd4f6323b..544b0110d 100644 --- a/src/components/Balances.jsx +++ b/src/components/Balances.jsx @@ -61,8 +61,8 @@ const Balances = ({ entity }) => { return (
{entity.donationCounters && entity.donationCounters.length > 0 && ( -
- +
+
diff --git a/src/components/LeaderBoard.jsx b/src/components/LeaderBoard.jsx index 952862c19..8a994667c 100644 --- a/src/components/LeaderBoard.jsx +++ b/src/components/LeaderBoard.jsx @@ -117,8 +117,8 @@ const LeaderBoard = props => {
{isLoading && total === 0 && } {aggregateDonations.length > 0 && ( -
-
Current balance
+
+
{/* eslint-disable-next-line jsx-a11y/control-has-associated-label */} diff --git a/src/components/ProfileDonationsTable.jsx b/src/components/ProfileDonationsTable.jsx index cfd296b03..5783d2aa4 100644 --- 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)} ) : ( - + )} ))} @@ -143,7 +149,7 @@ const ProfileCommunitiesTable = ({ userAddress }) => { activePage={skipPages + 1} itemsCountPerPage={itemsPerPage} totalItemsCount={total} - pageRangeDisplayed={10} + pageRangeDisplayed={visiblePages} onChange={handlePageChanged} /> @@ -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 index 577379812..929cbb210 100644 --- 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)} )} diff --git a/src/components/views/Profile.jsx b/src/components/views/Profile.jsx index a3806198e..c3def9fd8 100644 --- a/src/components/views/Profile.jsx +++ b/src/components/views/Profile.jsx @@ -100,7 +100,7 @@ const Profile = props => {
-
+
{(isLoading || (!isLoading && !user.address)) && ( -
+ ); diff --git a/src/components/views/myDelegations/DelegationsTable.jsx b/src/components/views/myDelegations/DelegationsTable.jsx index 7268c9d2b..189bb095c 100644 --- a/src/components/views/myDelegations/DelegationsTable.jsx +++ b/src/components/views/myDelegations/DelegationsTable.jsx @@ -35,20 +35,20 @@ function DelegationsTable({ ))}
{d.giverAddress}{shortenAddress(d.giverAddress)}
{donation.giverAddress}{shortenAddress(donation.giverAddress)} {donation.statusDescription}
+ {totalResults > itemsPerPage && ( +
+ +
+ )}
)} - {delegations && totalResults > itemsPerPage && ( -
- -
- )} {delegations && delegations.length === 0 && (

There's nothing to delegate (yet)!

diff --git a/src/styles/_dashboard.scss b/src/styles/_dashboard.scss index 65cecd6d2..65387c947 100644 --- 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 index 854d81d07..60cca8504 100644 --- 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 index a71cf5ee6..b18ce6793 100644 --- 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;