Fixed missing ellipsis in header if JavaScript is enabled

material/base.html

@@ -46,7 +46,7 @@
       {% endif %}
     {% endblock %}
     {% block styles %}
-      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-fed1d0cce1.css">
+      <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-e056ea954c.css">
       {% if palette.primary or palette.accent %}
         <link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-3e082b9545.palette.css">
       {% endif %}
@@ -162,7 +162,7 @@
       {% endblock %}
     </div>
     {% block scripts %}
-      <script src="{{ base_url }}/assets/javascripts/application-b31fe15f6a.js"></script>
+      <script src="{{ base_url }}/assets/javascripts/application-a5397a53ce.js"></script>
       {% if lang.t("search.language") != "en" %}
         {% set languages = lang.t("search.language").split(",") %}
         {% if languages | length and languages[0] != "" %}

src/assets/javascripts/components/Material/Header/Title.js

@@ -59,12 +59,31 @@ export default class Title {
   }
 
   /**
-   * Update title state
+   * Setup title state
    */
-  update() {
+  setup() {
+    Array.prototype.forEach.call(this.el_.children, node => {                   // TODO: use childNodes here for IE?
+      node.style.width = `${this.el_.offsetWidth - 20}px`
+    })
+  }
+
+  /**
+   * Update title state
+   *
+   * @param {Event} ev - Event
+   */
+  update(ev) {
     const active = window.pageYOffset >= this.header_.offsetTop
     if (active !== this.active_)
       this.el_.dataset.mdState = (this.active_ = active) ? "active" : ""
+
+    /* Hack: induce ellipsis on topics */
+    if (ev.type === "resize") {
+      Array.prototype.forEach.call(this.el_.children, node => {
+        node.style.width = `${this.el_.offsetWidth - 20}px`
+      })
+    }
+
   }
 
   /**
@@ -72,6 +91,7 @@ export default class Title {
    */
   reset() {
     this.el_.dataset.mdState = ""
+    this.el_.style.width = ""
     this.active_ = false
   }
 }

src/assets/stylesheets/layout/_header.scss

@@ -129,11 +129,17 @@
     position: absolute;
     transition:
       transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
-      opacity   0.25s;
+      opacity   0.15s;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 
     // Page title
     & + & {
-      transform: translateX(25%);
+      transform: translateX(4rem);
+      transition:
+        transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1),
+        opacity   0.15s;
       opacity: 0;
       z-index: -1;
       pointer-events: none;
@@ -147,26 +153,24 @@
     line-height: 4.8rem;
 
     // Show page title
-    &[data-md-state="active"] {
-      .md-header-nav__topic {
-        transform: translateX(-25%);
-        transition:
-          transform 0s 0.4s,
-          opacity   0.1s;
-        opacity: 0;
-        z-index: -1;
-        pointer-events: none;
+    &[data-md-state="active"] .md-header-nav__topic {
+      transform: translateX(-4rem);
+      transition:
+        transform 0.4s cubic-bezier(1, 0.7, 0.1, 0.1),
+        opacity   0.15s;
+      opacity: 0;
+      z-index: -1;
+      pointer-events: none;
 
-        // Page title
-        & + .md-header-nav__topic {
-          transform: translateX(0);
-          transition:
-            transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
-            opacity   0.25s;
-          opacity: 1;
-          z-index: 0;
-          pointer-events: initial;
-        }
+      // Page title
+      & + .md-header-nav__topic {
+        transform: translateX(0);
+        transition:
+          transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
+          opacity   0.15s;
+        opacity: 1;
+        z-index: 0;
+        pointer-events: initial;
       }
     }
   }

src/assets/stylesheets/layout/_nav.scss

@@ -215,27 +215,7 @@
 
         // Main lists
         ~ .md-nav__list {
-
-          // Pure CSS scrolling shadows, taken from
-          // http://lea.verou.me/2012/04/background-attachment-local/
-          background:
-            linear-gradient(
-              to bottom,
-              $md-color-white 10%,
-              $md-color-white--transparent
-            ),
-            linear-gradient(
-              to bottom,
-              $md-color-black--lighter,
-              $md-color-black--lightest 35%,
-              $md-color-black--transparent 60%
-            );
-          background-attachment: local, scroll;
           background-color: $md-color-white;
-          background-repeat: no-repeat;
-          background-size: 100% 2rem, 100% 1rem;
-
-          // End of scrolling shadow definition
           box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
 
           // Remove border for first list item