Stats polish: Posting activity UI

[jeffgolenski]

Development

Must have:

• [x] Restyle container and header.

  • [x] Remove card borders.
  • [x] Enlarge the title and change font to match the headers on the Traffic page.

• [x] Restyle "day" squares within each month.

  • [x] Add 2px border-radius to each square.
  • [x] Increase size of each day square to be 12x12px. Padding between each should be 4px.

• [x] Restyle the chart legend ("Fewer ■■■■■ More Posts").

  • [x] Should be centered and enlarged.
  • [x] Remove padding between squares in this area.
  • [x] Add 5px rounded corners.

• [x] Orient each month square horizontally instead of vertically. See Filipe's comment.

• [x] Make the interface more responsive.

  • [x] Show the posting activity section in a mobile viewport.
  • [x] Reduce the number of months shown depending on the viewport width.

Nice to have:

• [ ] Improve styling when hovering over a day square.

  • [x] Display the date, day of the week, and amount of posts published in the hover tooltip.
  • [x] Increase the size of the hovered "day" square to 14x14 px, if possible.
  • [ ] Drop all other day squares' opacity to 50% when a day square is being hovered.

• [x] Add arrow navigation so users can scan back past 12 months. (This is no longer a valid task -@jsnmoon)

Must-have items must be completed before closing this issue. Please spin off any unfinished tasks into separate issues.

Design

Details

Just making note of a few refinements to make on the insights graphs. Nothing major, just some visual polish. Breaking down each section for easier consumption

Posting activity

Current

After:

In context:

Checklist

• [ ] Overall page: When ready, the layout of most areas should be broken out of the bordered cards, just like we've done with the Traffic page!

Migrated to Development section

- [x] ~Add rounded corners to each little "day" square within each month. 2px radius on each square.~ - [x] ~Increase size of each day square to be 12x12px. Padding between each should be 4px.~ - [x] ~Enlarge title / change font to match headlines on Traffic page~ - [x] ~Fewer / More post legend should be centered and enlarged. Please remove padding between squares in this area and add 5px rounded corners as shown in the mock!~ On hover: - [x] ~Tooltip should display with the date, day, and amount of posts published~ - [x] ~"day" square should increase in size to 14x14 px (if possible!) and all other day squares should drop to 50% opacity, so it's clear which one is hovered (see close up above)~ Bigger tasks: - [x] ~Build arrow navigation so users can scan back past 12 months~

cc @keoshi

[keoshi]

Worth mentioning the squares for each day are now laid out horizontally as you'd expect from any calendar view instead of vertically. Here's a quick before and after:

[wilmersondasilva]

An update on this one: The PR 71580 containing all the must-have items and almost all the nice to have items was deployed to production yesterday. Today, a follow-up PR was also deployed.

Add arrow navigation so users can scan back past 12 months.

It was decided that this is no longer needed. So, the PR containing it was closed.

Some of the decisions related to this task were discussed in this P2 post.

I'm moving this one to "Done"

[jsnmoon]

@wilmersondasilva, could you create a follow-up issue for the last remaining nice-to-have task (dropping unselected square opacity) and close this issue? Thanks!

EDIT: I also realized we need to move the posting activity interface above the all-time insights heatmap like so:

Could you spin up another issue for tracking this as well?