From e6a5e2e160462e60e8a251c5f8343adadacb5f58 Mon Sep 17 00:00:00 2001 From: squidfunk Date: Sun, 19 Nov 2017 17:28:00 +0100 Subject: [PATCH] Fixed missing ellipsis in header if JavaScript is enabled --- ...31fe15f6a.js => application-a5397a53ce.js} | 2 +- .../stylesheets/application-e056ea954c.css | 1 + .../stylesheets/application-fed1d0cce1.css | 1 - material/base.html | 4 +- .../components/Material/Header/Title.js | 24 +++++++++- src/assets/stylesheets/layout/_header.scss | 46 ++++++++++--------- src/assets/stylesheets/layout/_nav.scss | 20 -------- 7 files changed, 51 insertions(+), 47 deletions(-) rename material/assets/javascripts/{application-b31fe15f6a.js => application-a5397a53ce.js} (54%) create mode 100644 material/assets/stylesheets/application-e056ea954c.css delete mode 100644 material/assets/stylesheets/application-fed1d0cce1.css diff --git a/material/assets/javascripts/application-b31fe15f6a.js b/material/assets/javascripts/application-a5397a53ce.js similarity index 54% rename from material/assets/javascripts/application-b31fe15f6a.js rename to material/assets/javascripts/application-a5397a53ce.js index 871c479a0..90dfe8300 100644 --- a/material/assets/javascripts/application-b31fe15f6a.js +++ b/material/assets/javascripts/application-a5397a53ce.js @@ -1 +1 @@ -window.app=function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return e[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};return t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=35)}([function(e,t,n){"use strict";var r=n(23)("wks"),i=n(14),o=n(1).Symbol,a="function"==typeof o;(e.exports=function(e){return r[e]||(r[e]=a&&o[e]||(a?o:i)("Symbol."+e))}).store=r},function(e,t,n){"use strict";var r=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=r)},function(e,t,n){"use strict";var r=n(10),i=n(25);e.exports=n(5)?function(e,t,n){return r.f(e,t,i(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){"use strict";var r=n(11);e.exports=function(e){if(!r(e))throw TypeError(e+" is not an object!");return e}},function(e,t,n){"use strict";var r=n(1),i=n(2),o=n(6),a=n(14)("src"),s=Function.toString,c=(""+s).split("toString");n(7).inspectSource=function(e){return s.call(e)},(e.exports=function(e,t,n,s){var u="function"==typeof n;u&&(o(n,"name")||i(n,"name",t)),e[t]!==n&&(u&&(o(n,a)||i(n,a,e[t]?""+e[t]:c.join(String(t)))),e===r?e[t]=n:s?e[t]?e[t]=n:i(e,t,n):(delete e[t],i(e,t,n)))})(Function.prototype,"toString",function(){return"function"==typeof this&&this[a]||s.call(this)})},function(e,t,n){"use strict";e.exports=!n(24)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t,n){"use strict";var r={}.hasOwnProperty;e.exports=function(e,t){return r.call(e,t)}},function(e,t,n){"use strict";var r=e.exports={version:"2.4.0"};"number"==typeof __e&&(__e=r)},function(e,t,n){"use strict";e.exports={}},function(e,t,n){"use strict";var r={}.toString;e.exports=function(e){return r.call(e).slice(8,-1)}},function(e,t,n){"use strict";var r=n(3),i=n(38),o=n(39),a=Object.defineProperty;t.f=n(5)?Object.defineProperty:function(e,t,n){if(r(e),t=o(t,!0),r(n),i)try{return a(e,t,n)}catch(e){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(e[t]=n.value),e}},function(e,t,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};e.exports=function(e){return"object"===(void 0===e?"undefined":r(e))?null!==e:"function"==typeof e}},function(e,t,n){"use strict";var r=n(18);e.exports=function(e,t,n){if(r(e),void 0===t)return e;switch(n){case 1:return function(n){return e.call(t,n)};case 2:return function(n,r){return e.call(t,n,r)};case 3:return function(n,r,i){return e.call(t,n,r,i)}}return function(){return e.apply(t,arguments)}}},function(e,t,n){"use strict";var r=n(9),i=n(0)("toStringTag"),o="Arguments"==r(function(){return arguments}()),a=function(e,t){try{return e[t]}catch(e){}};e.exports=function(e){var t,n,s;return void 0===e?"Undefined":null===e?"Null":"string"==typeof(n=a(t=Object(e),i))?n:o?r(t):"Object"==(s=r(t))&&"function"==typeof t.callee?"Arguments":s}},function(e,t,n){"use strict";var r=0,i=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++r+i).toString(36))}},function(e,t,n){"use strict";var r=n(11),i=n(1).document,o=r(i)&&r(i.createElement);e.exports=function(e){return o?i.createElement(e):{}}},function(e,t,n){"use strict";var r=Math.ceil,i=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?i:r)(e)}},function(e,t,n){"use strict";e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,t,n){"use strict";e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,n){"use strict";var r=n(47),i=n(17);e.exports=function(e){return r(i(e))}},function(e,t,n){"use strict";var r=n(23)("keys"),i=n(14);e.exports=function(e){return r[e]||(r[e]=i(e))}},function(e,t,n){"use strict";var r=n(10).f,i=n(6),o=n(0)("toStringTag");e.exports=function(e,t,n){e&&!i(e=n?e:e.prototype,o)&&r(e,o,{configurable:!0,value:t})}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={createElement:function(e,t){var n=document.createElement(e);t&&Array.prototype.forEach.call(Object.keys(t),function(e){n.setAttribute(e,t[e])});for(var r=arguments.length,i=Array(r>2?r-2:0),o=2;o0?i(r(e),9007199254740991):0}},function(e,t,n){"use strict";e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t,n){"use strict";e.exports=n(1).document&&document.documentElement},function(e,t,n){"use strict";var r,i,o,a=n(12),s=n(63),c=n(31),u=n(15),l=n(1),f=l.process,h=l.setImmediate,d=l.clearImmediate,p=l.MessageChannel,m=0,y={},v=function(){var e=+this;if(y.hasOwnProperty(e)){var t=y[e];delete y[e],t()}},g=function(e){v.call(e.data)};h&&d||(h=function(e){for(var t=[],n=1;arguments.length>n;)t.push(arguments[n++]);return y[++m]=function(){s("function"==typeof e?e:Function(e),t)},r(m),m},d=function(e){delete y[e]},"process"==n(9)(f)?r=function(e){f.nextTick(a(v,e,1))}:p?(i=new p,o=i.port2,i.port1.onmessage=g,r=a(o.postMessage,o,1)):l.addEventListener&&"function"==typeof postMessage&&!l.importScripts?(r=function(e){l.postMessage(e+"","*")},l.addEventListener("message",g,!1)):r="onreadystatechange"in u("script")?function(e){c.appendChild(u("script")).onreadystatechange=function(){c.removeChild(this),v.call(e)}}:function(e){setTimeout(a(v,e,1),0)}),e.exports={set:h,clear:d}},function(e,t){(function(t){e.exports=t}).call(t,{})},function(e,t,n){"use strict";function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var n=0;n=t.length?{value:void 0,done:!0}:(e=r(t,n),this._i+=e.length,{value:e,done:!1})})},function(e,t,n){"use strict";var r=n(16),i=n(17);e.exports=function(e){return function(t,n){var o,a,s=String(i(t)),c=r(n),u=s.length;return c<0||c>=u?e?"":void 0:(o=s.charCodeAt(c),o<55296||o>56319||c+1===u||(a=s.charCodeAt(c+1))<56320||a>57343?e?s.charAt(c):o:e?s.slice(c,c+2):a-56320+(o-55296<<10)+65536)}}},function(e,t,n){"use strict";var r=n(43),i=n(25),o=n(21),a={};n(2)(a,n(0)("iterator"),function(){return this}),e.exports=function(e,t,n){e.prototype=r(a,{next:i(1,n)}),o(e,t+" Iterator")}},function(e,t,n){"use strict";var r=n(3),i=n(44),o=n(30),a=n(20)("IE_PROTO"),s=function(){},c=function(){var e,t=n(15)("iframe"),r=o.length;for(t.style.display="none",n(31).appendChild(t),t.src="javascript:",e=t.contentWindow.document,e.open(),e.write(" + {% if lang.t("search.language") != "en" %} {% set languages = lang.t("search.language").split(",") %} {% if languages | length and languages[0] != "" %} diff --git a/src/assets/javascripts/components/Material/Header/Title.js b/src/assets/javascripts/components/Material/Header/Title.js index 5655516b5..268870468 100644 --- a/src/assets/javascripts/components/Material/Header/Title.js +++ b/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 } } diff --git a/src/assets/stylesheets/layout/_header.scss b/src/assets/stylesheets/layout/_header.scss index 586b1514e..5225d1a78 100644 --- a/src/assets/stylesheets/layout/_header.scss +++ b/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; } } } diff --git a/src/assets/stylesheets/layout/_nav.scss b/src/assets/stylesheets/layout/_nav.scss index e24bf7726..9facdb1c3 100644 --- a/src/assets/stylesheets/layout/_nav.scss +++ b/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