diff --git a/src/scripts/js/es6/individual/timeline/timeline.js b/src/scripts/js/es6/individual/timeline/timeline.js index b91b1964..f7fba9e0 100644 --- a/src/scripts/js/es6/individual/timeline/timeline.js +++ b/src/scripts/js/es6/individual/timeline/timeline.js @@ -63,7 +63,7 @@ class Timeline { } _loadMore(event) { - let $spinner = $('').addClass('pi-spin spinner'); + let $spinner = $('').addClass('ml-2 pi-spin spinner'); let $loadmoreBtn = $(event.target) .append($spinner) .addClass('disabled'); @@ -109,7 +109,7 @@ class Timeline { _create$LoadMoreBtn() { return $('') - .addClass('btn btn-outline-primary js-load-next') + .addClass('btn btn-outline-primary btn-block js-load-next mb-3') .attr('href', 'javascript:void(0);') .click(this._loadMore.bind(this)) .text('Load More Weeks'); @@ -163,7 +163,7 @@ class GroupBuilder { if (secondaryNodes) { content.push( $('
') - .addClass('card-deck card-padless card-deck-responsive card-undefined-columns js-asset-list py-3') + .addClass('card-deck card-padless card-deck-responsive js-asset-list py-3') .append(pillar.templates.Nodes.createListOf$nodeItems(secondaryNodes)) ); } @@ -171,19 +171,19 @@ class GroupBuilder { } _create$Label(level, label, url) { - let size = level == 0 ? 'h5' : 'h6' + let type = level == 0 ? 'h6 float-right py-2' : 'h6 py-2 group-title' if (url) { return $('
') - .addClass(size +' sticky-top') + .addClass(type + ' sticky-top') .append( $('') - .addClass('text-muted') + .addClass('text-muted font-weight-bold') .attr('href', url) .text(label) ); } return $('
') - .addClass(size + ' text-muted sticky-top') + .addClass(type + ' text-secondary sticky-top') .text(label); } } @@ -198,4 +198,4 @@ $.fn.extend({ } }) -export { Timeline }; \ No newline at end of file +export { Timeline }; diff --git a/src/styles/components/_timeline.sass b/src/styles/components/_timeline.sass index 1bb18c7e..4d19230c 100644 --- a/src/styles/components/_timeline.sass +++ b/src/styles/components/_timeline.sass @@ -1,25 +1,11 @@ .timeline - .jumbotron - padding-top: 6em - padding-bottom: 6em - - * - font-size: $h1-font-size - - .lead - font-size: $font-size-base - .h5 - text-align: right - background: $body-bg - opacity: 0.8 - margin-right: -15px - margin-left: -15px - padding-right: 15px - .group opacity: 0 animation: fade-in 500ms forwards + .group-title + background-color: $white + body.homepage .timeline .sticky-top diff --git a/src/templates/mixins/components.pug b/src/templates/mixins/components.pug index 7145937b..4413cc75 100644 --- a/src/templates/mixins/components.pug +++ b/src/templates/mixins/components.pug @@ -80,8 +80,8 @@ mixin timeline(projectid, sortdirection) data-sort-dir=sortdirection, ) // TODO: Make nicer reuseable placeholder - .h1.text-center + .h3.text-center.text-secondary.p-5.border-bottom i.pi-spin.spin - +