Update navbar usage and documentation #790

Chng-Zhi-Xuan · 2019-03-25T10:10:11Z

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

• [x] Documentation update
• [x] Enhancement to an existing feature

Part of #733

Note:
This PR is branched from #733. Thus the commits are shared with it. First unique commit is titled `Asset: Update vue-strap.min.js`.

What changes did you make? (Give an overview)

Added updated vue-strap.min.js from Remove position fixed classes from Navbar vue-strap#101
Updated navBars.mbdf to reflect new behaviour of navbars
Updated spacer-top class
Refactored usage of header.md within documentation and test_site to a header file
Added header content test within test_site

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

Commit messages
Documentation changes

Testing instructions:

Browse documentation using Netlify Preview

marvinchin

Looks good, just a couple of nits 🍰

marvinchin · 2019-03-25T17:01:39Z

asset/css/markbind.css

-      This class can be removed once the component's position type is changed.
-    */
-    padding-top: 70px;
+    /* This class is to ensure adequate spacing of contents from the top of the page */


Just wondering - should this comment be placed outside the class definition (even though the comment was previously inside the class definition)? 🙂

For this section, how I formatted it was

/** * Main section description */ /* sub section one */ /* sub section two */ .some-class { /* class description */ }

My intention was to separate sub section title comments from class descriptions

marvinchin · 2019-03-25T17:02:57Z

docs/userGuide/syntax/navBars.mbdf

@@ -2,11 +2,17 @@

 **Navbar allows visitors of your website to navigate through pages easily.**

