poanetwork
/
poa-dapps-validators
mirror of https://github.com/poanetwork/poa-dapps-validators.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

(add) validator component styles

This commit is contained in:
Gabriel Rodriguez Alsina 2019-01-08 16:29:14 -03:00
parent 9c9644e7cd
commit 4e2fb7e95b
6 changed files with 223 additions and 218 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

188
src/assets/stylesheets/components/_Validator.scss Normal file
View File

@ -0,0 +1,188 @@
.vl-Validator {
border-radius: 5px;
border: 1px solid $base-border-color;
margin-bottom: 20px;
padding: 15px;
text-align: left;
@media (min-width: $breakpoint-md) {
margin-bottom: 30px;
padding: 20px 30px;
}
}
.vl-Validator_Header {
border-bottom: 1px solid $base-border-color;
color: #333333;
display: block;
font-size: 18px;
font-stretch: normal;
font-style: normal;
font-weight: 700;
letter-spacing: normal;
line-height: 1.2;
margin: 0 0 20px;
padding: 0 0 15px;
text-align: left;
@media (min-width: $breakpoint-md) {
display: flex;
justify-content: space-between;
}
}
.vl-Validator_HeaderAddress {
word-break: break-all;
margin-bottom: 10px;
}
.vl-Validator_HeaderHint {
color: #777;
font-size: 13px;
font-weight: 400;
line-height: 1.2;
}
.vl-Validator_HeaderConfirmations {
font-size: 15px;
font-weight: 500;
line-height: 1.2;
padding-top: 15px;
@media (min-width: $breakpoint-md) {
padding-top: 0;
}
}
.vl-Validator_Body {
display: flex;
flex-direction: column;
flex-wrap: wrap;
@media (min-width: $breakpoint-md) {
flex-direction: row;
}
}
.vl-Validator_Column {
float: none;
width: 100%;
font-size: 12px;
@media (min-width: $breakpoint-md) {
width: 50%;
&:first-child {
padding-right: 10px;
}
&:nth-child(2) {
padding-left: 10px;
}
}
}
.vl-Validator_Footer {
display: flex;
flex-grow: 1;
justify-content: center;
padding-top: 20px;
width: 100%;
}
.vl-Validator_Title {
background-position: 0 50%;
background-repeat: no-repeat;
background-size: contain;
color: #333;
font-size: 16px;
font-weight: 700;
height: 24px;
line-height: 24px;
margin: 15px 0;
padding: 0 0 0 35px;
text-align: left;
@media (min-width: $breakpoint-md) {
margin: 0 0 20px 0;
}
&#{ & }-notary {
background-image: url('#{ $base-images-path }/icons/icon-notary.svg');
}
&#{ & }-company {
background-image: url('#{ $base-images-path }/icons/icon-company.svg');
}
&#{ & }-notary-license {
background-image: url('#{ $base-images-path }/icons/icon-notary-license.svg');
}
}
.vl-Validator_Table {
}
.vl-Validator_TableRow {
color: #333;
display: flex;
font-size: 14px;
font-weight: 500;
justify-content: space-between;
line-height: 1.2;
padding: 20px;
&:nth-child(odd) {
background-color: #f7f7f7;
}
}
.vl-Validator_TableCol {
color: #333;
font-size: 14px;
font-weight: 400;
line-height: 1.2;
margin: 0 15px 0 0;
&:last-child {
margin: 0;
}
}
// .validators-count {
// color: #333;
// font-size: 14px;
// line-height: 38px;
// margin-bottom: 0;
// &-val {
// font-weight: 700;
// }
// }
// Icon that represents unconfirmed/confirmed validator's data
%data-icon {
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
display: inline-block;
height: 24px;
vertical-align: middle;
width: 24px;
}
.data-icon {
&--unconfirmed {
@extend %data-icon;
background-color: #e5e5e5;
background-image: url('/images/unconfirmed.svg');
}
&--confirmed {
@extend %data-icon;
background-color: #60db97;
background-image: url('/images/confirmed.svg');
}
}

3
src/assets/stylesheets/components/_index.scss
View File

