Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Fix: Sidebar nav bugs #1447

Merged
benhalverson merged 16 commits into from
Jun 20, 2021
Merged

Fix: Sidebar nav bugs #1447

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
3905153
Fix: Sidebar nav bugs
kunaljain0212 Jun 18, 2021
43d855f
Fix: Closing button and Mobile view
kunaljain0212 Jun 18, 2021
774d4a9
Merge branch 'main' into sidebarNav
benhalverson Jun 18, 2021
2083c7e
Fix: Updated snapshots and made compatible for all browsers
kunaljain0212 Jun 18, 2021
cfd0d19
Merge branch 'sidebarNav' of github.com:kunaljain0212/nodejs.dev into…
kunaljain0212 Jun 18, 2021
f6abf88
Fix: Updated snapshots
kunaljain0212 Jun 18, 2021
3a0550f
Fix: Added sidenav bar to releases page
kunaljain0212 Jun 18, 2021
78d39e5
Fix: Fixed className for working groups page
kunaljain0212 Jun 18, 2021
2ce2165
Fix: Updated snapshot for working groups
kunaljain0212 Jun 18, 2021
0bbca97
Merge branch 'main' into sidebarNav
manishprivet Jun 19, 2021
2d0fe37
Fix: Extender class about.scss
kunaljain0212 Jun 19, 2021
139ad06
Merge branch 'sidebarNav' of github.com:kunaljain0212/nodejs.dev into…
kunaljain0212 Jun 19, 2021
507da48
Fix: Extender class and Security page
kunaljain0212 Jun 19, 2021
a8c5b5a
Removing unnecessary styling
kunaljain0212 Jun 19, 2021
c84276e
Reverting changes
kunaljain0212 Jun 19, 2021
311b315
Fixed linting issues
kunaljain0212 Jun 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/AboutPageSideNavBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import '../../styles/about.scss';

