-
-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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]: Image occlusion cards created on desktop app now fit to width #16109
Conversation
Applied suggested styling, with !important to make sure it was applied over the ones imported over from the Desktop app.
First PR! 🚀 We sincerely appreciate that you have taken the time to propose a change to AnkiDroid! Please have patience with us as we are all volunteers - we will get to this as soon as possible. |
Thanks! Could you provide before/after screenshots in portrait and landscape? Did you also resolve: #15235 (comment) |
I did resolve #15235 (comment) ! I wasn't putting !important on the right properties, that fixed it. |
And to confirm, that's the intended outcome (as all the text isn't occluded) |
Yes! That was just a placeholder occlusion I placed to test if it was working. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fantastic, thanks so much for doing the deep dive and seeing this through!
--inactive-shape-color: #ffeba2; | ||
--active-shape-color: #ff8e8e; | ||
--inactive-shape-border: 1px #212121; | ||
--active-shape-border: 1px #212121; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
what is the relation of these colors with the occlusions size? Are they necessary? If so, why?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We don't need these changes, these are available in notetype of image occlusion.
https://github.com/ankitects/anki/blob/main/rslib/src/image_occlusion/notetype.css
Hey everyone. Sorry for the late reply, school got in the way. I'm afraid I have some bad news: the new UI for the card reviewing seems to have messed with something that was making the solution work beforehand. ( #16109 (comment)) Now, the issue seems to be back: However, through my testing, even cards Image Occlusion cards seem created directly on AnkiDroid seem to be having this issue. I'm stumped on what to do here. What changes that were implemented in the last 3 weeks that might mess with the card css? Thank you all again for your patience and sorry for the delay. |
@RedLexa are you testing on |
@david-allison I'm testing on the branch |
You need to manually rebase it onto the current |
FWIW, this is the CSS that I #image-occlusion-container {
position: relative;
margin: 0 auto;
max-height: calc(100vw - 24px) // this was `100vw - var(--io-header)`, which defaults to 24px but can change I think. I don't think that we want to implement something similar
}
#image-occlusion-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: unset;
max-height: unset
} |
Testing after having rebased had the same result, unfortunately. @BrayanDSO Where did you get this styling? Was it from inspecting the image occlusion card's styling? The styling I'm applying should overwrite this and fix it, for some reason it isn't. |
Hello 👋, this PR has had no activity for more than 2 weeks and needs a reply from the author. If you think this is a mistake please comment and ping a maintainer to get this merged ASAP! Thanks for contributing! You have 7 days until this gets closed automatically |
Purpose / Description
This commit applies the suggested solution in #15235, ensuring Image Occlusion cards created in the desktop app fit to width.
Fixes
Approach
Applying the correct styling with !important to make sure it overwrites whatver came over from the Desktop app that was causing issues.
How Has This Been Tested?
I ran this with multiple image sizes, creating them in the desktop app and then opening then in AnkiDroid while in landscape mode.
Checklist