@ -20,4 +20,5 @@
@import "MobileMenuLinks";
@import "NavigationLinks";
@import "SearchBar";
@import "SocialIcons";
@import "SocialIcons";
@import "Validator";

2
src/assets/stylesheets/index.css
View File

File diff suppressed because one or more lines are too long

172
src/assets/stylesheets/old/application/_validators.scss
View File

@ -1,172 +0,0 @@
.validators {
text-align: left;
&-i {
border-radius: 5px;
border: 1px solid $base-border-color;
margin-bottom: 30px;
padding: 20px 30px;
@media (max-width: $mobile-width) {
margin-bottom: 20px;
}
}
&-header {
border-bottom: 1px solid $base-border-color;
color: #333333;
display: flex;
font-size: 18px;
font-stretch: normal;
font-style: normal;
font-weight: 700;
justify-content: space-between;
letter-spacing: normal;
line-height: 1.2;
margin: 0 0 20px;
padding: 0 0 15px;
text-align: left;
@media (max-width: $mobile-width) {
display: block;
}
&--address {
word-break: break-all;
margin-bottom: 10px;
}
&--hint {
color: #777;
font-size: 13px;
font-weight: 400;
line-height: 1.2;
}
&--confirmations {
font-size: 15px;
font-weight: 500;
line-height: 1.2;
@media (max-width: $mobile-width) {
padding-top: 15px;
}
}
}
&-body {
overflow: hidden;
}
&-footer {
display: flex;
justify-content: center;
padding-top: 20px;
}
&-notary,
&-company,
&-license {
width: 48%;
font-size: 12px;
@media (max-width: $tablet-width) {
float: none;
width: 100%;
}
}
&-company {
&.right {
.validators-title {
@media (max-width: $tablet-width) {
display: none;
}
}
}
}
&-title {
background-position: 0 50%;
background-repeat: no-repeat;
background-size: contain;
color: #333;
font-size: 16px;
font-weight: 700;
height: 24px;
line-height: 24px;
margin: 0 0 20px 0;
padding: 0 0 0 35px;
text-align: left;
@media (max-width: $mobile-width) {
margin: 15px 0;
}
&--notary {
background-image: url('#{ $base-images-path }/icons/icon-notary.svg');
}
&--company {
background-image: url('#{ $base-images-path }/icons/icon-company.svg');
}
&--notary-license {
background-image: url('#{ $base-images-path }/icons/icon-notary-license.svg');
}
}
&-table {
&-i {
color: #333;
display: flex;
font-size: 14px;
font-weight: 500;
justify-content: space-between;
line-height: 1.2;
padding: 20px;
&:nth-child(odd) {
background-color: #f7f7f7;
}
}
}
}
.validators-count {
color: #333;
font-size: 14px;
line-height: 38px;
margin-bottom: 0;
&-val {
font-weight: 700;
}
}
// Icon that represents unconfirmed/confirmed validator's data
%data-icon {
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
display: inline-block;
height: 24px;
vertical-align: middle;
width: 24px;
}
.data-icon {
&--unconfirmed {
@extend %data-icon;
background-color: #e5e5e5;
background-image: url('/images/unconfirmed.svg');
}
&--confirmed {
@extend %data-icon;
background-color: #60db97;
background-image: url('/images/confirmed.svg');
}
}

1
src/assets/stylesheets/old/index.scss
View File

@ -5,5 +5,4 @@
@import 'application/addition';
@import 'application/base';
@import 'application/create-keys';
@import 'application/validators';
@import 'application/validatorPhysicalAddresses';

75
src/components/Validator/index.js
View File

