Skip to content

Commit

Permalink
fix: polish mobile ui.
Browse files Browse the repository at this point in the history
Signed-off-by: Eugene Panteleymonchuk <[email protected]>
  • Loading branch information
panteleymonchuk committed Apr 18, 2024
1 parent 66da3d5 commit 2d62d36
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 38 deletions.
29 changes: 23 additions & 6 deletions client/src/app/components/nova/OutputView.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,16 @@
@import "../../../scss/fonts";

.output-page {
.card--content__account {
width: 100%;
display: flex;
justify-content: space-between;

@include phone-down {
flex-direction: column;
}
}

.card--content__output {
padding: 0 30px;
margin-bottom: 20px;
Expand All @@ -15,10 +25,14 @@
.card--value.card-header--wrapper {
width: 100%;
display: flex;
margin-bottom: 0px;
margin-bottom: 0;
height: 32px;
align-items: center;

@include tablet-down {
height: auto;
}

.output-header {
display: flex;
width: 100%;
Expand All @@ -33,7 +47,7 @@
white-space: nowrap;

a {
margin-right: 0px;
margin-right: 0;
}

.highlight {
Expand Down Expand Up @@ -67,17 +81,17 @@
color: #fec900;
font-size: 18px;

@include phone-down {
display: none;
}

&.expired {
color: #ff4800;
}

@media (min-width: #{768px}) and (max-width: #{820px}) {
display: none;
}

@include phone-down {
display: none;
}
}

.left-border {
Expand Down Expand Up @@ -113,9 +127,11 @@

.tooltip .wrap {
width: 230px !important;

.arrow {
left: 8px !important;
margin-left: 0 !important;

&--down {
top: 95%;
}
Expand All @@ -125,6 +141,7 @@
&--above {
.tooltip .wrap {
top: -416%;

.arrow {
top: 94%;
}
Expand Down
68 changes: 36 additions & 32 deletions client/src/app/components/nova/OutputView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -99,42 +99,46 @@ const OutputView: React.FC<OutputViewProps> = ({ outputId, output, showCopyAmoun
>
<DropdownIcon />
</div>
<div className="output-header">
<button type="button" className="output-type--name color">
{NameHelper.getOutputTypeName(output.type)}
</button>
<div className="output-id--link">
(
{isLinksDisabled ? (
<div className="margin-r-t">
<span className="highlight">{outputIdTransactionPart}</span>
<span className="highlight">{outputIdIndexPart}</span>
<div className={"card--content__account"}>
<div className="output-header">
<button type="button" className="output-type--name color">
{NameHelper.getOutputTypeName(output.type)}
</button>
<div className="output-id--link">
(
{isLinksDisabled ? (
<div className="margin-r-t">
<span className="highlight">{outputIdTransactionPart}</span>
<span className="highlight">{outputIdIndexPart}</span>
</div>
) : (
<Link to={`/${network}/output/${outputId}`} className="margin-r-t">
<span>{outputIdTransactionPart}</span>
<span className="highlight">{outputIdIndexPart}</span>
</Link>
)}
)
<CopyButton copy={String(outputId)} />
</div>
{specialUnlockCondition}
</div>
<div className={"flex items-center"}>
{showCopyAmount && (
<div className="card--value pointer amount-size row end">
<span
className="pointer"
onClick={(e) => {
setIsFormattedBalance(!isFormattedBalance);
e.stopPropagation();
}}
>
{formatAmount(output.amount, tokenInfo, !isFormattedBalance)}
</span>
</div>
) : (
<Link to={`/${network}/output/${outputId}`} className="margin-r-t">
<span>{outputIdTransactionPart}</span>
<span className="highlight">{outputIdIndexPart}</span>
</Link>
)}
)
<CopyButton copy={String(outputId)} />
{showCopyAmount && <CopyButton copy={output.amount} />}
</div>
{specialUnlockCondition}
</div>
{showCopyAmount && (
<div className="card--value pointer amount-size row end">
<span
className="pointer"
onClick={(e) => {
setIsFormattedBalance(!isFormattedBalance);
e.stopPropagation();
}}
>
{formatAmount(output.amount, tokenInfo, !isFormattedBalance)}
</span>
</div>
)}
{showCopyAmount && <CopyButton copy={output.amount} />}
</div>
);

Expand Down
7 changes: 7 additions & 0 deletions client/src/app/routes/nova/EpochPage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,16 @@
@import "../../../scss/variables";

.epoch-page {
.wrapper {
padding: 0 20px;
}
.epoch-page--header {
display: flex;
justify-content: space-between;

@include tablet-down {
flex-direction: column;
}
}

.validators-page__header {
Expand Down
41 changes: 41 additions & 0 deletions client/src/features/visualizer-vivagraph/components/KeyPanel.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,18 @@
pointer-events: none;
gap: 20px;

@include tablet-down {
flex-direction: column;
gap: 8px;
}

.card {
background: var(--body-background);
padding: 16px 32px;

@include tablet-down {
padding: 8px 16px;
}
}

.key-panel-list {
Expand All @@ -26,6 +35,10 @@
flex-wrap: wrap;
gap: 32px;

@include tablet-down {
gap: 8px;
}

.key-panel-item {
display: flex;
flex-direction: row;
Expand Down Expand Up @@ -67,6 +80,23 @@
align-items: center;
pointer-events: none;

@include tablet-down {
width: 100%;
}

.card {
@include tablet-down {
width: 100%;
}
}

.card--label,
.card--value {
@include tablet-down {
height: auto;
}
}

.card--label {
justify-content: flex-start;
}
Expand All @@ -78,6 +108,17 @@
display: flex;
flex-direction: column;
align-items: center;

.card--value {
margin-bottom: 0;
}

@include tablet-down {
justify-content: start;
flex-direction: row;
width: 100%;
gap: 8px;
}
}

@include tablet-down {
Expand Down
8 changes: 8 additions & 0 deletions client/src/scss/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -224,3 +224,11 @@
white-space: nowrap;
overflow: hidden;
}

.flex {
display: flex;
}

.items-center {
align-items: center;
}

0 comments on commit 2d62d36

Please sign in to comment.