explorer: rework proposal page

[buck54321]

Applies new dcrdata style to /proposal. A small meter is used and some helpful descriptions are added to describe the current state of voting.

[dmigwi]

The code looks great but I have got a number of concerns with the new UI:

1. Real estate usage: The page shows a lot of important details such that making a user to scroll so that they can see all the details might not be that much good of an Idea. While earlier designing the page, I did my best to make sure that all the contents did fit on a given view space but still fell short.

2. IMO I think this four highlighted areas display the same information which could be represented in much less space than currently occupied if they were combined.

3. On the meter gauge, I think the color scheme used contradicts the one used on /proposals page. i.e the yes % approve part should be in green and the no % approval part should be in red.

4. Also since data displayed on /proposal page is more of historical importance than the current status. I think the Proposal Name should capture more attention than the vote status.

5. The token hash could look better if it was listed at the top instead of the bottom of that table.

6. The tickets and votes language use might bring some confusion so you might want to stick with either votes or just tickets.

7. The blocks shown could be linked to the /block/{height} page.

[buck54321]

Thanks, @dmigwi. I've tried to address most of your concerns, but I had a couple remaining issues to discuss.

Real estate usage: The page shows a lot of important details such that making a user to scroll so that they can see all the details might not be that much good of an Idea. While earlier designing the page, I did my best to make sure that all the contents did fit on a given view space but still fell short.

There's no need to keep everything above the fold or on a single screen. In a data-rich UI like dcrdata, trying to keep everything in a single view results in anarchy, especially when all the data uses the same size and font-weight and layout. Using more margins and vertical space is both okay and expected.

IMO, it's more important to feature important figures prominently, and for this page, I guess I thought the most important figures to feature were

• Name
• Current voting status (in discussion, authorized, voting, approved, rejected)
• The approval rate
• Quroum

I invite anyone reading this to share their own list of the most important figures on the proposal page.

That said, my layout was a little sloppy and that meter wasn't great, so I've tried to improve it.

IMO I think this four highlighted areas display the same information which could be represented in much less space than currently occupied if they were combined.

I've tried to re-organize that info to read a little better.

The text description is repeated information, but is offered as a convenience to our less data-savvy visitors. If anything, I'd like to add more to the descriptions.

On the meter gauge, I think the color scheme used contradicts the one used on /proposals page. i.e the yes % approve part should be in green and the no % approval part should be in red.

I played with the colors and made the meter a bit smaller and left-aligned.

Also since data displayed on /proposal page is more of historical importance than the current status. I think the Proposal Name should capture more attention than the vote status.

Moved the name to the top.

The token hash could look better if it was listed at the top instead of the bottom of that table.

Why? Is that something that people are often looking for?

The tickets and votes language use might bring some confusion so you might want to stick with either votes or just tickets.

Could you say more here. I'm having trouble seeing where I could replace one or the other.

The blocks shown could be linked to the /block/{height} page.

Done.

[dmigwi]

Hi, @buck54321 Thanks for taking time to address those concerns listed above.

In a data-rich UI like dcrdata, trying to keep everything in a single view results in anarchy, especially when all the data uses the same size and font-weight and layout.

In as much as I agree with you in the above point, I still think listing all details in a given view space for this page is doable and much more better. Remember that the last chart has a range selector which applies to all the three charts. With the need to scroll, most people new to the page might never realize that a range slider exists. Here is how, I would go about in fitting everything in a single view space.

(a). Without this text I think its fairly easy to still know if a proposal was accepted by stakeholders or not even for a non-techie person.

(b). I also think that the spacing used here as highlighted in red horizontal bars could be reduced further and still look elegant. I have hidden the text discussed in (a). above, here.

(c). The 1st and 2nd chart do not show that much details apart from a single line graph whose area is shaded. So IMO those two charts could donate the extra space needed to fit everything on a single view space.

(d). Even though the meters color scheme has changed, I am finding it hard to relate 93.5% approval with either of the colors. I was also expecting the green and red colors to be on the opposite sides of where they are now.

Why? Is that something that people are often looking for?

I just find off when placed in that part of the table. You could alternatively style it more and then place it just under the proposal name in the opposite tab. Something you might want to consider is reducing the number of characters on display for the token and then add a copy to clipboard functionality like this(screenshot below) using stimulusjs in displaying it.

@dmigwi: I removed an image here that I think you placed by mistake. DM me for more info. -buck

Could you say more here. I'm having trouble seeing where I could replace one or the other.

I find it better just sticking to votes or just tickets here.

[buck54321]

@dmigwi, I've tightened up the layout a bit, especially around the charts. I think I got it right, but not 100% certain. Initially, I had added some top margins to accomadate the legends, but that messed up the layout such that the charts didn't fit the same as before. I've removed those margins and made some updates to the legend styling, including that it only shows on hover now. See if that works.

I also removed the text description.

I'd like to leave the token at the bottom. I just don't think it's very valuable information in general and shouldn't be in the top row.

I was also expecting the green and red colors to be on the opposite sides of where they are now.

The convention I typically see is clockwise/right/up for increasing, counter-clockwise/left/down for decreasing. I think that's a normal expectation.

[dmigwi]

I believe this work is fine for now.