New pill in user doc (#303)

* "new" pill in the ToC (#2394) * Mark higher-level nodes with "New" pill as well, not only the actual item (#2429) * Mark higher-level nodes with "New pill", not only the actual item * Before review * Update docs/js/custom.js Co-authored-by: Dariusz Szut <[email protected]> * Applied review suggestion Co-authored-by: Adrien Dupuis <[email protected]> --------- Co-authored-by: Dariusz Szut <[email protected]> Co-authored-by: Adrien Dupuis <[email protected]> * Added hidden CSS styling * Marked Ibexa Engage as new --------- Co-authored-by: Adrien Dupuis <[email protected]> Co-authored-by: Dariusz Szut <[email protected]>
ibexa · Jul 17, 2024 · f69a3f8 · f69a3f8
1 parent f10ae1a
commit f69a3f8
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 2 deletions.
diff --git a/docs/css/custom.css b/docs/css/custom.css
@@ -605,3 +605,7 @@ div.path {
 .path p.description {
     color: var(--ibexa-dusk-black);
 }
+
+[hidden] {
+    display: none !important;
+}
diff --git a/docs/css/navigation.css b/docs/css/navigation.css
@@ -133,6 +133,13 @@
     padding-bottom: 0.5rem;
 }
 
+.md-nav__link .pill.new {
+    margin-right: 15px;
+    background-color: #d9e8ff;
+    color: #3562a0;
+    text-transform: lowercase;
+}
+
 .md-nav__link::after {
     font-weight: 700;
 }

diff --git a/docs/ibexa_engage/ibexa_engage.md b/docs/ibexa_engage/ibexa_engage.md
@@ -1,5 +1,6 @@
 ---
 description: Ibexa Engage helps engage audiences and collect valuable data by using interactive content.
+month_change: true
 ---
 
 # Ibexa Engage

diff --git a/docs/js/custom.js b/docs/js/custom.js
@@ -156,4 +156,7 @@ $(document).ready(function() {
             document.location.hash = event.target.hash;
         }, 500);
     });
+
+    // Mark higher-level nodes with "New" pill, not only the actual item
+    $(".pill.new:not([hidden])").parents(".md-nav__item").children('label').children(".pill.new[hidden]").removeAttr('hidden');
 });
diff --git a/theme/partials/nav-item.html b/theme/partials/nav-item.html
@@ -7,7 +7,7 @@
     {% set checked = "checked" if nav_item.active %}
     <input class="md-nav__toggle md-toggle" data-md-toggle="{{ path }}" type="checkbox" id="{{ path }}" {{ checked }}>
     <label class="md-nav__link level-{{ level }}" for="{{ path }}">
-      {{ nav_item.title }}
+      {{ nav_item.title }} <span class="pill new" hidden>New</span>
     </label>
     <nav class="md-nav" aria-label="{{ nav_item.title }}" data-md-level="{{ level }}">
       <label class="md-nav__link-title md-nav__link level-{{ level }}" for="{{ path }}">
@@ -16,7 +16,7 @@
       <ul class="md-nav__list" data-md-scrollfix>
         {% set base = path %}
         {% for nav_item in nav_item.children %}
-          {% set path = base ~ "-" ~ loop.index %}
+          {% set path = base ~ "-" ~ loop.index %}
           {% set level = level + 1 %}
           {% include "partials/nav-item.html"  %}
         {% endfor %}
@@ -37,6 +37,7 @@
     {% endif %}
     <a href="{{ nav_item.url | url }}" class="md-nav__link level-{{ level }} md-nav__link--active">
       {{ nav_item.title }}
+      {% if nav_item.meta.month_change %}<span class="pill new">New</span>{% endif %}
     </a>
     {% if toc | first is defined %}
       {% include "partials/toc.html" %}
@@ -46,6 +47,7 @@
   <li class="{{ class }}">
     <a href="{{ nav_item.url | url }}" class="md-nav__link level-{{ level }}">
       {{ nav_item.title }}
+      {% if nav_item.meta.month_change %}<span class="pill new">New</span>{% endif %}
     </a>
   </li>
 {% endif %}