1.7.x display issues on mobile

[WizWareTech]

1.7.x display issues on mobile

[ArchBlood]

@marc-farre If the text names can be added to the menu items (even a switchable parameter) then even with split, it would be MUCH better. I hope you can make that happen. I am happy to test and give you feedback/screenshots, just let me know.

Appending text based names in this situation is possible but for a loss of mobile friendliness on newer devices with smaller screens, and adding tooltips is almost impossible currently for mobile, it would be much easier to breakdown each menu item for your users and explain what does what than doing this, and in all honesty, if text were added it would be very small in the current view which isn't mobile friendly.

I can agree with @marc-farre that maintaining two separate navigation menus would require too much time and the positives outweigh the negatives here, if you could get more people onboard with this suggestion then that would be a different story.

[marc-farre]

Currently this is what I see in my tests;

@ArchBlood Sorry, I cannot reproduce.

1/ I've created a Markdown custom page.

2/ I went to it via the bottom menu:

3/ I went to the Tasks page:

What I can see, is that the "Tasks" page is not responsive: a horizontal scrollbar is added because the page width is higher than the screen one. Maybe it should be fixed in the Tasks module?

[ArchBlood]

Currently this is what I see in my tests;

@ArchBlood Sorry, I cannot reproduce.

1/ I've created a Markdown custom page.

2/ I went to it via the bottom menu:

3/ I went to the Tasks page:

What I can see, is that the "Tasks" page is not responsive: a horizontal scrollbar is added because the page width is higher than the screen one. Maybe it should be fixed in the Tasks module?

You are absolutely right, it seems like the tasks module is the issue when it comes to this.

[ArchBlood]

I wasn't putting anything in assets, but I noticed files were missing from there, which makes sense why, now.

The flushing is what was needed to rebuild assets and now it is working. Thank you, and sorry for my lack of knowledge in the right steps to manually update the module. I wish this was explained in HumHub docs. I'll continue testing the new commits and give you feedback.

It is explained a little bit in the HumHub Docs;
https://docs.humhub.org/docs/develop/build/

[ArchBlood]

@marc-farre

The latest changes look much better with the spacing!

1. For the 'DASHBOARD' wrapping to new line, I have an idea. Can the 'DASHBOARD' be translated to 'DASH-BOARD' and if so, will that cause it to wrap after the 'DASH-'? If so, can you tell me how to change the translation for it? I searched by am unable to locate the corresponding module to make the translation, following guide in https://docs.humhub.org/docs/admin/translations/.
2. When going into a space, the space name disappears. This is confusing to users. Is there a way to put the space name in there even if some of it gets cut off due to size restriction?

And thank you for your great work, and fast response, it is much appreciated!

Answered in the community;
https://community.humhub.com/comment/perma?id=48323

[marc-farre]

@WizWareTech thanks for reporting this issue.

Fixed in commits 58440ab and 9d4d324

Can you test the latest version by downloading https://github.com/cuzy-app/humhub-modules-clean-theme/archive/refs/heads/master.zip ? You might have to flush the cache after overwriting the new files on your server.

Let me know if it's OK now with it.

[marc-farre]

@WizWareTech Thanks for your feedback.
Can you provide screenshots of the issues? Thanks.

[ArchBlood]

@marc-farre can you update the title for v1.7.1 as I've found another issue when it comes to the tasks module as the menu completely disappears for all mobile devices due to too much height/width and extra menu items aren't showing in a collapsed menu.

[marc-farre]

Thanks @ArchBlood However, I cannot reproduce:

Have you flushed the cache after installing the new version?

[WizWareTech]

@marc-farre yes I can do this. But it is important that I am able to disable the split menu and return the menu functionality to how 1.6x works. (I need the text showing along with icons, not just icons alone). Is there a config option I can set to:

1. Include text with icon in menus
2. Disable split menu

Those two options will be very important for us. Our users have enough trouble knowing what something does even with the words there. With only an icon, they are clueless.

[marc-farre]

@WizWareTech I like the idea of displaying the text below the icons also on the bottom bar. I'll add them as an option in a few days.

But why disabling the split menu?
The bottom menu is common with apps and avoids the dropdown menu: we now have direct access to menu items, which makes navigation much better on mobile.

