Modify component title display and version selector (#216)

- Remove the component title from the version selector - Display the component title separately - Move the version selector below the component title - When there's no version selector, display only the component title.
neo4j-documentation · Jul 5, 2024 · e3a6e8b · e3a6e8b
1 parent fcad080
commit e3a6e8b
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 27 deletions.
diff --git a/src/css/cheat-sheet.css b/src/css/cheat-sheet.css
@@ -166,6 +166,7 @@ body.cheat-sheet .nav-panel-versions {
   height: auto;
   padding: 0;
   display: flex;
+  width: auto;
 }
 
 body.cheat-sheet .selectors .dropdown {

diff --git a/src/css/nav.css b/src/css/nav.css
@@ -77,7 +77,7 @@ html.is-clipped--nav {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  padding-left: 1.5rem;
+  padding: 0 1.5rem;
   box-shadow: 0 1px 0 var(--nav-panel-divider-color);
 }
 
@@ -96,7 +96,7 @@ html.is-clipped--nav {
 }
 
 .nav .selectors {
-  padding: 0;
+  padding: 0.5rem 1rem 0;
 }
 
 .nav-panel-menu {
@@ -490,8 +490,8 @@ html.is-clipped--nav {
 }
 
 .nav-panel-versions {
-  /* padding: 1rem 1.5rem 0.5rem; */
-  /* width: max-content; */
+  width: max-content;
+  padding: 1rem 1.5rem 0.5rem;
   padding: 0.25rem 0.5rem;
 }
 

diff --git a/src/css/vars.css b/src/css/vars.css
@@ -299,7 +299,7 @@
   /* links */
   --link-font-color: rgba(var(--colors-baltic-50));
   --link_hover-font-color: rgba(var(--colors-baltic-55));
-  --link_visited-font-color: rgba(var(--colors-neutral-60));
+  --link_visited-font-color: var(--palette-categorical-8);
   --link_unresolved-font-color: var(--important-color);
 
   /* abstract */

diff --git a/src/partials/nav-cheat-sheet.hbs b/src/partials/nav-cheat-sheet.hbs
@@ -1,20 +1,64 @@
-  <div class="nav-panel-types{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
-    <div class="dropdown">
-      <select id="cheat-sheet-selector" class="cs-selector dropdown-styles">
-        {{#each page.attributes.cheatsheets}}
-        {{#if this.default}}
-        <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-product="{{this.class}}" selected>{{this.name}}</option>
-        {{else}}
-        <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-product="{{this.class}}" {{#if this.label-only }}hidden{{/if}}>{{this.name}}</option>
-        {{/if}}
-        {{/each}}
-      </select>
+{{#if (eq page.attributes.theme 'cheat-sheet') }}
+<div class="nav-panel-types{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore" data-selector-type="products">
+  <div class="dropdown">
+    <select id="cheat-sheet-selector-products" class="cs-selector dropdown-styles" data-label-type="products">
+      {{!-- <option value="all" data-label="all" data-class="all" data-label-type="products">All</option> --}}
+      {{#each page.attributes.cheatsheet-products}}
+      {{#if this.default}}
+      <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-class="{{this.class}}" data-label-type="products" selected>{{this.name}}</option>
+      {{else}}
+      <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-class="{{this.class}}" data-label-type="products" {{#if this.label-only }}hidden{{/if}}>{{this.name}}</option>
+      {{/if}}
+      {{/each}}
+    </select>
+    {{!-- <div class="toggle-menu">
+      <label class="form-item-label cursor-pointer">
+        <input type="checkbox" role="checkbox" id="products-highlight">
+      </label>
+    </div> --}}
   </div>
 </div>
 
-  <aside class="toc sidebar" data-title="{{or page.attributes.toctitle ''}}"
-  data-levels="{{{or page.attributes.toclevels 2}}}">
-  <div class="toc-menu">
-    <div class="toc-menu-placeholder"></div>
+{{#if page.attributes.cheatsheet-categories}}
+<div class="nav-panel-types{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore"  data-selector-type="categories">
+  {{!-- categories - eg read, write, structure, general --}}
+  <div class="dropdown">
+    <select id="cheat-sheet-selector-categories" class="cs-selector dropdown-styles" data-label-type="categories">
+      <option value="all" data-label="all" data-class="all" data-label-type="categories">All</option>
+      {{#each page.attributes.cheatsheet-categories}}
+      {{#if this.default}}
+      <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-class="{{this.class}}" data-label-type="categories" selected>{{this.name}}</option>
+      {{else}}
+      <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-class="{{this.class}}" data-label-type="categories" {{#if this.label-only }}hidden{{/if}}>{{this.name}}</option>
+      {{/if}}
+      {{/each}}
+    </select>
+
+    <div class="toggle-menu">
+      <label class="form-item-label cursor-pointer">
+        <input type="checkbox" role="checkbox" id="categories-highlight" checked="true">
+      </label>
+    </div>
+  </div>
+</div>
+{{/if}}
+
+{{!-- {{#if page.attributes.cheatsheet-labels}}
+<div class="nav-panel-types{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore" data-selector-type="labels">
+  <div class="dropdown">
+    <select id="cheat-sheet-selector-labels" class="cs-selector dropdown-styles" data-label-type="labels">
+      <option value="all" data-label="all" data-class="all" data-label-type="labels">All</option>
+      {{#each page.attributes.cheatsheet-labels}}
+      {{#if this.default}}
+      <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-class="{{this.class}}" data-label-type="labels" selected>{{this.name}}</option>
+      {{else}}
+      <option value="{{this.class}}" data-label="{{#with (or this.label this.name) }}{{{this}}}{{/with}}" data-class="{{this.class}}" data-label-type="labels" {{#if this.label-only }}hidden{{/if}}>{{this.name}}</option>
+      {{/if}}
+      {{/each}}
+    </select>
   </div>
-</aside>
+</div>
+{{/if}} --}}
+
+
+{{/if}}
diff --git a/src/partials/nav-selectors.hbs b/src/partials/nav-selectors.hbs
@@ -1,4 +1,19 @@
+{{#unless (or @root.page.attributes.nav-hide-site-title (eq @root.page.attributes.theme 'cheat-sheet'))}}
+<div class="component">
+  <div class="nav-product">
+    <span class="nav-product-name">
+      {{#with @root.site.homeUrl}}
+      <a href="{{{relativize this}}}" aria-label="Go to home page">{{#with @root.page.componentVersion}}{{{ ./title }}}{{/with}}</a>
+      {{/with}}
+    </span>
+  </div>
+</div>
+{{/unless}}
+
+{{!-- {{#unless (eq page.attributes.theme 'cheat-sheet') }} --}}
+
 {{#if page.versions.[1]}}
+<div class="selectors">
 <div class="nav-panel-versions{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
 
   <div class="dropdown">
@@ -7,7 +22,7 @@
     <select data-current="{{@root.page.version}}" class="version-selector dropdown-styles">
       {{#with @root.page.componentVersion}}
       <option value="" selected>
-        {{#unless (or @root.page.attributes.nav-hide-component-title (eq @root.page.attributes.theme 'cheat-sheet'))}} {{{ ./title }}} {{/unless}}{{ this.displayVersion }}{{#if (and @root.page.attributes.nav-indicate-latest (eq @root.page.version @root.page.latest.version)) }} (latest){{/if}}
+        Version {{ this.displayVersion }}{{#if (and @root.page.attributes.nav-indicate-latest (eq @root.page.version @root.page.latest.version)) }} (latest){{/if}}
       </option>
       {{/with}}
       {{#each page.versions}}
@@ -17,16 +32,20 @@
         value="{{{relativize this.url}}}"
         {{~#if this.missing}} disabled{{/if}}
       >
-        {{ this.displayVersion }}{{#if (and @root.page.attributes.nav-indicate-latest (eq this.version @root.page.latest.version)) }} (latest){{/if}}
+        Version {{ this.displayVersion }}{{#if (and @root.page.attributes.nav-indicate-latest (eq this.version @root.page.latest.version)) }} (latest){{/if}}
       </option>
       {{/unless}}
       {{/each}}
     </select>
   </div>
 </div>
+</div>
 {{/if}}
 
+{{!-- {{/unless}} --}}
+
 {{#if (eq page.attributes.theme 'cheat-sheet') }}
+<div class="selectors">
 <div class="nav-panel-types{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore" data-selector-type="products">
   <div class="dropdown">
     <select id="cheat-sheet-selector-products" class="cs-selector dropdown-styles" data-label-type="products">
@@ -88,5 +107,7 @@
 </div>
 {{/if}} --}}
 
+</div>
+{{/if}}
+
 
-{{/if}}
diff --git a/src/partials/nav.hbs b/src/partials/nav.hbs
@@ -2,9 +2,7 @@
   <aside class="nav">
     <div class="panels">
       {{#unless (eq page.attributes.layout 'docs-ndl') }}
-      <div class="selectors">
-        {{> nav-selectors}}
-      </div>
+      {{> nav-selectors}}
       {{/unless}}
       {{> nav-menu}}
       {{#unless page.attributes.disablefeedback}}