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

Adjust Table borders (w/ spacing) (#8729)

Browse Source 
* Adjust Table borders (w/ spacing)

* Background only on cells
This commit is contained in:
Jaco 2023-01-08 15:54:26 +02:00 committed by GitHub
parent bd740973ed
commit ac2e910d8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 116 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/apps/public/index.html
View File

@ -44,7 +44,7 @@
--color-summary: rgba(244, 242, 240, 0.75);
--color-table-foot: rgba(254, 240, 240, 0.66);
--color-table-head: rgba(254, 240, 240, 0.66);
--color-text: rgba(244, 242, 240, 0.9);
--color-text: rgba(244, 242, 240, 0.8);
}
[data-theme="light"] {

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

@ -465,7 +465,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
return (
<>
<tr className={`${className} packedBottom`}>
<tr className={`${className} isExpanded isFirst packedBottom`}>
<Table.Column.Favorite
address={address}
isFavorite={isFavorite}
@ -702,7 +702,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
toggle={toggleIsExpanded}
/>
</tr>
<tr className={`${className} isExpanded packedTop`}>
<tr className={`${className} isExpanded ${isExpanded ? '' : 'isLast'} packedTop`}>
<td />
<td
className='balance all'
@ -717,7 +717,7 @@ function Account ({ account: { address, meta }, className = '', delegation, filt
</td>
<td />
</tr>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
<tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'} packedTop`}>
<td />
<td
className='balance columar'

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

@ -178,7 +178,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
return (
<>
<tr className={`${className} packedBottom`}>
<tr className={`${className} isExpanded isFirst packedBottom`}>
<Table.Column.Favorite
address={address}
isFavorite={isFavorite}
@ -229,7 +229,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
toggle={toggleIsExpanded}
/>
</tr>
<tr className={`${className} isExpanded packedTop`}>
<tr className={`${className} isExpanded ${isExpanded ? '' : 'isLast'} packedTop`}>
<td />
<td
className='balance all'
@ -244,7 +244,7 @@ function Address ({ address, className = '', filter, isFavorite, toggleFavorite
</td>
<td />
</tr>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
<tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'} packedTop`}>
<td />
<td
className='balance columar'

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

@ -56,7 +56,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
return (
<>
<tr className={className}>
<tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
<Table.Column.Id value={index} />
<td
className='description-column'
@ -131,7 +131,7 @@ function Bounty ({ bestNumber, bounty, className = '', description, index, propo
</div>
</td>
</tr>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
<tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
<td />
<td
className='columar'

4
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}>
<tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
<ProposalCell
imageHash={imageHash}
proposal={image?.proposal}
@ -56,7 +56,7 @@ function External ({ className = '', value: { image, imageHash, threshold } }: P
</Button.Group>
</td>
</tr>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
<tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
<td
className='columar'
colSpan={100}

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

@ -42,7 +42,7 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
return (
<>
<tr className={className}>
<tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
<Table.Column.Id value={index} />
<ProposalCell
imageHash={imageHash}
@ -81,7 +81,7 @@ function Proposal ({ className = '', value: { balance, image, imageHash, index,
</Button.Group>
</td>
</tr>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
<tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
<td />
<td
className='columar'

4
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}>
<tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
<Table.Column.Id value={index} />
<ProposalCell
imageHash={imageHash}
@ -171,7 +171,7 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
</Button.Group>
</td>
</tr>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
<tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
<td />
<td
className='columar'

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

@ -390,7 +390,7 @@ function Referendum (props: Props): React.ReactElement<Props> {
return (
<>
<tr className={className}>
<tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
<Table.Column.Id value={id} />
<Component {...props} />
<td className='actions'>
@ -402,7 +402,7 @@ function Referendum (props: Props): React.ReactElement<Props> {
</div>
</td>
</tr>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'}`}>
<tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'}`}>
<td />
<td
className='columar'

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>
<tr className='isExpanded isFirst'>
<td>
<Dropdown
label={t<string>('upgradable extensions')}
@ -67,7 +67,7 @@ function Extensions ({ chainInfo, className }: Props): React.ReactElement<Props>
/>
</td>
</tr>
<tr className='isExpanded'>
<tr className='isExpanded isLast'>
<td>
<Button.Group>
<Button

4
packages/page-staking/src/Validators/Address/index.tsx
View File

@ -124,7 +124,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
return (
<>
<tr className={`${className} ${isExpanded ? 'packedBottom' : ''}`}>
<tr className={`${className} isFirst ${isExpanded ? 'packedBottom' : 'isLast'}`}>
<Table.Column.Favorite
address={address}
isFavorite={isFavorite}
@ -180,7 +180,7 @@ function Address ({ address, className = '', filterName, hasQueries, isElected,
/>
</tr>
{isExpanded && (
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
<tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'} packedTop`}>
<td colSpan={2} />
<td
className='columar'

4
packages/page-treasury/src/Overview/Proposal.tsx
View File

@ -37,7 +37,7 @@ function ProposalDisplay ({ className = '', isMember, members, proposal: { counc
return (
<>
<tr className={className}>
<tr className={`${className} isExpanded isFirst ${isExpanded ? '' : 'isLast'}`}>
<Table.Column.Id value={id} />
<td className='address all'>
<AddressSmall value={proposal.beneficiary} />
@ -71,7 +71,7 @@ function ProposalDisplay ({ className = '', isMember, members, proposal: { counc
toggle={toggleIsExpanded}
/>
</tr>
<tr className={`${className} ${isExpanded ? 'isExpanded' : 'isCollapsed'} packedTop`}>
<tr className={`${className} ${isExpanded ? 'isExpanded isLast' : 'isCollapsed'} packedTop`}>
<td />
<td
className='columar'

19
packages/react-components/src/Table/Head.tsx
View File

@ -52,6 +52,7 @@ export default React.memo(styled(Head)`
z-index: 1;
th {
background: var(--bg-table);
font: var(--font-sans);
font-weight: var(--font-weight-normal);
padding: 0.375rem 1rem;
@ -76,14 +77,6 @@ export default React.memo(styled(Head)`
}
}
&:first-child {
border-left: 1px solid var(--border-table);
}
&:last-child {
border-right: 1px solid var(--border-table);
}
&.address {
padding-left: 3rem;
text-align: left;
@ -99,7 +92,6 @@ export default React.memo(styled(Head)`
}
&.isClickable {
border-bottom: 2px solid transparent;
cursor: pointer;
}
@ -126,22 +118,15 @@ export default React.memo(styled(Head)`
}
tr {
background: var(--bg-table);
text-transform: lowercase;
&:first-child {
th {
border-top: 1px solid var(--border-table);
}
}
&.filter {
.ui.input,
.ui.selection.dropdown {
background: transparent;
&:first-child {
margin-top: -1px;
margin-top: 0;
}
}

104
packages/react-components/src/Table/Table.tsx
View File

@ -97,8 +97,8 @@ function Table ({ children, className = '', empty, emptySpinner, filter, footer,
);
}
const BORDER_WIDTH_BT = '2px';
const BORDER_WIDTH_LR = '1px'; // 50% of bottom/top for isSplit
const BORDER_RADIUS = '0.5rem';
const BORDER_WIDTH = '1px';
export default React.memo(styled(Table)`
max-width: 100%;
@ -175,7 +175,7 @@ export default React.memo(styled(Table)`
position: relative;
td {
border-top: ${BORDER_WIDTH_BT} solid var(--border-table);
background: var(--bg-table);
padding: 0.5rem 1rem;
text-align: left;
vertical-align: middle;
@ -185,11 +185,11 @@ export default React.memo(styled(Table)`
}
&:first-child {
border-left: ${BORDER_WIDTH_LR} solid var(--border-table);
border-left: ${BORDER_WIDTH} solid var(--border-table);
}
&:last-child {
border-right: ${BORDER_WIDTH_LR} solid var(--border-table);
border-right: ${BORDER_WIDTH} solid var(--border-table);
}
label {
@ -272,10 +272,6 @@ export default React.memo(styled(Table)`
padding: 0;
}
&.combined {
border-top-width: 0;
}
&.expand {
&:not(.left) {
text-align: right;
@ -384,11 +380,50 @@ export default React.memo(styled(Table)`
}
tr {
background: var(--bg-table);
& + tr.isExpanded {
&:not(.isExpanded) {
td {
border-top: none;
border-top: ${BORDER_WIDTH} solid var(--border-table);
border-bottom: ${BORDER_WIDTH} solid var(--border-table);
&:first-child {
border-top-left-radius: ${BORDER_RADIUS};
border-bottom-left-radius: ${BORDER_RADIUS};
}
&:last-child {
border-top-right-radius: ${BORDER_RADIUS};
border-bottom-right-radius: ${BORDER_RADIUS};
}
}
}
&.isExpanded {
&.isFirst {
td {
border-top: ${BORDER_WIDTH} solid var(--border-table);
&:first-child {
border-top-left-radius: ${BORDER_RADIUS};
}
&:last-child {
border-top-right-radius: ${BORDER_RADIUS};
}
}
}
&.isLast {
td {
border-bottom: ${BORDER_WIDTH} solid var(--border-table);
&:first-child {
border-bottom-left-radius: ${BORDER_RADIUS};
}
&:last-child {
border-bottom-right-radius: ${BORDER_RADIUS};
}
}
}
}
@ -434,4 +469,47 @@ export default React.memo(styled(Table)`
}
}
}
thead {
tr {
&:first-child {
th {
border-top: ${BORDER_WIDTH} solid var(--border-table);
&:first-child {
border-top-left-radius: ${BORDER_RADIUS};
}
&:last-child {
border-top-right-radius: ${BORDER_RADIUS};
}
}
}
&:last-child {
th {
border-bottom: ${BORDER_WIDTH} solid var(--border-table);
padding-top: 1rem;
&:first-child {
border-bottom-left-radius: ${BORDER_RADIUS};
}
&:last-child {
border-bottom-right-radius: ${BORDER_RADIUS};
}
}
}
th {
&:first-child {
border-left: ${BORDER_WIDTH} solid var(--border-table);
}
&:last-child {
border-right: ${BORDER_WIDTH} solid var(--border-table);
}
}
}
}
`);