[ArchBlood]

Thanks @ArchBlood However, I cannot reproduce:

Have you flushed the cache after installing the new version?

Using the Custom Pages module to create pages that append to the top menu, navigate to the tasks overview and the issue will be shown.

[WizWareTech]

The reason for not wanting split menu is because when describing to users where to find menu items, now the menu items are sometimes on the top, sometimes on the bottom, etc. Many users are not sophisticated, and get easily confused when things move around (especially when moving from dekstop to mobile in portrait mode).

I think more advanced users will have no problem with split menu, but for one of our customers, the users are over 50 yrs old and struggle to learn things in the first place. Is there a way to have a switchable config parameter to enable/disable split menu? That way both bases are covered.

[marc-farre]

@ArchBlood Thanks. I'll have a try soon.

@WizWareTech Thanks for the explanation. I understand, but I don't have this need, and I think the advantages outweigh the disadvantages.
And people are getting more and more used with the dropdown menu as it's very common now with mobile apps.
And the goal of this theme is to fit well with HumHub mobile app.
Moreover, I don't want to maintain 2 versions of the navigation menu. Too much work for a free module, sorry.

[ArchBlood]

@ArchBlood Thanks. I'll have a try soon.

@WizWareTech Thanks for the explanation. I understand, but I don't have this need, and I think the advantages outweigh the disadvantages. And people are getting more and more used with the dropdown menu as it's very common now with mobile apps. And the goal of this theme is to fit well with HumHub mobile app. Moreover, I don't want to maintain 2 versions of the navigation menu. Too much work for a free module, sorry.

Maybe append to .layout-content-container? I do this for the scroll up module.

Currently this is what I see in my tests;

[WizWareTech]

@marc-farre If the text names can be added to the menu items (even a switchable parameter) then even with split, it would be MUCH better. I hope you can make that happen. I am happy to test and give you feedback/screenshots, just let me know.

[marc-farre]

@WizWareTech done in commit 424a9f6 and 7722160

I've added the module configuration hideTextInBottomMenuItems
See https://docs.humhub.org/docs/admin/advanced-configuration#module-configurations to configure it.
You must set this config to false.

Let me know what you think about it.
It looks like that:

[WizWareTech]

@marc-farre I'm not versed in using git. Can you tell me what commands I need in order to pull those two commits in to my clean-theme folder?

[WizWareTech]

@marc-farre

I just pulled the entire thing with git clone for now.

Three issues:

1. The name of application (website name) wraps to two lines:
   

Where can I adjust/reduce the font size to fit it so it doesn't wrap?

2. The second line (result of wrapping) stays there during scrolling:
   

3. 'DASHBOARD' gets cut into two at the bottom:
   

Can I reduce this font size as well? (or only for longer items perhaps?)

4. The vertical spacing between items in the My Space menu is far too wide. It used to be much tighter without all the white space:

I suggest removing top/bottom padding of 10px and changing to 0px. This is much more visually appealing (I just changed it in browser dev mode):

And perhaps you can help me with this: I'm trying to test some css changes (for instance, changing values in mobile.less, but they aren't taking effect on the site. I then found the site was referencing a file in assets, so I deleted that folder and it recreated and the changes took effect in the assets files, but the site still wasn't handing out a mobile.less that showed the changes. If I want to tweak some things in the plugin (css or whatever), are there steps I need to take to make them 'live' on the site so I can see what they'll look like?

[marc-farre]

@WizWareTech thanks for your feedback!

1. The name of application (website name) wraps to two lines

Thanks. Fixed in commit a1d007e

3. 'DASHBOARD' gets cut into two at the bottom

Yes. What do you suggest?

• Smaller font size is too small.
• If I add more width to the menu item, then I need to add width also to the others to have the same width, which will end with less visible items (more items will be in the right drop up menu).

4. The vertical spacing between items in the My Space menu is far too wide.

Yes. Fixed in commit 67c10e3

I just pulled the entire thing with git clone for now.

Yes, that's fine.
Now you can update with the latest fixes with a git pull

If you change something in the assets folder, it will be erased next time you flush the cache.
So:

