starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-08-04 19:45:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

Added support for hero text

Browse Source
This commit is contained in:
Martin Donath
2017-11-22 00:13:56 +01:00
committed by GitHub
parent 50d69fd428
commit f033fd5437
22 changed files with 244 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/assets/javascripts/application.js
View File

@@ -212,12 +212,12 @@ function initialize(config) { // eslint-disable-line func-style
}).listen()
/* Component: header shadow toggle */
new Material.Event.MatchMedia("(min-width: 1220px)",
new Material.Event.Listener(window, [
"scroll", "resize", "orientationchange"
], new Material.Header.Shadow(
"[data-md-component=container]",
"[data-md-component=header]")))
new Material.Event.Listener(window, [
"scroll", "resize", "orientationchange"
], new Material.Header.Shadow(
"[data-md-component=container]",
"[data-md-component=header]")
).listen()
/* Component: header title toggle */
new Material.Event.Listener(window, [
@@ -227,6 +227,12 @@ function initialize(config) { // eslint-disable-line func-style
".md-typeset h1")
).listen()
/* Component: hero visibility toggle */
if (document.querySelector("[data-md-component=hero]"))
new Material.Event.Listener(window, [
"scroll", "resize", "orientationchange"
], new Material.Tabs.Toggle("[data-md-component=hero]")).listen()
/* Component: tabs visibility toggle */
if (document.querySelector("[data-md-component=tabs]"))
new Material.Event.Listener(window, [

15
src/assets/javascripts/components/Material/Header/Shadow.js
View File

@@ -76,11 +76,18 @@ export default class Shadow {
/**
* Update shadow state
*
* @param {Event} ev - Event
*/
update() {
const active = window.pageYOffset >= this.height_
if (active !== this.active_)
this.header_.dataset.mdState = (this.active_ = active) ? "shadow" : ""
update(ev) {
if (ev && (ev.type === "resize" || ev.type === "orientationchange")) {
this.height_ = 0
this.setup()
} else {
const active = window.pageYOffset >= this.height_
if (active !== this.active_)
this.header_.dataset.mdState = (this.active_ = active) ? "shadow" : ""
}
}
/**

2
src/assets/javascripts/components/Material/Header/Title.js
View File

@@ -78,7 +78,7 @@ export default class Title {
this.el_.dataset.mdState = (this.active_ = active) ? "active" : ""
/* Hack: induce ellipsis on topics */
if (ev.type === "resize") {
if (ev.type === "resize" || ev.type === "orientationchange") {
Array.prototype.forEach.call(this.el_.children, node => {
node.style.width = `${this.el_.offsetWidth - 20}px`
})

4
src/assets/javascripts/components/Material/Tabs/Toggle.js
View File

@@ -46,7 +46,6 @@ export default class Toggle {
this.el_ = ref
/* Initialize offset and state */
this.offset_ = 5
this.active_ = false
}
@@ -54,7 +53,8 @@ export default class Toggle {
* Update visibility
*/
update() {
const active = window.pageYOffset >= this.offset_
const active = window.pageYOffset >=
this.el_.children[0].offsetTop + (5 - 48) // TODO: quick hack to enable same handling for hero
if (active !== this.active_)
this.el_.dataset.mdState = (this.active_ = active) ? "hidden" : ""
}

1
src/assets/stylesheets/application.scss
View File

@@ -45,6 +45,7 @@
@import "layout/clipboard";
@import "layout/content";
@import "layout/header";
@import "layout/hero";
@import "layout/footer";
@import "layout/nav";
@import "layout/search";

27
src/assets/stylesheets/layout/_header.scss
View File

@@ -36,9 +36,7 @@
color 0.25s;
background-color: $md-color-primary;
color: $md-color-white;
box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.1),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
box-shadow: none;
z-index: 2;
// Hack: putting the header on the GPU avoids unnecessary repaints
backface-visibility: hidden;
@@ -48,20 +46,15 @@
box-shadow: none;
}
// [screen +]: Show shadow depending on scroll offset
@include break-from-device(screen) {
box-shadow: none;
// Show and animate shadow
&[data-md-state="shadow"] {
transition:
background-color 0.25s,
color 0.25s,
box-shadow 0.25s;
box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.1),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
}
// Show and animate shadow
&[data-md-state="shadow"] {
transition:
background-color 0.25s,
color 0.25s,
box-shadow 0.25s;
box-shadow:
0 0 0.4rem rgba(0, 0, 0, 0.1),
0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
}
// Hide for print

64
src/assets/stylesheets/layout/_hero.scss Normal file
View File

@@ -0,0 +1,64 @@
////
/// Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
///
/// 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
////
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
// Hero teaser
.md-hero {
transition: background 0.25s;
background: $md-color-primary;
color: $md-color-white;
font-size: ms(1);
overflow: auto;
// Inner wrapper
&__inner {
margin-top: 2rem;
padding: 1.6rem 1.6rem 0.8rem;
transition:
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.25s;
// [tablet -]: Compensate for missing tabs
@include break-to-device(tablet) {
margin-top: 4.8rem;
margin-bottom: 2.4rem;
}
// Fade-out tabs background upon scrolling
[data-md-state="hidden"] & {
pointer-events: none;
transform: translateY(1.25rem);
transition:
transform 0s 0.4s,
opacity 0.1s;
opacity: 0;
}
/* Adjust bottom spacing if there are no tabs */
.md-hero--expand & {
margin-bottom: 2.4rem;
}
}
}

54
src/base.html
View File

@@ -40,7 +40,7 @@
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<!-- Page description -->
{% if page and page.meta.description %}
{% if page and page.meta and page.meta.description %}
<meta name="description"
content="{{ page.meta.description }}" />
{% elif config.site_description %}
@@ -53,7 +53,7 @@
{% endif %}
<!-- Page author -->
{% if page and page.meta.author %}
{% if page and page.meta and page.meta.author %}
<meta name="author" content="{{ page.meta.author | first }}" />
{% elif config.site_author %}
<meta name="author" content="{{ config.site_author }}" />
@@ -83,7 +83,7 @@
<!-- Site title -->
{% block htmltitle %}
{% if page and page.meta.title %}
{% if page and page.meta and page.meta.title %}
<title>{{ page.meta.title }}</title>
{% elif page and page.title and not page.is_homepage %}
<title>{{ page.title }} - {{ config.site_name }}</title>
@@ -197,6 +197,13 @@
<!-- Container, necessary for web-application context -->
<div class="md-container">
<!-- Hero teaser -->
{% block hero %}
{% if page and page.meta and page.meta.hero %}
{% include "partials/hero.html" with context %}
{% endif %}
{% endblock %}
<!-- Tabs with outline -->
{% if feature.tabs %}
{% include "partials/tabs.html" %}
@@ -262,7 +269,7 @@
<!-- Source files -->
{% block source %}
{% if page.meta.source %}
{% if page and page.meta and page.meta.source %}
<h2 id="__source">{{ lang.t("meta.source") }}</h2>
{% set path = page.meta.path | default([""]) %}
{% set file = page.meta.source %}
@@ -278,7 +285,7 @@
{% block disqus %}
{% if config.extra.disqus and not page.is_homepage %}
<h2 id="__comments">{{ lang.t("meta.comments") }}</h2>
{% include "partials/disqus.html" %}
{% include "partials/integrations/disqus.html" %}
{% endif %}
{% endblock %}
</article>
@@ -333,42 +340,7 @@
<!-- Analytic scripts -->
{% block analytics %}
{% if config.google_analytics %}
<script>
(function(i,s,o,g,r,a,m){
i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||
[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
m.parentNode.insertBefore(a,m)
})(window, document,
"script", "https://www.google-analytics.com/analytics.js", "ga");
/* General initialization */
ga("create",
"{{ config.google_analytics[0] }}",
"{{ config.google_analytics[1] }}");
ga("set", "anonymizeIp", true);
ga("send", "pageview");
/* Track outbound links */
var links = document.getElementsByTagName("a");
Array.prototype.map.call(links, function(item) {
if (item.host != document.location.host) {
item.addEventListener("click", function() {
var action = item.getAttribute("data-md-action") || "follow";
ga("send", "event", "outbound", action, item.href);
});
}
});
/* Register handler to log search on blur */
var query = document.forms.search.query;
query.addEventListener("blur", function() {
if (this.value) {
var path = document.location.pathname;
ga("send", "pageview", path + "?q=" + this.value);
}
});
</script>
{% include "partials/integrations/analytics.html" %}
{% endif %}
{% endblock %}
</body>

34
src/partials/hero.html Normal file
View File

@@ -0,0 +1,34 @@
<!--
Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
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.
-->
<!-- Determine class according to level -->
{% set class = "md-hero" %}
{% if not feature.tabs %}
{% set class = "md-hero md-hero--expand" %}
{% endif %}
<!-- Hero teaser -->
<div class="{{ class }}" data-md-component="hero">
<div class="md-hero__inner md-grid">
{{ page.meta.hero }}
</div>
</div>

59
src/partials/integrations/analytics.html Normal file
View File

@@ -0,0 +1,59 @@
<!--
Copyright (c) 2016-2017 Martin Donath <martin.donath@squidfunk.com>
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.
-->
<!-- Google Analytics integration -->
<script>
(function(i,s,o,g,r,a,m){
i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||
[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;
m.parentNode.insertBefore(a,m)
})(window, document,
"script", "https://www.google-analytics.com/analytics.js", "ga");
/* General initialization */
ga("create",
"{{ config.google_analytics[0] }}",
"{{ config.google_analytics[1] }}");
ga("set", "anonymizeIp", true);
ga("send", "pageview");
/* Track outbound links */
var links = document.getElementsByTagName("a");
Array.prototype.map.call(links, function(item) {
if (item.host != document.location.host) {
item.addEventListener("click", function() {
var action = item.getAttribute("data-md-action") || "follow";
ga("send", "event", "outbound", action, item.href);
});
}
});
/* Register handler to log search on blur */
var query = document.forms.search.query;
query.addEventListener("blur", function() {
if (this.value) {
var path = document.location.pathname;
ga("send", "pageview", path + "?q=" + this.value);
}
});
</script>

0
src/partials/disqus.html → src/partials/integrations/disqus.html
View File