New learning path list improvements - refs #6609

[Coussecousse]

Hello.
I’ve worked on a few improvements I found while checking the Issues for v2.
Sorry if this was already assigned to someone else — I just wanted to contribute and hope this helps! I had fun learning new things.

Changes included in this PR

Progress circle

• Enlarged the circle (to avoid text overflow at 100%).
• Circle turns green when progress reaches 100%.

Action icons

• Fixed the cog (settings) icon, which was visually broken.
• Ensured consistency of action icons between:
  • Long list view and grid list inside a category.
  • Top-right corner of the wide box and bottom-right corner of the grid box.
• Added missing icons (e.g., Download as SCORM visible to all if enabled).
  ⚠️ Not working atm, I try to connect it to the backend in the lp_controller.php but I fail to know why it's not working.

Hamburger menu

• Now closes automatically when clicking outside (prevents overflow issues).
• In grid view, aligned the hamburger menu next to the action icons (for consistency).

Placeholders

• Adjusted placeholders (while loading) to display as one wide box instead of 3 smaller ones.

Image editing

• Fixed issue where large uploaded images would still appear huge when reopening the settings, despite the form stating they would be resized.

Not included

• I didn’t update the terms to match Chamilo 1.11 because I don’t know the old version well enough.

Todo

• A bit of responsive for the mobile.

Ps: I reintroduced the 'build' action. The commit fix removing build action was a mistake, which was later fixed when adding the SCORM action.

[ywarnier]

Hi @Coussecousse
This is great. I will review this promptly.

[ywarnier]

This PR is very promising. Well done!
I've requested a few changes to conform to Chamilo code styling and I haven't tested the result yet (your screenshots are helpful there), but I'll try as soon as you can look into these changes.

[Coussecousse]

Hello ! Thanks for the answers.
I’ll respond here regarding the icons :
I used MDI icon for settings and I have now :

<svg width="20" height="20" viewBox="0 0 24 24">
   <path d="M12,8A4,4 0 0,1 16,12A4,4 0 0,1 12,16A4,4 0 0,1 8,12A4,4 0 0,1 12,8M12,10A2,2 0 0,0 10,12A2,2 0 0,0 12,14A2,2 0 0,0 14,12A2,2 0 0,0 12,10M10,22C9.75,22 9.54,21.82 9.5,21.58L9.13,18.93C8.5,18.68 7.96,18.34 7.44,17.94L4.95,18.95C4.73,19.03 4.46,18.95 4.34,18.73L2.34,15.27C2.21,15.05 2.27,14.78 2.46,14.63L4.57,12.97L4.5,12L4.57,11L2.46,9.37C2.27,9.22 2.21,8.95 2.34,8.73L4.34,5.27C4.46,5.05 4.73,4.96 4.95,5.05L7.44,6.05C7.96,5.66 8.5,5.32 9.13,5.07L9.5,2.42C9.54,2.18 9.75,2 10,2H14C14.25,2 14.46,2.18 14.5,2.42L14.87,5.07C15.5,5.32 16.04,5.66 16.56,6.05L19.05,5.05C19.27,4.96 19.54,5.05 19.66,5.27L21.66,8.73C21.79,8.95 21.73,9.22 21.54,9.37L19.43,11L19.5,12L19.43,13L21.54,14.63C21.73,14.78 21.79,15.05 21.66,15.27L19.66,18.73C19.54,18.95 19.27,19.04 19.05,18.95L16.56,17.95C16.04,18.34 15.5,18.68 14.87,18.93L14.5,21.58C14.46,21.82 14.25,22 14,22H10M11.25,4L10.88,6.61C9.68,6.86 8.62,7.5 7.85,8.39L5.44,7.35L4.69,8.65L6.8,10.2C6.4,11.37 6.4,12.64 6.8,13.8L4.68,15.36L5.43,16.66L7.86,15.62C8.63,16.5 9.68,17.14 10.87,17.38L11.24,20H12.76L13.13,17.39C14.32,17.14 15.37,16.5 16.14,15.62L18.57,16.66L19.32,15.36L17.2,13.81C17.6,12.64 17.6,11.37 17.2,10.2L19.31,8.65L18.56,7.35L16.15,8.39C15.38,7.5 14.32,6.86 13.12,6.62L12.75,4H11.25Z"/>
</svg>

Do you agree with this ? Or should I use <svg-icon type="mdi" :path="path"></svg-icon> ? (I think not, since I haven’t seen this version anywhere.)

For the SCORM, it looks like this :

<svg width="20" height="20" viewBox="0 0 24 24">
    <path d="M3 3H21V7H3V3M4 21V8H20V21H4M14 14V11H10V14H7L12 19L17 14H14Z" />
</svg>

Preview :

[ywarnier]

Oh, I see the issue. It made me realize we were missing a small section in the design guide (thanks!): https://github.com/chamilo/chamilo-lms/wiki/Graphical-design-guide#in-vue-files (you'll find two examples in this section. You might want to use the first one as it's shorter, but it's a little bit less flexible. You will have to use archive-arrow-down and cog-outline as icon IDs, in any case.

[Coussecousse]

Hey, I’ve updated all the icons to match the MDI set according to /main/admin/list_icons.php
Hope that’s okay, let me know if it isn’t.
Also, do you want me to add some responsive improvements while I’m at it? A few Tailwind classes should do the trick.