Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix bib preview mobile #2359

Merged
merged 4 commits into from
Apr 28, 2024
Merged

Conversation

CheariX
Copy link
Contributor

@CheariX CheariX commented Apr 21, 2024

Reference

I'm not sure if the removal of max-width: 90vw; for all images causes any side issues.
I could at least not find any. But having this properties will produce unaligned preview sizes.
Help/testing is more than welcome.

Before

Bildschirmfoto 2024-04-21 um 14 17 51

After

Bildschirmfoto 2024-04-21 um 14 21 53 ... Bildschirmfoto 2024-04-21 um 14 22 03

Copy link

@broadcreate broadcreate left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested the committed code, but it still has defects.

Screenshot_2024-04-22-22-03-26-024_com android chrome-edit

@CheariX
Copy link
Contributor Author

CheariX commented Apr 22, 2024

@broadcreate Thank you for testing it. That is interesting.

Do you have any idea what the reason could be?
By simply looking at the picture, it is a bit hard to find the root cause. Can you provide a link in case you deployed it?
Could this be a side effect of some adjustments that you made on your personal site?
If you share the bibtex entry or entries, I can test it quickly on the vanilla al-folio.


I found the data on your website. But still, i cannot reproduce it with vanilla al-folio.
I used your preview image and the provided bibtex for testing. The layouting works in desktop and mobile mode as expected. I think you might have applied other changes to your website?

@george-gca
Copy link
Collaborator

@CheariX you can try it with my fork of al-folio. It currently has an issue with the layout in publications after introducing c4c066. I haven't got the time to fix this, but it would be nice if you could take a look at it.

image

@CheariX
Copy link
Contributor Author

CheariX commented Apr 23, 2024

@george-gca : Your screenshot shows the desktop view. I assume you have the issue with the mobile view (?). I cannot reproduce the issue on your fork when I apply this PR. What is basically did:

The result looks as expected:

grafik

@broadcreate Its a bit hard to understand what you exactly want to change in this PR.
I would be nice if you could directly annotate the lines or make direct sugestions. Then I can try out, if these chages cause any further issues on my side to be sure.

Are you sure that you applied this PR correctly? For example, on your screenshot, the years should be a bit higher, which I changed with cfef609

Before I we look how to "fix" this, it would be incredibly helpfull if we could reproduce your issue on vanilla al-folio.. Can you provide a bibtex entry+preview image that causes this issue on vanilla al-folio?
I'm wondering if this is a bug in vanilla al-folio or wether it was caused due to some individual adjustments.

@broadcreate
Copy link

After applying your PR, all the displays are normal now. The previous issues were likely caused by not refreshing the browser cache.

Thanks!

@CheariX
Copy link
Contributor Author

CheariX commented Apr 26, 2024

@george-gca I think we can merge this PR if there are no other concerns.

@alshedivat alshedivat merged commit 86a6b03 into alshedivat:master Apr 28, 2024
3 checks passed
@george-gca
Copy link
Collaborator

Sorry I have been on a rush lately. Thanks for merging this.

