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

New UI ✨ #131

Merged
merged 3 commits into from
Jul 24, 2023
Merged

New UI ✨ #131

merged 3 commits into from
Jul 24, 2023

Conversation

prestonbourne
Copy link
Contributor

@prestonbourne prestonbourne commented Jul 19, 2023

Preview

Summary

This PR does the following

  • Adds a navigation bar at the top per design spec
  • Changes Chevron into Bottom icon per design spec
  • Restricts max-width of main content

Why

Quick explanation for the last one, when talking to @benjamin-gage we were discussing that the main reason for full-screen in the first place was so that someone can have more pleasant usage with LiveComponent.

Since now it links to Codesandbox, a fully equipped online IDE. Having full screen for reading content would likely just make the documentation harder to read.

@vercel
Copy link

vercel bot commented Jul 19, 2023

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

Name Status Preview Comments Updated (UTC)
swingset-example ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 20, 2023 6:04pm

<main className="ss-h-full ss-w-full ss-overflow-auto ss-m-auto">
<div
className={cx(
'ss-flex ss-flex-col ss-flex-grow ss-m-auto ss-max-w-5xl ss-mb-24 ss-transition-all',
Copy link
Contributor Author

Choose a reason for hiding this comment

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

ss-mb-24 Ensures the last piece of content doesnt get clipped as part of the overflow.
Creating the margin pushes the div up

@prestonbourne prestonbourne marked this pull request as ready for review July 19, 2023 20:34
Copy link
Contributor

@dstaley dstaley left a comment

Choose a reason for hiding this comment

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

This is looking great!! Just one comment about readability.

Comment on lines 18 to 19
!isOpen && 'ss-w-2/3',
isOpen && 'ss-w-1/2'
Copy link
Contributor

Choose a reason for hiding this comment

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

I think this would be more readable as a ternary expression.

isOpen ? `ss-w-1/2' : 'ss-w-2/3'

Comment on lines 18 to 19
'ss-hidden ss-absolute lg:ss-block hover:ss-text-action ss-ml-1 ss-p-1 ss-transition-all ss-top-3 ss-right-3',
!isOpen && 'ss--rotate-90',
Copy link
Contributor

Choose a reason for hiding this comment

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

Same comment as above!

@prestonbourne prestonbourne merged commit 4b0147c into main Jul 24, 2023
4 checks passed
@prestonbourne prestonbourne deleted the pres.navdesign branch July 24, 2023 19:12
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

Successfully merging this pull request may close these issues.

2 participants