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 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} />
);
}
}
......
src/app/components/modules/ProposalList/Proposal.jsx
+ 2
− 5
View file @ ec9e134f
......@@ -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>
......
src/app/components/modules/ProposalList/styles.scss
+ 4
− 4
View file @ ec9e134f
......@@ -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 {
......
src/app/components/pages/Witnesses.jsx
+ 62
− 14
View file @ ec9e134f
......@@ -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++}
&nbsp;&nbsp;
......@@ -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 => {
......
src/app/components/pages/Witnesses.scss
+ 45
− 13
View file @ ec9e134f
.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;
}
}
}
src/app/locales/en.json
+ 9
− 4
View file @ ec9e134f
......@@ -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":
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment