Optimize message docs

This commit is contained in:
Jeremy Thomas 2017-07-29 14:59:10 +01:00
parent 13d6def032
commit 0e2f716de5
5 changed files with 61 additions and 16 deletions

View File

@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
const target = $el.getAttribute('href'); const target = $el.getAttribute('href');
const $target = document.getElementById(target.substring(1)); const $target = document.getElementById(target.substring(1));
$target.scrollIntoView(true); $target.scrollIntoView(true);
window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`); // window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
return false; return false;
}); });
}); });
@ -152,4 +152,27 @@ document.addEventListener('DOMContentLoaded', () => {
return Array.prototype.slice.call(document.querySelectorAll(selector), 0); return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
} }
let latestKnownScrollY = 0;
let ticking = false;
function scrollUpdate() {
ticking = false;
// do stuff
}
function onScroll() {
latestKnownScrollY = window.scrollY;
scrollRequestTick();
}
function scrollRequestTick() {
if(!ticking) {
requestAnimationFrame(scrollUpdate);
}
ticking = true;
}
window.addEventListener('scroll', onScroll, false);
}); });

View File

@ -3510,7 +3510,7 @@ a.tag:hover {
.title { .title {
color: #363636; color: #363636;
font-size: 2rem; font-size: 2rem;
font-weight: 700; font-weight: 600;
line-height: 1.125; line-height: 1.125;
} }

View File

@ -210,9 +210,20 @@ variables:
</div> </div>
</div> </div>
{% include heading.html name="Colors" %}
<div class="columns">
<div class="column is-half">
{{message_colors_example}}
</div>
<div class="column is-half">
{% highlight html %}{{message_colors_example}}{% endhighlight %}
</div>
</div>
<hr> <hr>
<h3 class="subtitle">Message body only</h3> <h3 class="title">Message body only</h3>
<div class="content"> <div class="content">
<p>You can <strong>omit</strong> the message header:</p> <p>You can <strong>omit</strong> the message header:</p>
</div> </div>
@ -225,17 +236,6 @@ variables:
</div> </div>
</div> </div>
{% include heading.html name="Colors" %}
<div class="columns">
<div class="column is-half">
{{message_colors_example}}
</div>
<div class="column is-half">
{% highlight html %}{{message_colors_example}}{% endhighlight %}
</div>
</div>
{% include heading.html name="Sizes" %} {% include heading.html name="Sizes" %}
<div class="columns"> <div class="columns">

View File

@ -13,7 +13,7 @@ document.addEventListener('DOMContentLoaded', function () {
var target = $el.getAttribute('href'); var target = $el.getAttribute('href');
var $target = document.getElementById(target.substring(1)); var $target = document.getElementById(target.substring(1));
$target.scrollIntoView(true); $target.scrollIntoView(true);
window.history.replaceState(null, document.title, '' + window.location.origin + window.location.pathname + target); // window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
return false; return false;
}); });
}); });
@ -153,4 +153,26 @@ document.addEventListener('DOMContentLoaded', function () {
function getAll(selector) { function getAll(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector), 0); return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
} }
var latestKnownScrollY = 0;
var ticking = false;
function scrollUpdate() {
ticking = false;
// do stuff
}
function onScroll() {
latestKnownScrollY = window.scrollY;
scrollRequestTick();
}
function scrollRequestTick() {
if (!ticking) {
requestAnimationFrame(scrollUpdate);
}
ticking = true;
}
window.addEventListener('scroll', onScroll, false);
}); });

View File

@ -1,6 +1,6 @@
$title-color: $grey-darker !default $title-color: $grey-darker !default
$title-size: $size-3 !default $title-size: $size-3 !default
$title-weight: $weight-bold !default $title-weight: $weight-semibold !default
$title-strong-color: inherit !default $title-strong-color: inherit !default
$title-strong-weight: inherit !default $title-strong-weight: inherit !default