neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust Table component spacing (#8674)

Browse Source 
* Adjust Table component spacing

* px

* Add isExpanded

* Cleanup border placement

* Ref sizing
This commit is contained in:
Jaco 2023-01-02 19:49:25 +02:00 committed by GitHub
parent 8707681f87
commit e3824c04c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 40 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/page-accounts/src/Accounts/Account.tsx
View File

@ -470,7 +470,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
return (
<>
<tr className={`${className} noBorder`}>
<tr className={`${className} packedBottom`}>
<td className='favorite'>
<Icon
color={isFavorite ? 'orange' : 'gray'}
@ -701,7 +701,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
</div>
</td>
</tr>
<tr className={`${className} ${isExpanded ? 'noBorder' : ''} packed`}>
<tr className={`${className} isExpanded ${isExpanded ? 'packedAll' : 'packedTop'}`}>
<td />
<td className='balance all'>
<AddressInfo
@ -722,7 +722,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
)}
</td>
</tr>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packed`}>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
<td />
<td className='columar'>
<AddressInfo

6
packages/page-addresses/src/Contacts/Address.tsx
View File

@ -183,7 +183,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
return (
<>
<tr className={`${className} noBorder`}>
<tr className={`${className} packedBottom`}>
<td className='favorite'>
<Icon
color={isFavorite ? 'orange' : 'gray'}
@ -227,7 +227,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
</div>
</td>
</tr>
<tr className={`${className} ${isExpanded ? 'noBorder' : ''} packed`}>
<tr className={`${className} isExpanded ${isExpanded ? 'packedAll' : 'packedTop'}`}>
<td />
<td className='balance all'>
<AddressInfo
@ -249,7 +249,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
)}
</td>
</tr>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packed`}>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
<td />
<td className='columar'>
<AddressInfo

2
packages/page-bounties/src/Bounty.tsx
View File

