Swap media query classes to numbers (lists) (#2733)

This commit is contained in:
Jaco Greeff 2020-05-13 11:17:45 +02:00 committed by GitHub
parent 682a70b158
commit 4e6824f272
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 153 additions and 97 deletions

View File

@ -8,10 +8,10 @@
"packages/*"
],
"resolutions": {
"@polkadot/api": "^1.14.0-beta.16",
"@polkadot/api-contract": "^1.14.0-beta.16",
"@polkadot/api": "^1.14.0-beta.18",
"@polkadot/api-contract": "^1.14.0-beta.18",
"@polkadot/keyring": "^2.10.0-beta.5",
"@polkadot/types": "^1.14.0-beta.16",
"@polkadot/types": "^1.14.0-beta.18",
"@polkadot/util": "^2.10.0-beta.5",
"@polkadot/util-crypto": "^2.10.0-beta.5",
"babel-core": "^7.0.0-bridge.0",

View File

@ -320,7 +320,7 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
))}
</div>
</td>
<td className='number'>
<td className='number ui--media-1500'>
{balancesAll && formatNumber(balancesAll.accountNonce)}
</td>
<td className='number'>
@ -435,7 +435,7 @@ function Account ({ account: { address, meta }, className, filter, isFavorite, s
</Menu>
</Popup>
</td>
<td className='mini'>
<td className='mini ui--media-1400'>
<LinkExternal
className='ui--AddressCard-exporer-link'
data={address}

View File

@ -126,9 +126,10 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
[t('parent'), 'address'],
[t('type')],
[t('tags'), 'start'],
[t('transactions')],
[t('transactions'), 'ui--media-1500'],
[t('balances')],
[undefined, undefined, 2]
[undefined, undefined],
[undefined, 'ui--media-1400']
], [t]);
const footer = useMemo(() => (

View File

@ -188,7 +188,7 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
))}
</div>
</td>
<td className='number'>
<td className='number ui--media-1500'>
{balancesAll && formatNumber(balancesAll.accountNonce)}
</td>
<td className='number'>
@ -243,7 +243,7 @@ function Address ({ address, className, filter, isFavorite, toggleFavorite }: Pr
</Menu>
</Popup>
</td>
<td className='mini'>
<td className='mini ui--media-1400'>
<LinkExternal
className='ui--AddressCard-exporer-link'
data={address}

View File

@ -42,9 +42,10 @@ function Overview ({ className, onStatusChange }: Props): React.ReactElement<Pro
const header = useMemo(() => [
[t('contacts'), 'start', 2],
[t('tags'), 'start'],
[t('transactions')],
[t('transactions'), 'ui--media-1500'],
[t('balances')],
[undefined, undefined, 2]
[undefined, undefined],
[undefined, 'ui--media-1400']
], [t]);
const filter = useMemo(() => (

View File

@ -12,6 +12,6 @@
"license": "Apache-2.0",
"dependencies": {
"@babel/runtime": "^7.9.6",
"@polkadot/api-contract": "^1.14.0-beta.16"
"@polkadot/api-contract": "^1.14.0-beta.18"
}
}

View File

@ -46,7 +46,7 @@ function DispatchEntry ({ value: { at, image, imageHash, index } }: Props): Reac
/>
)}
</td>
<td className='mini hide-small'>
<td className='mini ui--media-1000'>
<LinkExternal
data={index}
type='referendum'

View File

