Skip to content

fix(amount): wrap long dashboard amounts instead of clipping #895

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
raul-oliveira wants to merge 1 commit into
base: raul-oliveira/feat/amount-format-radio
Choose a base branch
from
Open

fix(amount): wrap long dashboard amounts instead of clipping #895

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions src/components/WalletBalance.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,18 @@ class WalletBalance extends React.Component {
const renderBalance = () => {
return (
<div>
<p><strong>{t`Total:`}</strong> <Amount value={balance.available + balance.locked} symbol={symbol} isNFT={isNFT} /></p>
<p><strong>{t`Available:`}</strong> <Amount value={balance.available} symbol={symbol} isNFT={isNFT} /></p>
<p><strong>{t`Locked:`}</strong> <Amount value={balance.locked} symbol={symbol} isNFT={isNFT} /></p>
<div className="wallet-balance-row">
<strong className="wallet-balance-label">{t`Total:`}</strong>
<Amount value={balance.available + balance.locked} symbol={symbol} isNFT={isNFT} />
</div>
<div className="wallet-balance-row">
<strong className="wallet-balance-label">{t`Available:`}</strong>
<Amount value={balance.available} symbol={symbol} isNFT={isNFT} />
</div>
<div className="wallet-balance-row">
<strong className="wallet-balance-label">{t`Locked:`}</strong>
<Amount value={balance.locked} symbol={symbol} isNFT={isNFT} />
</div>
</div>
);
}
Expand Down
28 changes: 28 additions & 0 deletions src/index.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,11 @@ i.pointer {
text-align: right;
font-family: monospace;
font-size: 1.2rem;
// Long amounts wrap onto a second line, right-aligned, and are never
// shrunk or ellipsized. min-width stops the column collapsing so far that
// the value breaks earlier than it needs to.
min-width: 12rem;
white-space: normal;
}

#token-history .voided-element {
Expand Down Expand Up @@ -1384,6 +1389,29 @@ div .nc-token-balance:not(:last-child) {
white-space: normal;
}

/* Dashboard balance rows */
.wallet-balance {
&-row {
display: flex;
align-items: flex-start;
gap: 8px;
// Bootstrap's paragraph spacing used to provide this; the rows are divs now.
margin-bottom: 1rem;

// The value is the flex item, so its wrapped continuation lines align under
// the value's first character rather than under the label. This is the
// hanging indent from the design — it needs no explicit indent.
.amount {
min-width: 0;
}
}

&-label {
white-space: nowrap;
flex-shrink: 0;
}
}

/* Amount format modal */
.amount-format {
&-modal .modal-dialog {
Expand Down