+<box type="warning">
+  <markdown>
+Note: **Navbars** should be placed within a [header file]({{ baseUrl }}/userguide/tweakingthepagestructure.html#headers) to ensure correct positioning at the top of your page.


Should we change "to ensure correct positioning" -> "to ensure that they are correctly positioned"?

"... to ensure that they are correctly positioned above page navigation and site navigation menus." ?

Added more explicit interaction description.

How about:

"... to ensure that they are correctly positioned at the top of the page, above the page navigation and site navigation menus."

Wanted to clicked comment but hit approve instead :(

luyangkenneth

Seems like the navbar is no longer fixed to the top of the page. Is this intentional?

i.e. The more I scroll, the less of the navbar I see

luyangkenneth · 2019-03-28T10:21:32Z

Also, I'm not sure which specific PR introduced this change, but the "User Guide" heading in the site nav is indented when it shouldn't be.

yamgent · 2019-03-28T16:58:30Z

As spoken, need to rebase this PR to get rid of the commits that originated from #733.

yamgent · 2019-03-28T17:01:28Z

Seems like the navbar is no longer fixed to the top of the page. Is this intentional?

@luyangkenneth As discussed with Prof, yes this is intentional, it follows the style of other websites such as Jekyll's home page.

damithc · 2019-03-29T01:16:26Z

@luyangkenneth As discussed with Prof, yes this is intentional, it follows the style of other websites such as Jekyll's home page.

As I understood, there are technical difficulties in making the navbar fixed after the recent changes to add support for page headers. Some (but not all) other similar sites such as Jekyll seem to have non-fixed nav bars too. So, I don't mind dropping the fixed navbar until we can bring back support for fixed navbars.

Chng-Zhi-Xuan · 2019-03-29T05:23:18Z

Update

Rebase to latest master
Made minor documentation amendments, following review comments.

Discussion

Adopting the new holy grail layout require us to forgo position:fixed items. This is as we wanted to avoid using magic numbers to align the sticky side navigation menus if there was a position:fixed top navigation bar.

It also solves the issue of using anchor links and having a position:fixed top navbar block the heading.

yamgent

Also there's a merge conflict again.

yamgent · 2019-03-30T03:15:45Z

test/functional/test_site/_markbind/headers/header.md

@@ -0,0 +1,11 @@
+<header>
+  <navbar placement="top" type="inverse">


placement="top" is redundant here.

The navbar component within the vue-strap repository has been updated, thus we need to import the newly built file into MarkBind.

Since header.md uses the navbar component, it is not positioned correctly when used inline. Let's shift header.md into the headers folder so that it can be specified in the frontmatter for the pages that require it.

The header.md contents will not be positioned correctly unless it is specified as a header file. Let's change usage of navbars within each page from inline to specifying it within frontmatter.

Since the behaviour of the navbar component has changed, let's update the documentation for it.

The workaround for the spacer-top class is not required as navbars do not have position:fixed with the latest changes. However, the contents of the menus are too close to the top of the page after "sticking" to the top. Thus the padding has been changed to 1rem to follow Bootstrap's navbar spacing conventions.

This is to test other content, aside from the navbar, whether they will be placed correctly within the page.

Chng-Zhi-Xuan · 2019-03-30T06:16:48Z

Update

Rebase to latest master
Removed placement="top" from header.md in test_site

Chng-Zhi-Xuan mentioned this pull request Mar 25, 2019

Remove position fixed classes from Navbar MarkBind/vue-strap#101

Merged

marvinchin previously approved these changes Mar 25, 2019

View reviewed changes

marvinchin self-requested a review March 25, 2019 17:07

luyangkenneth reviewed Mar 28, 2019

View reviewed changes

luyangkenneth mentioned this pull request Mar 28, 2019

Allow custom colors for top nav bar #386

Closed

Chng-Zhi-Xuan force-pushed the 733-navbar-position branch from 2f29e8b to 54c4fa5 Compare March 29, 2019 05:21

yamgent reviewed Mar 30, 2019

View reviewed changes

Chng-Zhi-Xuan added 8 commits March 30, 2019 14:02

Asset: Update vue-strap.min.js

2f2dbba

The navbar component within the vue-strap repository has been updated, thus we need to import the newly built file into MarkBind.

Docs: Shift header.md into headers folder

4bc3777

Since header.md uses the navbar component, it is not positioned correctly when used inline. Let's shift header.md into the headers folder so that it can be specified in the frontmatter for the pages that require it.

Docs: Specify header in pages with navbar

749e43f

The header.md contents will not be positioned correctly unless it is specified as a header file. Let's change usage of navbars within each page from inline to specifying it within frontmatter.

Docs: Update navBars.mbdf

ed4013a

Since the behaviour of the navbar component has changed, let's update the documentation for it.

Test: Add Jumbotron header content

0e6ff4f

This is to test other content, aside from the navbar, whether they will be placed correctly within the page.

Test: Update test_site expected files folder

a5396a0

Test: Update test_site_algolia expected files

11c25b2

Chng-Zhi-Xuan force-pushed the 733-navbar-position branch from 54c4fa5 to 11c25b2 Compare March 30, 2019 06:16

yamgent approved these changes Mar 30, 2019

View reviewed changes

yamgent added this to the v1.22.1 milestone Mar 30, 2019

yamgent merged commit ef167aa into MarkBind:master Mar 31, 2019

Chng-Zhi-Xuan deleted the 733-navbar-position branch May 21, 2019 06:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update navbar usage and documentation #790

Update navbar usage and documentation #790

Chng-Zhi-Xuan commented Mar 25, 2019 •

edited

Loading

marvinchin left a comment

marvinchin Mar 25, 2019

Chng-Zhi-Xuan Mar 26, 2019

marvinchin Mar 25, 2019

Chng-Zhi-Xuan Mar 26, 2019

luyangkenneth Mar 28, 2019

luyangkenneth left a comment

luyangkenneth commented Mar 28, 2019 •

edited

Loading

yamgent commented Mar 28, 2019

yamgent commented Mar 28, 2019

damithc commented Mar 29, 2019

Chng-Zhi-Xuan commented Mar 29, 2019 •

edited

Loading

yamgent left a comment

yamgent Mar 30, 2019

Chng-Zhi-Xuan commented Mar 30, 2019

		@@ -0,0 +1,11 @@
		<header>
		<navbar placement="top" type="inverse">

Update navbar usage and documentation #790

Update navbar usage and documentation #790

Conversation

Chng-Zhi-Xuan commented Mar 25, 2019 • edited Loading

marvinchin left a comment

Choose a reason for hiding this comment

marvinchin Mar 25, 2019

Choose a reason for hiding this comment

Chng-Zhi-Xuan Mar 26, 2019

Choose a reason for hiding this comment

marvinchin Mar 25, 2019

Choose a reason for hiding this comment

Chng-Zhi-Xuan Mar 26, 2019

Choose a reason for hiding this comment

luyangkenneth Mar 28, 2019

Choose a reason for hiding this comment

luyangkenneth left a comment

Choose a reason for hiding this comment

luyangkenneth commented Mar 28, 2019 • edited Loading

yamgent commented Mar 28, 2019

yamgent commented Mar 28, 2019

damithc commented Mar 29, 2019

Chng-Zhi-Xuan commented Mar 29, 2019 • edited Loading

yamgent left a comment

Choose a reason for hiding this comment

yamgent Mar 30, 2019

Choose a reason for hiding this comment

Chng-Zhi-Xuan commented Mar 30, 2019

Chng-Zhi-Xuan commented Mar 25, 2019 •

edited

Loading

luyangkenneth commented Mar 28, 2019 •

edited

Loading

Chng-Zhi-Xuan commented Mar 29, 2019 •

edited

Loading