-
Notifications
You must be signed in to change notification settings - Fork 128
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
Conversation
gozart1
commented
Jan 9, 2019
•
edited
Loading
edited
- Bring the network overview design from /nexthome into /home
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. Also, if we can pull this off, then the new visual blocks page can get the full page experience it deserves. |
I think this looks great. Just spitballin' a couple of random thoughts to spur discussion here.
|
"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. |
fca675f
to
80b83c2
Compare
Thanks for the feedback. Agree that ticket info should be prioritized. How changing that card's title to "Voting"? 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. Here's the latest from riffing on the layout a bit: |
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? |
80b83c2
to
763c9e8
Compare
763c9e8
to
8074368
Compare
@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
|
This is ready to merge, Here's the recap of changes:
|
<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"> |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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}} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks really good at all screen sizes. Progress bars and values seem to be updating as expected. Nice improvement all around. |
There was a problem hiding this 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; | |||
} | |||
|
There was a problem hiding this comment.
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.
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? |
…, add subtle border to header/footer
…ze % via bootstrap classes
1a2f5a9
to
75e63fa
Compare
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.