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

Newnav (Save for history, until I learn more about nav design [Victor]) #4

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open

Newnav (Save for history, until I learn more about nav design [Victor]) #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
fc1fa15
change
WeiXiaoTG Jul 6, 2022
632716b
change
WeiXiaoTG Jul 7, 2022
39c5335
comment out nav code
lennessyy Jul 20, 2022
6336da9
upload bundle
lennessyy Jul 22, 2022
1ed91e3
minor tweaks
lennessyy Jul 27, 2022
7e46d10
add new bundle
lennessyy Jul 28, 2022
317a2a5
fix graphql link
lennessyy Jul 28, 2022
6e5d133
change docs to products
lennessyy Jul 28, 2022
ea6762c
change docs to products
lennessyy Jul 28, 2022
c75a644
pr/4 feat(all): change the | gap
WeiXiaoTG Aug 4, 2022
aad5fdd
fixed nav spacing issue
lennessyy Aug 4, 2022
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
Binary file added .DS_Store
View file
Open in desktop
Binary file not shown.
Binary file modified build/ui-bundle.zip
View file
Open in desktop
Binary file not shown.
76 changes: 74 additions & 2 deletions src/css/header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,70 @@ body {

.navbar a {
text-decoration: none;
/* text-transform: uppercase; */
}

.navbar-brand a,
.navbar-end a {
/* text-transform: uppercase !important; */
}

.navbar .navbar-item {
font-weight: 600 !important;
font-size: 15px;
font-family: 'dashicons', sans-serif;
}

.subnav .subnavbar-item {
color: var(--navbar-menu-font-color);
display: block;
line-height: var(--doc-line-height);
padding: 0.5rem 1rem;
font-family: 'urbane', sans-serif;
}

.subnav .subnavbar-title {
margin: 0.2rem 0;
font-weight: 700;
padding-bottom: 0.2rem;
font-family: 'urbane', sans-serif;
}

.subnav .subnavbar-item a {
color: black;
text-indent: 2px;
line-height: var(--doc-line-height);
/* padding: 0.3rem 1.2rem; */
/* min-height: 2rem; */
width: 100%;
font-size: 0.6rem;
font-weight: 200;
display: inline !important;
margin-right: 0.2rem;
padding: 0.1rem;
}

.subnav .subnavbar-item a::after {
color: #bec0c2;
content: " | ";
padding-left: 0.5rem;
}

.subnav .subnavbar-item:last-child::after {
color: #bec0c2;
content: " ";
}

.subnav .subnavbar-item a:hover {
color: #fc6c04;
}

.navbar-end .navbar-dropdown .navbar-item {
font-family: 'urbane', sans-serif;
margin: 0.2rem 0;
font-weight: 700;
padding-bottom: 0.2rem;
line-height: var(--doc-line-height);
}

.navbar-brand {
Expand Down Expand Up @@ -239,7 +303,6 @@ body {
.navbar-end .navbar-link {
/* color: var(--navbar-font-color); */
color: #222;
font-weight: 400;
}

.navbar-end > a.navbar-item:hover,
Expand Down Expand Up @@ -267,6 +330,10 @@ body {
position: absolute;
}

.navbar-dropdown:nth-of-type(1) {
min-width: 340px;
}

.navbar-dropdown .navbar-item {
padding: 0.5rem 3rem 0.5rem 1rem;
white-space: nowrap;
Expand All @@ -281,7 +348,8 @@ body {
right: 0;
}

.navbar-dropdown a.navbar-item:hover {
.navbar-dropdown a.navbar-item:hover,
.navbar-dropdown a.subnavbar-versions:hover {
background: var(--navbar-menu_hover-background);
}
}
Expand Down Expand Up @@ -321,6 +389,10 @@ body {
outline: none;
}

#search .checkbox {
font-weight: 400;
}

.algolia-autocomplete .ds-dropdown-menu [class^=ds-dataset-] {
max-height: calc(100vh - 6.25rem);
}
Expand Down
2 changes: 1 addition & 1 deletion src/css/nav.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ html.is-clipped--nav {

.nav-panel-menu {
overflow-y: scroll;
height: var(--nav-panel-menu-height);
height: calc(100% - 0.6rem);
}

.nav-panel-menu:not(.is-active) .nav-menu {
Expand Down
12 changes: 6 additions & 6 deletions src/js/01-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@
}
})

nav.querySelector('[data-panel=explore] .context').addEventListener('click', function () {
// NOTE logic assumes there are only two panels
find(nav, '[data-panel]').forEach(function (panel) {
panel.classList.toggle('is-active')
})
})
// nav.querySelector('[data-panel=explore] .context').addEventListener('click', function () {
// // NOTE logic assumes there are only two panels
// find(nav, '[data-panel]').forEach(function (panel) {
// panel.classList.toggle('is-active')
// })
// })

// NOTE prevent text from being selected by double click
menuPanel.addEventListener('mousedown', function (e) {
Expand Down
45 changes: 38 additions & 7 deletions src/partials/header-content.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,45 @@

<a class="navbar-item" href="#">Home</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="#">Docs</a>
<a class="navbar-link" href="#">Products</a>
<div class="navbar-dropdown">
<a class="navbar-item" href="{{relativize site.components.tigergraph-server.url}}">{{site.components.tigergraph-server.title}}</a>
<a class="navbar-item" href="{{relativize site.components.cloud.url}}">{{site.components.cloud.title}}</a>
<a class="navbar-item" href="{{relativize site.components.gsql-ref.url}}">{{site.components.gsql-ref.title}}</a>
<a class="navbar-item" href="{{relativize site.components.graph-ml.url}}">{{site.components.graph-ml.title}}</a>
<a class="navbar-item" href="{{relativize site.components.gui.url}}">{{site.components.gui.title}}</a>
<a class="navbar-item" href="https://docs-legacy.tigergraph.com">Legacy documentation</a>
<div class="subnav">
<div class="subnavbar-item">
<div class="subnavbar-title">TigerGraph Server</div>

{{!-- <a href="{{relativize site.components.tigergraph-server.url}}">testone</a>
<a href="{{relativize site.components.tigergraph-server.url}}">testtwo</a> --}}

<a class="subnavbar-item abc" href="{{relativize site.components.tigergraph-server.url}}" >{{site.components.tigergraph-server.title}}</a>
</div>
<div class="subnavbar-item">
<div class="subnavbar-title">TigerGraph UI tools</div>
<a class="subnavbar-item" href="{{relativize site.components.gui.url}}">{{site.components.gui.title}}</a>
</div>
<div class="subnavbar-item">
<div class="subnavbar-title"> GSQL</div>
<a class="subnavbar-item" href="{{relativize site.components.gsql-ref.url}}">{{site.components.gsql-ref.title}}</a>
</div>
<div class="subnavbar-item">
<div class="subnavbar-title">TigerGraph Cloud</div>
<a class="subnavbar-item" href="{{relativize site.components.cloud.url}}">{{site.components.cloud.title}}</a>
</div>
<div class="subnavbar-item">
<div class="subnavbar-title">Graph Data Science </div>
<a class="subnavbar-item" href="{{relativize site.components.graph-ml.url}}">{{site.components.graph-ml.title}}</a>
<a class="subnavbar-item" href="{{relativize site.components.ml-workbench.url}}">{{site.components.ml-workbench.title}}</a>
</div>
<div class="subnavbar-item">
<div class="subnavbar-title">Connectors and APIs </div>
<a class="subnavbar-item" href="{{relativize site.components.pytigergraph.url}}">{{site.components.pytigergraph.title}}</a>
<a class="subnavbar-item" href="{{relativize site.components.graphql.url}}">{{site.components.graphql.title}}</a>
</div>
<div class="subnavbar-item">
<div class="subnavbar-title">Legacy Documentation</div>
<a class="subnavbar-item" href="https://docs-legacy.tigergraph.com"> Legacy Documentation </a>
</div>

</div>
</div>
</div>

Expand Down
4 changes: 3 additions & 1 deletion src/partials/nav-explore.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<div class="nav-panel-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
{{#unless page.navigation}}
<div class="nav-panel-explore is-active data-panel="explore">
{{#if page.component}}
<div class="context">
<span class="title">{{page.component.title}}</span>
Expand All @@ -23,3 +24,4 @@
{{/each}}
</ul>
</div>
{{/unless}}