Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consolidate network overview design for /home [WIP] #921

Merged
merged 9 commits into from Jan 29, 2019

Conversation

gozart1
Copy link
Member

@gozart1 gozart1 commented Jan 9, 2019

  • Bring the network overview design from /nexthome into /home

@gozart1
Copy link
Member Author

gozart1 commented Jan 10, 2019

Switching tacts on this a bit. Since the network overview on nexthome is much nicer looking, I'm taking a shot at consolidating that with /home.

So far, I've rebuilt the layout in /home, but without any of the css ( using only bootstrap at this point for layout & styling ). Plan is to get all the content and a fully responsive layout in place before authoring any custom styles. ( Eg. I think we can still do 3 up on mobile views instead of stacking by hiding some of the non essential stuff )

I've incorporated all the existing stats from /home except for ticket pool size. But I'm wondering if we should whittle it down a bit more. Perhaps stuff like "Tickets in Mempool" & "Votes in Mempool" can be moved to a "Mempool" section together with the "Latest Transactions" component.

This is still a WIP, but would love to get peoples thoughts.

screen shot 2019-01-10 at 2 55 17 am

Also, if we can pull this off, then the new visual blocks page can get the full page experience it deserves.

@gozart1 gozart1 changed the title tidy up home page layout & text alignment [WIP] Consolidate network overview design for /home [WIP] Jan 10, 2019
@buck54321
Copy link
Member

I think this looks great. Just spitballin' a couple of random thoughts to spur discussion here.

  1. While it seems natural to put the "General" section first, it also seems like some of the least important information for a typical user of the site (whoever that guy is). I don't claim to know what is the most important information, but if I had to, I'd guess in no particular order: the ticket price, the POS and POW rewards, mining difficulty, network hashrate.

  2. I like the flat design, but I always think it looks weird when there is no distinction between the navbar/footer and main page content, i.e. white on white with no border. Its occurring in the screenshot you shared where the mining box is blending in with the footer with no clear boundary. I suppose the simple solution would be to put a light border or shadow on the navbar and footer.

@chappjc
Copy link
Member

chappjc commented Jan 15, 2019

"Votes in Mempool" has little to no value on the home page, but "Tickets in Mempool" is nice IMO. Besides being useful information for helping you set your expectations for how long it might take to mine your ticket purchases, it also sort of brings the staking system to life.

@gozart1
Copy link
Member Author

gozart1 commented Jan 17, 2019

Thanks for the feedback. Agree that ticket info should be prioritized.

How changing that card's title to "Voting"?
Seems in line with the nomenclature change from Stakepool to VSP (Voting Service Provider).

Also renamed the "General" card to "Distribution", but not sure that's the right word either. General just seems so non-descriptive to me.

I've added a subtle border to the footer and header to help delineate from main content.
It's good for performance to be sparing with css box and text shadows because they have a tendency to be expensive to render which leads to fans cranking and draining battery life.

Here's the latest from riffing on the layout a bit:

screen shot 2019-01-17 at 12 45 10 am

Mobile, night mode
screen shot 2019-01-17 at 12 46 41 am

views/home.tmpl Outdated Show resolved Hide resolved
@buck54321
Copy link
Member

The shorter progress bars look great, though the block reward progress bar seems to change size from desktop to mobile in your screenshots. On the desktop, it looks like it would fit in a 2 x 2 grid, but in the mobile view it takes the full row width.

After this is merged, I wonder if we could also apply a similar style to the data at the top of the address and transactions pages?

@gozart1
Copy link
Member Author

gozart1 commented Jan 29, 2019

@buck54321 I Initially gave that "Next Block Reward Reduction" progress bar some more space in the mobile via title wraps and that leads to some slight misalignment. But on second though I think letting it wrap is fine and worth it for the compactness.

Beyond that have shuffled things around a bit more

screen shot 2019-01-29 at 1 47 46 am

screen shot 2019-01-29 at 1 52 06 am

@gozart1
Copy link
Member Author

gozart1 commented Jan 29, 2019

This is ready to merge, Here's the recap of changes:

  • remove network overview controller, template & css
  • rework /home to incorporate network overview design from /nexthome
  • increase container max-width to 1260px
  • shorten progress bar height
  • remove "tickets in mempool" and "votes in mempool" from Voting overview

<span data-target="homepage.devFund" class="d-inline-block">{{template "decimalParts" (amountAsDecimalParts .DevFund true)}}</span
><span class="pl-1 unit lh15rem">DCR</span>
</div>
<div class="col-6 col-sm-5 col-md-6 col-lg-4 mb-3 mb-sm-2 mb-md-3 mb-lg-3">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one is col-sm-5, but all the others are col-sm-4. Is that intentional?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, since there's free space to the right of it at that breakpoint, giving it a bit more width prevents the label from wrapping, which in turn uses less vertical space in the layout.

<span class="int">{{index . 0}}</span
>{{if gt (len (index . 1)) 0}}<span class="decimal dot">.</span
><span class="decimal">{{index . 1 }}</span
><span class="decimal trailing-zeroes">{{index . 2}}</span>{{end}}
Copy link
Member

@buck54321 buck54321 Jan 29, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a small difference in spacing (kerning) here between your screenshot and what I'm seeing in chrome.

image

@buck54321
Copy link
Member

This looks really good at all screen sizes. Progress bars and values seem to be updating as expected. Nice improvement all around.

Copy link
Member

@chappjc chappjc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes the home page info much more easily digested. I love it!

Just a few comments, mostly about the charts page links.

@@ -371,171 +256,6 @@ body {
background: #eee;
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eslint is complaining about an extra newline here.

views/home.tmpl Outdated Show resolved Hide resolved
views/home.tmpl Outdated Show resolved Hide resolved
views/home.tmpl Outdated Show resolved Hide resolved
views/home.tmpl Show resolved Hide resolved
@chappjc chappjc added this to the 4.0 milestone Jan 29, 2019
@gozart1
Copy link
Member Author

gozart1 commented Jan 29, 2019

Changes made. @chappjc good spot on the annual return, I've added it back.

Not sure about encoding the time range in the linking url, maybe the default range of 1 month should be handled by that charts controller itself when no range is passed?

screen shot 2019-01-29 at 11 34 57 am

@gozart1 gozart1 merged commit bb16cf8 into decred:master Jan 29, 2019
buck54321 added a commit to buck54321/dcrdata that referenced this pull request Jan 30, 2019
Works in changes to master from decred#921, which included a full rework
of the left info column. Switches the column order based on feedback
from slack and matrix. Adds a little approved/rejected message when
the necessary votes have been received.

Switches the semantics of the vote tallying a little so that a
consensus result is indicated when available. Also changed the enum
from 0,1,2 for no, yes, missing to -1, 1, 0, which seemed
appropriate for what they represent. Added contructor for
`explorertypes.VotingInfo`.

Switched the color scheme to a simpler two-tone grey for now. Change
the `text-success` boostrap class elements to a custom `text-green`,
because the former had poor contrast on lighter backgrounds.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants