Describe your bug or feature request.

In commerce-order--admin.html.twig all <details> classes are written to work with the seven theme (ie. seven-details, seven-details__summary).

I' m using the Claro as administration theme and, on the admin order page, all sidebar <details> (Customer Information - Billing Information etc.) haven' t the appropriate styles.

If a bug, provide steps to reproduce it from a clean install.

  1. Set Claro as Administration theme
  2. Visit admin/commerce/orders/(order id)

I solved the issue with this patch. It contains these changes:
1) Passes the machine name of the current theme to commerce order templates.
2) Replaces old classes (seven-details etc.) with the current_theme_name variable ({{ current_theme_name }}-details etc.).

CommentFileSizeAuthor
#10 patch-8-gin.png149.72 KBnicolasgraph
#9 interdiff_6-9.txt6.11 KBnicolasgraph
#9 3204355-9-commerce-order-admin-template-details-broken-styling.patch11.18 KBnicolasgraph
#9 patch-8-claro.png80.89 KBnicolasgraph
#8 patch-gin.png45.85 KBnicolasgraph
#8 patch-claro.png23.43 KBnicolasgraph
#8 no-patch.png21.01 KBnicolasgraph
#7 Capture d'écran 2024-02-05 171410.png45.85 KBnicolasgraph
#7 Capture d'écran 2024-02-05 171725.png23.43 KBnicolasgraph
#7 Capture d'écran 2024-02-05 171545.png21.01 KBnicolasgraph
#6 3204355-6-commerce-order-admin-template-details-broken-styling.txt5.31 KBnicolasgraph
#6 3204355-6-commerce-order-admin-template-details-broken-styling.patch7.5 KBnicolasgraph
#5 3204355-4-commerce-order-admin-template-details-broken-styling.txt0 bytesnicolasgraph
#4 3204355-4-commerce-order-admin-template-details-broken-styling.patch8.7 KBnicolasgraph
commerce-order-admin-template-details-broken-styling.patch4.52 KBbalis_m

Issue fork commerce-3204355

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

balis_m created an issue. See original summary.

frankdesign’s picture

frankdesign commented

Thanks for the patch. Problem for me though is that I am using a sub-theme of Claro, so my class names with your patch are "claro-sub-details" rather than "claro-details" etc... Is there any way to use the Claro theme name as per classes on all other ?

F

nicolasgraph’s picture

nicolasgraph
Primary language French
Location Strasbourg
commented
Assigned: Unassigned » nicolasgraph
Status: Needs review » Needs work

It is missing some more markup and the current theme name is not passed to commerce-order--admin.html.twig.

nicolasgraph’s picture

nicolasgraph
Primary language French
Location Strasbourg
commented
Assigned: nicolasgraph » Unassigned
Status: Needs work » Needs review
StatusFileSize
new 3204355-4-commerce-order-admin-template-details-broken-styling.patch8.7 KB

Here it is.

nicolasgraph’s picture

nicolasgraph
Primary language French
Location Strasbourg
commented
StatusFileSize
new 3204355-4-commerce-order-admin-template-details-broken-styling.txt0 bytes

And here is the interdiff.

nicolasgraph’s picture

nicolasgraph
Primary language French
Location Strasbourg
commented
StatusFileSize
new 3204355-6-commerce-order-admin-template-details-broken-styling.patch7.5 KB
new 3204355-6-commerce-order-admin-template-details-broken-styling.txt5.31 KB

Using the current theme is actually not a good idea as Gin use the claro classes.

nicolasgraph’s picture

nicolasgraph
Primary language French
Location Strasbourg
commented
StatusFileSize
new Capture d'écran 2024-02-05 171545.png21.01 KB
new Capture d'écran 2024-02-05 171725.png23.43 KB
new Capture d'écran 2024-02-05 171410.png45.85 KB

Here are some screenshots without the patch using Claro, and with the patch using Claro and Gin.

nicolasgraph’s picture

nicolasgraph
Primary language French
Location Strasbourg
commented
StatusFileSize
new no-patch.png21.01 KB
new patch-claro.png23.43 KB
new patch-gin.png45.85 KB
nicolasgraph’s picture

nicolasgraph
Primary language French
Location Strasbourg
commented
StatusFileSize
new patch-8-claro.png80.89 KB
new 3204355-9-commerce-order-admin-template-details-broken-styling.patch11.18 KB
new interdiff_6-9.txt6.11 KB

Here is a try to get some more enhancements to the order layout.

nicolasgraph’s picture

nicolasgraph
Primary language French
Location Strasbourg
commented
StatusFileSize
new patch-8-gin.png149.72 KB
jsacksick’s picture

jsacksick commented
Status: Needs review » Needs work

The patch should be updated following the layout changes introduced in 2.39 and subsequently in dev.
So I wonder if we should be hardcoding Claro, and then experience the same issue later, or hardcode claro + another class name that includes the current theme name...

majmunbog made their first commit to this issue’s fork.

majmunbog opened merge request !264

  • jsacksick committed cfc56af6 on 8.x-2.x authored by majmunbog 
    Issue #3204355: Commerce order admin template <details> broken styling

  • jsacksick committed bf5f77dd on 3.0.x authored by majmunbog 
    Issue #3204355: Commerce order admin template <details> broken styling
jsacksick’s picture

jsacksick commented
Status: Needs work » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.