search

readthedocs / ethical-ad-client

Ethical Ads JavaScript client
https://ethical-ad-client.readthedocs.io/en/latest/
MIT License
60 stars 15 forks source link

Stickybox vertical/horizontal based on screen wide #194

Open humitos opened 4 months ago

humitos commented 4 months ago

While working with stickybox I found that I'd like to have the vertical ad when it's floating in the bottom right (wide screen), but horizontal when it's injected at the bottom of the main content (narrow screen):

Vertical Horizontal
Screenshot_2024-05-21_10-16-07 Screenshot_2024-05-21_10-16-25

I think it makes the ad to display nicer and more adapted to the content itself. Is this be a good idea? Would it be possible to communicate this to the ad client?

ericholscher commented 4 months ago

@davidfischer is probably better to answer this one.

davidfischer commented 4 months ago

The stickybox only floats at >1300px wide. Otherwise, it's supposed to collapse back to a static placement wherever you put the div (sidebar?). The stickybox can be used with the horizontal class, but I don't think that's what you're doing here, right?

humitos commented 4 months ago

I'm not using the horizontal class by default because I don't want it to be horizontal all the time. I want to be vertical when the stickybox is floating on >1300px wide and horizontal in the other scenario. Is that possible? Does it make sense?

In the tests I've done, I found that it display nicer and that's why I opened this issue here (look the example from the description)

davidfischer commented 4 months ago

The sticky box is only intended to be used at widths >1300px. On widths less than that, it collapses into a static placement.

humitos commented 4 months ago

Yes, my question is: when it collapses into a static placement, can it use the horizontal CSS class style?

davidfischer commented 4 months ago

Yes, my question is: when it collapses into a static placement, can it use the horizontal CSS class style?

That isn't automatic and if you just set horizontal on it it would apply whether it is collapsed or not.

humitos commented 4 months ago

Yeah, that's what I realized while doing my tests. I'd like to change that behavior that's why I opened this issue here. Would that be a feature you accept in the client?

Another approach could be the ad client to trigger an event when it collapses. That way, I can subscribe to that event and add horizontal CSS class when it happens.

Does this make sense?

davidfischer commented 4 months ago

I don't like magically making something not horizontal (or making it horizontal) when there's a class that says the opposite. It seems not explicit.

ericholscher commented 4 months ago

Sounds like an event is perhaps the best option? But I think in general most folks aren't resizing windows, and we just need to default the right styles based on page width 🤔