• if it's about issues or enhance ideas that affect all users of the Clean Theme, create a new issue on https://github.com/cuzy-app/humhub-modules-clean-theme/issues and I will fix it for everybody and maintain it in future versions
• if you have specific needs for your HumHub instance (special colors, special font, etc), then create a child theme: https://github.com/cuzy-app/humhub-modules-clean-theme?tab=readme-ov-file#child-themes

[WizWareTech]

Perhaps I'm doing this wrong. I ran 'git clone https://github.com/cuzy-app/humhub-modules-clean-theme.git' to get the most recent version. Then I moved it into modules as 'clean-theme'.

Then I started getting 404 errors on resources, for example:

404 Not Found
https://XXXXX.XX/assets/6869c2d/less/home/marc/www/hhdev/static/less/gridview.less

Is there something else I need to do once performing a git clone or git pull to update these assets? And why is it looking in a 'marc' folder? The 'home' folder doesn't exist under that asset folder. For instance, I can see /assets/6869c2d/less, but there is no 'home' folder in there.

[marc-farre]

@WizWareTech You shouldn't put anything into the assets folder. Files are auto-generated from cache.

The Clean Theme module must be in protected/modules/clean-theme.

So:

cd protected/modules/
rm -rf clean-theme
git clone https://github.com/cuzy-app/humhub-modules-clean-theme.git clean-theme

Then, flush the cache: Administration -> Settings -> Advanced -> "Save and Flush cache".
This will rebuild the assets folder from the new module version.

[WizWareTech]

I wasn't putting anything in assets, but I noticed files were missing from there, which makes sense why, now.

The flushing is what was needed to rebuild assets and now it is working. Thank you, and sorry for my lack of knowledge in the right steps to manually update the module. I wish this was explained in HumHub docs. I'll continue testing the new commits and give you feedback.

[WizWareTech]

@marc-farre

The latest changes look much better with the spacing!

1. For the 'DASHBOARD' wrapping to new line, I have an idea. Can the 'DASHBOARD' be translated to 'DASH-BOARD' and if so, will that cause it to wrap after the 'DASH-'? If so, can you tell me how to change the translation for it? I searched by am unable to locate the corresponding module to make the translation, following guide in https://docs.humhub.org/docs/admin/translations/.

2. When going into a space, the space name disappears. This is confusing to users. Is there a way to put the space name in there even if some of it gets cut off due to size restriction?

And thank you for your great work, and fast response, it is much appreciated!

[marc-farre]

@WizWareTech Fixed in commit 39da6f8

I've also added more space so that "DASHBOARD" don't display in 2 lines (but we might have the issue with other menu entries and other languages).

To update:

cd protected/modules/clean-theme
git pull

Administration -> Settings -> Advanced -> "Save and Flush cache".

Tell me if everything's fine now. Then I'll release a new version of the module. Thanks!

[WizWareTech]

I see this now:

And when selecting a space:

Is there a way to include the name of the space below the selected space icon? (I understand that there will be length issues there, so I assume you'll have to truncate using maybe text-overflow? I'm not a css expert)

[marc-farre]

@WizWareTech can you:

• either wait for the 1.7.2 to be available on the marketplace and update to it
• or download it from https://marketplace.humhub.com/module/clean-theme/downloads and flush the cache
  And then refresh your browser page?

If you still have the issue after doing this, let me know the browser name and version you are using, and the OS (Android, etc.).

The Space name is not available because the theme only change the style and on the native HumHub the name is not displayed:

[marc-farre]

@WizWareTech Version 1.7.2 is now available. Just update using the integrated marketplace.

[WizWareTech]

Another issue:

When searching under the my spaces button, if there are a full screen of results:

1. They fall off the top edge and you can't see anything above
2. the input field is also off the top of the screen
3. the on screen keyboard disappears
4. when attempting to scroll the results up/down, the entire page moves instead of the pop-up result menu

Proposed solution:
limit results that show to allow the input field to remain on the screen at the top, and keep the on screen keyboard on screen so that characters can continue being typed in to narrow the search further. also, fix the scrolling so the results can be scrolled within the pop-up menu.

Note: This wasn't an issue before when the menu was on the top.