[MU4 Issue] [UI Finesse] On wide screens, the text in Learn > Classes is too wide to be comfortably readable

[cbjeukendrup]

Describe the bug If the MuseScore window is relatively wide, like full screen on a 27" screen, the text in Home > Learn > Classes becomes too wide to be comfortably readably (i.e. there are too many words per line; lines too long).

Expected behavior Text should have a maximum width. Most (accessibility) guidelines say max 50-80 characters per line; so I guess that can be translated to something like 576 pixels.

Screenshots

[MarcSabatella]

Also on less wide screen, it doesn't scroll. On mine, I can't see the button :-(

[Eism]

@jessjwilliamson Can you look at this issue? How can we best solve the problems of Casper and Marс?

@iwoithe Let's wait for Jessica's answer

[jessjwilliamson]

@jessjwilliamson Can you look at this issue? How can we best solve the problems of Casper and Marс?

@iwoithe Let's wait for Jessica's answer

Hi! Thank you for reaching out to me. I can suggest a few things that might solve this issue, with screenshots I provided of new design. This is also updated on Figma in HOME_TAB. One thing I'd also add is I don't believe there is a point of having a search box in this specific Classes page. Get started and Advanced should still have search box but not Classes. :) So...

• The BG1 rounded box behind text should be maximum 1000 pixels wide, which means the text box (in Figma anyway) would be reduced to 928 pixels, so it can fit within the padding and BG1 box.
• To make text more readable I'd suggest create another paragraph on sentence "In addition," etc.
• If it's possible, I did this in Figma but paragraph spacing between text lines I've made a bit taller to 6.

Here's what it would look like in different screens sizes, and yes this page should be scrollable for small screens if this section is too big.

[aritroCoder]

is this issue avalable now? I am a beginner in C++ and want to contribute if possible

[HemantAntony]

Hello! Welcome to MuseScore!

This issue already has a PR by @iwoithe . However, I do not think that PR has the updated specs @jessjwilliamson provided

@iwoithe Are you still working on this?

[iwoithe]

@iwoithe Are you still working on this?

Yeah, sorry for the inactivity. My life has picked up quite significantly in the last few weeks and will probably stay that way for another few weeks.

@aritroCoder Go for it. :slightly_smiling_face:

[aritroCoder]

I am getting this warning in ubuntu, should I go ahead and install it, or there is something else i need to do?

[HemantAntony]

This is the wiki for building projects: https://github.com/musescore/MuseScore/wiki/Set-up-developer-environment

It should tell you how to install cmake and git

It also tells you how to build and run the project

[GargDivanshu]

Hey I wish to contribute if the issue is still not resolved can I do it to you?

[HemantAntony]

@aritroCoder might be working on this. If you aren't, can you say so?

[aritroCoder]

Sorry, I was not able to respond for a while, yes I am working on it, already set up the development environment, and now trying to understand the source a little more

[aritroCoder]

I have followed the steps as given in the doc till https://github.com/musescore/MuseScore/wiki/Compile-on-the-command-line But now I am getting error while trying to run ./build.cmake

Please assist me to identify why I get this error as I did all the steps mentioned correctly

[octopols]

I would like to work on this, can someone assign me this issue?

[octopols]

@jessjwilliamson Can you look at this issue? How can we best solve the problems of Casper and Marс? @iwoithe Let's wait for Jessica's answer

Hi! Thank you for reaching out to me. I can suggest a few things that might solve this issue, with screenshots I provided of new design. This is also updated on Figma in HOME_TAB. One thing I'd also add is I don't believe there is a point of having a search box in this specific Classes page. Get started and Advanced should still have search box but not Classes. :) So...

• The BG1 rounded box behind text should be maximum 1000 pixels wide, which means the text box (in Figma anyway) would be reduced to 928 pixels, so it can fit within the padding and BG1 box.
• To make text more readable I'd suggest create another paragraph on sentence "In addition," etc.
• If it's possible, I did this in Figma but paragraph spacing between text lines I've made a bit taller to 6.

Here's what it would look like in different screens sizes, and yes this page should be scrollable for small screens if this section is too big.

I was not able to remove the search box only from the class tab in learn. In the PR the search box is gone from the learn page itself.

[octopols]

[jessjwilliamson]

@octopols Thank you for jumping in! For search bar don't worry about removing it at all then if it's causing issues. We want to especially use it in the Get started tab! Your screenshots look good - is there a PR I can test? :)

[octopols]

@octopols Thank you for jumping in! For search bar don't worry about removing it at all then if it's causing issues. We want to especially use it in the Get started tab! Your screenshots look good - is there a PR I can test? :)

I was able to fix the search box thing in the second commit of the PR #16087. Now it's visible in the Get started tab and hidden in the classes tab.