Update Promosteem.com Delegator page

in yesterday's update, I have launched an android application for promosteem.com. This time I would like to report that I have successfully made changes to the delegator page on the official website www.promosteem.com. for the result after the change is more or less like the picture above.

You can see the changes that have taken place. Here I have also taken a screenshot for the delegator page before the update.

What was changed?

Previously, the usernames of the delegates were displayed in the form of a table. I think this is less elegant, so therefore I tried to change and display it in the form of a card.

previously only displayed the name and number of delegated sp. After the update, there is an additional display of the profile photo of each user along with the number of SP and percentage.

How to calculate percentage?

The percentage is calculated by calculating the total number of all SP delegates for @promosteem.com. Then the number of SP delegated by the delegator is divided by the total SP and multiplied by 100.

Here the snippet code

 <Row>
              {this.state.list.map((x)=>(
                        <Col md={3}>

                        <Card className="contes mt-4">
                            <Card.Body>
                                <Row>
                                    <Col xs={3}>
                                        <Image src={x.avatar} roundedCircle fluid/>
                                    </Col>
                                    <Col xs={9}>
                                        <h6>
                                            @{x.user}
                                        </h6>
                                        <ProgressBar animated variant="primary" now="100" label={`${x.total} SP / ${(x.total/sumtotal*100).toFixed(1)} %`} />
                                    </Col>
                                
                                </Row>
                            </Card.Body>
                        </Card>
                         
                    </Col>
                    ))}


                </Row>

Important !!! Can we get the code from this application?
You are free to download coding from this application. If you want to change or try to run on your local computer, we allow

Proof of work

https://github.com/sogatanco/steemsg/commits/master

LIVE DEMO

please try it, if there are shortcomings and irregularities we really welcome suggestions from all of you. please write in the comments column below.

Kind Regards

@sogata / Steemcontest Dev

Our Other Project :

• Bank STEEM : STEEM / SBD exchange site with IDR (Indonesian Rupiah), and vice versa.
• Steemcontest.com : A platform to display contest that running on steemit and this platform also to promote the contest to all steemit user.