@ -24,7 +24,7 @@ function DispatchQueue ({ className }: Props): React.ReactElement<Props> | null
[t('dispatch queue'), 'start', 2],
[t('enact')],
[undefined, undefined],
[undefined, 'hide-small']
[undefined, 'ui--media-1000']
], [t]);
return (

View File

@ -34,7 +34,7 @@ function Proposal ({ className, value: { balance, image, imageHash, index, propo
<td className='address'>
<AddressMini value={proposer} />
</td>
<td className='number together'>
<td className='number together ui--media-1200'>
<FormatBalance value={balance} />
</td>
<td>
@ -64,7 +64,7 @@ function Proposal ({ className, value: { balance, image, imageHash, index, propo
)}
</Button.Group>
</td>
<td className='mini hide-small'>
<td className='mini ui--media-1000'>
<LinkExternal
data={index}
type='proposal'

View File

@ -23,9 +23,9 @@ function Proposals ({ className }: Props): React.ReactElement<Props> {
const header = useMemo(() => [
[t('proposals'), 'start', 2],
[t('proposer'), 'address'],
[t('locked')],
[t('locked'), 'ui--media-1200'],
[undefined, undefined, 2],
[undefined, 'hide-small']
[undefined, 'ui--media-1000']
], [t]);
return (

View File

@ -56,7 +56,7 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
imageHash={imageHash}
proposal={image?.proposal}
/>
<td className='number together hide-medium'>
<td className='number together ui--media-1400'>
{turnoutPercentage && (
<>
<FormatBalance value={votedTotal} />
@ -64,11 +64,11 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
</>
)}
</td>
<td className='number together'>
<td className='number together ui--media-1200'>
<BlockToTime blocks={remainBlock} />
{t('{{blocks}} blocks', { replace: { blocks: formatNumber(remainBlock) } })}
</td>
<td className='number together'>
<td className='number together ui--media-1400'>
<BlockToTime blocks={enactBlock.sub(bestNumber)} />
#{formatNumber(enactBlock)}
</td>
@ -113,7 +113,7 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
)}
</Button.Group>
</td>
<td className='mini hide-small'>
<td className='mini ui--media-1000'>
<LinkExternal
data={index}
type='referendum'

View File

@ -20,13 +20,13 @@ function Referendums ({ className, referendums }: Props): React.ReactElement<Pro
const header = useMemo(() => [
[t('referenda'), 'start', 2],
[t('turnout'), 'hide-medium'],
[t('remaining')],
[t('activate')],
[t('turnout'), 'ui--media-1400'],
[t('remaining'), 'ui--media-1200'],
[t('activate'), 'ui--media-1400'],
[t('aye')],
[t('nay')],
[undefined, undefined, 2],
[undefined, 'hide-small']
[undefined, 'ui--media-1000']
], [t]);
return (

View File

@ -115,7 +115,7 @@ function Account ({ className, info: { controllerId, destination, destinationId,
<td className='address'>
<AddressMini value={controllerId} />
</td>
<td className='number'>{destination}</td>
<td className='number ui--media-1200'>{destination}</td>
<td className='number'>
<StakingBonded stakingInfo={stakingAccount} />
<StakingUnbonding stakingInfo={stakingAccount} />

View File

@ -56,7 +56,7 @@ function Actions ({ className, isInElection, next, ownStashes, targets, validato
const header = useMemo(() => [
[t('stashes'), 'start'],
[t('controller'), 'address'],
[t('rewards'), 'number'],
[t('rewards'), 'number ui--media-1200'],
[t('bonded'), 'number'],
[undefined, undefined, 2]
], [t]);

View File

@ -31,7 +31,7 @@
"homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-reactive#readme",
"dependencies": {
"@babel/runtime": "^7.9.6",
"@polkadot/api": "^1.14.0-beta.16",
"@polkadot/api": "^1.14.0-beta.18",
"@polkadot/extension-dapp": "^0.25.0-beta.6",
"rxjs-compat": "^6.5.5"
}

View File

@ -96,18 +96,6 @@ export default React.memo(styled(Table)`
white-space: normal;
}
}
&.hide-medium {
@media only screen and (max-width: 1400px) {
display: none;
}
}
&.hide-small {
@media only screen and (max-width: 1000px) {
display: none;
}
}
}
}
}

View File

@ -30,6 +30,72 @@ export default css`
display: none;
}
.ui--media-1600 {
@media only screen and (max-width: 1600px) {
width: none;
}
}
.ui--media-1500 {
@media only screen and (max-width: 1500px) {
display: none;
}
}
.ui--media-1400 {
@media only screen and (max-width: 1400px) {
display: none;
}
}
.ui--media-1300 {
@media only screen and (max-width: 1300px) {
display: none;
}
}
.ui--media-1200 {
@media only screen and (max-width: 1200px) {
display: none;
}
}
.ui--media-1100 {
@media only screen and (max-width: 1100px) {
display: none;
}
}
.ui--media-1000 {
@media only screen and (max-width: 1000px) {
display: none;
}
}
.ui--media-900 {
@media only screen and (max-width: 900px) {
display: none;
}
}
.ui--media-800 {
@media only screen and (max-width: 800px) {
display: none;
}
}
.ui--media-8700 {
@media only screen and (max-width: 700px) {
display: none;
}
}
.ui--media-600 {
@media only screen and (max-width: 600px) {
display: none;
}
}
@media (min-width: 1281px) {
.ui--flex-large {
display: flex;

112
yarn.lock
View File

@ -2848,57 +2848,57 @@ __metadata:
languageName: node
linkType: hard
"@polkadot/api-contract@npm:^1.14.0-beta.16":
version: 1.14.0-beta.16
resolution: "@polkadot/api-contract@npm:1.14.0-beta.16"
"@polkadot/api-contract@npm:^1.14.0-beta.18":
version: 1.14.0-beta.18
resolution: "@polkadot/api-contract@npm:1.14.0-beta.18"
dependencies:
"@babel/runtime": ^7.9.6
"@polkadot/api": 1.14.0-beta.16
"@polkadot/rpc-core": 1.14.0-beta.16
"@polkadot/types": 1.14.0-beta.16
"@polkadot/api": 1.14.0-beta.18
"@polkadot/rpc-core": 1.14.0-beta.18
"@polkadot/types": 1.14.0-beta.18
"@polkadot/util": ^2.10.0-beta.5
bn.js: ^5.1.1
rxjs: ^6.5.5
checksum: 3/78ff09a56768ffe0735ad961f1e6e17843508a01d6ff906bad6955f1e3bbcb65f67251e1debf3e4f22a8bfe2e1aa51f6fd1d0b5b5b5b87ac0872d60e4429ec2c
checksum: 3/da367d250d60d710367cb1c1939a12a9cffdc507d3686a374851f0aaf750fc623e37572d07308eca1b10e47f7fd19f1175c0399cb479507c863d433f89ce8654
languageName: node
linkType: hard
"@polkadot/api-derive@npm:1.14.0-beta.16":
version: 1.14.0-beta.16
resolution: "@polkadot/api-derive@npm:1.14.0-beta.16"
"@polkadot/api-derive@npm:1.14.0-beta.18":
version: 1.14.0-beta.18
resolution: "@polkadot/api-derive@npm:1.14.0-beta.18"
dependencies:
"@babel/runtime": ^7.9.6
"@polkadot/api": 1.14.0-beta.16
"@polkadot/rpc-core": 1.14.0-beta.16
"@polkadot/rpc-provider": 1.14.0-beta.16
"@polkadot/types": 1.14.0-beta.16
"@polkadot/api": 1.14.0-beta.18
"@polkadot/rpc-core": 1.14.0-beta.18
"@polkadot/rpc-provider": 1.14.0-beta.18
"@polkadot/types": 1.14.0-beta.18
"@polkadot/util": ^2.10.0-beta.5
"@polkadot/util-crypto": ^2.10.0-beta.5
bn.js: ^5.1.1
memoizee: ^0.4.14
rxjs: ^6.5.5
checksum: 3/096f198c7b7f2cfea372ae13d469f9f63506a1300ab3fae2d102a40a9d1ca0190e730253b12ab129eb889c44fa3432c22aba3eb8aa8c7059899e237fb0605006
checksum: 3/80e9fc5f3db1fbb1576c44645ba561a8df40a75ee739912e23d1b76824863a5df7dc64752fcef398104c213289c62b930c211689c044cea553488f316ca55a59
languageName: node
linkType: hard
"@polkadot/api@npm:^1.14.0-beta.16":
version: 1.14.0-beta.16
resolution: "@polkadot/api@npm:1.14.0-beta.16"
"@polkadot/api@npm:^1.14.0-beta.18":
version: 1.14.0-beta.18
resolution: "@polkadot/api@npm:1.14.0-beta.18"
dependencies:
"@babel/runtime": ^7.9.6
"@polkadot/api-derive": 1.14.0-beta.16
"@polkadot/api-derive": 1.14.0-beta.18
"@polkadot/keyring": ^2.10.0-beta.5
"@polkadot/metadata": 1.14.0-beta.16
"@polkadot/rpc-core": 1.14.0-beta.16
"@polkadot/rpc-provider": 1.14.0-beta.16
"@polkadot/types": 1.14.0-beta.16
"@polkadot/types-known": 1.14.0-beta.16
"@polkadot/metadata": 1.14.0-beta.18
"@polkadot/rpc-core": 1.14.0-beta.18
"@polkadot/rpc-provider": 1.14.0-beta.18
"@polkadot/types": 1.14.0-beta.18
"@polkadot/types-known": 1.14.0-beta.18
"@polkadot/util": ^2.10.0-beta.5
"@polkadot/util-crypto": ^2.10.0-beta.5
bn.js: ^5.1.1
eventemitter3: ^4.0.1
rxjs: ^6.5.5
checksum: 3/87c03f46b5741d1d2868b46a6251a12869457c349ca44cf110730765cb9010bf1ed3c09b66a672cc64b03ffea27dbda5a186f7be66b90b849dce9f106ad0c54f
checksum: 3/408e59124493eaffb91cb9cb774cec1f5cbdf5256ada0db02b1e68f12a6293aa38d18a24a72f743d7774b6e870d8be9fad7747314570d08ea7252567655f4bdd
languageName: node
linkType: hard
@ -2939,7 +2939,7 @@ __metadata:
resolution: "@polkadot/app-contracts@workspace:packages/page-contracts"
dependencies:
"@babel/runtime": ^7.9.6
"@polkadot/api-contract": ^1.14.0-beta.16
"@polkadot/api-contract": ^1.14.0-beta.18
languageName: unknown
linkType: soft
@ -3274,17 +3274,17 @@ __metadata:
languageName: node
linkType: hard
"@polkadot/metadata@npm:1.14.0-beta.16":
version: 1.14.0-beta.16
resolution: "@polkadot/metadata@npm:1.14.0-beta.16"
"@polkadot/metadata@npm:1.14.0-beta.18":
version: 1.14.0-beta.18
resolution: "@polkadot/metadata@npm:1.14.0-beta.18"
dependencies:
"@babel/runtime": ^7.9.6
"@polkadot/types": 1.14.0-beta.16
"@polkadot/types-known": 1.14.0-beta.16
"@polkadot/types": 1.14.0-beta.18
"@polkadot/types-known": 1.14.0-beta.18
"@polkadot/util": ^2.10.0-beta.5
"@polkadot/util-crypto": ^2.10.0-beta.5
bn.js: ^5.1.1
checksum: 3/4a233bcee914adb4a9bf8d80b20012bf4ee6032b2bb61d2519592733989d8a07696d90c65f23911561f0e1c5b129608cb26b887e619263c851514e8df65a0374
checksum: 3/d1b9711fe5c3c11cf8f7ae82fec5f269d586ebf62199e5677a5586cff5368776a0dab724c184edb5cf257a96a20cd40d408e66e4fb0091ed89dfde7f0ecd158b
languageName: node
linkType: hard
@ -3293,7 +3293,7 @@ __metadata:
resolution: "@polkadot/react-api@workspace:packages/react-api"
dependencies:
"@babel/runtime": ^7.9.6
"@polkadot/api": ^1.14.0-beta.16
"@polkadot/api": ^1.14.0-beta.18
"@polkadot/extension-dapp": ^0.25.0-beta.6
rxjs-compat: ^6.5.5
languageName: unknown
@ -3409,35 +3409,35 @@ __metadata:
languageName: unknown
linkType: soft
"@polkadot/rpc-core@npm:1.14.0-beta.16":
version: 1.14.0-beta.16
resolution: "@polkadot/rpc-core@npm:1.14.0-beta.16"
"@polkadot/rpc-core@npm:1.14.0-beta.18":
version: 1.14.0-beta.18
resolution: "@polkadot/rpc-core@npm:1.14.0-beta.18"
dependencies:
"@babel/runtime": ^7.9.6
"@polkadot/metadata": 1.14.0-beta.16
"@polkadot/rpc-provider": 1.14.0-beta.16
"@polkadot/types": 1.14.0-beta.16
"@polkadot/metadata": 1.14.0-beta.18
"@polkadot/rpc-provider": 1.14.0-beta.18
"@polkadot/types": 1.14.0-beta.18
"@polkadot/util": ^2.10.0-beta.5
memoizee: ^0.4.14
rxjs: ^6.5.5
checksum: 3/ee42e231eeaaa8c89f15f279ee6605e9b210b88f6db6207a2eac8f6d708491f9f8cc3c9190de3dae9724be5e26e9446c3897e701690bd7d5afc5a72fe684d7f0
checksum: 3/c63cdda8dfc450e3d334c88a2c51892d14541d3e9a192f8f8320c4a86929230370cb4c8958ef9c2ae34f80372910cb8ff65e64c2eb8694db18c986f576dc08d0
languageName: node
linkType: hard
"@polkadot/rpc-provider@npm:1.14.0-beta.16":
version: 1.14.0-beta.16
resolution: "@polkadot/rpc-provider@npm:1.14.0-beta.16"
"@polkadot/rpc-provider@npm:1.14.0-beta.18":
version: 1.14.0-beta.18
resolution: "@polkadot/rpc-provider@npm:1.14.0-beta.18"
dependencies:
"@babel/runtime": ^7.9.6
"@polkadot/metadata": 1.14.0-beta.16
"@polkadot/types": 1.14.0-beta.16
"@polkadot/metadata": 1.14.0-beta.18
"@polkadot/types": 1.14.0-beta.18
"@polkadot/util": ^2.10.0-beta.5
"@polkadot/util-crypto": ^2.10.0-beta.5
bn.js: ^5.1.1
eventemitter3: ^4.0.1
isomorphic-fetch: ^2.2.1
websocket: ^1.0.31
checksum: 3/5f6f0c458eec6741de1e68314fe71951f6a2b10b854bff3cb8bbf7ac044c82d5984f8ef2b804a21d9834f362825f1a1badcfd16a26313db85d3d58045b8997a4
checksum: 3/10aa43b755708fc1cb2d882de8785af88ca48c803ca19f14c468af9e1fa1376bb003947e596ed9aa47ffc2738cc9415750f71383e08fed93fd3ba468d487aae5
languageName: node
linkType: hard
@ -3450,31 +3450,31 @@ __metadata:
languageName: node
linkType: hard
"@polkadot/types-known@npm:1.14.0-beta.16":
version: 1.14.0-beta.16
resolution: "@polkadot/types-known@npm:1.14.0-beta.16"
"@polkadot/types-known@npm:1.14.0-beta.18":
version: 1.14.0-beta.18
resolution: "@polkadot/types-known@npm:1.14.0-beta.18"
dependencies:
"@babel/runtime": ^7.9.6
"@polkadot/types": 1.14.0-beta.16
"@polkadot/types": 1.14.0-beta.18
"@polkadot/util": ^2.10.0-beta.5
bn.js: ^5.1.1
checksum: 3/2b26d6cc14c10d11de4ec9c81a80e0672fe7ab2a01fda434141de771cce5952d5f49bb0340c63a295d59c4445c81f01786fcf5216976baf1daceba5fd80e4a37
checksum: 3/fbfa1b43235f8e10ed0606dfb65cb89bc7680de2a5bb03a305d219e43ef68857cf6daae32b192e12f4145d8983d2513f9000159f17ac91348f832fcc87e6431d
languageName: node
linkType: hard
"@polkadot/types@npm:^1.14.0-beta.16":
version: 1.14.0-beta.16
resolution: "@polkadot/types@npm:1.14.0-beta.16"
"@polkadot/types@npm:^1.14.0-beta.18":
version: 1.14.0-beta.18
resolution: "@polkadot/types@npm:1.14.0-beta.18"
dependencies:
"@babel/runtime": ^7.9.6
"@polkadot/metadata": 1.14.0-beta.16
"@polkadot/metadata": 1.14.0-beta.18
"@polkadot/util": ^2.10.0-beta.5
"@polkadot/util-crypto": ^2.10.0-beta.5
"@types/bn.js": ^4.11.6
bn.js: ^5.1.1
memoizee: ^0.4.14
rxjs: ^6.5.5
checksum: 3/976fc6ff2cc7e13238a579e5c04cfd196268a6643d8956d79b571a538deab6b9ff1bd3becc93b1add577a26ae06f25aeb247514ba5550f58471e49c6106deeea
checksum: 3/17eecd2902ac8053199fdc9b29531e53e7e48800715481a4b2201767fb5a5b8ba07aa8abcbfffbfdb68ed025e3e6921052a19168a94ec3521a46255e3dafe6a2
languageName: node
linkType: hard