feat: Elegant tag namespace display (#47)

riboseinc · Nov 15, 2018 · d97a2eb · d97a2eb
1 parent a499fd4
commit d97a2eb
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -271,7 +271,9 @@ home_url: <URL to standalone project site>
 # with "_" (underline); underlines will be rewritten as spaces when tags
 # are presented to site users.
 # Tag can be prepended with a namespace to signify the type,
-# e.g. chosen programming language or target viewer audience.
+# e.g. chosen programming language or target viewer audience
+# (see hub site configuration for tag namespace setup).
+# Avoid long namespace/tag combos as they can overflow item’s card widget.
 tags: [Ruby, Python, RFC, "<some_namespace_id>:<appropriate_tag>"]
 ```
 

diff --git a/_includes/index-page-item-filter.html b/_includes/index-page-item-filter.html
@@ -17,7 +17,7 @@
     <ul class="tags">
       {% if include.tag and tag_namespace == "" %}
         <li>
-          <a href="{{ include.url_tag_prefix }}">All</a>
+          <a href="{{ include.url_tag_prefix }}">(show all)</a>
         </li>
       {% endif %}
 
@@ -52,7 +52,7 @@
         <ul class="tags">
           {% if include.tag and tag_namespace == namespace_id %}
             <li>
-              <a href="{{ include.url_tag_prefix }}">All</a>
+              <a href="{{ include.url_tag_prefix }}">(show all)</a>
             </li>
           {% endif %}
 

diff --git a/_includes/software-card-hub.html b/_includes/software-card-hub.html
@@ -34,7 +34,7 @@ <h3 class="title">{{ include.item.title }}</h3>
   </p>
 
   <footer class="meta">
-    {% include tag-list.html tags=include.item.tags %}
+    {% include tag-list.html tags=include.item.tags item_type=include.item_type %}
 
     {% if include.item.last_update %}
       <section class="last-update">

diff --git a/_includes/tag-list.html b/_includes/tag-list.html
@@ -2,8 +2,16 @@
 {% if num_tags > 0 %}
   <ul class="tags">
     {% for tag in include.tags %}
-      {% assign tag_human = tag | replace: "_", " " %}
-      <li>{{ tag_human }}</li>
+      {% if tag contains ":" %}
+        {% assign namespace_id = tag | split: ":" | first %}
+        {% assign namespace = site.tag_namespaces[include.item_type][namespace_id] %}
+        {% assign tag_human = tag | split: ":" | last | replace: "_", " " %}
+      {% else %}
+        {% assign tag_human = tag | replace: "_", " " %}
+        {% assign namespace = "" %}
+      {% endif %}
+
+      <li>{% if namespace != "" %}<span class="namespace">{{ namespace }}:</span> {% endif %}{{ tag_human }}</li>
     {% endfor %}
   </ul>
 {% endif %}
diff --git a/_sass/jekyll-theme-open-project.scss b/_sass/jekyll-theme-open-project.scss
@@ -148,18 +148,26 @@ main {
       align-self: stretch;
       text-align: left;
 
+      .namespace, ul.tags {
+        font-size: 14px;
+      }
+
       .namespace {
         display: flex;
         flex-flow: row nowrap;
+        align-items: flex-start;
         margin-top: .5em;
 
-        &:first-child {
-          margin-top: 0;
+        .namespace-title {
+          margin-right: 14px;
         }
 
-        .namespace-title {
-          font-size: 80%;
-          margin-right: .5em;
+        &.empty {
+          display: none;
+        }
+
+        &:first-child {
+          margin-top: 0;
         }
       }
 
@@ -169,7 +177,6 @@ main {
         list-style: none;
         margin: 0;
         padding: 0;
-        font-size: 14px;
 
         > li {
           display: inline;

diff --git a/_sass/open-project-base.scss b/_sass/open-project-base.scss
@@ -210,13 +210,22 @@ a {
         margin: 0;
         padding: 0;
 
+        white-space: nowrap;
+
+        .namespace {
+          color: lighten($main-font-color, 50%);
+          font-weight: normal;
+        }
+
         &::after {
-          content: ", ";
+          content: " • ";
+          margin: 0 4px;
           color: grey;
           font-weight: normal;
         }
         &:last-child::after {
           content: "";
+          margin: 0;
         }
 
         color: $primary-color;

diff --git a/assets/js/opf.js b/assets/js/opf.js
@@ -206,6 +206,21 @@
 
 
 
+  /* Software/spec index filter bar */
+
+  var initIndexFilter = function(filterBar) {
+    var namespaces = filterBar.querySelectorAll('.namespace');
+
+    // Mark empty namespaces
+    for (let nsEl of namespaces) {
+      if (nsEl.querySelector('ul.tags > li') === null) {
+        nsEl.classList.add('empty');
+      }
+    }
+  };
+
+
+
   // Initializing stuff
   var hamburgerMenu = initCollapsibleMenu(
     document.querySelector('header nav.top-menu'),
@@ -239,4 +254,7 @@
     initSearchWidget(topMenuEl, triggerEl, inputEl);
   }
 
+  var indexFilterEl = document.querySelector('nav.item-filter');
+  initIndexFilter(indexFilterEl);
+
 }());