search

mitodl / ocw-hugo-themes

A Hugo theme for building OCW websites
BSD 3-Clause "New" or "Revised" License
5 stars 4 forks source link

Toggling a topic close in course info changes the layout #1237

Closed HussainTaj-arbisoft closed 1 year ago

HussainTaj-arbisoft commented 1 year ago

In the desktop view, toggling topics close causes the layout to change.

Screenshot 2023-08-31 at 4 55 58 PM

Expected Behavior

Only the topic is collapsed.

Current Behavior

The topic is collapsed but the layout also shifts.

Steps to Reproduce

  1. Open https://ocw.mit.edu/courses/res-7-005-biology-teaching-assistant-ta-training-fall-2021/download/ in desktop view.
  2. Open the course-info menu, if it is not already open.
  3. Close/Collapse a topic.

Possible Solution

We recently switched the course-info menu from a manual toggle to Bootstrap's collapsible element. The nested collapsible might be affecting the menu position. The menu position is controlled by JS, by fetching collapse events. We might need to apply some filtering on the handlers.

pdpinch commented 1 year ago

Can we add a playwright test as part of this fix?

HussainTaj-arbisoft commented 1 year ago

Can we add a playwright test as part of this fix?

Do you mean specifically for the layout? Yes, we can.

We already have a test to check if the toggle works. We can add an additional test to ensure interacting with inner elements does not change the menu's position on the page.

HussainTaj-arbisoft commented 1 year ago

I will need to work on this as a part of https://github.com/mitodl/ocw-hugo-themes/issues/1220 because it makes changes to the topics list. Having this issue will hinder the testing of https://github.com/mitodl/ocw-hugo-themes/issues/1220.