Layout updates

[mcrascal]

see discussion and background on #1079

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 9b8346f02221e0e3f321577f332c3b6a4723f453

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 9 packages

| Name | Type | | --------------------------------- | ----- | | @evidence-dev/component-utilities | Minor | | @evidence-dev/core-components | Minor | | @evidence-dev/evidence | Major | | @evidence-dev/preprocess | Minor | | @evidence-dev/tailwind | Minor | | evidence-docs | Minor | | @evidence-dev/components | Minor | | evidence-test-environment | Minor | | ui-tests | Minor |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
evidence-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 12, 2023 1:35am

[netlify[bot]]

✅ Deploy Preview for evidence-development-workspace ready!

Name	Link
🔨 Latest commit	9b8346f02221e0e3f321577f332c3b6a4723f453
🔍 Latest deploy log	https://app.netlify.com/sites/evidence-development-workspace/deploys/65274d1fe1c0ce0008241863
😎 Deploy Preview	https://deploy-preview-1086--evidence-development-workspace.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[hughess]

This is looking awesome! Added some notes below. I’ve made note of anything I saw that looked off or where I had questions, so there’s some comments in here that aren’t directly related to these changes. I don’t feel strongly about any of this - just surfacing all my reactions:

• Home page

  • Something about the combo of fonts looks off, but I don’t know exactly what. The H1 looks vertically squashed for some reason

• Page spacing

  • Too much space above H1 on page

• Font

  • I like the new font colours - going closer to black on a lot of the font has a huge impact in making everything crisper and creating more contrast
  • I don’t think I like the new font, but it might only be some places where I don’t like it. The one place I’ve identified so far for sure is any H1s with class=”title” - these ones feel like they don’t fit with the rest of the content
  • Our serif font is quite thin
  • Did you play around with serif headers? Wondered how those would look after thinking about the NYT

• Article width/padding

  • I wonder if the article is a bit too close to the ToC (and possibly the sidebar). When there’s a lot of content on a page, it ends up feeling a bit cramped

• Links

  • I like that the new link format stands out more
  • Colour looks a bit close to default HTML link blue at first glance. Doesn’t look bad on a page with just text, but wonder if it would make a page look more cluttered when it includes charts/tables

• Breadcrumbs

  • Breadcrumb font size being the same as the sidebar items looks a bit too large, though I’m not sure if having it smaller would then look strange compared to the sidebar
  • Do we need to show the “Home” breadcrumb on the home page?

• Markdown styling

  • Inline code highlighting is a bit too light - doesn’t stand out enough
  • I’m not a fan of the gradient highlight styling for <mark> (though I haven’t ever seen anyone use this feature)

• Markdown table

  • Old style figures can make the rows look lopsided
  • Default formatting of markdown tables looks a bit strange (looking at frontmatter page in example-project)
  • Might need smaller font than the article by default? I think this is also a pretty seldom-used feature

• Headers

  • H4 I don’t think is distinct enough from the base text

• Having multiple headers in a row can lead to odd spacing (see screenshot - H1 equidistant from the top of page and the next header below)

  

• Value

  • The new errors look great

• BigValue

  • There’s something I don’t like about the format - I think it’s that each of the 3 components (title, value, comparison) have similar visual weight?
  • Spacing also feels a bit tight
  • I think I prefer the older up/down arrows (smaller with rounder edges), but don’t feel strongly about it
  • BigValue error - in the product now, but does it need to be so large?

• DataTable

  • Table Links - I think links should be more obvious that they are clickable

• QueryViewer

  • In general, much nicer than current ones and feel smoother
  • When data table expanded, extra space on top of the data table - makes it look slightly disconnected from the query viewer
  • I don’t like the font for the column names - seems like too much flair for a data table
  • Padding looks too small for the data rows - or the font is too large
  • First row and column type look too close together vertically
  • Code now opens to 100% without vertical scroll. Just double checking that this was a conscious choice rather than a regression
  • When small number of columns, allowing more space for column width could be helpful (see truncated screenshot)

• Lists

  • Indenting space might be too large? It’s similar to other tools, but my typical reaction to most tools is that the ident space is too large

