diff --git a/src/app/components/elements/Userpic.jsx b/src/app/components/elements/Userpic.jsx
index 99b40d6724071c5879fe479c422b6e54ea5ed902..b02a0c6402be710e34c8680a298c0a08907e13eb 100644
--- a/src/app/components/elements/Userpic.jsx
+++ b/src/app/components/elements/Userpic.jsx
@@ -1,4 +1,5 @@
import React, { Component } from 'react';
+import classnames from 'classnames';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import shouldComponentUpdate from 'app/utils/shouldComponentUpdate';
@@ -20,7 +21,7 @@ class Userpic extends Component {
shouldComponentUpdate = shouldComponentUpdate(this, 'Userpic');
render() {
- const { account, json_metadata, size } = this.props;
+ const { account, json_metadata, size, className = '' } = this.props;
const hideIfDefault = this.props.hideIfDefault || false;
const avSize = size && sizeList.indexOf(size) > -1 ? '/' + size : '';
@@ -41,7 +42,9 @@ class Userpic extends Component {
'url(' + imageProxy() + `u/${account}/avatar${avSize})`,
};
- return <div className="Userpic" style={style} />;
+ return (
+ <div className={classnames('Userpic', className)} style={style} />
+ );
}
}
diff --git a/src/app/components/modules/ProposalList/Proposal.jsx b/src/app/components/modules/ProposalList/Proposal.jsx
index b5ba6e8653cc3c7222d022af94721cbf01682e84..97b5d5b147d79449d8d50b88804a1334d88fef12 100644
--- a/src/app/components/modules/ProposalList/Proposal.jsx
+++ b/src/app/components/modules/ProposalList/Proposal.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import Moment from 'moment';
import NumAbbr from 'number-abbreviate';
import tt from 'counterpart';
+import Userpic from 'app/components/elements/Userpic';
import { numberWithCommas, vestsToHpf } from 'app/utils/StateFunctions';
import Icon from 'app/components/elements/Icon';
@@ -59,11 +60,7 @@ export default function Proposal(props) {
</a>
</div>
<div className="proposals__avatar">
- <img
- src={`https://images.hive.blog/100x100/https://images.hive.blog/u/${creator}/avatar`}
- alt={creator}
- className="image__round"
- />
+ <Userpic account={creator} />
</div>
<div className="proposals__description">
<span>
diff --git a/src/app/components/modules/ProposalList/styles.scss b/src/app/components/modules/ProposalList/styles.scss
index 7a337d77e2b860a0e4e0959d1b00a19cd956e501..7c0702c62bfc185b3c7400b19fd4d2c79c9c98b0 100644
--- a/src/app/components/modules/ProposalList/styles.scss
+++ b/src/app/components/modules/ProposalList/styles.scss
@@ -13,10 +13,6 @@
margin-left: auto;
margin-right: auto;
- img.image__round {
- border-radius: 50px;
- }
-
.proposals__header {
flex-direction: row;
justify-content: center;
@@ -86,6 +82,10 @@
width: 65px;
height: 65px;
padding-left: 15px;
+
+ @media only screen and (max-width: 768px) {
+ width: 90px;
+ }
}
.proposals__votes {
diff --git a/src/app/components/pages/Witnesses.jsx b/src/app/components/pages/Witnesses.jsx
index a0b35356b6dadbbba74948e113239494642876fb..7004b2954794f9ae8182588757c2c9972aa147cd 100644
--- a/src/app/components/pages/Witnesses.jsx
+++ b/src/app/components/pages/Witnesses.jsx
@@ -5,9 +5,11 @@ import { Link } from 'react-router';
import links from 'app/utils/Links';
import Icon from 'app/components/elements/Icon';
import * as transactionActions from 'app/redux/TransactionReducer';
+import Userpic from 'app/components/elements/Userpic';
import ByteBuffer from 'bytebuffer';
import { is, Set, List } from 'immutable';
import * as globalActions from 'app/redux/GlobalReducer';
+import { vestsToHp, numberWithCommas } from 'app/utils/StateFunctions';
import tt from 'counterpart';
const Long = ByteBuffer.Long;
@@ -100,10 +102,19 @@ class Witnesses extends React.Component {
const witnesses = sorted_witnesses.map(item => {
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 signingKey = item.get('signing_key');
+ const missedBlocks = item.get('total_missed');
const lastBlock = item.get('last_confirmed_block_num');
+ const runningVersion = item.get('running_version');
const noBlock7days = (head_block - lastBlock) * 3 > 604800;
const isDisabled =
signingKey == DISABLED_SIGNING_KEY || noBlock7days;
@@ -144,7 +155,7 @@ class Witnesses extends React.Component {
return (
<tr key={owner}>
- <td width="75">
+ <td className="Witnesses__rank">
{rank < 10 && '0'}
{rank++}
@@ -170,19 +181,49 @@ class Witnesses extends React.Component {
)}
</span>
</td>
- <td>
+ <td className="Witnesses__info">
<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>
- {isDisabled && (
- <small>
- {' '}
- ({tt('witnesses_jsx.disabled')}{' '}
- {_blockGap(head_block, lastBlock)})
- </small>
- )}
</td>
- <td>{witness_link}</td>
</tr>
);
});
@@ -266,10 +307,16 @@ class Witnesses extends React.Component {
<table>
<thead>
<tr>
- <th />
+ <th>Rank</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>
- {tt('witnesses_jsx.information')}
+ {tt('witnesses_jsx.last_block')}
</th>
</tr>
</thead>
@@ -438,6 +485,7 @@ module.exports = {
witness_votes,
witnessVotesInProgress,
current_proxy,
+ state,
};
},
dispatch => {
diff --git a/src/app/components/pages/Witnesses.scss b/src/app/components/pages/Witnesses.scss
index 5fcb7ca55c8b27219bb8e79e4ceb8045ca7f8187..c51a996a8495fb266b6e8baf59c2c692a4adc84f 100644
--- a/src/app/components/pages/Witnesses.scss
+++ b/src/app/components/pages/Witnesses.scss
@@ -1,22 +1,28 @@
-
.Witnesses {
.extlink path {
transition: 0.2s all ease-in-out;
- @include themify($themes) {
- fill: themed('textColorAccent');
- }
+ @include themify($themes) {
+ fill: themed('textColorAccent');
+ }
}
a:hover .extlink path {
transition: 0.2s all ease-in-out;
- @include themify($themes) {
- fill: themed('textColorAccentHover');
- }
- }
- td > a {
- @extend .link;
- @extend .link--primary;
+ @include themify($themes) {
+ fill: themed('textColorAccentHover');
+ }
}
-
+ 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 {
background-color: $color-text-hive-red;
text-shadow: 0 1px 0 rgba(0,0,0,0.20);
@@ -24,7 +30,33 @@
&:hover {
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;
+ }
+ }
}
diff --git a/src/app/locales/en.json b/src/app/locales/en.json
index 8734afe56973df30849700cace719ccf91f9c24b..788c0b07df19da1693339cb62530940db09cc089 100644
--- a/src/app/locales/en.json
+++ b/src/app/locales/en.json
@@ -475,8 +475,8 @@
}
},
"witnesses_jsx": {
- "witness_thread": "witness thread",
- "external_site": "external site",
+ "witness_thread": "Open witness annoucement",
+ "external_site": "Open external site",
"disabled": "disabled",
"top_witnesses": "Witness Voting",
"you_have_votes_remaining": {
@@ -487,7 +487,7 @@
"you_can_vote_for_maximum_of_witnesses":
"You can vote for a maximum of 30 witnesses",
"witness": "Witness",
- "information": "Information",
+ "information": "More Information",
"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",
"set_witness_proxy":
@@ -497,7 +497,12 @@
"witness_proxy_current": "Your current proxy is",
"witness_proxy_set": "Set 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": {
"no_responses_yet_click_to_respond":