Slider widget - Booked calendar alignment

[teaganm]

The issue mentioned on Trello regarding Booked cal alignment in the slider not working is because there is currently no class that gets output when the text alignment is changed - it’s just CSS that gets added to a stylesheet. If we instead add classes like we do in the Booked widget then it will work well.

In the Booked widget, these are the alignment classes:

• th-left
• th-centered
• th-right

And it gets output onto the same element as the sizing class: https://cl.ly/0L34202a221F

So that would work well, but if it's output onto a different element that's totally fine too.

[teaganm]

And while on the topic, I agree I think at this time we will not be providing this layout: https://cl.ly/293d1o0l2o0S

It has definitely come up before and I think some people would appreciate a multiple column option, but at this point the widget is complicated enough so if anything I think we can Phase 2 that.

[ryanlabelle]

To get the classes to work for both calendar and slider alignment, I had to make the left, center, right buttons refresh the preview screen and to do that I had to get away from using inline styling, so I just created some new styles in app2.css and it seems to work well.

.th-slide-inner.th-left {text-align:left}

.th-slide-inner.th-centered {text-align:center}

.th-slide-inner.th-right {text-align:right}

It's not pretty but it works.

[ryanlabelle]

Yeah, we don't need to provide that layout.

[ryanlabelle]

@teaganm can you test and close if everything looks good?

[teaganm]

Thanks, looks good.