// eslint-disable-next-line no-shadow
export enum AboutPageKeys {
about = '',
about = 'about',
governance = 'governance',
community = 'community',
workingGroups = 'working-groups',
Expand Down
2 changes: 1 addition & 1 deletion src/pages/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function AboutPage({ data }: Page): JSX.Element {
return (
<>
<Layout title={title} description={description} showFooter={false}>
<main className="streched-container">
<main className="grid-container">
<AboutPageSideNavBar pageKey={AboutPageKeys.about} />
<Article
title={title}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/governance.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function GovernancePage({ data }: Page): JSX.Element {
return (
<>
<Layout title={title} description={description} showFooter={false}>
<main className="streched-container">
<main className="grid-container">
<AboutPageSideNavBar pageKey={AboutPageKeys.governance} />
<Article
title={title}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/privacy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function PrivacyPage({ data }: Page): JSX.Element {
return (
<>
<Layout title={title} description={description} showFooter={false}>
<main className="streched-container">
<main className="grid-container">
<AboutPageSideNavBar pageKey={AboutPageKeys.privacy} />
<Article
title={title}
Expand Down
6 changes: 5 additions & 1 deletion src/pages/releases.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import Footer from '../components/Footer';
import '../styles/article-reader.scss';
import DownloadTable from '../components/DownloadReleases/DownloadTable';
import { useReleaseData } from '../hooks/useReleaseHistory';
import AboutPageSideNavBar, {
AboutPageKeys,
} from '../components/AboutPageSideNavBar';

export default function ReleasesPage({ data }: Page): JSX.Element {
const { title, description } = data.page.frontmatter;
Expand All @@ -17,7 +20,8 @@ export default function ReleasesPage({ data }: Page): JSX.Element {
return (
<>
<Layout title={title} description={description} showFooter={false}>
<main className="centered-container">
<main className="grid-container">
<AboutPageSideNavBar pageKey={AboutPageKeys.releases} />
<Article
title={title}
html={html}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/resources.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function ResourcesPage({ data }: Page): JSX.Element {
return (
<>
<Layout title={title} description={description} showFooter={false}>
<main className="streched-container">
<main className="grid-container">
<AboutPageSideNavBar pageKey={AboutPageKeys.resources} />
<Article
title={title}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/security.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function SecurityPage({ data }: Page): JSX.Element {
return (
<>
<Layout title={title} description={description} showFooter={false}>
<main className="streched-container">
<main className="grid-container">
<AboutPageSideNavBar pageKey={AboutPageKeys.security} />
<Article
title={title}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/trademark.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default function TrademarkPage({ data }: Page): JSX.Element {
return (
<>
<Layout title={title} description={description} showFooter={false}>
<main className="streched-container">
<main className="grid-container">
<AboutPageSideNavBar pageKey={AboutPageKeys.trademark} />
<Article
title={title}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/working-groups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ export default function WorkingGroupsPage({ data }: Page): JSX.Element {
return (
<>
<Layout title={title} description={description} showFooter={false}>
<main className="streched-container">
<main className="grid-container">
<AboutPageSideNavBar pageKey={AboutPageKeys.workingGroups} />
<Article
title={title}
Expand Down
3 changes: 1 addition & 2 deletions src/styles/learn.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
/* Needed since overflow: none will disable position: sticky on children */
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
background-color: var(--color-fill-side-nav);
height: calc(100vh - var(--nav-height));

@manishprivet manishprivet Jun 19, 2021

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

These changes are seemingly breaking the /learn page on mobile (https://staging.nodejs.dev/1447/learn)

image

Can you keep the styling changes limited to about.scss only

@MrJithil MrJithil Jun 19, 2021

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

#1448 is taking care of the style issues

@kunaljain0212 kunaljain0212 Jun 19, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

The cross button is not visible in the deployed version (https://nodejs.dev/learn), which restricts the user from closing the sidenav in mobile view.

@MrJithil MrJithil Jun 19, 2021

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

#1448 handled that as well.

@kunaljain0212 kunaljain0212 Jun 19, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Great, thanks.

@MrJithil MrJithil Jun 19, 2021

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Here the pending thing, is you need to revert these lines to their original state.

@kunaljain0212 kunaljain0212 Jun 19, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Reverted back the above-mentioned changes and changes for extender class as both of these are being handled in #1448

overflow: auto;
overflow-x: hidden;
padding: 0 var(--space-20);
Expand Down Expand Up @@ -181,7 +180,7 @@
overflow: visible;
overflow-y: scroll;
position: fixed;
top: var(--nav-height);
top: calc(var(--nav-height) * 2);
Comment thread
manishprivet marked this conversation as resolved.

@manishprivet manishprivet Jun 19, 2021

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think you can remove this now 🙂

@kunaljain0212 kunaljain0212 Jun 19, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Right, removing it.

}

> :last-child {
Expand Down
8 changes: 4 additions & 4 deletions test/components/__snapshots__/aboutPageSideNavBar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,8 @@ exports[`AboutPageSideNavBar renders correctly 1`] = `
>
<a
class="t-body2 side-nav__item-community"
href="/"
id="link-"
href="/about"
id="link-about"
>
About
</a>
Expand Down Expand Up @@ -98,8 +98,8 @@ exports[`AboutPageSideNavBar should about Releases page exist and contain a href
>
<a
class="t-body2 side-nav__item-community"
href="/"
id="link-"
href="/about"
id="link-about"
>
About
</a>
Expand Down
6 changes: 3 additions & 3 deletions test/pages/__snapshots__/about.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ exports[`About page renders correctly 1`] = `
</div>
</nav>
<main
class="streched-container"
class="grid-container"
>
<nav
class="side-nav-about"
Expand All @@ -158,8 +158,8 @@ exports[`About page renders correctly 1`] = `
>
<a
class="t-body2 side-nav__item-community side-nav__item-community--active"
href="/"
id="link-"
href="/about"
id="link-about"
>
About
</a>
Expand Down
6 changes: 3 additions & 3 deletions test/pages/__snapshots__/governance.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ exports[`Governance Page renders correctly 1`] = `
</div>
</nav>
<main
class="streched-container"
class="grid-container"
>
<nav
class="side-nav-about"
Expand All @@ -158,8 +158,8 @@ exports[`Governance Page renders correctly 1`] = `
>
<a
class="t-body2 side-nav__item-community"
href="/"
id="link-"
href="/about"
id="link-about"
>
About
</a>
Expand Down
6 changes: 3 additions & 3 deletions test/pages/__snapshots__/privacy.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ exports[`Privacy Page renders correctly 1`] = `
</div>
</nav>
<main
class="streched-container"
class="grid-container"
>
<nav
class="side-nav-about"
Expand All @@ -158,8 +158,8 @@ exports[`Privacy Page renders correctly 1`] = `
>
<a
class="t-body2 side-nav__item-community"
href="/"
id="link-"
href="/about"
id="link-about"
>
About
</a>
Expand Down
79 changes: 78 additions & 1 deletion test/pages/__snapshots__/releases.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,8 +142,85 @@ exports[`Releases page renders correctly 1`] = `
</div>
</nav>
<main
class="centered-container"
class="grid-container"
>
<nav
class="side-nav-about"
>
<button
class="side-nav__open"
type="button"
>
Menu
</button>
<ul
class="community-nav__list"
>
<a
class="t-body2 side-nav__item-community"
href="/about"
id="link-about"
>
About
</a>
<a
class="t-body2 side-nav__item-community"
href="/governance"
id="link-governance"
>
Project Governance
</a>
<a
class="t-body2 side-nav__item-community"
href="/community"
id="link-community"
>
Community
</a>
<a
class="t-body2 side-nav__item-community"
href="/working-groups"
id="link-working-groups"
>
Working Groups
</a>
<a
class="t-body2 side-nav__item-community side-nav__item-community--active"
href="/releases"
id="link-releases"
>
Releases
</a>
<a
class="t-body2 side-nav__item-community"
href="/resources"
id="link-resources"
>
Resources
</a>
<a
class="t-body2 side-nav__item-community"
href="/trademark"
id="link-trademark"
>
Trademark Policy
</a>
<a
class="t-body2 side-nav__item-community"
href="/privacy"
id="link-privacy"
>
Privacy Policy
</a>
<a
class="t-body2 side-nav__item-community"
href="/security"
id="link-security"
>
Security Reporting
</a>
</ul>
</nav>
<article
class="article-reader"
>
Expand Down
6 changes: 3 additions & 3 deletions test/pages/__snapshots__/resources.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ exports[`About page renders correctly 1`] = `
</div>
</nav>
<main
class="streched-container"
class="grid-container"
>
<nav
class="side-nav-about"
Expand All @@ -158,8 +158,8 @@ exports[`About page renders correctly 1`] = `
>
<a
class="t-body2 side-nav__item-community"
href="/"
id="link-"
href="/about"
id="link-about"
>
About
</a>
Expand Down
6 changes: 3 additions & 3 deletions test/pages/__snapshots__/security.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ exports[`Security page renders correctly 1`] = `
</div>
</nav>
<main
class="streched-container"
class="grid-container"
>
<nav
class="side-nav-about"
Expand All @@ -158,8 +158,8 @@ exports[`Security page renders correctly 1`] = `
>
<a
class="t-body2 side-nav__item-community"
href="/"
id="link-"
href="/about"
id="link-about"
>
About
</a>
Expand Down
6 changes: 3 additions & 3 deletions test/pages/__snapshots__/trademark.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ exports[`Trademark page renders correctly 1`] = `
</div>
</nav>
<main
class="streched-container"
class="grid-container"
>
<nav
class="side-nav-about"
Expand All @@ -158,8 +158,8 @@ exports[`Trademark page renders correctly 1`] = `
>
<a
class="t-body2 side-nav__item-community"
href="/"
id="link-"
href="/about"
id="link-about"
>
About
</a>
Expand Down
6 changes: 3 additions & 3 deletions test/pages/__snapshots__/working-groups.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,7 +142,7 @@ exports[`Working Groups page renders correctly 1`] = `
</div>
</nav>
<main
class="streched-container"
class="grid-container"
>
<nav
class="side-nav-about"
Expand All @@ -158,8 +158,8 @@ exports[`Working Groups page renders correctly 1`] = `
>
<a
class="t-body2 side-nav__item-community"
href="/"
id="link-"
href="/about"
id="link-about"
>
About
</a>
Expand Down