Freecodecamp: On closing the map section, the lesson section isn't resizable

[vkWeb]

Issue Description

As you can see in the GIF below when the map section is not closed the lesson section gets resized easily. But when it is toggled-off the lesson section is not resizing to the left.

Browser Information

• Browser Name, Version: Chrome (latest release) & Firefox (57.0.2).
• Operating System: Windows 10 Pro 32 bit.
• Mobile, Desktop, or Tablet: Desktop.

[QuincyLarson]

@vkWeb Nice find! Yes - we definitely need to fix this.

[vkWeb]

@QuincyLarson I'll keep on debugging things :)
Actually, I'm a beginner in web development that's why I'm bit uncomfortable in contributing to the code base but next year I'll complete my high school and I'll spend all my time learning and contributing to different open source projects.

[abohannon]

I can take a crack at fixing this if nobody minds.

[meda123]

This would be a first-time contribution, so I'll take a look as well!

[vkWeb]

@abohannon You can start working on this issue. Please, go through our Contributing guidelines.

@meda123 I'm extremely sorry but there are a lot of outstanding issues you can help with. We'll be looking forward to your PR. 😃

[vkWeb]

@QuincyLarson This issue is being addressed by @abohannon.

[QuincyLarson]

Hi @abohannon Have you had time to make any progress on this?

[abohannon]

Hey @QuincyLarson, took a look yesterday and plan to get back to it tomorrow (possibly tonight). Certainly a learning curve digesting the codebase for the first time. Is there anything I should know about how the panes and dividers are structured/work together? I think I've found the redux action that might be responsible, but will need to debug further. Thanks for the opportunity to troubleshoot this.

[sachinlamba]

I tried to check on this. Actually, 2 files we need to udpate, I think. 1. freeCodeCampcommonappPanesPanes.jsx & 2. freeCodeCampcommonappPanesreduxindex.jsx . Code is working like whole 100% browser width is divided into totalNoOfPanels. bcz of that, Side-panel(Ques description part panel) getting its min & max width(or left-right values) which is increased to approx 33% after Map-Panel hide. (First timer,so, dont want to change anything r8 now in this project.) Please tell if I am wrong.

[abohannon]

@sachinlamba thanks for the feedback. Your input and Redux dev tools helped me pinpoint what seems to be the problematic action, dividerClicked. Removing dividerBuffer from leftBound gets rid of the weird auto-resizing behavior and results in a semi-normal resizing effect, however the user still isn't able to collapse the leftPane all the way when the map pane is gone. If I get rid of both leftBound and rightBound, the user is able to resize normally, except the panes are able to resize beyond their neighbors, so not ideal.

Also, I'm not sure if this is intentional (maybe I'm not understanding the semantics for the pane state properties), but the leftPane and rightPane seem to be off by one index. In the attached screen shot, you'll see that map isn't visible, but it's logging as leftPane. Also, the dividerLeft for rightPane is 66.66 when one would assume it would be 0. Finally, when the map pane IS visible, leftPane returns an empty object when you'd assume it should return map pane state.

I'll keep working on this.

[abohannon]

@vkWeb I think I'm ready to submit a PR for this. Having an issue with the tests, though. Getting a ton of what appear to be linting errors in files I didn't edit. There don't appear to be any errors in my files. Should I submit the PR regardless?

[QuincyLarson]

@abohannon can you pull the latest version of staging and merge it into your branch, then try running the npm run lint command?

[abohannon]

@QuincyLarson turns out I had a rogue eslint file conflicting. Deleted it and all tests passed. PR submitted.

[vkWeb]

@abohannon Great job. 🤗

[vkWeb]

@QuincyLarson, @abohannon, @raisedadead. This issue has been fixed. See comment on #16394.

[QuincyLarson]

@vkWeb Thanks for catching this, and for closing the issue :)

[vkWeb]

@QuincyLarson Always for freeCodeCamp. No thanks, Sir. :)