Skip to content

Commit

Permalink
Improve mobile view (#2085)
Browse files Browse the repository at this point in the history
  • Loading branch information
JP authored Apr 17, 2024
1 parent 733861f commit b4f0fb2
Show file tree
Hide file tree
Showing 15 changed files with 222 additions and 147 deletions.
20 changes: 13 additions & 7 deletions centrifuge-app/src/components/Charts/CashflowsChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const CashflowsChart = ({ poolStates, pool }: Props) => {

return (
<Stack gap={4}>
<Shelf>
<Shelf gap={2}>
<CustomLegend data={today} />
<Shelf justifyContent="flex-end" pr={1}>
{chartData.length > 0 &&
Expand Down Expand Up @@ -176,16 +176,20 @@ function CustomLegend({
<Shelf bg="backgroundPage" width="100%" gap={2}>
<Shelf gap={3}>
<Stack borderLeftWidth="3px" pl={1} borderLeftStyle="solid" borderLeftColor="#001C66" gap="4px">
<Text variant="body3" color="textSecondary">
<Text variant="body3" color="textSecondary" whiteSpace="nowrap">
Total purchases
</Text>
<Text variant="body1">{formatBalance(data.totalPurchases, 'USD', 2)}</Text>
<Text variant="body1" whiteSpace="nowrap">
{formatBalance(data.totalPurchases, 'USD', 2)}
</Text>
</Stack>
<Stack borderLeftWidth="3px" pl={1} borderLeftStyle="solid" borderLeftColor="#A4D5D8" gap="4px">
<Text variant="body3" color="textSecondary">
<Text variant="body3" color="textSecondary" whiteSpace="nowrap">
Principal repayments
</Text>
<Text variant="body1">{formatBalance(data.principalRepayments, 'USD', 2)}</Text>
<Text variant="body1" whiteSpace="nowrap">
{formatBalance(data.principalRepayments, 'USD', 2)}
</Text>
</Stack>
<Stack
borderLeftWidth="3px"
Expand All @@ -194,10 +198,12 @@ function CustomLegend({
borderLeftColor={theme.colors.borderPrimary}
gap="4px"
>
<Text variant="body3" color="textSecondary">
<Text variant="body3" color="textSecondary" whiteSpace="nowrap">
Interest
</Text>
<Text variant="body1">{formatBalance(data.interest, 'USD', 2)}</Text>
<Text variant="body1" whiteSpace="nowrap">
{formatBalance(data.interest, 'USD', 2)}
</Text>
</Stack>
{/* <Stack
borderLeftWidth="3px"
Expand Down
11 changes: 8 additions & 3 deletions centrifuge-app/src/components/LayoutBase/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { WalletMenu } from '@centrifuge/centrifuge-react'
import { Stack, Text } from '@centrifuge/fabric'
import * as React from 'react'
import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
import { Footer } from '../Footer'
import { LoadBoundary } from '../LoadBoundary'
import { LogoLink } from '../LogoLink'
Expand All @@ -26,6 +27,8 @@ type LayoutBaseProps = {
}

export function LayoutBase({ children, gap }: LayoutBaseProps) {
const isMedium = useIsAboveBreakpoint('M')

return (
<Root>
<Inner>
Expand Down Expand Up @@ -53,9 +56,11 @@ export function LayoutBase({ children, gap }: LayoutBaseProps) {
</MainContainer>
</LoadBoundary>

<FooterContainer>
<Footer />
</FooterContainer>
{isMedium && (
<FooterContainer>
<Footer />
</FooterContainer>
)}
</Inner>
</Root>
)
Expand Down
13 changes: 9 additions & 4 deletions centrifuge-app/src/components/Menu/GovernanceMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,16 @@ import {
IconChevronRight,
IconExternalLink,
IconGovernance,
Menu as Panel,
MenuItemGroup,
Menu as Panel,
Stack,
Text,
} from '@centrifuge/fabric'
import * as React from 'react'
import styled, { useTheme } from 'styled-components'
import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
import { baseButton } from './styles'
import { Toggle } from './Toggle'
import { baseButton } from './styles'

const ExternalLink = styled(Text)`
${baseButton}
Expand All @@ -24,8 +24,8 @@ const ExternalLink = styled(Text)`
svg {
display: block;
width: ${({ theme }) => theme.sizes.iconSmall}px;
height: ${({ theme }) => theme.sizes.iconSmall}px;
width: ${({ theme, isMedium }) => (isMedium ? theme.sizes.iconSmall : theme.sizes.iconMedium)}px;
height: ${({ theme, isMedium }) => (isMedium ? theme.sizes.iconSmall : theme.sizes.iconMedium)}px;
object-fit: contain;
}
`
Expand All @@ -37,6 +37,7 @@ export function GovernanceMenu() {
const offset = `calc(100% + 2 * ${space[1]}px)`
const id = React.useId()
const isLarge = useIsAboveBreakpoint('L')
const isMedium = useIsAboveBreakpoint('M')

return (
<Box position={['static', 'static', 'relative', 'relative', 'static']}>
Expand All @@ -60,6 +61,7 @@ export function GovernanceMenu() {
aria-label={open ? 'Hide menu' : 'Show menu'}
onClick={() => setOpen(!open)}
stacked={!isLarge}
isMedium={isMedium}
>
<IconGovernance />
Governance
Expand Down Expand Up @@ -123,6 +125,8 @@ const links = [
]

function Link({ href, stacked, children }: { href: string; stacked: boolean; children: React.ReactNode }) {
const isMedium = useIsAboveBreakpoint('M')

return (
<ExternalLink
variant="interactive1"
Expand All @@ -131,6 +135,7 @@ function Link({ href, stacked, children }: { href: string; stacked: boolean; chi
rel="noopener noreferrer"
href={href}
stacked={stacked}
isMedium={isMedium}
>
{children} <IconExternalLink />
</ExternalLink>
Expand Down
4 changes: 3 additions & 1 deletion centrifuge-app/src/components/Menu/PageLink.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Text } from '@centrifuge/fabric'
import * as React from 'react'
import { useRouteMatch } from 'react-router'
import { Link, LinkProps } from 'react-router-dom'
import styled from 'styled-components'
import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
import { prefetchRoute } from '../Root'
import { baseButton, primaryButton } from './styles'

Expand All @@ -18,6 +18,7 @@ type PageLinkProps = LinkProps & {

export function PageLink({ stacked = false, to, children }: PageLinkProps) {
const match = useRouteMatch(to as string)
const isMedium = useIsAboveBreakpoint('M')

return (
<Root
Expand All @@ -27,6 +28,7 @@ export function PageLink({ stacked = false, to, children }: PageLinkProps) {
isActive={Boolean(match)}
stacked={stacked}
onMouseOver={() => prefetchRoute(to)}
isMedium={isMedium}
>
{children}
</Root>
Expand Down
45 changes: 28 additions & 17 deletions centrifuge-app/src/components/Menu/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,32 +38,43 @@ export function Menu() {
gap={1}
flexDirection={['row', 'row', 'column']}
alignItems={['center', 'center', 'stretch']}
justifyContent={['space-between', 'space-between']}
>
<PageLink to="/pools" stacked={!isLarge}>
<IconInvestments />
Pools
</PageLink>
<Box width="100%">
<PageLink to="/pools" stacked={!isLarge}>
<IconInvestments />
Pools
</PageLink>
</Box>

<PageLink to="/portfolio" stacked={!isLarge}>
<IconWallet />
Portfolio
</PageLink>
<Box width="100%">
<PageLink to="/portfolio" stacked={!isLarge}>
<IconWallet />
Portfolio
</PageLink>
</Box>

{address && (transactions ?? null) && (
<PageLink to="/history" stacked={!isLarge}>
<IconClock />
History
</PageLink>
<Box width="100%">
<PageLink to="/history" stacked={!isLarge}>
<IconClock />
History
</PageLink>
</Box>
)}

{showPrime && (
<PageLink to="/prime" stacked={!isLarge}>
<IconGlobe />
Prime
</PageLink>
<Box width="100%">
<PageLink to="/prime" stacked={!isLarge}>
<IconGlobe />
Prime
</PageLink>
</Box>
)}

<GovernanceMenu />
<Box width="100%">
<GovernanceMenu />
</Box>

{(pools.length > 0 || config.poolCreationType === 'immediate') && (
<IssuerMenu defaultOpen={isLarge} stacked={!isLarge}>
Expand Down
6 changes: 3 additions & 3 deletions centrifuge-app/src/components/Menu/styles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export const baseButton = css<{ isActive?: boolean }>`
}
`

export const primaryButton = css<{ isActive?: boolean; stacked?: boolean }>`
export const primaryButton = css<{ isActive?: boolean; stacked?: boolean; isMedium?: boolean }>`
display: grid;
gap: ${({ stacked, theme }) => (stacked ? 0 : `${theme.space[1]}px`)};
grid-template-rows: ${({ stacked }) => (stacked ? '20px 1fr' : '1fr')};
Expand All @@ -38,8 +38,8 @@ export const primaryButton = css<{ isActive?: boolean; stacked?: boolean }>`
svg {
display: block;
width: ${({ theme }) => theme.sizes.iconSmall}px;
height: ${({ theme }) => theme.sizes.iconSmall}px;
width: ${({ theme, isMedium }) => (isMedium ? theme.sizes.iconSmall : theme.sizes.iconMedium)}px;
height: ${({ theme, isMedium }) => (isMedium ? theme.sizes.iconSmall : theme.sizes.iconMedium)}px;
object-fit: contain;
}
`
90 changes: 49 additions & 41 deletions centrifuge-app/src/components/PoolCard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@ import Decimal from 'decimal.js-light'
import { useRouteMatch } from 'react-router'
import { useTheme } from 'styled-components'
import { formatBalance, formatPercentage } from '../../utils/formatting'
import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
import { Eththumbnail } from '../EthThumbnail'
import { Anchor, Ellipsis, Root } from '../ListItemCardStyles'
import { Tooltips } from '../Tooltips'
import { PoolStatus, PoolStatusKey } from './PoolStatus'

const columns_base = 'minmax(150px, 2fr) minmax(100px, 1fr) 140px 70px 150px'
const columns_extended = 'minmax(200px, 2fr) minmax(100px, 1fr) 140px 100px 150px'
export const COLUMNS = [columns_base, columns_base, columns_base, columns_extended]
export const COLUMNS = ['minmax(100px, 1fr) 1fr', 'minmax(100px, 1fr) 1fr', columns_base, columns_extended]
export const COLUMN_GAPS = [3, 3, 6, 8]

export type PoolCardProps = {
Expand All @@ -37,6 +38,7 @@ export function PoolCard({
iconUri,
isLoading,
}: PoolCardProps) {
const isMedium = useIsAboveBreakpoint('M')
const basePath = useRouteMatch(['/pools', '/issuer'])?.path || '/pools'
const { sizes, zIndices } = useTheme()

Expand All @@ -57,52 +59,58 @@ export function PoolCard({
</TextWithPlaceholder>
</Grid>

<TextWithPlaceholder as="span" variant="body2" color="textSecondary" isLoading={isLoading}>
<Ellipsis>{assetClass}</Ellipsis>
</TextWithPlaceholder>
{isMedium && (
<TextWithPlaceholder as="span" variant="body2" color="textSecondary" isLoading={isLoading}>
<Ellipsis>{assetClass}</Ellipsis>
</TextWithPlaceholder>
)}

<TextWithPlaceholder as="span" variant="body1" color="textPrimary" textAlign="right" isLoading={isLoading}>
<Ellipsis>{valueLocked ? formatBalance(valueLocked, currencySymbol) : '-'}</Ellipsis>
</TextWithPlaceholder>

<TextWithPlaceholder
as="span"
variant="body1"
color="textPrimary"
fontWeight={500}
textAlign="left"
isLoading={isLoading}
maxLines={1}
>
<Ellipsis>
{apr ? (
formatPercentage(apr.toAprPercent(), true, {
minimumFractionDigits: 1,
maximumFractionDigits: 1,
})
) : name?.toLowerCase().includes('anemoy') ? (
<Tooltips
style={{ zIndex: zIndices.overlay }}
type="tbillApr"
label={
<>
<Text fontWeight={500} variant="body1">
5.0%
</Text>
<Text variant="body3"> target</Text>{' '}
</>
}
/>
) : (
'—'
)}
</Ellipsis>
{status === 'Upcoming' && apr ? <Text variant="body3"> target</Text> : ''}
</TextWithPlaceholder>
{isMedium && (
<TextWithPlaceholder
as="span"
variant="body1"
color="textPrimary"
fontWeight={500}
textAlign="left"
isLoading={isLoading}
maxLines={1}
>
<Ellipsis>
{apr ? (
formatPercentage(apr.toAprPercent(), true, {
minimumFractionDigits: 1,
maximumFractionDigits: 1,
})
) : name?.toLowerCase().includes('anemoy') ? (
<Tooltips
style={{ zIndex: zIndices.overlay }}
type="tbillApr"
label={
<>
<Text fontWeight={500} variant="body1">
5.0%
</Text>
<Text variant="body3"> target</Text>{' '}
</>
}
/>
) : (
'—'
)}
</Ellipsis>
{status === 'Upcoming' && apr ? <Text variant="body3"> target</Text> : ''}
</TextWithPlaceholder>
)}

<Box>
<PoolStatus status={status} />
</Box>
{isMedium && (
<Box>
<PoolStatus status={status} />
</Box>
)}
</Grid>

{status === 'Upcoming' ? null : <Anchor to={`${basePath}/${poolId}`} aria-label={`Go to ${name} details`} />}
Expand Down
Loading

0 comments on commit b4f0fb2

Please sign in to comment.