From c15c11b3733ae4a46ee22b9878737783388ec9c5 Mon Sep 17 00:00:00 2001 From: Jaco Date: Sun, 8 Jan 2023 13:16:03 +0200 Subject: [PATCH] Adjust account displays with overflow (#8699) * Adjust account displays with overflow * line height adjustments * Adjust SideBar display * Adjust * Adjust AddressMini display * Adjust address column minimum * align styling * Adjust column sizing * Adjust * AccountName breaks * Adjust tags label --- .../page-accounts/src/Sidebar/Sidebar.tsx | 4 +- packages/page-explorer/src/BlockHeader.tsx | 4 +- packages/react-components/src/AccountName.tsx | 21 ++-- packages/react-components/src/AddressMini.tsx | 55 ++------- .../react-components/src/AddressSmall.tsx | 108 ++++++------------ packages/react-components/src/Table/Table.tsx | 3 +- packages/react-components/src/Tags.tsx | 2 +- 7 files changed, 60 insertions(+), 137 deletions(-) diff --git a/packages/page-accounts/src/Sidebar/Sidebar.tsx b/packages/page-accounts/src/Sidebar/Sidebar.tsx index a7999f8155..37d3eb6209 100644 --- a/packages/page-accounts/src/Sidebar/Sidebar.tsx +++ b/packages/page-accounts/src/Sidebar/Sidebar.tsx @@ -97,16 +97,16 @@ export default React.memo(styled(FullSidebar)` flex-direction: row; flex-wrap: nowrap; align-items: center; - - width: 100%; .ui--AddressSection__AddressColumn { + flex: 1; margin-left: 1rem; .ui--AccountName { max-width: 21.5rem; overflow: hidden; + white-space: normal; } } diff --git a/packages/page-explorer/src/BlockHeader.tsx b/packages/page-explorer/src/BlockHeader.tsx index 672d4655f8..9f83931889 100644 --- a/packages/page-explorer/src/BlockHeader.tsx +++ b/packages/page-explorer/src/BlockHeader.tsx @@ -6,7 +6,7 @@ import type { HeaderExtended } from '@polkadot/api-derive/types'; import React from 'react'; import { Link } from 'react-router-dom'; -import { AddressMini, Digits } from '@polkadot/react-components'; +import { AddressSmall, Digits } from '@polkadot/react-components'; import { formatNumber } from '@polkadot/util'; interface Props { @@ -28,7 +28,7 @@ function BlockHeader ({ value }: Props): React.ReactElement | null { {hashHex} {value.author && ( - + )} diff --git a/packages/react-components/src/AccountName.tsx b/packages/react-components/src/AccountName.tsx index 74a139aa12..3aa290b51e 100644 --- a/packages/react-components/src/AccountName.tsx +++ b/packages/react-components/src/AccountName.tsx @@ -118,7 +118,7 @@ function extractName (address: string, accountIndex?: AccountIndex, defaultName? const [displayName, isLocal, isAddress, isSpecial] = defaultOrAddr(defaultName, address, accountIndex); return ( -
+ {isSpecial && ( )} {displayName} -
+ ); } function createIdElem (nameElem: React.ReactNode, color: 'green' | 'red' | 'gray', icon: IconName): React.ReactNode { return ( -
+ {nameElem} -
+ ); } @@ -209,7 +209,7 @@ function AccountName ({ children, className = '', defaultName, label, onClick, o ); return ( -
{label || ''}{override || name}{children} -
+ ); } export default React.memo(styled(AccountName)` - align-items: center; border: 1px dotted transparent; - display: inline-flex; + line-height: 1; vertical-align: middle; white-space: nowrap; @@ -236,13 +235,9 @@ export default React.memo(styled(AccountName)` } .via-identity { - align-items: center; - display: inline-flex; - width: 100%; + word-break: break-all; .name { - align-items: center; - display: inline-flex; font-weight: var(--font-weight-normal) !important; filter: grayscale(100%); line-height: 1; diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx index 7de9984a9d..b9a89a31c2 100644 --- a/packages/react-components/src/AddressMini.tsx +++ b/packages/react-components/src/AddressMini.tsx @@ -50,17 +50,17 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH {label && ( )} -
+ {iconInfo && (
{iconInfo}
)} -
-
+ + {withAddress && ( -
@@ -75,10 +75,10 @@ function AddressMini ({ balance, bonded, children, className = '', iconInfo, isH ) : toShortAddress(value) } -
+ )} {children} -
+
{withBalance && ( div { overflow: hidden; @@ -193,8 +159,6 @@ export default React.memo(styled(AddressMini)` } .ui--AddressMini-icon { - margin: 0 0.5rem 0 0; - .ui--AddressMini-icon-info { position: absolute; right: -0.5rem; @@ -203,14 +167,13 @@ export default React.memo(styled(AddressMini)` } .ui--IdentityIcon { - margin: 0; + margin-right: 0.5rem; vertical-align: middle; } } .ui--AddressMini-icon, .ui--AddressMini-info { - display: inline-block; position: relative; vertical-align: middle; } diff --git a/packages/react-components/src/AddressSmall.tsx b/packages/react-components/src/AddressSmall.tsx index da79d056dc..73027194b6 100644 --- a/packages/react-components/src/AddressSmall.tsx +++ b/packages/react-components/src/AddressSmall.tsx @@ -25,16 +25,14 @@ interface Props { } function AddressSmall ({ children, className = '', defaultName, onClickName, overrideName, parentAddress, toggle, value, withShortAddress = false, withSidebar = true }: Props): React.ReactElement { - const displayAsGrid = parentAddress || withShortAddress; - return ( -
-
+
+ -
-
+ + {parentAddress && ( -
+
)} @@ -57,88 +55,54 @@ function AddressSmall ({ children, className = '', defaultName, onClickName, ove {toShortAddress(value)}
)} -
+
); } export default React.memo(styled(AddressSmall)` + overflow-x: hidden; + text-overflow: ellipsis; white-space: nowrap; - display: flex; - align-items: center; - .ui--IdentityIcon { - margin-right: 0.75rem; + &.withPadding { + padding: 0.75rem 0; + } + + .ui--AddressSmall-icon { + .ui--IdentityIcon { + margin-right: 0.5rem; + vertical-align: middle; + } + } + + .ui--AddressSmall-info { + position: relative; vertical-align: middle; - } - .parentAccountName, - .shortAddress { - display: flex; - flex-direction: column; - align-self: center; - } + .parentName { + font-size: 0.75rem; + left: 0; + position: absolute; + top: -0.80rem; + } - .parentAccountName { - grid-area: parentAccountName; - } - - .accountName { - grid-area: accountName; - } - - .shortAddress { - grid-area: shortAddress; - color: #8B8B8B; - font-size: 0.75rem; - } - - .addressGrid { - border: 0.031rem; - height: 3.438rem; - display: grid; - grid-template-columns: max-content; - grid-template-rows: 30% 40% 30%; - grid-template-areas: - "parentAccountName" - "accountName" - "shortAddress"; + .shortAddress { + bottom: -0.95rem; + color: #8B8B8B; + font-size: 0.75rem; + left: 0; + position: absolute; + } } .ui--AccountName { - max-width: 26rem; overflow: hidden; + vertical-align: middle; + white-space: nowrap; &.withSidebar { cursor: help; } - - @media only screen and (max-width: 1700px) { - max-width: 24rem; - } - - @media only screen and (max-width: 1600px) { - max-width: 22rem; - } - - @media only screen and (max-width: 1500px) { - max-width: 20rem; - } - - @media only screen and (max-width: 1400px) { - max-width: 18rem; - } - - @media only screen and (max-width: 1300px) { - max-width: 16rem; - } - - @media only screen and (max-width: 1200px) { - max-width: 14rem; - } - - @media only screen and (max-width: 1100px) { - max-width: 12rem; - } } `); diff --git a/packages/react-components/src/Table/Table.tsx b/packages/react-components/src/Table/Table.tsx index 55a7087907..c5df1f992a 100644 --- a/packages/react-components/src/Table/Table.tsx +++ b/packages/react-components/src/Table/Table.tsx @@ -235,7 +235,8 @@ export default React.memo(styled(Table)` } &.address { - min-width: 11rem; + max-width: 0; + min-width: 15rem; overflow-x: hidden; } diff --git a/packages/react-components/src/Tags.tsx b/packages/react-components/src/Tags.tsx index 458d9c023f..e35591b841 100644 --- a/packages/react-components/src/Tags.tsx +++ b/packages/react-components/src/Tags.tsx @@ -33,7 +33,7 @@ function Tags ({ children, className = '', isEditable, isEditing, onChange, onSa label={tag} /> )) - : , + :
{t('none')}
, [t, value] );