Localized strings can be too long for the Resource Download button

[jonboiser]

Observed behavior

For example, in Yorùbá, the HTML5 version of the button message is too long and will push out the file size.

Expected behavior

There is a way the entire message can be read from the button, even when the localized message is very long. We should use our text truncator on the title so the file size is always visible.

User-facing consequences

…

Errors and logs

…

Steps to reproduce

…

Context

Kolibri 0.12.4 at eeb2566

[rtibbles]

It's possible that the text truncator css component could help with this.

[deveshidwivedi]

Hi, I'd like to work on this issue, can I get assigned?

[rtibbles]

Yes - note that my comment about the text truncator is about using that on the title, so that the file size always gets displayed.

[MisRob]

Hi @deveshidwivedi, is this issue work in progress or should we unassign?

[deveshidwivedi]

Hi @MisRob, I will not be unable to complete the task due to other commitments. Thank you for asking!

[MisRob]

Thanks for the message @deveshidwivedi

[kafukoM]

@MisRob I would like to be assigned to work on this issue please

[marcellamaki]

Hi @kafukoM - thanks for your interest. We will assign you. Please ask here on the issue if you have any questions.

[MisRob]

Hi @kafukoM, are you working on this or would it better to unassign?

[kafukoM]

Hi @kafukoM, are you working on this or would it better to unassign?

It would be better to reassign. Apologies for the late communication

[akolson]

Un-assigning for now. Thanks @kafukoM!

[lokesh-sagi125]

hi @MisRob @akolson i am not clear on what to change from the description , if you dont mind could you please explain me the changes needed to be made.

[bjester]

@lokesh-sagi125 The intended fix is to use the text truncator on the title, such that the file size, which is appended to the string shown in the dropdown, is always visible. Currently, it appears the text truncator is applied to the entire string, including the file size.

Are you interested in working on this?

[lokesh-sagi125]

yes @bjester pls do assign me

[lokesh-sagi125]

hey @bjester the reference added was a bunch of auto generated font files and i couldn't deduce where i could make the changes, could you give me a bit more context like which component is used or the css file that the changes are to be made to?

[AlexVelezLl]

Hi @lokesh-sagi125! The changes needs to be done in this DownloadButton component. With the team we have decided that for this case its better to avoid the truncation of the text, and to avoid this truncation we will need to override the max-width set by this component UiMenu. And for this, we will need to update our KDropdownMenu component to accept a new prop maxWidth that will then be passed to the UiMenu component.

With this, in the DownloadButton component in Kolibri we should pass a none in the maxWidth prop of the KDropdownMenu to avoid the truncation.

Let us know if you have any question 👐.

[lokesh-sagi125]

hey @AlexVelezLl @bjester when i tried running 'yarn run devserver-with-kds ' and got the follwing error msg, i tried debugging it by downloading the missing commands but ended up here, can you help me with this.

[AllanOXDi]

hey @lokesh-sagi125 I think you will need include the path to the local KDS directory on your PC.
Do yarn install and then yarn run devserver-with-kds <kds-path>

[AlexVelezLl]

Hey @lokesh-sagi125, did you activate the virtual environment? Are you able to run just Kolibri, without kds with the yarn devserver command?

[lokesh-sagi125]

hey @AlexVelezLl yes i did try running yarn devserver command but keep getting this mopdule not found error , i have been trying to solve this on my own by going through the dev documentation , can you help me with this?

[bjester]

@lokesh-sagi125 Could you try running yarn run build-kolibri-tools?

[lokesh-sagi125]

yes @bjester i ran the command yarn run build-kolibri-tools but am still getting the same error

[MisRob]

Hi @lokesh-sagi125, in one of you screenshots, I see you used a relative path ./kolibri-design-system. Can you use absolute full path to your local KDS instead? Some contributors have problems with relative paths.

More here https://kolibri-dev.readthedocs.io/en/develop/howtos/development_with_kds.html

It is recommended to use an absolute KDS path as some developers observed problems when running the command with a relative path.

[MisRob]

Noting that @lokesh-sagi125 will return to this after exams - let's keep the assignment as is.

[lokesh-sagi125]

hey @MisRob, I just raised a PR for this issue in KDS. I have made the changes as directed by Alex, but I can't seem to find the download button component. Was it removed in a recent update?

[AlexVelezLl]

Hi @lokesh-sagi125! You can find the download button in learn > HTML resource > info (the (i) icon on top-right) > download button.

[MisRob]

Hi @lokesh-sagi125, I wanted to mention that Learning Equality will be closed from December 23 to January 5.