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.

Sign up for GitHub

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

Jump to bottom

💄 Docs NavBar consistency and docs UI rework #2175

Merged
merged 17 commits into from
Sep 17, 2024
Merged

💄 Docs NavBar consistency and docs UI rework #2175

merged 17 commits into from
Sep 17, 2024

Conversation

joshbermanssw
Copy link
Contributor

@joshbermanssw joshbermanssw commented Sep 11, 2024 •
edited
Loading

As per #2157

We wanted to make the navbar consistent across tina.io site. To do so we have replaced the old navigation bar on Tina docs with the new one used elsewhere on the site

test passed by jeoffrey and @bettybondoc

Changes

  • added a sticky? prop to the <NavBar/> component so that we dont use sticky on the /docs (and sticky prop to <Layout>
  • implemented <Layout/> into the <DocumentNavigation/> component
  • Re-worked the UI of the new docs to make the experience more seamless
Screenshot 2024-09-11 at 7 23 37 PM

Figure: New navbar on /docs

@joshbermanssw joshbermanssw requested a review from a team as a code owner September 11, 2024 01:32
@vercel Vercel
Copy link

vercel bot commented Sep 11, 2024 •
edited
Loading

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

Name Status Preview Comments Updated (UTC)
tina-io ✅ Ready (Inspect) Visit Preview 💬 Add feedback Sep 16, 2024 6:39am

@joshbermanssw joshbermanssw marked this pull request as draft September 11, 2024 05:42
@joshbermanssw joshbermanssw changed the title 💄 Docs NavBar consistency 💄 Docs NavBar consistency and docs UI rework Sep 11, 2024
@joshbermanssw joshbermanssw marked this pull request as ready for review September 11, 2024 09:24
@isaaclombardssw
Copy link
Contributor

isaaclombardssw commented Sep 11, 2024 •
edited
Loading

Doesn't overlap quite right with the cookies pop-up. Should be underneath.

2024-09-12_09-19-31

@isaaclombardssw
Copy link
Contributor

isaaclombardssw commented Sep 11, 2024 •
edited
Loading

2024-09-12_09-27-44

The close menu button is also obscuring some content, and that content should be removed as well on smaller screens (it's covered by the new menu you've put in).

@isaaclombardssw
Copy link
Contributor

Legendary PBI. Looks really nice.

@isaaclombardssw
Copy link
Contributor

Nitpicky, but the highlight is starting to escape.

2024-09-12_09-40-41

Marxoz
Marxoz previously approved these changes Sep 11, 2024
View reviewed changes
Marxoz
Marxoz reviewed Sep 11, 2024
View reviewed changes
Copy link
Contributor

@Marxoz Marxoz left a comment

Choose a reason for hiding this comment

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

Need to address Isaac's changes first

@Marxoz Marxoz dismissed their stale review September 11, 2024 23:59

missed issues with smaller screens

@isaaclombardssw
Copy link
Contributor

A couple more changes we could make to improve this. These came from the daily and could be a new PBI if you'd rather divide up the work.

Update the search to match the new ToC?
2024-09-12_10-06-45

Create an alternative to the default dropdown menu.
2024-09-12_10-05-09

@isaaclombardssw
Copy link
Contributor

isaaclombardssw commented Sep 12, 2024 •
edited
Loading

Another niche one – the tables don't really match the changed background. One for a PBI or the tribute imo (or my solution for now would be to add a little border).

Screenshot 2024-09-12 at 2 47 36 pm

@bettybondoc
Copy link

Another niche one – the tables don't really match the changed background. One for a PBI or the tribute imo (or my solution for now would be to add a little border).

Screenshot 2024-09-12 at 2 47 36 pm

@isaaclombardssw - quicker solution would be to give the white/grey rows lower opacity so it gets a tint of the blue background

(I wasn't here 👀)

@joshbermanssw
Copy link
Contributor Author

Screenshot 2024-09-13 at 2 30 44 PM

Figure: Modernized version selector

@isaaclombardssw
Copy link
Contributor

Looks dope, just one more little styling issue to fix.

2024-09-17_09-20-44

isaaclombardssw
isaaclombardssw approved these changes Sep 17, 2024
View reviewed changes
Copy link
Contributor

@isaaclombardssw isaaclombardssw left a comment

Choose a reason for hiding this comment

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

Suggestions only :)

components/DocumentationNavigation/DocsLeftSidebar.tsx
position: fixed;
z-index: 250;
left: 0;
z-index: 49;
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we be marking the major styling issues for that epic we're planning?

ex. TODO – z-indices should be within tailwind standard values, note that some existing z-values go into the 10's of thousands.

components/DocumentationNavigation/VersionSelect.tsx Show resolved Hide resolved
components/search/styles.tsx
Comment on lines +150 to +152
background-image:
linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 194 109' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_566_318)'%3E%3Crect width='194' height='109' fill='white' /%3E%3Cmask id='mask0_566_318' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='194' height='109'%3E%3Crect width='194' height='109' fill='url(%23paint0_linear_566_318)' /%3E%3C/mask%3E%3Cg mask='url(%23mask0_566_318)'%3E%3Crect width='194' height='109' fill='url(%23paint1_linear_566_318)' /%3E%3C/g%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_566_318' x1='97' y1='0' x2='97' y2='109' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23D9D9D9' stop-opacity='0.45' /%3E%3Cstop offset='0.229052' stop-color='%23D9D9D9' stop-opacity='0.1678' /%3E%3Cstop offset='0.677779' stop-color='%23D9D9D9' stop-opacity='0.0513' /%3E%3Cstop offset='1' stop-color='%23D9D9D9' stop-opacity='0' /%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_566_318' x1='0' y1='54.5' x2='194' y2='54.5' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2353E9DD' /%3E%3Cstop offset='0.34375' stop-color='%2368D7E4' /%3E%3Cstop offset='0.59375' stop-color='%2359BFF2' /%3E%3Cstop offset='1' stop-color='%234BA8FF' /%3E%3C/linearGradient%3E%3CclipPath id='clip0_566_318'%3E%3Crect width='194' height='109' fill='white' /%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E ");
Copy link
Contributor

Choose a reason for hiding this comment

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

TODO mark for this one as well I reckon

@joshbermanssw joshbermanssw merged commit 724b70b into main Sep 17, 2024
4 checks passed
@joshbermanssw joshbermanssw deleted the update-docs-nav branch September 17, 2024 23:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Marxoz Marxoz Marxoz left review comments

@isaaclombardssw isaaclombardssw isaaclombardssw approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@joshbermanssw @isaaclombardssw @bettybondoc @Marxoz