Skip to content

Commit

Permalink
[Updated] Responsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@greedyboi
greedyboi committed Mar 6, 2024
1 parent 99f8459 commit 1a034e8
Show file tree
Hide file tree
Showing 11 changed files with 115 additions and 75 deletions.
29 changes: 12 additions & 17 deletions src/components/CountDown/CountDown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,23 +82,18 @@ const RoundTimer = ({ to, onCountdownEnd, homePage, simple }: IProps) => {
);
}

return (
<div>
{!!days && (
<div>
<span>{days}</span>&nbsp;<span>{I18n.t('countDown.days', { count: days })}</span> <span>{hours}</span>&nbsp;<span>{I18n.t('countDown.hours', { count: hours })}</span>
</div>
)}
{!days && (
<>
<div>
<span>
{numeral(hours).format('00')}:{numeral(minutes).format('00')}:{numeral(seconds).format('00')}
</span>
</div>
</>
)}
</div>
return !!days ? (
<>
{days} {I18n.t('countDown.days', { count: days })} {hours} {I18n.t('countDown.hours', { count: hours })}
</>
) : (
<>
<div>
<span>
{numeral(hours).format('00')}:{numeral(minutes).format('00')}:{numeral(seconds).format('00')}
</span>
</div>
</>
);
};

Expand Down
6 changes: 3 additions & 3 deletions src/components/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ const Header = ({ logoutModalRef }: { logoutModalRef: RefObject<ModalHandlers> }
{I18n.t('landing.howItWorks')}
</a>
</li>
<li className='nav-item mx-0 mx-lg-3 mx-lg-4 my-3 my-lg-0' {...dismissMenuProps}>
<li className='nav-item mx-0 mx-lg-3 mx-xl-4 my-3 my-lg-0' {...dismissMenuProps}>
<a
href={NavigationConstants.DOCUMENTATION}
target='_blank'
Expand All @@ -181,7 +181,7 @@ const Header = ({ logoutModalRef }: { logoutModalRef: RefObject<ModalHandlers> }
{I18n.t('landing.faq')}
</a>
</li>
<li className='nav-item mx-0 mx-lg-3 mx-lg-4 my-3 my-lg-0' {...dismissMenuProps}>
<li className='nav-item mx-0 mx-lg-3 mx-xl-4 my-3 my-lg-0' {...dismissMenuProps}>
<a
href={NavigationConstants.TWITTER}
target='_blank'
Expand All @@ -203,7 +203,7 @@ const Header = ({ logoutModalRef }: { logoutModalRef: RefObject<ModalHandlers> }
<img className='scale-hover' src={Assets.images.discordButton} alt='Discord' />
</a>
</li>
<li className='nav-item ms-0 ms-lg-3 ms-lg-4 mt-3 mt-lg-0'>
<li className='nav-item ms-0 ms-lg-3 ms-xl-4 mt-3 mt-lg-0'>
<Button
to={NavigationConstants.HOME}
{...dismissMenuProps}
Expand Down
58 changes: 32 additions & 26 deletions src/components/Leaderboard/Leaderboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { DenomsUtils, I18n, WalletProvidersUtils, NumbersUtils, StringsUtils } f
import numeral from 'numeral';

import './Leaderboard.scss';
import { useTranslation } from 'react-i18next';

interface Props {
pool: PoolModel;
Expand All @@ -36,7 +35,6 @@ const Leaderboard = (props: Props) => {

const { width: windowWidth } = useWindowSize();
const { isDark } = useColorScheme();
const { t } = useTranslation();

const containerRef = useRef<HTMLDivElement>(null);
const tl = useRef<gsap.core.Timeline>();
Expand Down Expand Up @@ -148,15 +146,15 @@ const Leaderboard = (props: Props) => {
return (
<div
key={`depositor-rank-${index}`}
className={`position-relative d-flex flex-row align-items-center justify-content-between leaderboard-rank ${flat ? 'flat' : ''} ${isDark ? 'dark' : ''} ${
className={`position-relative d-flex flex-column flex-sm-row align-items-sm-center justify-content-between leaderboard-rank ${flat ? 'flat' : ''} ${isDark ? 'dark' : ''} ${
item.address === lumWallet?.address ? 'me' : !isDark && (isMobile || windowWidth < Breakpoints.MD) ? 'white-bg' : ''
}`}
>
<div className='d-flex flex-row align-items-center'>
<div className={'me-3 rank' + ' ' + (item.rank === 1 ? 'first' : item.rank === 2 ? 'second' : item.rank === 3 ? 'third' : '')}>#{item.rank}</div>
<div className='address'>{StringsUtils.trunc(item.address, windowWidth < Breakpoints.SM ? 3 : 6)}</div>
<div className='address'>{StringsUtils.trunc(item.address, windowWidth > Breakpoints.SM ? 6 : windowWidth < 350 ? 3 : 8)}</div>
</div>
<div className='position-relative overflow-visible d-flex flex-row align-items-center justify-content-end'>
<div className='position-relative overflow-visible d-flex flex-row align-items-center justify-content-sm-end justify-content-between mt-2 mt-sm-0'>
<div className='crypto-amount me-3'>
<SmallerDecimal nb={NumbersUtils.formatTo6digit(amount, windowWidth < Breakpoints.MD ? 3 : 6)} /> {DenomsUtils.getNormalDenom(item.nativeDenom).toUpperCase()}
</div>
Expand All @@ -166,22 +164,30 @@ const Leaderboard = (props: Props) => {
</div>
) : null}
</div>
{!(lumWallet && item.address === lumWallet.address) && userRank && userRank.rank > item.rank && totalUserDeposits ? (
<Button
className='deposit-more-btn'
to={`${NavigationConstants.POOLS}/${DenomsUtils.getNormalDenom(item.nativeDenom)}/${pool.poolId.toString()}`}
locationState={{
amountToDeposit: Math.ceil(amount - totalUserDeposits),
}}
forcePurple
>
{I18n.t('leaderboard.depositBtn', { amount: Math.ceil(amount - totalUserDeposits), denom: DenomsUtils.getNormalDenom(item.nativeDenom).toUpperCase() })}
</Button>
) : null}
{!(lumWallet && item.address === lumWallet.address) && totalDeposited && userRank && userRank.rank > item.rank && NumbersUtils.convertUnitNumber(userRank.amount) !== totalDeposited ? (
<Button className='deposit-more-btn' forcePurple>
{I18n.t('leaderboard.newRanking')}
</Button>
{windowWidth > Breakpoints.SM ? (
<>
{!(lumWallet && item.address === lumWallet.address) && userRank && userRank.rank > item.rank && totalUserDeposits ? (
<Button
className='deposit-more-btn'
to={`${NavigationConstants.POOLS}/${DenomsUtils.getNormalDenom(item.nativeDenom)}/${pool.poolId.toString()}`}
locationState={{
amountToDeposit: Math.ceil(amount - totalUserDeposits),
}}
forcePurple
>
{I18n.t('leaderboard.depositBtn', { amount: Math.ceil(amount - totalUserDeposits), denom: DenomsUtils.getNormalDenom(item.nativeDenom).toUpperCase() })}
</Button>
) : null}
{!(lumWallet && item.address === lumWallet.address) &&
totalDeposited &&
userRank &&
userRank.rank > item.rank &&
NumbersUtils.convertUnitNumber(userRank.amount) !== totalDeposited ? (
<Button className='deposit-more-btn' forcePurple>
{I18n.t('leaderboard.newRanking')}
</Button>
) : null}
</>
) : null}
</div>
);
Expand All @@ -191,7 +197,7 @@ const Leaderboard = (props: Props) => {
if (pool.leaderboard.items.length === 0) {
return (
<div className='d-flex flex-column align-items-center justify-content-center'>
<h3 className='mb-4'>{t('leaderboard.noDepositYet')}</h3>
<h3 className='mb-4'>{I18n.t('leaderboard.noDepositYet')}</h3>
<Button to={`${NavigationConstants.POOLS}/${DenomsUtils.getNormalDenom(pool.nativeDenom)}/${pool.poolId.toString()}`} forcePurple>
{I18n.t('mySavings.deposit')}
</Button>
Expand All @@ -202,12 +208,12 @@ const Leaderboard = (props: Props) => {
return (
<>
{!enableAnimation && windowWidth < Breakpoints.MD && userRank && (
<div className={`user-rank leaderboard-rank me d-flex flex-row justify-content-between align-items-center`}>
<div className={`user-rank leaderboard-rank me d-flex flex-column flex-sm-row align-items-sm-center justify-content-between`}>
<div className='d-flex flex-row align-items-center'>
<div className='me-3 rank'>#{userRank.rank}</div>
<div className='address'>{StringsUtils.trunc(userRank.address, windowWidth < Breakpoints.SM ? 3 : 6)}</div>
</div>
<div className='position-relative d-flex flex-row align-items-center justify-content-end'>
<div className='position-relative d-flex flex-row align-items-center justify-content-sm-end justify-content-between mt-2 mt-sm-0'>
<div className='crypto-amount me-3'>
<SmallerDecimal nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(userRank.amount), 3)} /> {DenomsUtils.getNormalDenom(userRank.nativeDenom).toUpperCase()}
</div>
Expand All @@ -222,12 +228,12 @@ const Leaderboard = (props: Props) => {
{onBottomReached ? (
<InfiniteScroll hasMore={hasMore || false} loadMore={onBottomReached} loader={<Loading key={0} />} className='position-relative'>
{enableAnimation && userRank ? (
<div className={`user-rank leaderboard-rank animated me d-flex flex-row justify-content-between align-items-center`}>
<div className={`user-rank leaderboard-rank animated me d-flex flex-column flex-sm-row align-items-sm-center justify-content-between`}>
<div className='d-flex flex-row align-items-center'>
<div className='me-3 rank'>#{userRank.rank}</div>
<div className='address'>{StringsUtils.trunc(userRank.address, windowWidth < Breakpoints.SM ? 3 : 6)}</div>
</div>
<div className='position-relative d-flex flex-row align-items-center justify-content-end'>
<div className='position-relative d-flex flex-row align-items-center justify-content-sm-end justify-content-between mt-2 mt-sm-0'>
<div className='crypto-amount me-3'>
<SmallerDecimal nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(userRank.amount), windowWidth < Breakpoints.MD ? 3 : 6)} />{' '}
{DenomsUtils.getNormalDenom(userRank.nativeDenom).toUpperCase()}
Expand Down
2 changes: 1 addition & 1 deletion src/layout/MainLayout/MainLayout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
.custom-container {
padding-top: 130px;
@include media-breakpoint-down(sm) {
@include make-container(32px);
@include make-container(12px);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/pages/Landing/components/PoolCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const PoolCard = ({ denom, tvl, prize }: IProps) => {
</div>
<div className='tvl-container d-flex flex-column align-items-center'>
<span className='tvl-legend mb-3'>{I18n.t('landing.pools.deposited')}</span>
<span className='tvl mb-1'>
<span className='tvl mb-1 text-center'>
{numeral(NumbersUtils.convertUnitNumber(tvl)).format('0,0')} {denom}
</span>
<span className='tvl-value'>≃${price ? numeral(NumbersUtils.convertUnitNumber(tvl) * price).format('0,0') : ' --'}</span>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/MySavings/MySavings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -456,8 +456,8 @@ const MySavings = () => {
) : null}
{leaderboardPool ? (
<div ref={leaderboardSectionRef} className='leaderboard-section'>
<div className='mt-5 mb-3 d-flex flex-row align-items-center justify-content-between'>
<div className='d-flex align-items-center'>
<div className='mt-5 mb-3 d-flex flex-column flex-sm-row align-items-sm-center justify-content-between'>
<div className='d-flex align-items-center mb-3 mb-sm-0'>
<h2 className='mb-0'>{I18n.t('mySavings.depositorsRanking')}</h2>
<span data-tooltip-id='depositor-ranking-hint' data-tooltip-html={I18n.t('leaderboard.hint')} className='ms-2 mb-2'>
<img src={Assets.images.info} alt='info' />
Expand Down
2 changes: 1 addition & 1 deletion src/pages/MySavings/components/TransationsTable/TransactionsTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ const TransactionsTable = ({
</div>
<div className='d-flex flex-column'>
<label>{headers[2]}</label>
<div className='d-flex flex-row justify-content-between align-items-center tx-amount table-item'>
<div className='d-flex flex-column flex-sm-row justify-content-between align-items-sm-center tx-amount table-item'>
<div className='amount text-nowrap'>
{transaction.amount.length > 0 ? <SmallerDecimal nb={NumbersUtils.formatTo6digit(NumbersUtils.convertUnitNumber(transaction.amount[0].amount))} /> : '--'}
<span className='denom ms-2'>{DenomsUtils.getNormalDenom(transaction.amount[0]?.denom || 'ulum').toUpperCase()}</span>
Expand Down
27 changes: 23 additions & 4 deletions src/pages/PoolDetails/PoolDetails.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,10 @@
.draw-in-progress {
font-size: 18px;
}

@include media-breakpoint-down(sm) {
width: auto;
}
}

@include media-breakpoint-down(lg) {
Expand Down Expand Up @@ -139,6 +143,10 @@
.prize-distribution-table {
.table thead tr th {
color: var(--color-primary);

@include media-breakpoint-down(sm) {
font-size: 11px;
}
}

.table tbody tr td {
Expand All @@ -151,26 +159,37 @@
padding: 1.5rem 1.5rem;
}

.rank, .rank td {
.rank,
.rank td {
background-color: var(--color-primary) !important;
color: var(--color-white) !important;
}

.rank.first, .rank.first td {
.rank.first,
.rank.first td {
background-color: #ffba20 !important;
}

.rank.second, .rank.second td {
.rank.second,
.rank.second td {
background-color: #cdcdcd !important;
}

.rank.third, .rank.third td {
.rank.third,
.rank.third td {
background-color: #c07a50 !important;
}

.percentage {
font-size: 12px;
}

@include media-breakpoint-down(sm) {
.prize-value,
.prize-count {
font-size: 18px;
}
}
}

@include media-breakpoint-down(md) {
Expand Down
Loading

0 comments on commit 1a034e8

Please sign in to comment.