From 9e3ca6b3346a46793aa5ea4446007640be307ca7 Mon Sep 17 00:00:00 2001 From: Ze Yu Date: Fri, 12 Jun 2020 00:36:37 +0800 Subject: [PATCH] Fix site nav highlight and padding Needing to start content without padding in the site navigation menu is a rare use case. Let's revert the padding removal from the site nav. The site nav supports adding custom content in between navigation items as a markdown list item, but erroneously applies the highlight and click wrapper. Let's not apply the wrapper when there is no anchor or nested list in said list item to rectify this. --- asset/css/markbind.css | 2 + asset/css/page-nav.css | 1 - asset/css/site-nav.css | 6 +- docs/_markbind/layouts/devGuide/navigation.md | 2 +- .../_markbind/layouts/userGuide/navigation.md | 2 +- docs/_markbind/navigation/devGuideSections.md | 2 +- .../_markbind/navigation/userGuideSections.md | 2 +- .../userGuide/syntax/siteNavigationMenus.mbdf | 104 ++++++++++++------ src/Page.js | 8 ++ src/constants.js | 1 + test/functional/test_site/expected/index.html | 34 ++---- .../expected/markbind/css/markbind.css | 2 + .../expected/markbind/css/page-nav.css | 1 - .../expected/markbind/css/site-nav.css | 6 +- .../test_site/expected/testLayouts.html | 6 +- .../expected/testLayoutsOverride.html | 6 +- .../expected/index.html | 2 +- .../expected/markbind/css/markbind.css | 2 + .../expected/markbind/css/page-nav.css | 1 - .../expected/markbind/css/site-nav.css | 6 +- .../test_site_convert/expected/Home.html | 10 +- .../test_site_convert/expected/Page-1.html | 10 +- .../test_site_convert/expected/_Footer.html | 10 +- .../test_site_convert/expected/_Sidebar.html | 10 +- .../test_site_convert/expected/about.html | 10 +- .../expected/contents/topic1.html | 2 +- .../expected/contents/topic2.html | 2 +- .../expected/contents/topic3a.html | 2 +- .../expected/contents/topic3b.html | 2 +- .../test_site_convert/expected/index.html | 10 +- .../expected/markbind/css/markbind.css | 2 + .../expected/markbind/css/page-nav.css | 1 - .../expected/markbind/css/site-nav.css | 6 +- .../expected/markbind/css/markbind.css | 2 + .../expected/markbind/css/page-nav.css | 1 - .../expected/markbind/css/site-nav.css | 6 +- .../expected/markbind/css/markbind.css | 2 + .../expected/markbind/css/page-nav.css | 1 - .../expected/markbind/css/site-nav.css | 6 +- .../expected/contents/topic1.html | 2 +- .../expected/contents/topic2.html | 2 +- .../expected/contents/topic3a.html | 2 +- .../expected/contents/topic3b.html | 2 +- .../test_default/expected/index.html | 2 +- .../expected/markbind/css/markbind.css | 2 + .../expected/markbind/css/page-nav.css | 1 - .../expected/markbind/css/site-nav.css | 6 +- .../expected/markbind/css/markbind.css | 2 + .../expected/markbind/css/page-nav.css | 1 - .../expected/markbind/css/site-nav.css | 6 +- 50 files changed, 178 insertions(+), 141 deletions(-) diff --git a/asset/css/markbind.css b/asset/css/markbind.css index 32a47f6370..d7a5e773e7 100644 --- a/asset/css/markbind.css +++ b/asset/css/markbind.css @@ -166,6 +166,8 @@ footer { spacing between itself and the boundaries of the menus */ overflow-y: auto; + padding-left: 12px; + padding-right: 12px; padding-top: 1rem; top: 0; } diff --git a/asset/css/page-nav.css b/asset/css/page-nav.css index 93db9a839a..dab2955039 100644 --- a/asset/css/page-nav.css +++ b/asset/css/page-nav.css @@ -12,7 +12,6 @@ #page-nav .nav-inner { max-height: 90vh; - padding: 0 20px; } #page-nav a:link, diff --git a/asset/css/site-nav.css b/asset/css/site-nav.css index 7e79b71adf..799ee1cc67 100644 --- a/asset/css/site-nav.css +++ b/asset/css/site-nav.css @@ -23,15 +23,19 @@ .site-nav-list { list-style-type: none; - cursor: pointer; padding-left: 0; } +.site-nav-list-root { + margin: 0 -12px; +} + .site-nav-list-item-content { display: flex; padding: 0.5rem 0 0 2.8rem; transition: background-color 0.08s; color: #454545; + cursor: pointer; } .site-nav-list-item-content-0 { diff --git a/docs/_markbind/layouts/devGuide/navigation.md b/docs/_markbind/layouts/devGuide/navigation.md index 95c4dd1567..a42eee2bb6 100644 --- a/docs/_markbind/layouts/devGuide/navigation.md +++ b/docs/_markbind/layouts/devGuide/navigation.md @@ -1,6 +1,6 @@ -Developer Guide +Developer Guide * [Developer Guide]({{baseUrl}}/devGuide/devGuide.html) * [Maintainer Guide]({{baseUrl}}/devGuide/maintainerGuide.html) diff --git a/docs/_markbind/layouts/userGuide/navigation.md b/docs/_markbind/layouts/userGuide/navigation.md index c6339729cf..6940db8f38 100644 --- a/docs/_markbind/layouts/userGuide/navigation.md +++ b/docs/_markbind/layouts/userGuide/navigation.md @@ -1,6 +1,6 @@ -User Guide +User Guide * [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html) * **Authoring Contents** :expanded: diff --git a/docs/_markbind/navigation/devGuideSections.md b/docs/_markbind/navigation/devGuideSections.md index 95c4dd1567..a42eee2bb6 100644 --- a/docs/_markbind/navigation/devGuideSections.md +++ b/docs/_markbind/navigation/devGuideSections.md @@ -1,6 +1,6 @@ -Developer Guide +Developer Guide * [Developer Guide]({{baseUrl}}/devGuide/devGuide.html) * [Maintainer Guide]({{baseUrl}}/devGuide/maintainerGuide.html) diff --git a/docs/_markbind/navigation/userGuideSections.md b/docs/_markbind/navigation/userGuideSections.md index eda65ccfde..5b93269cbb 100644 --- a/docs/_markbind/navigation/userGuideSections.md +++ b/docs/_markbind/navigation/userGuideSections.md @@ -1,6 +1,6 @@ -User Guide +User Guide * [Getting Started]({{baseUrl}}/userGuide/gettingStarted.html) * [Authoring Contents]({{baseUrl}}/userGuide/authoringContents.html) :expanded: diff --git a/docs/userGuide/syntax/siteNavigationMenus.mbdf b/docs/userGuide/syntax/siteNavigationMenus.mbdf index 0fd7c7266c..8b633be3f9 100644 --- a/docs/userGuide/syntax/siteNavigationMenus.mbdf +++ b/docs/userGuide/syntax/siteNavigationMenus.mbdf @@ -3,7 +3,7 @@ **A _Site Navigation Menu_ (==_siteNav_ for short==) is a fixed menu on the ==left edge== of a page**, that can be used to show a road map of the main pages of your site. Steps to add a siteNav: -1. Format your siteNav as an unordered Markdown list and save it inside the `_markbind/navigation` directory. You may include dividers in the siteNav via horizontal rules. +1. Format your siteNav as an unordered Markdown list and save it inside the `_markbind/navigation` directory. 2. Specify the file as the value of the `siteNav` attribute in the `` of the page.
@@ -12,15 +12,13 @@ Steps to add a siteNav: ```{.no-line-numbers} * [:house: Home]({{ baseUrl }}/index.html) ---- +* --- * Docs * [User Guide]({{ baseUrl }}/ug.html) * [Dev Guide]({{ baseUrl }}/dg.html) ---- * [Search]({{ baseUrl }}/search.html) * [Google Search](https://www.google.com/) * [YouTube Search](https://www.youtube.com/) ---- * [Contact]({{ baseUrl }}/contact.html) ``` @@ -33,66 +31,100 @@ Here's how another page can make use of the above siteNav: ... ``` -Here's how the above siteNav will appear: - -
diff --git a/test/functional/test_site/expected/markbind/css/markbind.css b/test/functional/test_site/expected/markbind/css/markbind.css index 32a47f6370..d7a5e773e7 100644 --- a/test/functional/test_site/expected/markbind/css/markbind.css +++ b/test/functional/test_site/expected/markbind/css/markbind.css @@ -166,6 +166,8 @@ footer { spacing between itself and the boundaries of the menus */ overflow-y: auto; + padding-left: 12px; + padding-right: 12px; padding-top: 1rem; top: 0; } diff --git a/test/functional/test_site/expected/markbind/css/page-nav.css b/test/functional/test_site/expected/markbind/css/page-nav.css index 93db9a839a..dab2955039 100644 --- a/test/functional/test_site/expected/markbind/css/page-nav.css +++ b/test/functional/test_site/expected/markbind/css/page-nav.css @@ -12,7 +12,6 @@ #page-nav .nav-inner { max-height: 90vh; - padding: 0 20px; } #page-nav a:link, diff --git a/test/functional/test_site/expected/markbind/css/site-nav.css b/test/functional/test_site/expected/markbind/css/site-nav.css index 7e79b71adf..799ee1cc67 100644 --- a/test/functional/test_site/expected/markbind/css/site-nav.css +++ b/test/functional/test_site/expected/markbind/css/site-nav.css @@ -23,15 +23,19 @@ .site-nav-list { list-style-type: none; - cursor: pointer; padding-left: 0; } +.site-nav-list-root { + margin: 0 -12px; +} + .site-nav-list-item-content { display: flex; padding: 0.5rem 0 0 2.8rem; transition: background-color 0.08s; color: #454545; + cursor: pointer; } .site-nav-list-item-content-0 { diff --git a/test/functional/test_site/expected/testLayouts.html b/test/functional/test_site/expected/testLayouts.html index a9507085f8..8780fdd915 100644 --- a/test/functional/test_site/expected/testLayouts.html +++ b/test/functional/test_site/expected/testLayouts.html @@ -28,10 +28,8 @@
diff --git a/test/functional/test_site/expected/testLayoutsOverride.html b/test/functional/test_site/expected/testLayoutsOverride.html index 87c3db8a18..cbe80b04c3 100644 --- a/test/functional/test_site/expected/testLayoutsOverride.html +++ b/test/functional/test_site/expected/testLayoutsOverride.html @@ -28,10 +28,8 @@
diff --git a/test/functional/test_site_algolia_plugin/expected/index.html b/test/functional/test_site_algolia_plugin/expected/index.html index e35a623eb6..33535cd636 100644 --- a/test/functional/test_site_algolia_plugin/expected/index.html +++ b/test/functional/test_site_algolia_plugin/expected/index.html @@ -26,7 +26,7 @@