BoAi01 pushed a commit to BoAi01/boai01.github.io that referenced this pull request May 7, 2024
[Reference](alshedivat#2352 (comment))

I'm not sure if the removal of `max-width: 90vw;` for all images causes
any side issues.
I could at least not find any. But having this properties will produce
unaligned preview sizes.
Help/testing is more than welcome.


# Before
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 17 51"
src="https://github.com/alshedivat/al-folio/assets/1998723/5ad1a4d7-dfe6-43f8-98ec-eae19dd991c2">

# After

<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 21 53"
src="https://github.com/alshedivat/al-folio/assets/1998723/fb942403-a01f-42ec-95c6-697378ed0d92">
...
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 22 03"
src="https://github.com/alshedivat/al-folio/assets/1998723/1ddf43d8-98a8-421d-9f64-3352190c4bb8">
siril-teja pushed a commit to siril-teja/siril-teja.github.io-old that referenced this pull request Jun 19, 2024
[Reference](alshedivat#2352 (comment))

I'm not sure if the removal of `max-width: 90vw;` for all images causes
any side issues.
I could at least not find any. But having this properties will produce
unaligned preview sizes.
Help/testing is more than welcome.


# Before
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 17 51"
src="https://github.com/alshedivat/al-folio/assets/1998723/5ad1a4d7-dfe6-43f8-98ec-eae19dd991c2">

# After

<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 21 53"
src="https://github.com/alshedivat/al-folio/assets/1998723/fb942403-a01f-42ec-95c6-697378ed0d92">
...
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 22 03"
src="https://github.com/alshedivat/al-folio/assets/1998723/1ddf43d8-98a8-421d-9f64-3352190c4bb8">
karapostK pushed a commit to karapostK/karapostK.github.io that referenced this pull request Jul 4, 2024
[Reference](alshedivat#2352 (comment))

I'm not sure if the removal of `max-width: 90vw;` for all images causes
any side issues.
I could at least not find any. But having this properties will produce
unaligned preview sizes.
Help/testing is more than welcome.


# Before
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 17 51"
src="https://github.com/alshedivat/al-folio/assets/1998723/5ad1a4d7-dfe6-43f8-98ec-eae19dd991c2">

# After

<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 21 53"
src="https://github.com/alshedivat/al-folio/assets/1998723/fb942403-a01f-42ec-95c6-697378ed0d92">
...
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 22 03"
src="https://github.com/alshedivat/al-folio/assets/1998723/1ddf43d8-98a8-421d-9f64-3352190c4bb8">
Suraj-Bhor pushed a commit to Suraj-Bhor/suraj-bhor.github.io that referenced this pull request Aug 13, 2024
[Reference](alshedivat#2352 (comment))

I'm not sure if the removal of `max-width: 90vw;` for all images causes
any side issues.
I could at least not find any. But having this properties will produce
unaligned preview sizes.
Help/testing is more than welcome.


# Before
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 17 51"
src="https://github.com/alshedivat/al-folio/assets/1998723/5ad1a4d7-dfe6-43f8-98ec-eae19dd991c2">

# After

<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 21 53"
src="https://github.com/alshedivat/al-folio/assets/1998723/fb942403-a01f-42ec-95c6-697378ed0d92">
...
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 22 03"
src="https://github.com/alshedivat/al-folio/assets/1998723/1ddf43d8-98a8-421d-9f64-3352190c4bb8">
meiqing-wang pushed a commit to meiqing-wang/meiqing-wang.github.io that referenced this pull request Oct 13, 2024
[Reference](alshedivat#2352 (comment))

I'm not sure if the removal of `max-width: 90vw;` for all images causes
any side issues.
I could at least not find any. But having this properties will produce
unaligned preview sizes.
Help/testing is more than welcome.


# Before
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 17 51"
src="https://github.com/alshedivat/al-folio/assets/1998723/5ad1a4d7-dfe6-43f8-98ec-eae19dd991c2">

# After

<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 21 53"
src="https://github.com/alshedivat/al-folio/assets/1998723/fb942403-a01f-42ec-95c6-697378ed0d92">
...
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 22 03"
src="https://github.com/alshedivat/al-folio/assets/1998723/1ddf43d8-98a8-421d-9f64-3352190c4bb8">
@abhilesh
Copy link
Contributor

I still have the issue with publication previews not rendering correctly on mobile -
ScreenRecording2024-10-15at09 16 51-ezgif com-optimize (1)

I updated my _layouts/bib.liquid file to match v0.12.0 but ran into these errors.
Reverting back to an earlier version fixes the preview issues (old bib.liquid)

Not entirely sure what's causing these issues

@george-gca
Copy link
Collaborator

Have you tried the version from the tip of our main branch instead of the one from v0.12.0?

avishekanand pushed a commit to avishekanand/al-folio-homepage that referenced this pull request Oct 22, 2024
[Reference](alshedivat#2352 (comment))

I'm not sure if the removal of `max-width: 90vw;` for all images causes
any side issues.
I could at least not find any. But having this properties will produce
unaligned preview sizes.
Help/testing is more than welcome.


# Before
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 17 51"
src="https://github.com/alshedivat/al-folio/assets/1998723/5ad1a4d7-dfe6-43f8-98ec-eae19dd991c2">

# After

<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 21 53"
src="https://github.com/alshedivat/al-folio/assets/1998723/fb942403-a01f-42ec-95c6-697378ed0d92">
...
<img width="364" alt="Bildschirmfoto 2024-04-21 um 14 22 03"
src="https://github.com/alshedivat/al-folio/assets/1998723/1ddf43d8-98a8-421d-9f64-3352190c4bb8">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants