Fixed header ellipsis when title equals site name

CHANGELOG

@@ -171,7 +171,7 @@ mkdocs-material-2.9.2 (2018-06-29)
 mkdocs-material-2.9.1 (2018-06-18)
 
   * Added support for different spellings for theme color
-  * Fixed #799: Added support for web font minification in production
+  * Fixed #799: Added support for webfont minification in production
   * Fixed #800: Added .highlighttable as an alias for .codehilitetable
 
 mkdocs-material-2.9.0 (2018-06-13)

docs/releases/5.md

@@ -464,7 +464,7 @@ matches the new structure:
 #### `partials/header.html`
 
 ``` diff
-@@ -2,51 +2,46 @@
+@@ -2,51 +2,48 @@
    This file was automatically generated - do not edit
  -#}
  <header class="md-header" data-md-component="header">
@@ -485,24 +485,7 @@ matches the new structure:
 -      <div class="md-flex__cell md-flex__cell--stretch">
 -        <div class="md-flex__ellipsis md-header-nav__title" data-md-component="title">
 -          {% if config.site_name == page.title %}
-+  <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
+-            {{ config.site_name }}
-+    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" aria-label="{{ config.site_name }}" class="md-header-nav__button md-logo">
-+      {% if config.theme.logo %}
-+        <img src="{{ config.theme.logo | url }}" alt="logo">
-+      {% else %}
-+        {% include ".icons/" ~ config.theme.icon.logo ~ ".svg" %}
-+      {% endif %}
-+    </a>
-+    <label class="md-header-nav__button md-icon" for="__drawer">
-+      {% include ".icons/material/menu" ~ ".svg" %}
-+    </label>
-+    <div class="md-header-nav__title" data-md-component="header-title">
-+      <div class="md-header-nav__ellipsis md-ellipsis">
-+        {% if config.site_name == page.title %}
-+          {{ config.site_name }}
-+        {% else %}
-+          <span class="md-header-nav__topic">
-             {{ config.site_name }}
 -          {% else %}
 -            <span class="md-header-nav__topic">
 -              {{ config.site_name }}
@@ -515,29 +498,49 @@ matches the new structure:
 -              {% endif %}
 -            </span>
 -          {% endif %}
--        </div>
++  <nav class="md-header-nav md-grid" aria-label="{{ lang.t('header.title') }}">
++    <a href="{{ config.site_url | default(nav.homepage.url, true) | url }}" title="{{ config.site_name }}" class="md-header-nav__button md-logo" aria-label="{{ config.site_name }}">
++      {% if config.theme.logo %}
++        <img src="{{ config.theme.logo | url }}" alt="logo">
++      {% else %}
++        {% set icon = config.theme.icon.logo or "material/library" %}
++        {% include ".icons/" ~ icon ~ ".svg" %}
++      {% endif %}
++    </a>
++    <label class="md-header-nav__button md-icon" for="__drawer">
++      {% include ".icons/material/menu" ~ ".svg" %}
++    </label>
++    <div class="md-header-nav__title" data-md-component="header-title">
++      {% if config.site_name == page.title %}
++        <div class="md-header-nav__ellipsis md-ellipsis">
++          {{ config.site_name }}
+         </div>
 -      </div>
 -      <div class="md-flex__cell md-flex__cell--shrink">
 -        {% if "search" in config["plugins"] %}
 -          <label class="md-icon md-icon--search md-header-nav__button" for="__search"></label>
 -          {% include "partials/search.html" %}
+-        {% endif %}
+-      </div>
+-      {% if config.repo_url %}
+-        <div class="md-flex__cell md-flex__cell--shrink">
+-          <div class="md-header-nav__source">
+-            {% include "partials/source.html" %}
+-          </div>
++      {% else %}
++        <div class="md-header-nav__ellipsis">
++          <span class="md-header-nav__topic md-ellipsis">
++            {{ config.site_name }}
 +          </span>
-+          <span class="md-header-nav__topic">
++          <span class="md-header-nav__topic md-ellipsis">
 +            {% if page and page.meta and page.meta.title %}
 +              {{ page.meta.title }}
 +            {% else %}
 +              {{ page.title }}
 +            {% endif %}
 +          </span>
-         {% endif %}
+         </div>
-       </div>
+       {% endif %}
--      {% if config.repo_url %}
--        <div class="md-flex__cell md-flex__cell--shrink">
--          <div class="md-header-nav__source">
--            {% include "partials/source.html" %}
--          </div>
--        </div>
--      {% endif %}
      </div>
 +    {% if "search" in config["plugins"] %}
 +      <label class="md-header-nav__button md-icon" for="__search">

material/assets/manifest.json

@@ -1,10 +1,10 @@
 {
-  "assets/javascripts/bundle.js": "assets/javascripts/bundle.7ea61618.min.js",
+  "assets/javascripts/bundle.js": "assets/javascripts/bundle.e7d31590.min.js",
-  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.7ea61618.min.js.map",
+  "assets/javascripts/bundle.js.map": "assets/javascripts/bundle.e7d31590.min.js.map",
   "assets/javascripts/vendor.js": "assets/javascripts/vendor.0c35f0aa.min.js",
   "assets/javascripts/vendor.js.map": "assets/javascripts/vendor.0c35f0aa.min.js.map",
   "assets/javascripts/worker/search.js": "assets/javascripts/worker/search.2613054f.min.js",
   "assets/javascripts/worker/search.js.map": "assets/javascripts/worker/search.2613054f.min.js.map",
-  "assets/stylesheets/main.css": "assets/stylesheets/main.a59423ce.min.css",
+  "assets/stylesheets/main.css": "assets/stylesheets/main.9b1b8b92.min.css",
   "assets/stylesheets/palette.css": "assets/stylesheets/palette.4444686e.min.css"
 }

material/base.html

@@ -41,7 +41,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.a59423ce.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/main.9b1b8b92.min.css' | url }}">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ 'assets/stylesheets/palette.4444686e.min.css' | url }}">
       {% endif %}
@@ -178,7 +178,7 @@
     {% endblock %}
     {% block scripts %}
       <script src="{{ 'assets/javascripts/vendor.0c35f0aa.min.js' | url }}"></script>
-      <script src="{{ 'assets/javascripts/bundle.7ea61618.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.e7d31590.min.js' | url }}"></script>
       {%- set translations = {} -%}
       {%- for key in [
         "clipboard.copy",

material/partials/header.html

@@ -15,22 +15,24 @@
       {% include ".icons/material/menu" ~ ".svg" %}
     </label>
     <div class="md-header-nav__title" data-md-component="header-title">
-      <div class="md-header-nav__ellipsis md-ellipsis">
+      {% if config.site_name == page.title %}
-        {% if config.site_name == page.title %}
+        <div class="md-header-nav__ellipsis md-ellipsis">
           {{ config.site_name }}
-        {% else %}
+        </div>
-          <span class="md-header-nav__topic">
+      {% else %}
+        <div class="md-header-nav__ellipsis">
+          <span class="md-header-nav__topic md-ellipsis">
             {{ config.site_name }}
           </span>
-          <span class="md-header-nav__topic">
+          <span class="md-header-nav__topic md-ellipsis">
             {% if page and page.meta and page.meta.title %}
               {{ page.meta.title }}
             {% else %}
               {{ page.title }}
             {% endif %}
           </span>
-        {% endif %}
+        </div>
-      </div>
+      {% endif %}
     </div>
     {% if "search" in config["plugins"] %}
       <label class="md-header-nav__button md-icon" for="__search">

src/assets/stylesheets/layout/_header.scss

@@ -146,12 +146,7 @@
   // Header topics
   &__topic {
     position: absolute;
-    display: block;
     width: 100%;
-    padding: 0 px2rem(20px);
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
     transition:
       transform 400ms cubic-bezier(0.1, 0.7, 0.1, 1),
       opacity   150ms;
@@ -186,6 +181,7 @@
   // Header title - set line height to match icon for correct alignment
   &__title {
     flex-grow: 1;
+    padding: 0 px2rem(20px);
     font-size: px2rem(18px);
     line-height: px2rem(48px);
 

src/partials/header.html

@@ -48,22 +48,24 @@
 
     <!-- Header title -->
     <div class="md-header-nav__title" data-md-component="header-title">
-      <div class="md-header-nav__ellipsis md-ellipsis">
+      {% if config.site_name == page.title %}
-        {% if config.site_name == page.title %}
+        <div class="md-header-nav__ellipsis md-ellipsis">
           {{ config.site_name }}
-        {% else %}
+        </div>
-          <span class="md-header-nav__topic">
+      {% else %}
+        <div class="md-header-nav__ellipsis">
+          <span class="md-header-nav__topic md-ellipsis">
             {{ config.site_name }}
           </span>
-          <span class="md-header-nav__topic">
+          <span class="md-header-nav__topic md-ellipsis">
             {% if page and page.meta and page.meta.title %}
               {{ page.meta.title }}
             {% else %}
               {{ page.title }}
             {% endif %}
           </span>
-        {% endif %}
+        </div>
-      </div>
+      {% endif %}
     </div>
 
     <!-- Button to open search dialogue -->