@ -57,7 +57,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
return (
<>
<tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
<tr className={className}>
<td className='number'><h1>{formatNumber(index)}</h1></td>
<td
className='description-column'

2
packages/page-democracy/src/Overview/External.tsx
View File

@ -24,7 +24,7 @@ function External ({ className = '', value: { image, imageHash, threshold } }: P
return (
<>
<tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
<tr className={className}>
<ProposalCell
imageHash={imageHash}
proposal={image?.proposal}

2
packages/page-democracy/src/Overview/Proposal.tsx
View File

@ -43,7 +43,7 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
return (
<>
<tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
<tr className={className}>
<td className='number'><h1>{formatNumber(index)}</h1></td>
<ProposalCell
imageHash={imageHash}

2
packages/page-democracy/src/Overview/Referendum.tsx
View File

@ -91,7 +91,7 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
return (
<>
<tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
<tr className={className}>
<td className='number'><h1>{formatNumber(index)}</h1></td>
<ProposalCell
imageHash={imageHash}

2
packages/page-referenda/src/Referenda/Group.tsx
View File

@ -57,7 +57,7 @@ function Group ({ activeIssuance, className, isMember, members, palletReferenda,
[
[trackName ? <>{trackName}<div className='sub'>{trackInfo?.text}</div></> : t('referenda'), 'start', 5],
[undefined, 'number', 2],
[headerButton, 'media--1000']
[headerButton]
],
trackName
? `track:${trackName}`

7
packages/page-referenda/src/Referenda/Referendum.tsx
View File

@ -370,12 +370,12 @@ function Referendum (props: Props): React.ReactElement<Props> {
return (
<>
<tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
<tr className={className}>
<td className='number'>
<h1>{formatNumber(id)}</h1>
</td>
<Component {...props} />
<td className='action media--1000'>
<td className='action'>
<ExpandButton
expanded={isExpanded}
onClick={toggleExpanded}
@ -386,7 +386,7 @@ function Referendum (props: Props): React.ReactElement<Props> {
<td />
<td
className='columar'
colSpan={7}
colSpan={6}
>
{chartProps && (
<Columar>
@ -436,6 +436,7 @@ function Referendum (props: Props): React.ReactElement<Props> {
</Columar.Column>
</Columar>
</td>
<td />
</tr>
</>
);

4
packages/page-settings/src/Metadata/Extensions.tsx
View File

@ -57,7 +57,7 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
{extensions
? options.length !== 0 && (
<>
<tr className='noBorder'>
<tr>
<td>
<Dropdown
label={t<string>('upgradable extensions')}
@ -67,7 +67,7 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
/>
</td>
</tr>
<tr className='isOdd'>
<tr className='isExpanded'>
<td>
<Button.Group>
<Button

2
packages/page-settings/src/Metadata/NetworkSpecs.tsx
View File

@ -122,7 +122,7 @@ function NetworkSpecs ({ chainInfo, className }: Props): React.ReactElement<Prop
<ChainImg className='settings--networkSpecs-logo' />
</div>
</td>
<td rowSpan={6}>
<td rowSpan={7}>
{qrData.genesisHash && (
<QrNetworkSpecs
className='settings--networkSpecs-qr'

2
packages/page-staking/src/Pools/Pool.tsx
View File

@ -55,7 +55,7 @@ function Pool ({ className = '', members, ownAccounts, params, poolId }: Props):
return (
<>
<tr className={`${className}${isExpanded ? ' noBorder' : ''}`}>
<tr className={className}>
<td className='number'><h1>{formatNumber(poolId)}</h1></td>
<td className='start'>{info && info.metadata}</td>
<td className='number media--1100'>{info && info.bonded.state.type}</td>

49
packages/react-components/src/Table/index.tsx
View File

@ -111,7 +111,8 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer,
);
}
const BORDER_WIDTH = '0.125rem';
const BORDER_WIDTH_BT = '2px';
const BORDER_WIDTH_LR = '1px'; // 50% of bottom/top for isSplit
export default React.memo(styled(Table)`
max-width: 100%;
@ -124,10 +125,6 @@ export default React.memo(styled(Table)`
> .ui--Columar {
margin-bottom: 1.5rem;
> .ui--Column > table {
margin-bottom: -${BORDER_WIDTH};
}
}
}
@ -196,7 +193,7 @@ export default React.memo(styled(Table)`
position: relative;
td {
border-bottom: ${BORDER_WIDTH} solid var(--border-table);
border-top: ${BORDER_WIDTH_BT} solid var(--border-table);
padding: 0.5rem 1rem;
text-align: left;
vertical-align: middle;
@ -206,11 +203,11 @@ export default React.memo(styled(Table)`
}
&:first-child {
border-left: 1px solid var(--border-table);
border-left: ${BORDER_WIDTH_LR} solid var(--border-table);
}
&:last-child {
border-right: 1px solid var(--border-table);
border-right: ${BORDER_WIDTH_LR} solid var(--border-table);
}
label {
@ -245,7 +242,7 @@ export default React.memo(styled(Table)`
}
&.button {
padding: 0.25rem 0.5rem;
padding: 0.25rem 0.5rem 0.5rem;
text-align: right;
white-space: nowrap;
@ -406,21 +403,9 @@ export default React.memo(styled(Table)`
tr {
background: var(--bg-table);
&:first-child {
& + tr.isExpanded {
td {
border-top: ${BORDER_WIDTH} solid var(--bg-page);
}
}
&:last-child {
td {
border-bottom: ${BORDER_WIDTH} solid var(--border-table);
}
}
&.packed, &.packedTop {
td {
padding-top: 0;
border-top: none;
}
}
@ -430,13 +415,21 @@ export default React.memo(styled(Table)`
}
}
&.transparent {
background: transparent;
&.packedTop {
td {
padding-top: 0;
}
}
&.noBorder td {
border-bottom: 1px solid transparent;
padding-bottom: 0 !important;
&.packedAll {
td {
padding-bottom: 0;
padding-top: 0;
}
}
&.transparent {
background: transparent;
}
&.isCollapsed {