search

CorrelAid / correlaid_website

Source code for the CorrelAid website
https://correlaid.org
3 stars 0 forks source link

Project DB (mobile): teaser formatting broken #603

Closed jstet closed 2 months ago

jstet commented 5 months ago

IMG_5192

jstet commented 5 months ago

@friep i cant reproduce it. now that pagination was added, do you still experience this issue?

jstet commented 5 months ago

wrong branch, this is still open

friep commented 5 months ago

still persists on my iphone xs. maybe we can verify what happens on other iphones? if it's just my model, we can just close this.

friep commented 5 months ago

still persists on my iphone xs. maybe we can verify what happens on other iphones? if it's just my model, we can just close this.

KonradUdoHannes commented 5 months ago

I'm not able to reproduce it in edge or firefox, when I adjust the view port to the size of an iphone XS. So I think its not a general viewport issue. @friep have you tried it in a different browser on the same phone by any chance? Just to check whether something browser specific might be going on. Also if it is browser specific rather than phone model specific it should have a higher priority for fixing I think.

friep commented 4 months ago

@KonradUdoHannes same on chrome and firefox. i'll ask other people with iphones as a first step.

friep commented 4 months ago

I think it has something to do with how the summary is formatted and written in directus. there are two

tags for some projects (didn't crosscheck with whether those are the affected projects on my phone but likely) and i think that messes with the automatic "shortening" function?

helen-kl commented 4 months ago

I'm getting the incorrect display in Safari and Chrome on Iphone 8, but only for the two entries "Analyse einer Mitgliederbefragung des Pfadfinderbunds Nord" and "Data Flow von R zu Metabase zu Google Docs: Ein Live-Connected Reporting-Workflow"

KonradUdoHannes commented 4 months ago

@friep I think you might be right that the nested html tags are the problem. This seems to be a limitation of line-clamp css functionality wrt. some browsers, see https://github.com/tailwindlabs/tailwindcss/issues/10994 It's also in line with a quick inspection that I did for a few teasers compared to the two broken ones mentioned by @helen-kl. So far the broken ones are the only ones with nested html tags that I saw.

I'm slightly confused why it worked for @friep in firefox, but maybe there is a slight difference depending on whether the firefox instance runs on an iOS or not. In that spirit I also tried to reproduce the issue with an iphone 13 with no success, which means its should not be caused by the iOS version as both the xs and the 13 should run on the latest iOS version (as opposed to the iphone 8) see https://en.wikipedia.org/wiki/IPhone#Models.

I think generally we have two choices for fixing this.

  1. Adjust the affected projects such that they don't contain nested html tags
  2. Programmatically remove the nested tags for the purpose of displaying the project summaries. The assumption here is, that after all the tags are removed, line-clamp works as expected. There are some tradeoffs however, such as the case of removing ordered lists.
jstet commented 4 months ago

Alrighty thanks y'all for taking a look. I will start to fix this right away

jstet commented 4 months ago

My solution for now is to adjust the affected projects as @KonradUdoHannes suggested.

I don't get what you mean with nested html tags however. As the summary field in directus is a html field, every summary should contain at least \

tags. "Data Flow von R zu Metabase zu Google Docs: Ein Live-Connected Reporting-Workflow" and "Analyse einer Mitgliederbefragung des Pfadfinderbunds Nord" contained more than that and I have now removed the additional tags.

Could you kindly confirm if this fixed it: @friep or @helen-kl ?

However, I see an issue with the summary field in general. It should be called teaser instead and not be a html field. It's comparable to the teaser of blog articles. It should be only a few sentences and not contain html. I opened another issue for this: https://github.com/CorrelAid/correlaid_website/issues/621

jstet commented 4 months ago

I think it has something to do with how the summary is formatted and written in directus. there are two

tags for some projects (didn't crosscheck with whether those are the affected projects on my phone but likely) and i think that messes with the automatic "shortening" function?

Ah I see now that the \

you wrote was invisible because of markdown. So nested means tags inside of the outermost \

tag?

jstet commented 2 months ago

We will close it as this is too complex and hope that #621 will fix it