compact version in explore panel (PR #15)

* don't show version for versionless components (identified by displayVersion current)
* align versions in explore panel to right and wrap if needed
* reduce line height of wrapping items
* tighten space between versions

Author: mojavelinux

preview-src/ui-model.yml

@@ -10,11 +10,8 @@ site:
     versions:
     - &latest_version_abc
       url: '#'
-      version: '1.1'
-      displayVersion: '1.1'
-    - url: '#'
-      version: '1.0'
-      displayVersion: '1.0'
+      version: current
+      displayVersion: current
     latestVersion: *latest_version_abc
   - &component
     name: xyz
@@ -36,6 +33,9 @@ site:
     - url: '#'
       version: '5.0'
       displayVersion: '5.0'
+    - url: '#'
+      version: '4.5'
+      displayVersion: '4.5'
     latestVersion: *latest_version_xyz
   - name: '123'
     title: Project 123
@@ -45,12 +45,6 @@ site:
       url: '#'
       version: '2.2'
       displayVersion: '2.2'
-    - url: '#'
-      version: '2.1'
-      displayVersion: '2.1'
-    - url: '#'
-      version: '2.0'
-      displayVersion: '2.0'
     latestVersion: *latest_version_123
 page:
   url: *home_url

src/css/nav.css

@@ -213,7 +213,7 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore .components {
-  line-height: var(--doc-line-height);
+  line-height: 1.3;
   flex-grow: 1;
   box-shadow: inset 0 1px 5px var(--nav-panel-divider-color);
   background: var(--nav-secondary-background);
@@ -229,7 +229,9 @@ html.is-clipped--nav {
 }
 
 .nav-panel-explore .component {
-  display: block;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
 }
 
 .nav-panel-explore .component + .component {
@@ -243,20 +245,23 @@ html.is-clipped--nav {
 .nav-panel-explore .component .title {
   font-weight: var(--body-font-weight-bold);
   color: inherit;
+  max-width: 50%;
+  margin-top: 0.25rem;
+  flex: none;
 }
 
 .nav-panel-explore .versions {
   display: flex;
+  justify-content: flex-end;
   flex-wrap: wrap;
   list-style: none;
   padding-left: 0;
-  margin-top: -0.25rem;
   line-height: 1;
 }
 
 .nav-panel-explore .component .version {
   display: block;
-  margin: 0.375rem 0.375rem 0 0;
+  margin: 0.25rem 0 0 0.25rem;
 }
 
 .nav-panel-explore .component .version a {
@@ -274,9 +279,3 @@ html.is-clipped--nav {
   opacity: 0.9;
   font-weight: var(--body-font-weight-bold);
 }
-
-/*
-.nav-panel-explore .component .is-latest a::after {
-  content: " (latest)";
-}
-*/

src/partials/nav-explore.hbs

@@ -2,13 +2,14 @@
   {{#if page.component}}
   <div class="context">
     <span class="title">{{page.component.title}}</span>
-    <span class="version">{{page.componentVersion.displayVersion}}</span>
+    <span class="version">{{#unless (eq page.componentVersion.displayVersion 'current')}}{{page.componentVersion.displayVersion}}{{/unless}}</span>
   </div>
   {{/if}}
   <ul class="components">
     {{#each site.components}}
     <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
       <a class="title" href="{{{relativize ./url}}}">{{{./title}}}</a>
+      {{#if (or ./versions.[1] (not (eq ./versions.[0].displayVersion 'current')))}}
       <ul class="versions">
         {{#each ./versions}}
         <li class="version
@@ -18,6 +19,7 @@
         </li>
         {{/each}}
       </ul>
+      {{/if}}
     </li>
     {{/each}}
   </ul>