feat: refinement of knowledge panel rendering template.

[deveshidwivedi]

What

Replaced inline styles with CSS classes for easier modification and better adaptability.

Related issue(s) and discussion

• Fixes Simplify the templates that render knowledge panels on the web #9752

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 49.58%. Comparing base (dc04d18) to head (b8088be).
Report is 222 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #9890      +/-   ##
==========================================
+ Coverage   49.54%   49.58%   +0.04%     
==========================================
  Files          67       70       +3     
  Lines       20650    20961     +311     
  Branches     4980     5024      +44     
==========================================
+ Hits        10231    10394     +163     
- Misses       9131     9276     +145     
- Partials     1288     1291       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[stephanegigandet]

Thank you @deveshidwivedi !

Could you separate the 2 changes (1: moving the CSS from the template to classes, and 2: how to see where the panel end)? It will be easier to merge the first 1 first.

For the left border, the idea was to show where the body of the panel ends (when the accordion is opened), so that's it's clearer what happens when the user closes the panel.

So the border should be on the panel title + content:

But we will have to try different ways, maybe it will look very busy with the border, and other solutions might be better.

[deveshidwivedi]

I have removed the border from this PR as requested, thank you.

For the left border, the idea was to show where the body of the panel ends (when the accordion is opened), so that's it's clearer what happens when the user closes the panel.
So the border should be on the panel title + content

I am sorry to misunderstand, I now got how it was supposed to be, we could try out different styles before finally making a PR to address this.

But we will have to try different ways, maybe it will look very busy with the border, and other solutions might be better.

Sure!

[stephanegigandet]

Hi @deveshidwivedi , have you been able to run your changes locally? I tried it but there's an issue with the icon image of all panels:

[deveshidwivedi]

Hi @stephanegigandet! I have tried to correct the image icons, I had tried to run the changes locally but mistakenly made unrequired changes to the branch. Please have a look. Thank you.

[stephanegigandet]

Hi @stephanegigandet! I have tried to correct the image icons, I had tried to run the changes locally but mistakenly made unrequired changes to the branch. Please have a look. Thank you.

Hi @deveshidwivedi , there are still some typos that prevent some CSS rules to work.

In order to make sure everything works, it would be good to test the product pages side by side: one side with your changes, and one side with the "main" branch, to check if you get visually similar results.

[deveshidwivedi]

Hi! @stephanegigandet I did run make front_build and make restart successfully, I see similar knowledge panels on both the localhost and the website. Could you please confirm? Thank you!

[stephanegigandet]

@deveshidwivedi Thank you, it looks good! There is a conflicting change:

<<<<<<< simpler-template
                <div id="tag_map" class="large-9 columns hidden">
                    <div id="container" class="custom-container"></div>
=======
                <div id="tag_map" class="large-9 columns" style="display: none;  z-index: 1;">
                    <div id="container" style="height: 300px; z-index: 1;"></div>
>>>>>>> main

Can you move the "z-index: 1;" to the customer-container scss, and resolve the merge conflict?

[deveshidwivedi]

@stephanegigandet does this look fine?

[stephanegigandet]

Updating the branch to solve the failing tests (en:Cheese)

[stephanegigandet]

Looks good! Thank you!

[alexgarel]

@deveshidwivedi can you resolve the conflict ?

[deveshidwivedi]

Resolved! @alexgarel

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[deveshidwivedi]

Hi @stephanegigandet, please take a look at this. The merge conflicts are now resolved. Thank you.