archive/pillar
0
0
Fork 0
Code Issues 42 Pull Requests Projects Releases Wiki Activity

Timeline: Style and layout adjustments

Browse Source
This commit is contained in:
Pablo Vazquez 2018-11-21 20:32:27 +01:00
parent 119291f817
commit 3985a00c6f
3 changed files with 13 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/scripts/js/es6/individual/timeline/timeline.js
View File

@ -63,7 +63,7 @@ class Timeline {
} }
_loadMore(event) { _loadMore(event) {
let $spinner = $('<i>').addClass('pi-spin spinner'); let $spinner = $('<i>').addClass('ml-2 pi-spin spinner');
let $loadmoreBtn = $(event.target) let $loadmoreBtn = $(event.target)
.append($spinner) .append($spinner)
.addClass('disabled'); .addClass('disabled');
@ -109,7 +109,7 @@ class Timeline {
_create$LoadMoreBtn() { _create$LoadMoreBtn() {
return $('<a>') return $('<a>')
.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);') .attr('href', 'javascript:void(0);')
.click(this._loadMore.bind(this)) .click(this._loadMore.bind(this))
.text('Load More Weeks'); .text('Load More Weeks');
@ -163,7 +163,7 @@ class GroupBuilder {
if (secondaryNodes) { if (secondaryNodes) {
content.push( content.push(
$('<div>') $('<div>')
.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)) .append(pillar.templates.Nodes.createListOf$nodeItems(secondaryNodes))
); );
} }
@ -171,19 +171,19 @@ class GroupBuilder {
} }
_create$Label(level, label, url) { _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) { if (url) {
return $('<div>') return $('<div>')
.addClass(size +' sticky-top') .addClass(type + ' sticky-top')
.append( .append(
$('<a>') $('<a>')
.addClass('text-muted') .addClass('text-muted font-weight-bold')
.attr('href', url) .attr('href', url)
.text(label) .text(label)
); );
} }
return $('<div>') return $('<div>')
.addClass(size + ' text-muted sticky-top') .addClass(type + ' text-secondary sticky-top')
.text(label); .text(label);
} }
} }

20
src/styles/components/_timeline.sass
View File

@ -1,25 +1,11 @@
.timeline .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 .group
opacity: 0 opacity: 0
animation: fade-in 500ms forwards animation: fade-in 500ms forwards
.group-title
background-color: $white
body.homepage body.homepage
.timeline .timeline
.sticky-top .sticky-top

2
src/templates/mixins/components.pug
View File

@ -80,7 +80,7 @@ mixin timeline(projectid, sortdirection)
data-sort-dir=sortdirection, data-sort-dir=sortdirection,
) )
// TODO: Make nicer reuseable placeholder // TODO: Make nicer reuseable placeholder
.h1.text-center .h3.text-center.text-secondary.p-5.border-bottom
i.pi-spin.spin i.pi-spin.spin