Card view with CSS and some custom JS

phenomlab

@baris one final issue I'm encountering (which is an odd one) is as follows

When the site is loaded in "Card View" 2 elements are misplaced as is clear from the video I'm posting below. However, when you scroll down the page, the newly added posts are perfect in format. What makes the situation even more bizarre is that if you scroll to the top of the page again, the misplaced elements are perfectly aligned? My thought here is that the original topics disappear from the viewport and are then added back in action:topics.loaded hence the correct alignment.

Demo here

https://gemoo.com/tools/upload-video/share/616019640317030400?codeId=M0Boe84X5y6Bg&card=616019636768649216

It seems odd to me that page load executes the same function as clicking the home button, although the behaviour appears to be different.

Any thoughts?

<baris>

Easiest way for you to debug would be to inspect both elements in your browsers dev tools to see if there are missing styles, seems like some timestamps are not position correctly for some of them.

phenomlab

@baris The styles are there - the video was meant to show you this (sorry - should have explained this better) - but do not seem to be applied. My original suspicion was that these elements were placed into the DOM later than the CSS, although subsequent Ajax loads are not affected - it is only on load where I see the issue.

Here's an example

As you can see, the first set of data being returned is misplaced, whereas the second set is in the correct position - both use the same CSS!

<baris>

Is everything done with css? Or do you modify the markup as well? Seems like a issue with css to be honest if some of them are aligned correctly and some are not.

phenomlab

@baris It's all done with CSS. However, I need to point out the issue I remarked on in the above posts. The screenshot above clearly shows that the same CSS is being used for the same elements, yet the first set of topics returned by Ajax have the alignment issue, whereas the subsequent fetch does not have this issue - but it uses the same CSS.

From the above post

@phenomlab said in Card view with CSS and some custom JS:

As you can see, the first set of data being returned is misplaced, whereas the second set is in the correct position - both use the same CSS

phenomlab

This post is deleted!

<baris>

The screenshot only shows one element selected that has absolute positioning, which is probably a bad idea as well. Is this available somewhere public so I can inspect the elements?

phenomlab

@baris said in Card view with CSS and some custom JS:

The screenshot only shows one element selected that has absolute positioning, which is probably a bad idea as well

The screenshot shows multiple elements selected with the same class? They are essentially all derivatives of

I'm also not keen on the absolute positioning either but it won't with with relative.

@baris said in Card view with CSS and some custom JS:

Is this available somewhere public so I can inspect the elements?

Yes, it's available at https://sudonix.dev which is a closed site and will require you to sign up. It's an old replica of prod (.org) and you have an account there so it should exist in dev also.

<baris>

Can't login on https://sudonix.dev with my saved password and reset password doesn't seem to work there.

phenomlab

@baris See PM

EDIT: Seems you restricted your PM's. You didn't specify an email when you created your account from what I can see. I can reset but need a secure way to share with you.

phenomlab

@baris I think I may have found the smoking gun.

It's caused by the minify HTML option. If I disable this, the issue with the misplaced elements is fixed

Gotta love Cloudflare.

phenomlab

For anyone following this thread, new stable release is here. If you use Cloudflare, please also see notes around that

https://sudonix.org/post/8433