search

open-learning-exchange / open-learning-exchange.github.io

http://open-learning-exchange.github.io/
39 stars 321 forks source link

Side Anchor Navigation in First Steps of Mobile Virtual Intern behaviour not consistent #3350

Open deeppp15 opened 1 month ago

deeppp15 commented 1 month ago

Please verify the following:

URL to the MDwiki page containing the problem

https://open-learning-exchange.github.io/#!pages/mi/mi-10-steps.md#Step_6_-_GitHub_Issues_Tutorial

Problem

When you navigate to the First Steps you can see that the side navbar fixes towards the left. This navbar stays fixed until you navigate to the 9th step after which this Navbar moves to the top.

This is not expected behaviour where side navbar should be fixed on the left whereas the scrollable content should be on right. The side nav's purpose should be to enable ease of step navigation on this page by directing to anchors in the scrollable section.

Screenshots (when necessary)

Before navigating to the bottom navbar behaviour- Before

After navigating to the bottom navbar behaviour- After

Proposed solution(s)

Changing the position of the anchor links navbar to be sticky on the left. Modifying the logic for navigating to the end of the steps to make the side navbar consistent.

xyb994 commented 4 weeks ago

I've created an issue about this and feel free to claim it https://github.com/open-learning-exchange/open-learning-exchange.github.io/issues/3354

Regardless, feel free to try to fix this issue in its javascript code somewhere, but please don't make significant changes, e.g. more than 5 or 10 lines... and ensure you test it to make sure it works.

deeppp15 commented 4 weeks ago

Additional Issue with Current Implementation

  1. The current implementation calculates the size of the navbar and adjusts the margin-top dynamically using the check_offset_to_navbar function in bootstrap.js. This approach helps manage the variable size of the navbar as handled by set_offset_to_navbar.

  2. The use of the affix class to make the navbar sticky, combined with the absence of an overflow property, results in difficulties accessing the bottom contents of the navbar until reaching the end of the page. This issue is illustrated in the image below.

    image

    In the image, navbar elements 9 and 10 are not accessible.

Proposed Refactored Approach

To simplify the handling of navbar height and positioning, we can implement a refactored approach. By making the navbar a scrollable element, we can address the need for dynamic height calculations. Specifically, setting a fixed size for the <div id="md-page-menu"> and applying overflow: scroll would streamline the implementation.

This approach would eliminate the need for dynamic margin adjustments and improve access to the bottom anchor elements within the navbar, which are currently less accessible.

Scope of Implementation

In order to implement this approach we would have to change the behaviour and styling elements of the side navbar which would result in major changes.