diff --git a/src/scripts/tutti/0_navbar.js b/src/scripts/tutti/0_navbar.js index 40fdf8a8..88b33ba4 100644 --- a/src/scripts/tutti/0_navbar.js +++ b/src/scripts/tutti/0_navbar.js @@ -98,3 +98,15 @@ function statusBarSet(classes, html, icon_name, time){ statusBarClear(time, 250); }; + +/* Loading Bar + * Sets .loader-bar in layout.pug as active when + * loading an asset or performing actions. + */ +function loadingBarShow(){ + $('.loading-bar').addClass('active'); +} + +function loadingBarHide(){ + $('.loading-bar').removeClass('active'); +} diff --git a/src/styles/_apps_base.sass b/src/styles/_apps_base.sass index 28d3726d..f3de5fe8 100644 --- a/src/styles/_apps_base.sass +++ b/src/styles/_apps_base.sass @@ -400,10 +400,10 @@ nav.sidebar left: -19px z-index: 1 -$loader-bar-width: 100px -$loader-bar-height: 2px -.loader-bar - bottom: -$loader-bar-height +$loading-bar-width: 100px +$loading-bar-height: 2px +.loading-bar + bottom: -$loading-bar-height content: '' display: none height: 0 @@ -419,22 +419,22 @@ $loader-bar-height: 2px background-image: linear-gradient(to right, $primary-accent, $primary) content: '' display: block - height: $loader-bar-height - left: -$loader-bar-width + height: $loading-bar-height + left: -$loading-bar-width position: absolute - width: $loader-bar-width + width: $loading-bar-width &.active display: block - height: $loader-bar-height + height: $loading-bar-height visibility: visible &:before - animation: loader-bar-slide 2s linear infinite + animation: loading-bar-slide 2s linear infinite -@keyframes loader-bar-slide +@keyframes loading-bar-slide from - left: -($loader-bar-width / 2) + left: -($loading-bar-width / 2) width: 3% 50% diff --git a/src/styles/blog.sass b/src/styles/blog.sass index 5165732f..fa426c04 100644 --- a/src/styles/blog.sass +++ b/src/styles/blog.sass @@ -16,6 +16,7 @@ @import "../../node_modules/bootstrap/scss/code" @import "../../node_modules/bootstrap/scss/grid" @import "../../node_modules/bootstrap/scss/buttons" +@import "../../node_modules/bootstrap/scss/badge" @import "../../node_modules/bootstrap/scss/dropdown" @import "../../node_modules/bootstrap/scss/custom-forms" diff --git a/src/styles/components/_jumbotron.sass b/src/styles/components/_jumbotron.sass index 0cf59045..0401ea9d 100644 --- a/src/styles/components/_jumbotron.sass +++ b/src/styles/components/_jumbotron.sass @@ -54,3 +54,9 @@ +media-sm font-size: $display4-size + + .display-4 + font-size: $h2-font-size + + +media-sm + font-size: $display4-size diff --git a/src/templates/nodes/search.pug b/src/templates/nodes/search.pug index 9f29bbf8..1e679917 100644 --- a/src/templates/nodes/search.pug +++ b/src/templates/nodes/search.pug @@ -166,12 +166,12 @@ script. $('#search-hit-container').html(dataHtml); }) .done(function(){ - $('.loader-bar').removeClass('active'); + loadingBarHide(); $('#search-error').hide(); $('#search-hit-container').show(); }) .fail(function(data){ - $('.loader-bar').removeClass('active'); + loadingBarHide(); $('#search-hit-container').hide(); $('#search-error').show().html('Houston!\n\n' + data.status + ' ' + data.statusText); }); @@ -180,7 +180,8 @@ script. $('body').on('click', '.js-search-hit', function(e){ e.preventDefault(); - $('.loader-bar').removeClass('active').addClass('active'); + loadingBarHide(); + loadingBarShow(); displayNode($(this).data('hit-id')); $('.js-search-hit').removeClass('active');