Wrap nav-item titles in <span class="md-ellipsis">

This fixes the alignment of the md-nav__icon elements (the dropdown arrow for subheadings), and also displays an ellipsis when truncating long titles.
jbms · Feb 25, 2022 · 2d172d5 · 2d172d5
1 parent 741b257
commit 2d172d5
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 17 deletions.
diff --git a/docs/additional_samples.rst b/docs/additional_samples.rst
@@ -170,8 +170,6 @@ List Tables
 Alignment
 ~~~~~~~~~
 
-.. warning:: Alignment is not currently working as expected.
-
 .. list-table:: Center Aligned
    :header-rows: 1
    :align: center

diff --git a/docs/conf.py b/docs/conf.py
@@ -101,8 +101,8 @@
         # "navigation.instant",
         # "header.autohide",
         "navigation.top",
-        "navigation.tracking",
-        "search.highlight",
+        # "navigation.tracking",
+        # "search.highlight",
         "search.share",
     ],
     "palette": [

diff --git a/docs/customization.rst b/docs/customization.rst
@@ -203,7 +203,7 @@ Configuration Options
 
     .. confval:: palette
 
-        The theme's color pallet **must be** a single `dict` or a `list` of `dict`\ s.
+        The theme's color pallete **must be** a single `dict` or a `list` of `dict`\ s.
         Each `dict` can optionally specify a ``scheme``, ``primary``, ``accent``, and ``media``
         fields.
 

diff --git a/sphinx_immaterial/nav_adapt.py b/sphinx_immaterial/nav_adapt.py
@@ -42,10 +42,11 @@ class MkdocsNavEntry:
     # a TOC caption.
     caption_only: bool
 
-    def __init__(self, **kwargs):
+    def __init__(self, title_text: str, **kwargs):
         self.__dict__.update(kwargs)
+        self.title = f'<span class="md-ellipsis">{title_text}</span>'
         if not self.aria_label:
-            self.aria_label = self.title
+            self.aria_label = title_text
 
     def __repr__(self):
         return repr(self.__dict__)
@@ -59,7 +60,7 @@ def __init__(
     ):
         super().__init__(document)
         self._prev_caption: Optional[docutils.nodes.Element] = None
-        self._rendered_title: Optional[str] = None
+        self._rendered_title_text: Optional[str] = None
         self._url: Optional[str] = None
         self._builder = builder
         # Indicates if this node or one of its descendents is the current page.
@@ -79,10 +80,10 @@ def _render_title(
         """Returns the text representation of `node`."""
         if not isinstance(node, list):
             node = [node]
-        return jinja2.Markup.escape("".join(x.astext() for x in node))
+        return str(jinja2.Markup.escape("".join(x.astext() for x in node)))
 
     def visit_reference(self, node: docutils.nodes.reference):
-        self._rendered_title = self._render_title(node.children)
+        self._rendered_title_text = self._render_title(node.children)
         self._url = node.get("refuri")
         raise docutils.nodes.SkipChildren
 
@@ -108,7 +109,7 @@ def visit_title(self, node: docutils.nodes.title):
     def visit_bullet_list(self, node: docutils.nodes.bullet_list):
         if self._prev_caption is not None and self._prev_caption.parent is node.parent:
             # Insert as sub-entry of the previous caption.
-            title = self._render_title(self._prev_caption.children)
+            title_text = self._render_title(self._prev_caption.children)
             self._prev_caption = None
             child_visitor = _TocVisitor(self.document, self._builder)
             if node.get("iscurrent", False):
@@ -120,7 +121,7 @@ def visit_bullet_list(self, node: docutils.nodes.bullet_list):
                 url = children[0].url
             self._children.append(
                 MkdocsNavEntry(
-                    title=title,
+                    title_text=title_text,
                     url=url,
                     children=children,
                     active=child_visitor._active,
@@ -133,7 +134,7 @@ def visit_bullet_list(self, node: docutils.nodes.bullet_list):
 
     def get_result(self) -> MkdocsNavEntry:
         return MkdocsNavEntry(
-            title=self._rendered_title,
+            title_text=self._rendered_title_text,
             url=self._url,
             children=self._children,
             active=self._active,
@@ -313,10 +314,12 @@ def _add_domain_info_to_toc(
                 f'class="objinfo-icon objinfo-icon__{icon_info.icon_class}" '
                 f'title="{label}">{icon_info.icon_text}</span>'
             )
+        span_prefix = "<span "
+        assert entry.title.startswith(span_prefix)
         entry.title = (
             title_prefix
-            + f'<span title="{jinja2.Markup.escape(tooltip)}">'
-            + f"{entry.title}</span>"
+            + f'<span title="{jinja2.Markup.escape(tooltip)}" '
+            + entry.title[len(span_prefix) :]
         )
 
 

diff --git a/src/assets/stylesheets/main/layout/_nav.scss b/src/assets/stylesheets/main/layout/_nav.scss
@@ -94,8 +94,6 @@
     display: flex;
     align-items: center;
     margin-top: 0.625em;
-    overflow: hidden;
-    text-overflow: ellipsis;
     cursor: pointer;
     transition: color 125ms;
     scroll-snap-align: start;
@@ -150,6 +148,14 @@
       display: flex;
       cursor: pointer;
     }
+
+    .md-ellipsis {
+      // sphinx-immaterial: Needed for `text-overflow: ellipsis` to work.
+      display: block;
+      // sphinx-immaterial: Ensures the md-nav__icon element that comes after is
+      // right-aligned.
+      flex-grow: 1;
+    }
   }
 
   // Navigation icon