mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
use grid template to position list item (#8753)
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:
parent
f5ec16c65a
commit
1eed8dc167
@ -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) {
|
||||
|
@ -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';
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user