• Alert

  • First alert appears to be broken + sticky checkbox isn’t having an effect

• Component errors

  • Is the border colour the same as value error? If not, feel like components should match the value error

• Sidebar

  • New sections are great
  • Like the sticky section headers as you scroll
  • When a page is selected, the formatting in the sidebar is very similar to the section heading

• I notice the sidebar cuts off before the bottom of the page - any reason we shouldn't have it go all the way to the bottom? Now that we don't have the settings button down there

• Old style numbers

  • In general I like these, but in some areas they end up looking strange - e.g., bolded (see screenshot)

• Templated page

  • Getting an error when I click on a row in the table - I believe this is a separate issue, but flagging in case

• Charts

  • Chart height needs increasing to account for the wider page (attempt to keep height/width ratio roughly the same as before)
  • Wonder if we should modify the label colours a bit to match everything else - make chart title more black, etc.

• ToC

  • “On this page” seems to be pretty far up

• Kebab menu

  • Love the new options in dev mode for settings, deploy, and docs! Those look so good
  • Show/hide queries I think would be good as a toggle

• Page header

  • How should we handle the “evidence” at the top left? Do we want people to be able to replace this with a custom project title?
  • If so, should we have the evidence name somewhere else?

• Print

  • I think I’d leave this label as PDF - even though it’s the same function, we get a lot of people looking for PDF. I’ve used products that use “Export PDF” as the label for print and I do find myself reaching for that button, whereas if it said Print I would have spent time searching around for a PDF export option before finding out Print is the only option
  • Print margins seem to get cut off (see before and after screenshots)

• Mobile (Safari on iOS)

  • I’m not able to scroll the sidebar when I open it
  • H1 + margin top + breadcrumb takes up a lot of screen real estate, so the page content starts quite a bit lower than it currently does (see screenshots)

• UI Components

  • I think these need some styling adjustments to make them all cohesive
  • Some of the new UI components look a bit large, but BigLink looks small and stretched with the new article width

• Settings page

  • I'm getting the first box on the settings page starting above the top of the page (see screenshot)

• Misc Thoughts or ideas

  • Occasionally I’ll want to check out the data used for a specific chart, but I won’t know right away which query it came from. I can download the data to see, but it might also be helpful to be able to identify what was in the data prop for a specific chart
  • DataTable text wrapping - should add to the docs
  • Noticed an issue on the page "Initially Filtered DataTable" - search doesn't work for some terms in the table
  • Sankey chart animation speed is too slow
  • On mobile, the DataTable pagination buttons are sized differently

[csjh]

Seems like removing isTemplated in +layout.svelte broke template page breadcrumbs

[mcrascal]

@csjh good shout.

[mcrascal]

Hi folks, this is ready for the final review. Thanks @hughess and @archiewood for the feedback so far. @ItsMeBrianD it would be really helpful to get your eyes on this as well.

Feedback wanted

For the final review, I am most interested in major breaking issues that need to be fixed before shipping this.

The changes in this PR are almost all css, so for any issues you discover in functionality, please just confirm that the issue isn't also present in the current release.

After this merge

I've tried to make minimal changes to existing components in this PR, just to keep things working. Where I did, this was usually a tailwind conversion inside existing classes.

While I think this looks dramatically better than what we currently have, there is more work to do to get all of the components to be really cohesive with the new layout. I want to tackle these types of changes in smaller chunks after we ship this .

