Feature Request: Alternating content alignment

[scottmcculloch]

Hi @forrestkirby

I love this timeline element, but there's one thing that would make it even better (at least for my use)...

Would it be possible to make it so that when the content panel is on the left of the timeline its content (including title, meta, link, etc) is right-aligned and when the content panel is on the right of the timeline its content is left-aligned?

Thanks,
Scott

[forrestkirby]

Hi Scott,

thank you for your positive feedback! Can you please test whether adding the following to your custom CSS or to the file hd-timeline/css/timeline.css results in the desired effect?

.timeline-align-right-alternate > div:nth-child(odd) .el-content {
	text-align: right;
}
.timeline-align-left-alternate > div:nth-child(even) .el-content {
	text-align: right;
}
.timeline-align-right-alternate\@s > div:nth-child(odd) .el-content {
	text-align: right;
}
.timeline-align-left-alternate\@s > div:nth-child(even) .el-content {
	text-align: right;
}
.timeline-align-right-alternate\@m > div:nth-child(odd) .el-content {
	text-align: right;
}
.timeline-align-left-alternate\@m > div:nth-child(even) .el-content {
	text-align: right;
}
.timeline-align-right-alternate\@l > div:nth-child(odd) .el-content {
	text-align: right;
}
.timeline-align-left-alternate\@l > div:nth-child(even) .el-content {
	text-align: right;
}
.timeline-align-right-alternate\@xl > div:nth-child(odd) .el-content {
	text-align: right;
}
.timeline-align-left-alternate\@xl > div:nth-child(even) .el-content {
	text-align: right;
}

Kind regards
Thomas

[scottmcculloch]

Hi Thomas,

Thanks -- that did work for the content, but did not move the title and meta.

I assume I could copy the same thing and change .el-content to .el-title and then to .el-meta ?

Scott

[scottmcculloch]

I found a quicker way... changed .el-content to .el-item... that seems to have got everything.

However, I also tested my page on mobile, and when it shifts to a left-side timeline, then the text that was on the left now looks odd being right-justified.

Is this controlled by the @XL and so on? So perhaps for @s it would be set to text-align: left?

[forrestkirby]

Oh yes, I missed the meta, title etc and the media queries. Please try:

.timeline-align-right-alternate > div:nth-child(odd) .el-item {
	text-align: right;
}
.timeline-align-left-alternate > div:nth-child(even) .el-item {
	text-align: right;
}
@media (min-width: 640px) {
	.timeline-align-right-alternate\@s > div:nth-child(odd) .el-item {
		text-align: right;
	}
	.timeline-align-left-alternate\@s > div:nth-child(even) .el-item {
		text-align: right;
	}
}
@media (min-width: 960px) {
	.timeline-align-right-alternate\@m > div:nth-child(odd) .el-item {
		text-align: right;
	}
	.timeline-align-left-alternate\@m > div:nth-child(even) .el-item {
		text-align: right;
	}
}
@media (min-width: 1200px) {
	.timeline-align-right-alternate\@l > div:nth-child(odd) .el-item {
		text-align: right;
	}
	.timeline-align-left-alternate\@l > div:nth-child(even) .el-item {
		text-align: right;
	}
}
@media (min-width: 1600px) {
	.timeline-align-right-alternate\@xl > div:nth-child(odd) .el-item {
		text-align: right;
	}
	.timeline-align-left-alternate\@xl > div:nth-child(even) .el-item {
		text-align: right;
	}
}

[scottmcculloch]

Perfect!

Thanks Thomas!!