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.

Sign up for GitHub

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

Tweak sitenav design #2204

Merged
merged 13 commits into from
Mar 15, 2023
Merged

Tweak sitenav design #2204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5173a36
Update sitenav look
itsyme Mar 11, 2023
9cbfa9e
Merge branch 'master' into update-sitenav
itsyme Mar 12, 2023
7d19839
Tweak site-nav-top
itsyme Mar 12, 2023
a108180
Change dropdown button width and add hover transition
itsyme Mar 13, 2023
b682b73
Revert site-nav-top changes
itsyme Mar 14, 2023
9931827
Add sitenav dropdown icon container
itsyme Mar 14, 2023
9d5e0e4
Fix nit
itsyme Mar 14, 2023
427de3e
Fix nit
itsyme Mar 14, 2023
0720db2
Fix alignment of dropdown icons
itsyme Mar 14, 2023
05ae94b
Update tests
itsyme Mar 14, 2023
578e6e1
Merge branch 'master' into update-sitenav
itsyme Mar 15, 2023
b2ab632
Revert site-nav-top font size
itsyme Mar 15, 2023
ab3ee2a
Merge branch 'master' into update-sitenav
itsyme Mar 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/_markbind/layouts/userGuide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@
</div>
<div class="nav-component slim-scroll">
<site-nav>
* [**Getting Started**]({{baseUrl}}/userGuide/gettingStarted.html)
* **Authoring Contents** :expanded:
* [Getting Started]({{baseUrl}}/userGuide/gettingStarted.html)
* Authoring Contents :expanded:
* [Overview]({{baseUrl}}/userGuide/authoringContents.html)
* [Adding Pages]({{baseUrl}}/userGuide/addingPages.html)
* [MarkBind Syntax Overview]({{baseUrl}}/userGuide/markBindSyntaxOverview.html)
Expand All @@ -23,7 +23,7 @@
* [Using HTML, JavaScript, CSS]({{baseUrl}}/userGuide/usingHtmlJavaScriptCss.html)
* [Tweaking the Page Structure]({{baseUrl}}/userGuide/tweakingThePageStructure.html)
* [Reusing Contents]({{baseUrl}}/userGuide/reusingContents.html)
* **Working with Sites** :expanded:
* Working with Sites :expanded:
* [Overview]({{baseUrl}}/userGuide/workingWithSites.html)
* [Setting Site Properties]({{baseUrl}}/userGuide/settingSiteProperties.html)
* [Using Plugins]({{baseUrl}}/userGuide/usingPlugins.html)
Expand All @@ -33,7 +33,7 @@
* [MarkBind in the Project Workflow]({{baseUrl}}/userGuide/markBindInTheProjectWorkflow.html)
* [Redirecting to a Custom 404 Page]({{baseUrl}}/userGuide/redirectingToACustom404Page.html)
* [Adding Navigation Buttons]({{baseUrl}}/userGuide/addingNavigationButtons.html)
* **References** :expanded:
* References :expanded:
* [CLI Commands]({{baseUrl}}/userGuide/cliCommands.html)
* [Reader-Facing Features]({{baseUrl}}/userGuide/readerFacingFeatures.html)
* [Full Syntax Reference]({{baseUrl}}/userGuide/fullSyntaxReference.html)
Expand Down
54 changes: 27 additions & 27 deletions packages/cli/test/functional/test_site/expected/bugs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,9 +79,9 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)"><strong>Dropdown </strong> <span aria-hidden="true" class="glyphicon glyphicon-search"></span> title ✏️
<!-- Nested list items will be placed inside a Dropdown menu -->

<i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
<div class="site-nav-dropdown-btn-container"><i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i></div>
</div>
<ul class="site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list">
<li>
Expand All @@ -93,9 +93,9 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)">Nested Dropdown title 📐

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
<div class="site-nav-dropdown-btn-container"><i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i></div>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li>
Expand All @@ -118,9 +118,9 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)">Filler text <a href="https://www.youtube.com/"><span aria-hidden="true" class="glyphicon glyphicon-facetime-video"></span> Youtube 📺</a> filler text
<!-- Using a link as a Dropdown title will not render a Dropdown menu -->

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
<div class="site-nav-dropdown-btn-container"><i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i></div>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li>
Expand All @@ -130,9 +130,9 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><mark>Dropdown title</mark> <span aria-hidden="true" class="glyphicon glyphicon-comment"></span> ✏️
<!-- Dropdown menus in are still supported inside, as long as the title is not a link -->

<i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
<div class="site-nav-dropdown-btn-container"><i class="site-nav-dropdown-btn-icon site-nav-rotate-icon" onclick="handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i></div>
</div>
<ul class="site-nav-dropdown-container site-nav-dropdown-container-open site-nav-list">
<li>
Expand All @@ -145,18 +145,18 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
<li>
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)">Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown Title Really Long Dropdown

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
<div class="site-nav-dropdown-btn-container"><i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i></div>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li class="site-nav-custom-list-item site-nav-list-item-1">Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text Really Really Long Text</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)">Nested Dropdown Title

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
<div class="site-nav-dropdown-btn-container"><i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i></div>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li class="site-nav-custom-list-item site-nav-list-item-2">Hello Doge Hello Doge 🐶</li>
Expand All @@ -171,18 +171,18 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
<li>
<div class="site-nav-default-list-item site-nav-list-item-0" onclick="handleSiteNavClick(this)">Test line break in navigation layout

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
<div class="site-nav-dropdown-btn-container"><i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i></div>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li class="site-nav-custom-list-item site-nav-list-item-1">Nested line break text ✂️</li>
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)"><a href="/test_site/index.html">Nested line break href</a>

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
<div class="site-nav-dropdown-btn-container"><i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i></div>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li class="site-nav-custom-list-item site-nav-list-item-2">Nested Nested line break text ✂️</li>
Expand All @@ -191,9 +191,9 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
<li>
<div class="site-nav-default-list-item site-nav-list-item-1" onclick="handleSiteNavClick(this)">Nested line break dropdown menu

<i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i>
<div class="site-nav-dropdown-btn-container"><i class="site-nav-dropdown-btn-icon" onclick="handleSiteNavClick(this.parentNode.parentNode, false); event.stopPropagation();">
<span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
</i></div>
</div>
<ul class="site-nav-dropdown-container site-nav-list">
<li class="site-nav-custom-list-item site-nav-list-item-2">Line break item 2 📘</li>
Expand Down
Loading