@ -34,96 +34,85 @@ class Validator extends Component {
isCompany = true
}
const validatorsLeftClass = isCompany ? 'validators-company' : 'validators-notary'
const validatorsRightClass = isCompany ? 'validators-company' : 'validators-license'
const iconLeftClass = isCompany ? 'validators-title--company' : 'validators-title--notary'
const iconRightClass = !isCompany ? 'validators-title--notary-license' : ''
const iconLeftClass = isCompany ? 'vl-Validator_Title-company' : 'vl-Validator_Title-notary'
const iconRightClass = !isCompany ? 'vl-Validator_Title-notary-license' : ''
const showAllValidators = this.props.methodToCall === 'getAllValidatorsData'
const indexAndAddress = showAllValidators ? `#${index}. ${address}` : address
const confirmationsDiv = !showAllValidators ? (
<div className="validators-header--confirmations">{this.state.confirmation} confirmations</div>
) : (
''
)
const fullName = isCompany ? firstName : `${firstName} ${lastName}`
const physicalAddressesDiv = !isCompany ? <ValidatorPhysicalAddresses physicalAddresses={physicalAddresses} /> : ''
const contactEmailDiv = isCompany ? (
<div className="validators-table-i">
<p>Contact E-mail</p>
<p>{contactEmail}</p>
<div className="vl-Validator_TableRow">
<p className="vl-Validator_TableCol">Contact E-mail</p>
<p className="vl-Validator_TableCol">{contactEmail}</p>
</div>
) : (
''
)
const licenseIdDiv = !isCompany ? (
<div className="validators-table-i">
<p>License ID</p>
<p>{licenseId}</p>
<div className="vl-Validator_TableRow">
<p className="vl-Validator_TableCol">License ID</p>
<p className="vl-Validator_TableCol">{licenseId}</p>
</div>
) : (
''
)
const licenseExpirationDiv = !isCompany ? (
<div className="validators-table-i">
<p>License Expiration</p>
<p>{expirationDate}</p>
<div className="vl-Validator_TableRow">
<p className="vl-Validator_TableCol">License Expiration</p>
<p className="vl-Validator_TableCol">{expirationDate}</p>
</div>
) : (
''
)
const pendingChangeDateDiv = updatedDate ? (
<div className="validators-table-i">
<p>Pending Change Date</p>
<p>{updatedDate}</p>
<div className="vl-Validator_TableRow">
<p className="vl-Validator_TableCol">Pending Change Date</p>
<p className="vl-Validator_TableCol">{updatedDate}</p>
</div>
) : (
''
)
return (
<div className="validators-i">
<div className="validators-header">
<div className="vl-Validator">
<div className="vl-Validator_Header">
<div>
<div className="validators-header--address">{indexAndAddress}</div>
<div className="validators-header--hint">Wallet Address</div>
<div className="vl-Validator_HeaderAddress">{indexAndAddress}</div>
<div className="vl-Validator_HeaderHint">Wallet Address</div>
</div>
{confirmationsDiv}
</div>
<div className="validators-body">
<div className={`${validatorsLeftClass} left`}>
<p className={`validators-title ${iconLeftClass}`}>{isCompany ? 'Company' : 'Notary'}</p>
<div className="validators-table">
<div className="validators-table-i">
<p>Full Name</p>
<p>{fullName}</p>
<div className="vl-Validator_Body">
<div className={`vl-Validator_Column`}>
<h3 className={`vl-Validator_Title ${iconLeftClass}`}>{isCompany ? 'Company' : 'Notary'}</h3>
<div className="vl-Validator_Table">
<div className="vl-Validator_TableRow">
<p className="vl-Validator_TableCol">Full Name</p>
<p className="vl-Validator_TableCol">{fullName}</p>
</div>
{physicalAddressesDiv}
{contactEmailDiv}
</div>
</div>
<div className={`${validatorsRightClass} right`}>
<p className={`validators-title ${iconRightClass}`}>{!isCompany ? 'Notary license' : ''}</p>
<div className="validators-table">
<div className={`vl-Validator_Column`}>
<h3 className={`vl-Validator_Title ${iconRightClass}`}>{!isCompany ? 'Notary license' : ''}</h3>
<div className="vl-Validator_Table">
{licenseIdDiv}
{licenseExpirationDiv}
<div className="validators-table-i">
<p>Miner Creation Date</p>
<p>{createdDate}</p>
<div className="vl-Validator_TableRow">
<p className="vl-Validator_TableCol">Miner Creation Date</p>
<p className="vl-Validator_TableCol">{createdDate}</p>
</div>
{pendingChangeDateDiv}
</div>
</div>
</div>
<div className="validators-footer">{children}</div>
{children ? <div className="vl-Validator_Footer">{children}</div> : null}
</div>
)
}