Please hold off on opening that type of ticket for the next few days (e.g. modal doesn't fit with new layout). I'll do a sweep and organize tickets for these items so we can tackle them one at a time after we've shipped this.

Major changes since Sean's review

• Fixes the ios scroll bug which was affecting the sidebar menu.

Typography

• Sans by default -- I think we should bring back the option to set pages in a serif (via a front matter option), but ultimately most projects we've seen will work better in sans.
• Re-worked header stack to be vertically tighter, more easily distinguishable
• Fixes up markdown tables
• Adjusts visual weights on bigvalue
• Increases contrast in the prism theme for SQL to better fit with the lighter gray background

Components

• Brought back max heights on queryviewers
• Better aligned colours in error charts

Printing

• Renamed the print button to Print PDF
• ensure that prints weren't cutting off charts (excluding pre-existing: #1110)

Tests and deps

@ItsMeBrianD

1. can you take a look and confirm I haven't left behind any deps issues. I think this PR now reflects the changes that also landed in next.
2. Can you also rewire the UI tests to target the new elements?

Closes #712, closes #739, closes #777, closes #501

[hughess]

• Overall impressions looking at it again

  • This is looking awesome
  • The page seems to need some colour
  • Base font size might be a bit big?

• Bugs

  • Alert - sticky alert isn’t working
  • Print PDF
    • I’m getting cut-off charts and page shifted right across the print area
    • In Netlify preview, I get the Netlify UI elements printing also, whereas that doesn’t happen currently on main. Assume there is some print media setting that was dropped/changed in the global CSS
  • Links included in headers revert to link styling at base font size
  • Data Table
    • Column links are unstyled (see before/after screenshots):

• Styling Issues

  • Code background seems too light - barely noticeable against the white background on my desktop monitor

  • Deltas

    • I think the previous versions of these look better - a bit smaller and with slightly rounded corners
    • Negative deltas end up looking out of vertical alignment because of the sizing change

  • Big Value

    • These look nice, but same comment on delta styling
    • Text for the metric name looks a bit thin - bringing it down with all 3 of size, weight, and colour - maybe I think either colour or weight could come up a bit?

  • Chained queries

    • The darker grey horizontal bar behind the Compiled/Written buttons looks a bit off
    • I’d probably vertically centre the buttons and include additional margin under the bar (as the code is quite close to touching that bar)

  • Details component

    • The icon and font look large here. I think they’d distract up against other elements

  • Links - the bold black with underline is pretty heavy on the page. These might be an opportunity to inject a little bit of colour into the page

  • Home page - seems like H1 should have more margin underneath

• Questions / thoughts

  • Are the charts too shallow/wide?
  • Breadcrumb font looks large
  • When a page in sidebar is selected, it looks very similar to the section header
  • Query viewer
    • Font inside query data table looks a bit large - feels cramped inside the table
    • I think the viewer could have a bit more margin at the bottom - text looks quite close to it when it’s closed
  • Lists
    • Ordered list bullets look slightly not indented enough
    • Like the spacing on unordered list bullets
    • For longer lists, the text looks quite crammed. Maybe need more margin bottom?
    • The period on numbers looks a bit far from the number
  • Markdown
    • Highlighting - not a fan of the styling for highlighting
    • Blockquotes - font colour seems very similar to base font colour, quotes don’t stand out much
    • Mobile
    • Breadcrumbs have a lot of whitespace - might be able to reduce margin top a bit?

[mcrascal]

I think we're good to go -- @hughess, @archiewood take another look and lmk? 🤞

The page seems to need some colour

• Blue into links and sidebar nav.
• I played around with some soft backgrounds as well, and while it looks sick, it would also require touching up every component. I think an easy and desirable thing to offer as part of theming.

Base font size might be a bit big?

• Stuck with it. It's 2px smaller than current. In our text-only page, we get a few more lines of text over the old one, so I don't think we're loosing big on density.

Current state

This PR

Alert - sticky alert isn’t working

• Just deprecated the feature for the moment. We can bring it back if folks are missing it.

Print PDF

I think I have this figured out. Screenshots of a few browsers / widths below. This PR also fixes #1212.

Current state

• https://deploy-preview-1201--evidence-development-workspace.netlify.app

Chrome, Mac OS Sonoma

Ultrawide:

400px:

Safari, Mac OS Sonoma

Ultrawide:

400px:

Chrome, Windows:

Ultrawide:

400px:

As of this PR

Print targets are the same regardless of the initial page width

Chrome, Mac

Safari, Mac

Chrome, Windows

Styling Issues

Code background seems too light - barely noticeable against the white background on my desktop monitor

I can't reproduce this, propose we revisit if other folks are running into this issue.

Deltas - strong preference for the rounded glyphs included with apple system UI

Current State

Chrome Windows

Chrome Mac

This PR - mac and windows

Big value

• colour up on the title

Compiled / written buttons and toggle

• colour matched, nudged around

Details component

• shrunk
• this PR fixes bug where open detail components prevents navigation to another page

Links

• back to blue
• fixed in tables
• applied to md headers

Sidebar selected page not distinctive enough

• switched to blue

Current state on the query chaining page

This PR on the query chaining page

Other

• highlight reverted to current state
• blockquotes font color applied to children
• breadcrumbs smaller, nudged up on small screens

[mcrascal]

Thanks @archiewood !

1. This is intentional. The headers on those chart testing pages are bare h1 tags, not actual markdown. This PR removes most of the global styles from our project, and isolates user markdown to the markdown class, so that when we're building components we're not fighting with a bunch of global styles we aimed at markdown, and when we're making changes to markdown styling, we're not inadvertently breaking components.
2. This is present in main - there's a row link and a link column, if you click on the link column both navigation events fire. I'm not even sure if this is a bug, it's just a weird case.
3. Young @ItsMeBrianD added these when he was testing reactivity on chart annotations. Present in main.
4. I don't feel strongly about it. I kind of like them as small-ish footnotey things.

[ItsMeBrianD]

Young @ItsMeBrianD added these when he was testing reactivity on chart annotations. Present in main.

Was this @csjh?

[mcrascal]

Young @ItsMeBrianD added these when he was testing reactivity on chart annotations. Present in main.

Was this @csjh?

Ah maybe!

[csjh]

Yeah the animation is is my creation and intended, just a little test to make sure they don't duplicate or otherwise with reactivity

[hughess]

This is looking sweet. Here are my notes:

Potential Issues

1. The evidence logo looks like it's not vertically centered - looks lower than the 3-dot menu

2. Errors are now being printed to the console for horizontal bar charts (can’t use date axis), but only on server side navigation. This is what I see when I navigate to the chart-testing/dateSeries page:

   

3. Alerts: default alert appears to have different font size and spacing

   

4. Delta columns in table don’t look vertically centered - they look aligned to the top of the other text

   

5. Deltas - negative arrow isn't vertically centered, which creates an illusion for me where I see the arrow extending below the text it's beside

   

6. Details component - I think the vertical spacing needs adjustment. The way it sits right now makes it look coupled to the content below it, whereas I think in most cases, you'd want it to be coupled with the content above (e.g., under a header, or under a chart)

   

7. Details content: agree with Archie that font of content looks a bit big relative to the title of the component. Also agree that it should be a smaller footnotey thing. If possible, I’d probably go with a smaller base font size for content within a details component

Minor Things

1. Print PDF causes the page to hang for a second, then you see the charts change width. On closing print dialog, you see them shift back

2. SQL font within query viewers looks a bit large

   

3. Lists - having equal spacing above and below the list makes it look "on it's own" vs. having it coupled with the text leading into the list. I think I'd expect the spacing on the top to be slightly less than the spacing on the bottom

   

Fixed

This is what I was seeing before for the inline code style - new one looks perfect:

Before

After

Questions

• Will removing styles from html tags cause issues for anyone using those instead of the markdown syntax?
  • Not sure what the reason would be for using something like h1 instead of #, but checking in case people are using those

[mcrascal]

Thanks @hughess!!

1. Fixed
2. This is present in main
3. Fixed
4. I have rolled the implementation back to just use font glyphs and hard coded system ui into them. Windows users will continue to get hard triangles. Juice not worth the squeeze on further iteration with custom svgs IMO.

5. Glyphs also aligned baseline in main.

   1. Current

   2. 

   3. Custom SVG

   4. 

   5. System UI glyph

   6. 

6. Reverted the spacing back to current
7. Wont fix for now -- I am worried we're going to get into conflicting styles with components added as children, happy to revisit.

[mcrascal]

@hughess Re: question on bare html

yes, this will cause people who have inlined bare html to have unstyled components (base font and size still). If they want them styled as if they came from markdown they can add the markdown class. I'll add a note in the docs, and update the one instance where we do this in the template (lists in a loop).

[hughess]

Sounds great to me!