diff --git a/build/js/gainTime.js b/build/js/gainTime.js index 0ba4d14..b11cd12 100644 --- a/build/js/gainTime.js +++ b/build/js/gainTime.js @@ -1,60 +1,62 @@ function makeA(a) { a.addEventListener("click", function(e) { var d = a.href.split("/"); - var file = d[d.length - 1]; - f = file.split("#")[1]; + var file = d[d.length - 1].split("#"); + var h = document.location.toString().split("/") + var here = h[h.length - 1].split("#"); + f = file[1]; - if (f != undefined) { + if (f != undefined && (here[0] === file[0])) { e.preventDefault(); - f = f.replace(/\#/g,""); - var target = document.getElementById(f); - animate(document.scrollingElement || document.documentElement, "scrollTop", "", currentYPosition(), target.offsetTop - 60, 500, true); + var el = document.scrollingElement || document.documentElement; + var to = document.getElementById(f).offsetTop - 60; + smoothScroll(el, to, 600); } }) } -function currentYPosition() { - // Firefox, Chrome, Opera, Safari - if (self.pageYOffset) return self.pageYOffset; - // Internet Explorer 6 - standards mode - if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; - // Internet Explorer 6, 7 and 8 - if (document.body.scrollTop) return document.body.scrollTop; - return 0; -} - -function elmYPositioneID(id) { - var elm = document.getElementById(id); - var y = elm.offsetTop; - var node = elm; - while (node.offsetParent && node.offsetParent != document.body) { - node = node.offsetParent; - y += node.offsetTop; - } - return y; -} - -function animate(elem, style, unit, from, to, time, prop) { - var distance = to > from ? to - from : from - to; - if ( distance <= 30) { return false; } - if (!elem) { return; } - var start = new Date().getTime(), - timer = setInterval(function () { - var step = Math.min(1, (new Date().getTime() - start) / time); - if (prop) { - elem[style] = (from + step * (to - from))+unit; - } else { - elem.style[style] = (from + step * (to - from))+unit; +var smoothScroll = function(element, target, duration) { + target = Math.round(target); + duration = Math.round(duration); + + if (duration < 0) return Promise.reject("bad duration"); + if (duration === 0) { + element.scrollTop = target; + return Promise.resolve(); + } + var start_time = Date.now(); + var end_time = start_time + duration; + var start_top = element.scrollTop; + var distance = target - start_top; + + // based on http://en.wikipedia.org/wiki/Smoothstep + var smoothStep = function(start, end, point) { + if(point <= start) { return 0; } + if(point >= end) { return 1; } + var x = (point - start) / (end - start); // interpolation + return x*x*(3 - 2*x); + } + + return new Promise(function(resolve, reject) { + var previous_top = element.scrollTop; + var scrollFrame = function() { + var now = Date.now(); + var point = smoothStep(start_time, end_time, now); + var frameTop = Math.round(start_top + (distance * point)); + element.scrollTop = frameTop; + if(now >= end_time) { + resolve(); + return; } - if (step === 1) { - clearInterval(timer); + if(element.scrollTop === previous_top && element.scrollTop !== frameTop) { + resolve(); + return; } - }, 25); - if (prop) { - elem[style] = from+unit; - } else { - elem.style[style] = from+unit; - } + previous_top = element.scrollTop; + setTimeout(scrollFrame, 0); + } + setTimeout(scrollFrame, 0); + }); } function menuToggle(a) { diff --git a/build/sass/components/_forms.sass b/build/sass/components/_forms.sass index 38be566..502367c 100644 --- a/build/sass/components/_forms.sass +++ b/build/sass/components/_forms.sass @@ -34,11 +34,6 @@ select &[type=checkbox], &[type=radio] @extend %checkers -.vertical-list - & > * - display: block - margin: 5px 0 - %gt-form small @@ -47,7 +42,7 @@ select input[type=checkbox], input[type=radio] @extend %checkers - input[type=text], input[type=password], input[type=email], select, textarea + input[type=text], input[type=number], input[type=password], input[type=email], select, textarea @extend %field textarea @@ -58,13 +53,13 @@ select .gt-form max-width: 500px - input[type=text], input[type=password], input[type=email], select, textarea, small + label, input[type=text], input[type=number], input[type=password], input[type=email], select, textarea, small display: block width: 100% @media (min-width: 769px) .gt-form-inline - * + *:not(option) display: inline-block !important vertical-align: middle !important width: auto !important diff --git a/build/sass/helpers/_singles.sass b/build/sass/helpers/_singles.sass index c115376..3541387 100644 --- a/build/sass/helpers/_singles.sass +++ b/build/sass/helpers/_singles.sass @@ -22,6 +22,11 @@ padding-top: 15px padding-bottom: 15px +.vertical-list + & > * + display: block!important + margin: 5px 0 + .content-align display: block margin: 15px 0 diff --git a/build/sass/layouts/_header.sass b/build/sass/layouts/_header.sass index cef50dc..dcaadf2 100644 --- a/build/sass/layouts/_header.sass +++ b/build/sass/layouts/_header.sass @@ -37,9 +37,10 @@ height: 60px padding: 10px 5% width: 100% + z-index: 9 +box-shadow (0px 0px 4px 0px rgba(50, 50, 50, 0.4)) - & > img, nav, ul, li + & > img, & > a > img, nav, ul, li height: 100% %adjust-btn