m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

use grid template to position list item (#8753)

Browse Source 
Using flex was getting out of hand, I noticed on develop that when
a pending transaction is coming in the speed up and cancel buttons
cause the icon to center according ot their height as well. A grid
is really what is needed. This seemingly greatly simplifies the CSS
AND html (removes unnecessary nesting of divs)
This commit is contained in:
Brad Decker 2020-06-05 16:33:51 -05:00 committed by GitHub
parent f5ec16c65a
commit 1eed8dc167
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 51 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ui/app/components/app/asset-list-item/asset-list-item.scss
View File

@ -3,6 +3,10 @@
color: $Grey-500;
}
.list-item__right-content {
align-self: center;
}
.list-item__subheading {
margin-top: 6px;
font-size: 14px;
@ -11,11 +15,6 @@
&__warning {
flex: 1;
margin-left: 8px;
color: $Grey-500;
}
.list-item__mid-content {
display: none;
}
@media (min-width: 576px) {

57
ui/app/components/ui/list-item/index.scss
View File

@ -8,32 +8,28 @@
border-top: 1px solid $mercury;
border-bottom: 1px solid $mercury;
color: $Black-100;
display: flex;
justify-content: flex-start;
align-items: center;
display: grid;
grid-template-columns: 0fr repeat(11, 1fr);
grid-template-areas:
'icon head head head head head head head right right right right'
'icon sub sub sub sub sub sub sub right right right right'
'. actions actions actions actions actions actions actions right right right right';
align-items: start;
&__icon {
display: flex;
align-items: center;
grid-area: icon;
align-self: center;
> * {
margin: 0 16px 0 0;
}
}
&__col {
align-items: center;
&-main {
flex: 1;
display: flex;
}
}
&__main-content {
align-self: center;
&__actions {
grid-area: actions;
}
&__heading {
grid-area: head;
font-size: 16px;
line-height: 160%;
position: relative;
@ -48,6 +44,7 @@
}
&__subheading {
grid-area: sub;
font-size: 12px;
line-height: 14px;
color: $Grey-500;
@ -58,29 +55,27 @@
}
&__mid-content {
display: none;
grid-area: mid;
font-size: 12px;
color: $Grey-500;
}
&__right-content {
display: flex;
flex-direction: column;
justify-content: flex-end;
grid-area: right;
text-align: right;
align-items: flex-end;
}
@media (min-width: 576px) {
&__col-main {
flex: 1.5;
}
@media (max-width: 575px) {
&__mid-content {
display: flex;
align-items: center;
font-size: 12px;
flex: 2;
}
&__right-content {
flex: 1;
display: none;
}
}
@media (min-width: 576px) {
grid-template-areas:
'icon head head head head mid mid mid mid right right right'
'icon sub sub sub sub mid mid mid mid right right right'
'. actions actions actions actions mid mid mid mid right right right';
}
}

46
ui/app/components/ui/list-item/list-item.component.js
View File

@ -19,37 +19,33 @@ export default function ListItem ({
return (
<div className={primaryClassName} onClick={onClick} data-testid={dataTestId}>
<div className="list-item__col list-item__col-main">
{icon && (
<div className="list-item__icon">
{icon}
</div>
)}
<div className="list-item__main-content">
<h2 className="list-item__heading">
{ title } {titleIcon && (
<span className="list-item__heading-wrap">
{titleIcon}
</span>
)}
</h2>
<h3 className="list-item__subheading">
{subtitleStatus}{subtitle}
</h3>
{children && (
<div className="list-item__more">
{ children }
</div>
)}
{icon && (
<div className="list-item__icon">
{icon}
</div>
</div>
)}
<h2 className="list-item__heading">
{ title } {titleIcon && (
<span className="list-item__heading-wrap">
{titleIcon}
</span>
)}
</h2>
<h3 className="list-item__subheading">
{subtitleStatus}{subtitle}
</h3>
{children && (
<div className="list-item__actions">
{ children }
</div>
)}
{midContent && (
<div className="list-item__col list-item__mid-content">
<div className="list-item__mid-content">
{midContent}
</div>
)}
{rightContent && (
<div className="list-item__col list-item__right-content">
<div className="list-item__right-content">
{rightContent}
</div>
)}