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

Matching Parametric styles and minor UX changes #6

Open
20 of 24 tasks
fredhohman opened this issue Aug 13, 2020 · 3 comments
Open
20 of 24 tasks

Matching Parametric styles and minor UX changes #6

fredhohman opened this issue Aug 13, 2020 · 3 comments

Comments

@fredhohman
Copy link
Member

fredhohman commented Aug 13, 2020

Graphics

  • make CO2 emissions bar chart text width, and merge into Graphic component
    the simplest way to do this is to remove the [/TextContainer] and [TextContainer] tags directly before and after the graph. However the text appears rather small & cramped when I try this. -AB

  • line chart annotation arrows -> gray

  • line chart tooltips: white background

  • line chart tooltips: little more padding (@aatishb I can change background color with hoverlabel, but doesn't look like we can add padding. can you check this out?)
    @fredhohman I looked into this some. It’s more complicated than I expected. Looks like the hover tooltip is created & positioned with SVG so we can’t easily add padding. According to this thread the only way to do it is with a custom handler for the hover event.

  • line chart (@aatishb could you try some of these since you are familiar with the plotly code?):

    • no x label for "year" since that's implied
    • add x and y baseline in lighter gray but a little thicker (maybe just x?)
    • little more padding on y-axis label
    • axis labels (and each tick label) can be a little smaller
    • merge into bring these in Graphic component
  • hover on chart to show tooltip should have crosshairs cursor not pointer (@aatishb could you look at this too? hopefully is an easy CSS thing...)

  • first history of C02 chart: move red data behind green line when it appears (currently it's on top)

  • use parametric red and blue for the final chart

Text

  • references after author bio and editors
  • CO2 -> subscript the 2
  • space after 'on track to surpass, and space after 'long before'
  • fix opening quote on "There’s no problem so bad you can’t make it worse."
  • Make this bold: Our carbon dioxide output is accelerating. (Fixed in Revision 1: graph polish, minor wording tweaks #7)

Design

  • drop down for year of birth should match parametric style
  • either center all text or left align charts with text and stretch width for full screen but limit height (will need @mathisonian for the CSS used on other article for the centered text layout)
  • Remove space under center title (this is for @fredhohman and @mathisonian)

Editorial Questions

  • finalize subtitles (drop "Part" to match parametric style)?
  • drop tooltips for final history of CO2 chart? (we don't need to do this if we make sure the chart isn't too busy looking)
  • decide on graph heading -- should they be more descriptive or should they all be the same. (e.g. The History of CO2 vs. The History of CO2: Civilization vs. The Birth of Civilization, or something else?) I went with descriptive for now.
@fredhohman
Copy link
Member Author

For reference: f79da85

fredhohman added a commit that referenced this issue Aug 16, 2020
fredhohman added a commit that referenced this issue Aug 16, 2020
fredhohman added a commit that referenced this issue Aug 16, 2020
aatishb added a commit that referenced this issue Aug 17, 2020
@fredhohman
Copy link
Member Author

@aatishb for when you look at this later: some of the above are related to the Graphic component. we need to make sure we have the latest Graphic component code. I think we have a few versions floating around different articles... we will make sure to get it in parametric-components before publication to standardize. just FYI!

@fredhohman
Copy link
Member Author

Centered layout in d1a6f68.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant