kolibri
kolibri copied to clipboard
learningequality
Some resources cards are not optimized for very small screens
Observed behavior
For very small screens, there are several problems on resource cards on the Library and Bookmarks pages:
| Library |  |
- unnecessary white space on the left side of the thumbnail - the thumbnail overlaps with the learning activity label |
| Bookmarks |  |
-unnecessary vertical white space below the thumbnail -the progress bar at the bottom overlaps with the info and close controls |
Expected behavior
- no unnecessary white space
- no overlapping elements
- learning activity labels are readable
User-facing consequences
- bad readability
- it's not possible to recognize learning activity in some cases
- more scrolling on mobile devices due to unnecessary vertical white space
Steps to reproduce
Preview cards on the Bookmarks and Library pages in Learn for a small screen width (tested around 320px)
Context
- Kolibri version: Kolibri 0.15.1.dev0+git.20220127215827
- Operating system: Ubuntu 20.04.3 LTS
- Browser: Chrome Version 97.0.4692.99 (Official Build) (64-bit)
Many of these issues could be solved by more robust CSS allowing for auto-wrapping on very small screens. This would automatically prevent issues similar to
without much extra effort needed.
It may be helpful to merge and clean up our many card components introduced during hybrid learning work first since it's possible that some of them will become obsolete (related #8533)
@prsndp Please assign yourself as soon as you start working on it (even though I'm not going to work on it, I'm assigning myself now too only so we know that it's been taken already so that we don't assign it to someone else accidentally during our work planning)
@MisRob Yeah, but for discussion where can we discuss it, I need a mentor for working on these types of issues, I have also seen yesterday there are more issue-based on the frontend. So, let me know please, thanks:)
Hello @prsndp,
You may want to check our Kolibri developer documentation, where you can also find how to run Kolibri for development locally. As soon as Kolibri is working on your machine, please try to find the right place in the application and reproduce this bug as a user. If you couldn't reproduce it, please let us know. If you find it, you can start playing around with fixes. To locate components in code that might need to be adjusted, having Vue Devtools can be very helpful (you can see this GitHub comment for more details).
You're welcome to ask clarifying questions here in GitHub comments. We appreciate your effort and will do our best to keep an eye on this issue. Please know that it might take a while for us to reply since we work from different time zones.
Hello @prsndp,
You may want to check our Kolibri developer documentation, where you can also find how to run Kolibri for development locally. As soon as Kolibri is working on your machine, please try to find the right place in the application and reproduce this bug as a user. If you couldn't reproduce it, please let us know. If you find it, you can start playing around with fixes. To locate components in code that might need to be adjusted, having Vue Devtools can be very helpful (you can see this GitHub comment for more details).
You're welcome to ask clarifying questions here in GitHub comments. We appreciate your effort and will do our best to keep an eye on this issue. Please know that it might take a while for us to reply since we work from different time zones.
@MisRob Hi, I am getting errors during the Kolibri setup on my local machine. can I share errors screenshots with you? I don't have any resources to contact you. So please add me in the developer forum/chat or add me on LinkedIn it helps me to discuss with you issues/errors you can also share your mail-id. here is my mail id: [email protected]
Hello dear @prsndp,
Yes, of course, you're welcome to share errors screenshots. Any additional information like what operating system you use to run Kolibri would be helpful too. Please use the comments section of this GH issue for now.
Hello @MisRob I don't know if this issue has been handled already. If it is still open, I'd like to work on fixing it
Hi @Ndace-hash, thank you for your interest. It is still open, yes. Perhaps UI may change in some areas since we reported this issue, but I don't know about any fixes targeting this particular area, so you're welcome to try to reproduce it and eventually resolve it.
Hello @MisRob, I am trying to setup Kolibri on windows and I'm facing a lot of difficulties. I have tried following the online developers documentation. I tried to install pyenv and I'm getting some errors
/c/Users/USER/.pyenv/bin/pyenv: line 1: ../libexec/pyenv: No such file or directory
It seems like you might be facing the issues described in this thread: https://github.com/pyenv/pyenv/issues/332
I see you are working on Windows - please be aware that we do not routinely develop on Windows machines, so there may be other unexpected issues during dev setup.
Hello @MisRob, I am trying to setup Kolibri on windows and I'm facing a lot of difficulties. I have tried following the online developers documentation. I tried to install pyenv and I'm getting some errors
/c/Users/USER/.pyenv/bin/pyenv: line 1: ../libexec/pyenv: No such file or directory
Hi @Ndace-hash, Hope you didn't leave this amazing community because of this issue. Setting up an Open Source project (Kolibri too), on a windows machine, is a hideous task. I've tried setting up this project on both Windows and Linux. In fact, this was the reason I switched to Linux. On Linux, I succeeded on the first try itself. So if you are planning to contribute more to Open Source projects, please consider switching to Linux or Mac.
Hi @MisRob , If this issue is still open, I would love to take and work on it as I have finished the contribution I was working on.
Thank you, @libinfaby, apologies for the late reply. @Akila-I It is open, but as @libinfaby mentioned above, some issues may be fixed by our recent updates. From those screenshots, though, I can't say whether all of them are resolved. So I'd recommend trying to reproduce all reported bugs at first and then fixing the remaining problems if there are still some.
yes! it seems like the observed behaviour of this issue is not there anymore.
I think the issue can be closed @MisRob
Tried in : Kolibri version: Kolibri 0.16.0a7.dev0+git.31.ged21b86b Operating system: macOS-12.6.3-x86_64-i386-64bit Browser: Brave Browser Version 1.46.144 Chromium: 108.0.5359.128 (Official Build) (x86_64)
@MisRob @Akila-I , I think on the bookmarks tab, there is still some void space as seen below
I would like to work on it.
Some extra spaces on the bookmarks cards are now resolved https://github.com/learningequality/kolibri/pull/10217. Some other issues seem not to be present anymore as mentioned in the comments above. I briefly checked a couple of places on the latest develop and didn't notice any problems either, so closing.