1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-12-24 18:36:11 +01:00

FAQ tweaks, migrate to smooth-scroll package

This commit is contained in:
Matthias Kretschmann 2017-08-22 13:28:58 +02:00
parent a14222eb01
commit b21df0a8a2
Signed by: m
GPG Key ID: 606EEEF3C479A91F
15 changed files with 25 additions and 80 deletions

View File

@ -1,6 +1,7 @@
//=include svg4everybody/dist/svg4everybody.js
//=include jquery/dist/jquery.js
//=include smooth-scroll/dist/js/smooth-scroll.js
//=include bigchain/analytics.js
//=include bigchain/dnt.js
@ -19,6 +20,14 @@ jQuery(function($) {
}
//
// init Smooth Scroll
//
var scroll = new SmoothScroll('a[data-scroll]', {
easing: 'easeOutQuint'
});
//
// Open all external links in new window
//
@ -33,7 +42,7 @@ jQuery(function($) {
//
// Automatically add header links to all Markdown headings
//
$('.content--page--markdown h1:not(#heading-1), .content--page--markdown h2:not(#heading-2)').each(function(i, el) {
$('.content--page--markdown h1:not(#heading-1), .content--page--markdown h2:not(#heading-2), .faq__question').each(function(i, el) {
var $el, icon, id;
$el = $(el);
id = $el.attr('id');

View File

@ -1,58 +0,0 @@
//
// https://github.com/bendc/anchor-scroll/blob/master/scroll.min.js
//
document.addEventListener("DOMContentLoaded", function() {
var e = function() {
if ("scrollingElement" in document) return document.scrollingElement;
var a = document.documentElement,
b = a.scrollTop;
a.scrollTop = b + 1;
var c = a.scrollTop;
a.scrollTop = b;
return c > b ? a : document.body
}(),
g = function(a) {
var b = e.scrollTop;
if (2 > a.length) a = -b;
else if (a = document.querySelector(a)) {
a = a.getBoundingClientRect().top;
var c = e.scrollHeight - window.innerHeight;
a = b + a < c ? a : c - b
} else a = void 0;
if (a) return new Map([
["start", b],
["delta", a]
])
},
h = function(a) {
var b =
a.getAttribute("href"),
c = g(b);
if (c) {
var d = new Map([
["duration", 800]
]),
k = performance.now();
requestAnimationFrame(function l(a) {
d.set("elapsed", a - k);
a = d.get("duration");
var f = d.get("elapsed"),
g = c.get("start"),
h = c.get("delta");
e.scrollTop = Math.round(h * (-Math.pow(2, -10 * f / a) + 1) + g);
d.get("elapsed") < d.get("duration") ? requestAnimationFrame(l) : (null, null, b, e.scrollTop = c.get("start") + c.get("delta"))
})
}
},
f = document.querySelectorAll("a.scroll");
(function b(c, d) {
var e = c.item(d);
e.addEventListener("click",
function(b) {
b.preventDefault();
h(e)
});
if (d) return b(c, d - 1)
})(f, f.length - 1)
});

View File

@ -1,4 +1,3 @@
//=include bigchain/smoothscroll.js
//=include bigchain/form-enterprise.js
jQuery(function($) {

View File

@ -1,6 +1,5 @@
//=include bigchain/testimonials.js
//=include bigchain/smoothscroll.js
//=include bigchain/github.js
//=include bigchain/meetup.js

View File

@ -1,7 +1,6 @@
//=require gumshoe/dist/js/gumshoe.js
//=include bigchain/tab.js
//=include bigchain/smoothscroll.js
//=include bigchain/newsletter.js
const ipdbUrl = 'https://test.ipdb.io'

View File

@ -1,4 +1,3 @@
//=include bigchain/smoothscroll.js
//=include bigchain/newsletter.js
jQuery(function($) {

View File

@ -6,10 +6,6 @@
font-size: $font-size-h4;
}
.faq__answer {
}
.faq-contents__title {
font-size: $font-size-h5;
margin-top: $spacer / 2;

View File

@ -8,7 +8,8 @@
}
> h1,
h2 {
h2,
.faq__question {
&:not(#heading-1):not(#heading-2) {
border-bottom: 1px solid $brand-main-blue-light;
padding-bottom: $spacer;
@ -48,7 +49,7 @@
.header-icon {
font-style: normal;
font-size: 2rem;
font-size: $font-size-lg;
color: $brand-primary;
}
}

View File

@ -14,12 +14,12 @@ main:
secondary:
- title: FAQ
url: "/faq/"
- title: About
url: "/about/"
- title: Whitepaper
url: "/whitepaper/"
- title: Blog
url: https://blog.bigchaindb.com
- title: About
url: "/about/"
- title: Contact
url: "/contact/"

View File

@ -35,6 +35,6 @@
</div>
</aside>
<a class="hero__more scroll btn btn-link btn-sm" href="#features">Learn More <svg class="icon"><use xlink:href="/assets/img/sprite.svg#icon-caret"></use></svg></a>
<a class="hero__more btn btn-link btn-sm" href="#features" data-scroll>Learn More <svg class="icon"><use xlink:href="/assets/img/sprite.svg#icon-caret"></use></svg></a>
</header>

View File

@ -96,7 +96,7 @@ contact:
<p class="section-description">{{ page.hero.description }}</p>
{% for cta in page.hero.cta %}
<a class="btn hero__action {% if cta.scroll %}scroll{% endif %}" href="{{ cta.link }}">{{ cta.name }}</a>
<a class="btn hero__action" href="{{ cta.link }}" {% if cta.scroll %}data-scroll{% endif %}>{{ cta.name }}</a>
{% endfor %}
</hgroup>
</div>

View File

@ -9,11 +9,11 @@ title: Frequently answered questions
<div class="faq-contents">
{% for faq in site.data.faq %}
<h1 class="faq-contents__title"><a href="#{{ faq.question | downcase | replace: ' ','-' | replace: '?', '' }}">{{ faq.question }}</a></h1>
<h1 class="faq-contents__title"><a href="#{{ faq.question | downcase | replace: ' ','-' | replace: '?', '' }}" data-scroll>{{ faq.question }}</a></h1>
{% endfor %}
</div>
<div class="faq">
<div class="faq content--page--markdown">
{% for faq in site.data.faq %}
<h1 class="faq__question" id="{{ faq.question | downcase | replace: ' ','-' | replace: '?', '' }}">{{ faq.question }}</h1>
<div class="faq__answer">{{ faq.answer | markdownify }}</div>

View File

@ -136,10 +136,10 @@ conn.postTransaction(txSigned)
<nav class="menu--sub" data-gumshoe-header>
<div class="row row--wide">
<div class="menu-overflow" data-gumshoe>
<a class="menu__link scroll" href="#server"><span class="number">1</span> {{ content.server.title }}</a>
<a class="menu__link scroll" href="#drivers"><span class="number">2</span> {{ content.drivers.title }}</a>
<a class="menu__link scroll" href="#docs"><span class="number">3</span> {{ content.docs.title }}</a>
<a class="menu__link scroll" href="#community"><span class="number">4</span> {{ content.community.title }}</a>
<a class="menu__link" href="#server" data-scroll><span class="number">1</span> {{ content.server.title }}</a>
<a class="menu__link" href="#drivers" data-scroll><span class="number">2</span> {{ content.drivers.title }}</a>
<a class="menu__link" href="#docs" data-scroll><span class="number">3</span> {{ content.docs.title }}</a>
<a class="menu__link" href="#community" data-scroll><span class="number">4</span> {{ content.community.title }}</a>
</div>
</div>
</nav>

View File

@ -43,7 +43,7 @@ js: page-usecases.min.js
<div class="row row--wide">
<div class="menu-overflow">
{% for industry in site.data.industries %}
<a class="menu__link scroll" href="#{{ industry.name | downcase | replace: " ", "" }}">
<a class="menu__link" href="#{{ industry.name | downcase | replace: " ", "" }}" data-scroll>
<svg class="icon">
<use xlink:href="/assets/img/sprite.svg#{{ industry.icon }}"></use>
</svg>

View File

@ -33,6 +33,7 @@
"normalize-opentype.css": "^0.2.4",
"parsleyjs": "^2.7.2",
"select2": "^4.0.3",
"smooth-scroll": "^12.1.3",
"svg4everybody": "^2.1.9",
"textarea-autogrow": "^1.0.0",
"vivus": "^0.4.1",