From 354c713e4f6f70b19ef47a203998850cbd65e5ac Mon Sep 17 00:00:00 2001 From: squidfunk Date: Sun, 19 Nov 2017 16:46:01 +0100 Subject: [PATCH] Added support for sliding title --- .../javascripts/application-23f8e48ddb.js | 1 - .../javascripts/application-b31fe15f6a.js | 1 + ...css => application-3e082b9545.palette.css} | 2 +- .../stylesheets/application-63c41eb78d.css | 1 - .../stylesheets/application-fed1d0cce1.css | 1 + material/base.html | 6 +- material/partials/header.html | 15 +++- mkdocs.yml | 2 +- src/assets/javascripts/application.js | 8 ++ .../javascripts/components/Material/Header.js | 4 +- .../components/Material/Header/Title.js | 77 +++++++++++++++++++ .../stylesheets/application.palette.scss | 21 +++-- src/assets/stylesheets/layout/_header.scss | 54 +++++++++++-- src/assets/stylesheets/layout/_tabs.scss | 9 ++- src/partials/header.html | 16 +++- 15 files changed, 189 insertions(+), 29 deletions(-) delete mode 100644 material/assets/javascripts/application-23f8e48ddb.js create mode 100644 material/assets/javascripts/application-b31fe15f6a.js rename material/assets/stylesheets/{application-34bd9d9ec8.palette.css => application-3e082b9545.palette.css} (96%) delete mode 100644 material/assets/stylesheets/application-63c41eb78d.css create mode 100644 material/assets/stylesheets/application-fed1d0cce1.css create mode 100644 src/assets/javascripts/components/Material/Header/Title.js diff --git a/material/assets/javascripts/application-23f8e48ddb.js b/material/assets/javascripts/application-23f8e48ddb.js deleted file mode 100644 index ccb5cb2bb..000000000 --- a/material/assets/javascripts/application-23f8e48ddb.js +++ /dev/null @@ -1 +0,0 @@ -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/material/partials/header.html b/material/partials/header.html index dd9625610..906da3e07 100644 --- a/material/partials/header.html +++ b/material/partials/header.html @@ -14,11 +14,20 @@
- +
{% block site_name %} - {{ config.site_name }} + {% if config.site_name == page.title %} + {{ config.site_name }} + {% else %} + + {{ config.site_name }} + + + {{ page.title }} + + {% endif %} {% endblock %} - +
{% block search_box %} diff --git a/mkdocs.yml b/mkdocs.yml index 5089b7f8f..e69964676 100755 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -48,7 +48,7 @@ theme: # Default values, taken from mkdocs_theme.yml language: en feature: - tabs: false + tabs: true palette: primary: indigo accent: indigo diff --git a/src/assets/javascripts/application.js b/src/assets/javascripts/application.js index 64cba02b1..9e47c2dff 100644 --- a/src/assets/javascripts/application.js +++ b/src/assets/javascripts/application.js @@ -199,6 +199,14 @@ function initialize(config) { // eslint-disable-line func-style "[data-md-component=container]", "[data-md-component=header]"))) + /* Component: header title toggle */ + new Material.Event.Listener(window, [ + "scroll", "resize", "orientationchange" + ], new Material.Header.Title( + "[data-md-component=title]", + ".md-typeset h1") + ).listen() + /* Component: tabs visibility toggle */ if (document.querySelector("[data-md-component=tabs]")) new Material.Event.Listener(window, [ diff --git a/src/assets/javascripts/components/Material/Header.js b/src/assets/javascripts/components/Material/Header.js index 4067f5ae6..94248cbde 100644 --- a/src/assets/javascripts/components/Material/Header.js +++ b/src/assets/javascripts/components/Material/Header.js @@ -21,11 +21,13 @@ */ import Shadow from "./Header/Shadow" +import Title from "./Header/Title" /* ---------------------------------------------------------------------------- * Module * ------------------------------------------------------------------------- */ export default { - Shadow + Shadow, + Title } diff --git a/src/assets/javascripts/components/Material/Header/Title.js b/src/assets/javascripts/components/Material/Header/Title.js new file mode 100644 index 000000000..5655516b5 --- /dev/null +++ b/src/assets/javascripts/components/Material/Header/Title.js @@ -0,0 +1,77 @@ +/* + * Copyright (c) 2016-2017 Martin Donath + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to + * deal in the Software without restriction, including without limitation the + * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or + * sell copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS + * IN THE SOFTWARE. + */ + +/* ---------------------------------------------------------------------------- + * Class + * ------------------------------------------------------------------------- */ + +export default class Title { + + /** + * Swap header title topics when header is scrolled past + * + * @constructor + * + * @property {HTMLElement} el_ - Element + * @property {HTMLElement} header_ - Header + * @property {boolean} active_ - Title state + * + * @param {(string|HTMLElement)} el - Selector or HTML element + * @param {(string|HTMLHeadingElement)} header - Selector or HTML element + */ + constructor(el, header) { + let ref = (typeof el === "string") + ? document.querySelector(el) + : el + if (!(ref instanceof HTMLElement)) + throw new ReferenceError + this.el_ = ref + + /* Retrieve header */ + ref = (typeof header === "string") + ? document.querySelector(header) + : header + if (!(ref instanceof HTMLHeadingElement)) + throw new ReferenceError + this.header_ = ref + + /* Initialize state */ + this.active_ = false + } + + /** + * Update title state + */ + update() { + const active = window.pageYOffset >= this.header_.offsetTop + if (active !== this.active_) + this.el_.dataset.mdState = (this.active_ = active) ? "active" : "" + } + + /** + * Reset title state + */ + reset() { + this.el_.dataset.mdState = "" + this.active_ = false + } +} diff --git a/src/assets/stylesheets/application.palette.scss b/src/assets/stylesheets/application.palette.scss index 6d3088492..912b3a666 100644 --- a/src/assets/stylesheets/application.palette.scss +++ b/src/assets/stylesheets/application.palette.scss @@ -76,8 +76,8 @@ button[data-md-color-accent] { "green": $clr-green-500, "light-green": $clr-light-green-600, "lime": $clr-lime-600, - "yellow": $clr-yellow-600, - "amber": $clr-amber-600, + "yellow": $clr-yellow-800, + "amber": $clr-amber-700, "orange": $clr-orange-600, "deep-orange": $clr-deep-orange-400, "brown": $clr-brown-500, @@ -171,6 +171,11 @@ button[data-md-color-accent] { } } + // Table of contents + .md-nav--secondary { + border-left: 0.4rem solid $md-color-black--light; + } + // [tablet portrait -]: Layered navigation @include break-to-device(tablet portrait) { @@ -191,9 +196,15 @@ button[data-md-color-accent] { } } - // Table of contents - .md-nav--secondary { - border-left: 0.4rem solid $md-color-black--light; + // [screen +]: Set background color for tabs + @include break-from-device(screen) { + + // Tabs with outline + .md-tabs { + border-bottom: 0.1rem solid $md-color-black--lightest; + background: $md-color-white; + color: $md-color-black; + } } } diff --git a/src/assets/stylesheets/layout/_header.scss b/src/assets/stylesheets/layout/_header.scss index aab3e43ef..586b1514e 100644 --- a/src/assets/stylesheets/layout/_header.scss +++ b/src/assets/stylesheets/layout/_header.scss @@ -35,8 +35,8 @@ background-color: $md-color-primary; color: $md-color-white; box-shadow: - 0 0 0.4rem rgba(0, 0, 0, 0.14), - 0 0.4rem 0.8rem rgba(0, 0, 0, 0.28); + 0 0 0.4rem rgba(0, 0, 0, 0.1), + 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); z-index: 2; // Hack: putting the header on the GPU avoids unnecessary repaints backface-visibility: hidden; @@ -44,8 +44,8 @@ // Always show shadow, in case JavaScript is not available .no-js & { box-shadow: - 0 0 0.4rem rgba(0, 0, 0, 0.14), - 0 0.4rem 0.8rem rgba(0, 0, 0, 0.28); + 0 0 0.4rem rgba(0, 0, 0, 0.1), + 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); } // [screen +]: Show shadow depending on scroll offset @@ -54,9 +54,10 @@ // Show and animate shadow &[data-md-state="shadow"] { + transition: box-shadow 0.25s; box-shadow: - 0 0 0.4rem rgba(0, 0, 0, 0.14), - 0 0.4rem 0.8rem rgba(0, 0, 0, 0.28); + 0 0 0.4rem rgba(0, 0, 0, 0.1), + 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2); } } @@ -122,11 +123,52 @@ } } + // Header topics + &__topic { + display: block; + position: absolute; + transition: + transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), + opacity 0.25s; + + // Page title + & + & { + transform: translateX(25%); + opacity: 0; + z-index: -1; + pointer-events: none; + } + } + // Header title - set line height to match icon for correct alignment &__title { padding: 0 2rem; font-size: 1.8rem; 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; + + // 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; + } + } + } } // Repository containing source diff --git a/src/assets/stylesheets/layout/_tabs.scss b/src/assets/stylesheets/layout/_tabs.scss index c9c442064..f3acf353a 100644 --- a/src/assets/stylesheets/layout/_tabs.scss +++ b/src/assets/stylesheets/layout/_tabs.scss @@ -29,6 +29,7 @@ width: 100%; transition: background 0.25s; background: $md-color-primary; + color: $md-color-white; overflow: auto; // [tablet -]: Hide tabs for tablet and below, as they don't make any sense @@ -64,16 +65,16 @@ display: block; margin-top: 1.6rem; transition: - color 0.25s, transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1), - opacity 0.1s; - color: $md-color-white--light; + opacity 0.25s; font-size: 1.4rem; + opacity: 0.7; // Active or hovered link &--active, &:hover { - color: $md-color-white; + color: inherit; + opacity: 1; } // Delay transitions by a small amount diff --git a/src/partials/header.html b/src/partials/header.html index 9357a6e5c..b8dd834b5 100644 --- a/src/partials/header.html +++ b/src/partials/header.html @@ -49,11 +49,21 @@
- +
{% block site_name %} - {{ config.site_name }} + {% if config.site_name == page.title %} + {{ config.site_name }} + {% else %} + + {{ config.site_name }} + + + {{ page.title }} + + {% endif %} {% endblock %} - +