feat(navigation): restyle navigation sizing - I276

[jerrybuks]

Signed-off-by: jerrybuks [email protected]

Issue #

Made the width of the navigation component adjust based on screen size and used CSS to determine when to truncate & add the ellipsis.### Changes

• Updated generators.js
• Updated Navigation/styles.js

Flags

-Headings in navigation can appear to be truncated prematurely, especially on larger screens

Related Issues

• N/A

[elit-altum]

@jerrybuks Could you add some screenshots/GIFs of the changes made?

[jerrybuks]

@jerrybuks Could you add some screenshots/GIFs of the changes made?

But that can be found, under files changed

[jolanglinais]

Looks promising at first glance, will test this more on Monday.

[Michael-Grover]

@jerrybuks can you provide a gif or video of the truncation in practice? Possible showing different screen widths and how it affects the navigation sizing? I recommend using https://www.loom.com or Quicktime to record

[jerrybuks]

@jerrybuks can you provide a gif or video of the truncation in practice? Possible showing different screen widths and how it affects the navigation sizing? I recommend using https://www.loom.com or Quicktime to record

okay

[jolanglinais]

It looks like it is not truncating but rather just cutting it off at a point:

[jerrybuks]

It looks like it is not truncating but rather just cutting it off at a point:

It truncates, but I just noticed this issue happens when the view port width is greater than the width of the left Nav, since the left Nav is set to "overflow:hidden", it displays this way. Noticed It about 30 minutes ago, I'm about to update this PR to fix this issue.

[jerrybuks]

It looks like it is not truncating but rather just cutting it off at a point:

It truncates, but I just noticed this issue happens when the view port width is greater than the width of the left Nav, since the left Nav is set to "overflow:hidden", it displays this way. Noticed It about 30 minutes ago, I'm about to update this PR to fix this issue.

fixed!

[jerrybuks]

It looks like it is not truncating but rather just cutting it off at a point:

It truncates, but I just noticed this issue happens when the view port width is greater than the width of the left Nav, since the left Nav is set to "overflow:hidden", it displays this way. Noticed It about 30 minutes ago, I'm about to update this PR to fix this issue.

fixed!

To make the width of the Navigation bigger, so as to completely prevent truncating when there is still enough space on the page, this will have to be done in the leftNav component in the "template-studio-v2", trying to do this from the Navigation component causes the issue you noticed, as the Left Nav component has its overflow set to hidden, so If the width of the Navigation component becomes bigger than its own width, it hides the content of the Navigation. with the changes I just made, the Navigation now inherits the width of its parent.

[jolanglinais]

Latest:

[jerrybuks]

@jerrybuks can you provide a gif or video of the truncation in practice? Possible showing different screen widths and how it affects the navigation sizing? I recommend using https://www.loom.com or Quicktime to record

okay
Here, https://www.loom.com/share/24fe32d37c724fecbcfdc10bbfabdca8

[jolanglinais]

I think this means you can remove generators.js and fix/remove the tests that relied on this logic as well.

[jerrybuks]

I think this means you can remove generators.js and fix/remove the tests that relied on this logic as well.

okay, will do that

[jerrybuks]

I think this means you can remove generators.js and fix/remove the tests that relied on this logic as well.

Done, supposed to be action.js(deleted), though and I've also removed the tests for It

[DianaLease]

LGTM

[jolanglinais]

⚡️

[jolanglinais]

@jerrybuks could you just rebase with the latest master and I'll merge?

[jerrybuks]

@jerrybuks could you just rebase with the latest master and I'll merge?

Okay, I think I've done that, by running " git rebase upstream/master" and then pushing, I this what you meant? or please do you mean pulling and merging from upstream/master

[jolanglinais]

Looks like you're in a fork. Go with:

  git checkout master
  git fetch --all --prune
  git rebase upstream/master
  git push origin master
  git checkout jerrybuks-issue276-restyling-navigation-sizing
  git rebase master
  git push origin jerrybuks-issue276-restyling-navigation-sizing -f

[jerrybuks]

Looks like you're in a fork. Go with:

  git checkout master
  git fetch --all --prune
  git rebase upstream/master
  git push origin master
  git checkout jerrybuks-issue276-restyling-navigation-sizing
  git rebase master
  git push origin jerrybuks-issue276-restyling-navigation-sizing -f

Done @irmerk