Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Patch site navigation rendering of dropdown menus #297

Merged
merged 3 commits into from
Jul 3, 2018

Conversation

Chng-Zhi-Xuan
Copy link
Contributor

@Chng-Zhi-Xuan Chng-Zhi-Xuan commented Jul 2, 2018

What is the purpose of this pull request? (put "X" next to an item, remove the rest)

• [X] Bug fix

Fixes #272

What is the rationale for this request?

  • User discovered that using styled headings prevent dropdown menus from being rendered in the site navigation.
  • Also, text in dropdown menu buttons will center after being wrapped around, which may cause indentation issues.

What changes did you make? (Give an overview)

  • Modified algorithm in formatSiteNav to account for styling tags in dropdown menu titles
  • Modified dropdown-btn CSS to align text to the left.

Before After
dropdown-before dropdown-after

Is there anything you'd like reviewers to focus on?

  • New algorithm in formatSiteNav

Testing instructions:

  • Run markbind serve on the test_site folder.
  • Check that dropdown menus have been rendered for styled text titles.

const nestedList = $(this).children().first();
const dropdownTitle = $(this).contents().first().text();
// Do not render dropdown menu for list items with <a> tag
if ($(this).children('a').length) {
Copy link
Member

Choose a reason for hiding this comment

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

Would be better if this was more explicit:

if ($(this).children('a').length > 0) {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It follows Javascript style where we use the truthy values from an integer directly without doing an explicit comparison since it is guaranteed that the value is an integer >= 0.

nestedList.parent().replaceWith(formatSiteNav(nestedList.parent().html()));
}
// Found nested list, render dropdown menu
} else if ($(this).children('ul').length) {
Copy link
Member

Choose a reason for hiding this comment

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

Same here:

} else if ($(this).children('ul').length > 0) {

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Comment above.

lib/Page.js Outdated
@@ -131,14 +140,6 @@ function formatSiteNav(renderedSiteNav) {
// Recursively format nested lists
nestedList.replaceWith(formatSiteNav(nestedList.parent().html()));
// Found element that is not a list, with nested items
Copy link
Member

Choose a reason for hiding this comment

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

This comment should be deleted now.

Copy link
Member

@yamgent yamgent left a comment

Choose a reason for hiding this comment

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

Works well, some comments (see above)

@Chng-Zhi-Xuan
Copy link
Contributor Author

Update

  • Remove redundant comment
  • Squashed commits

@yamgent yamgent merged commit 93e3cc0 into MarkBind:master Jul 3, 2018
@yamgent yamgent modified the milestones: v1.9.0, v1.9.0 (Migration), v1.8.4 Jul 3, 2018
@Chng-Zhi-Xuan Chng-Zhi-Xuan deleted the 272-patch-site-nav branch May 21, 2019 06:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

site nav: difficulty in creating a drop-down item
2 participants