Skip to content
Snippets Groups Projects
Commit ec9e134f authored by NGUYEN DINH Quoc-Huy's avatar NGUYEN DINH Quoc-Huy
Browse files

Tweak witnesses page design

parent 46182297
No related branches found
No related tags found
2 merge requests!11merge autoclave into master,!7Refresh Witnesses page design
Hide whitespace changes
Inline Side-by-side
src/app/components/elements/Userpic.jsx
+ 5
− 2
View file @ ec9e134f
import React, { Component } from 'react'; import React, { Component } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import shouldComponentUpdate from 'app/utils/shouldComponentUpdate'; import shouldComponentUpdate from 'app/utils/shouldComponentUpdate';
...@@ -20,7 +21,7 @@ class Userpic extends Component { ...@@ -20,7 +21,7 @@ class Userpic extends Component {
shouldComponentUpdate = shouldComponentUpdate(this, 'Userpic'); shouldComponentUpdate = shouldComponentUpdate(this, 'Userpic');
render() { render() {
const { account, json_metadata, size } = this.props; const { account, json_metadata, size, className = '' } = this.props;
const hideIfDefault = this.props.hideIfDefault || false; const hideIfDefault = this.props.hideIfDefault || false;
const avSize = size && sizeList.indexOf(size) > -1 ? '/' + size : ''; const avSize = size && sizeList.indexOf(size) > -1 ? '/' + size : '';
...@@ -41,7 +42,9 @@ class Userpic extends Component { ...@@ -41,7 +42,9 @@ class Userpic extends Component {
'url(' + imageProxy() + `u/${account}/avatar${avSize})`, 'url(' + imageProxy() + `u/${account}/avatar${avSize})`,
}; };
return <div className="Userpic" style={style} />; return (
<div className={classnames('Userpic', className)} style={style} />
);
} }
} }
......
src/app/components/modules/ProposalList/Proposal.jsx
+ 2
− 5
View file @ ec9e134f
...@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; ...@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import Moment from 'moment'; import Moment from 'moment';
import NumAbbr from 'number-abbreviate'; import NumAbbr from 'number-abbreviate';
import tt from 'counterpart'; import tt from 'counterpart';
import Userpic from 'app/components/elements/Userpic';
import { numberWithCommas, vestsToHpf } from 'app/utils/StateFunctions'; import { numberWithCommas, vestsToHpf } from 'app/utils/StateFunctions';
import Icon from 'app/components/elements/Icon'; import Icon from 'app/components/elements/Icon';
...@@ -59,11 +60,7 @@ export default function Proposal(props) { ...@@ -59,11 +60,7 @@ export default function Proposal(props) {
</a> </a>
</div> </div>
<div className="proposals__avatar"> <div className="proposals__avatar">
<img <Userpic account={creator} />
src={`https://images.hive.blog/100x100/https://images.hive.blog/u/${creator}/avatar`}
alt={creator}
className="image__round"
/>
</div> </div>
<div className="proposals__description"> <div className="proposals__description">
<span> <span>
......
src/app/components/modules/ProposalList/styles.scss
+ 4
− 4
View file @ ec9e134f
...@@ -13,10 +13,6 @@ ...@@ -13,10 +13,6 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
img.image__round {
border-radius: 50px;
}
.proposals__header { .proposals__header {
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
...@@ -86,6 +82,10 @@ ...@@ -86,6 +82,10 @@
width: 65px; width: 65px;
height: 65px; height: 65px;
padding-left: 15px; padding-left: 15px;
@media only screen and (max-width: 768px) {
width: 90px;
}
} }
.proposals__votes { .proposals__votes {
......
src/app/components/pages/Witnesses.jsx
+ 62
− 14
View file @ ec9e134f
...@@ -5,9 +5,11 @@ import { Link } from 'react-router'; ...@@ -5,9 +5,11 @@ import { Link } from 'react-router';
import links from 'app/utils/Links'; import links from 'app/utils/Links';
import Icon from 'app/components/elements/Icon'; import Icon from 'app/components/elements/Icon';
import * as transactionActions from 'app/redux/TransactionReducer'; import * as transactionActions from 'app/redux/TransactionReducer';
import Userpic from 'app/components/elements/Userpic';
import ByteBuffer from 'bytebuffer'; import ByteBuffer from 'bytebuffer';
import { is, Set, List } from 'immutable'; import { is, Set, List } from 'immutable';
import * as globalActions from 'app/redux/GlobalReducer'; import * as globalActions from 'app/redux/GlobalReducer';
import { vestsToHp, numberWithCommas } from 'app/utils/StateFunctions';
import tt from 'counterpart'; import tt from 'counterpart';
const Long = ByteBuffer.Long; const Long = ByteBuffer.Long;
...@@ -100,10 +102,19 @@ class Witnesses extends React.Component { ...@@ -100,10 +102,19 @@ class Witnesses extends React.Component {
const witnesses = sorted_witnesses.map(item => { const witnesses = sorted_witnesses.map(item => {
const owner = item.get('owner'); const owner = item.get('owner');
const thread = item.get('url'); const totalVotesVests = item.get('votes');
const totalVotesHp = numberWithCommas(
vestsToHp(
this.props.state,
`${totalVotesVests / 1000000} VESTS`
)
);
const thread = item.get('url').replace('steemit.com', 'hive.blog');
const myVote = witness_votes ? witness_votes.has(owner) : null; const myVote = witness_votes ? witness_votes.has(owner) : null;
const signingKey = item.get('signing_key'); const signingKey = item.get('signing_key');
const missedBlocks = item.get('total_missed');
const lastBlock = item.get('last_confirmed_block_num'); const lastBlock = item.get('last_confirmed_block_num');
const runningVersion = item.get('running_version');
const noBlock7days = (head_block - lastBlock) * 3 > 604800; const noBlock7days = (head_block - lastBlock) * 3 > 604800;
const isDisabled = const isDisabled =
signingKey == DISABLED_SIGNING_KEY || noBlock7days; signingKey == DISABLED_SIGNING_KEY || noBlock7days;
...@@ -144,7 +155,7 @@ class Witnesses extends React.Component { ...@@ -144,7 +155,7 @@ class Witnesses extends React.Component {
return ( return (
<tr key={owner}> <tr key={owner}>
<td width="75"> <td className="Witnesses__rank">
{rank < 10 && '0'} {rank < 10 && '0'}
{rank++} {rank++}
&nbsp;&nbsp; &nbsp;&nbsp;
...@@ -170,19 +181,49 @@ class Witnesses extends React.Component { ...@@ -170,19 +181,49 @@ class Witnesses extends React.Component {
)} )}
</span> </span>
</td> </td>
<td> <td className="Witnesses__info">
<Link to={'/@' + owner} style={ownerStyle}> <Link to={'/@' + owner} style={ownerStyle}>
{owner} <Userpic account={owner} size="small" />
</Link>
<div className="Witnesses__info">
<div>
<Link to={'/@' + owner} style={ownerStyle}>
{owner}
</Link>
</div>
<div>
<small>
{tt('witnesses_jsx.running_version')} v{
runningVersion
}
{isDisabled &&
`, ${tt(
'witnesses_jsx.disabled'
)} ${_blockGap(head_block, lastBlock)}`}
</small>
</div>
<div className="Witnesses__votes">
<small>
{tt('witnesses_jsx.received_hp_votes', {
votehp: `${totalVotesHp} HP`,
})}
</small>
</div>
<div className="witness__thread">
<small>{witness_link}</small>
</div>
</div>
</td>
<td className="Witnesses__votes">{`${totalVotesHp} HP`}</td>
<td>{missedBlocks} blocks</td>
<td>
<Link
to={`https://hiveblocks.com/b/${lastBlock}`}
target="_blank"
>
#{lastBlock} <Icon name="extlink" />
</Link> </Link>
{isDisabled && (
<small>
{' '}
({tt('witnesses_jsx.disabled')}{' '}
{_blockGap(head_block, lastBlock)})
</small>
)}
</td> </td>
<td>{witness_link}</td>
</tr> </tr>
); );
}); });
...@@ -266,10 +307,16 @@ class Witnesses extends React.Component { ...@@ -266,10 +307,16 @@ class Witnesses extends React.Component {
<table> <table>
<thead> <thead>
<tr> <tr>
<th /> <th>Rank</th>
<th>{tt('witnesses_jsx.witness')}</th> <th>{tt('witnesses_jsx.witness')}</th>
<th className="Witnesses__votes">
{tt('witnesses_jsx.votes_received')}
</th>
<th>
{tt('witnesses_jsx.missed_blocks')}
</th>
<th> <th>
{tt('witnesses_jsx.information')} {tt('witnesses_jsx.last_block')}
</th> </th>
</tr> </tr>
</thead> </thead>
...@@ -438,6 +485,7 @@ module.exports = { ...@@ -438,6 +485,7 @@ module.exports = {
witness_votes, witness_votes,
witnessVotesInProgress, witnessVotesInProgress,
current_proxy, current_proxy,
state,
}; };
}, },
dispatch => { dispatch => {
......
src/app/components/pages/Witnesses.scss
+ 45
− 13
View file @ ec9e134f
.Witnesses { .Witnesses {
.extlink path { .extlink path {
transition: 0.2s all ease-in-out; transition: 0.2s all ease-in-out;
@include themify($themes) { @include themify($themes) {
fill: themed('textColorAccent'); fill: themed('textColorAccent');
} }
} }
a:hover .extlink path { a:hover .extlink path {
transition: 0.2s all ease-in-out; transition: 0.2s all ease-in-out;
@include themify($themes) { @include themify($themes) {
fill: themed('textColorAccentHover'); fill: themed('textColorAccentHover');
} }
}
td > a {
@extend .link;
@extend .link--primary;
} }
td.Witnesses__info {
display: flex;
flex-direction: row;
}
td.Witnesses__rank {
white-space: nowrap;
}
td.Witnesses__info .Userpic {
@media only screen and (max-width: 779px) {
display: none;
}
}
.button { .button {
background-color: $color-text-hive-red; background-color: $color-text-hive-red;
text-shadow: 0 1px 0 rgba(0,0,0,0.20); text-shadow: 0 1px 0 rgba(0,0,0,0.20);
...@@ -24,7 +30,33 @@ ...@@ -24,7 +30,33 @@
&:hover { &:hover {
background-color: $color-hive-red; background-color: $color-hive-red;
} }
} }
div.Witnesses__info {
display: flex;
flex-direction: column;
margin-left: 15px;
@media only screen and (max-width: 779px) {
margin-left: 0;
}
}
div.Witnesses__info a:first-child {
font-weight: bold;
}
div.Witnesses__info .witness__thread a {
@extend .link;
@extend .link--primary;
}
th.Witnesses__votes, td.Witnesses__votes {
@media only screen and (max-width: 779px) {
display: none;
}
}
div.Witnesses__votes {
@media only screen and (min-width: 780px) {
display: none;
}
}
} }
src/app/locales/en.json
+ 9
− 4
View file @ ec9e134f
...@@ -475,8 +475,8 @@ ...@@ -475,8 +475,8 @@
} }
}, },
"witnesses_jsx": { "witnesses_jsx": {
"witness_thread": "witness thread", "witness_thread": "Open witness annoucement",
"external_site": "external site", "external_site": "Open external site",
"disabled": "disabled", "disabled": "disabled",
"top_witnesses": "Witness Voting", "top_witnesses": "Witness Voting",
"you_have_votes_remaining": { "you_have_votes_remaining": {
...@@ -487,7 +487,7 @@ ...@@ -487,7 +487,7 @@
"you_can_vote_for_maximum_of_witnesses": "you_can_vote_for_maximum_of_witnesses":
"You can vote for a maximum of 30 witnesses", "You can vote for a maximum of 30 witnesses",
"witness": "Witness", "witness": "Witness",
"information": "Information", "information": "More Information",
"if_you_want_to_vote_outside_of_top_enter_account_name": "if_you_want_to_vote_outside_of_top_enter_account_name":
"If you would like to vote for a witness outside of the top 100, enter the account name below to cast a vote", "If you would like to vote for a witness outside of the top 100, enter the account name below to cast a vote",
"set_witness_proxy": "set_witness_proxy":
...@@ -497,7 +497,12 @@ ...@@ -497,7 +497,12 @@
"witness_proxy_current": "Your current proxy is", "witness_proxy_current": "Your current proxy is",
"witness_proxy_set": "Set proxy", "witness_proxy_set": "Set proxy",
"witness_proxy_clear": "Clear proxy", "witness_proxy_clear": "Clear proxy",
"proxy_update_error": "Your proxy was not updated" "proxy_update_error": "Your proxy was not updated",
"missed_blocks": "Missed blocks",
"last_block": "Last block",
"running_version": "Running version",
"received_hp_votes": "Received %(votehp)s worth of votes",
"votes_received": "Votes received"
}, },
"votesandcomments_jsx": { "votesandcomments_jsx": {
"no_responses_yet_click_to_respond": "no_responses_yet_click_to_respond":
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment