Problem/Motivation

The classes in the Body tag looks like they need to be cleaned up a bit. There are four white-spaces before the Bootstrap5 classes start, and one class ends with a dash (bg-):

Olivero body tag

<body class="toolbar-tray-open toolbar-horizontal toolbar-fixed toolbar-loading user-logged-in path-frontpage">

Bootstrap 5 body tag

<body class="toolbar-tray-open toolbar-horizontal toolbar-fixed toolbar-loading user-logged-in path-frontpage bg- d-flex flex-column h-100">

These are the classes in question, including four white-spaces: bg- d-flex flex-column h-100

Steps to reproduce

Enable the theme, open the source from a page, and check the body tag. Compare to for example Olivero theme.

Proposed resolution

  • Make sure that no classes end with a dash (bg-)
  • Clean up the code, so that there are only ever one white-space between classes

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork bootstrap5-3311824

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:

Comments

ressa created an issue. See original summary.

_pratik_’s picture

Assigned: Unassigned » _pratik_
anchal_gupta’s picture

StatusFileSize
new576 bytes

I have uploaded the patch. Please review it

ressa’s picture

Thanks @Anchal_gupta, but it looks like @pratik_specbee is working on it?

Also, your patch doesn't work (it is missing a #), it doesn't fix all white-spaces, nor the bg- issue.

_pratik_’s picture

StatusFileSize
new783 bytes

Please Try applying the patch.
Thanks

_pratik_’s picture

Assigned: _pratik_ » Unassigned
Status: Active » Needs review
ressa’s picture

Status: Needs review » Needs work

Thanks @pratik_specbee! That looks like it takes care of the issues and cleans it up.

There's a small detail, when you enable a background, an extra white-space is added:
<body class="toolbar-tray-open toolbar-horizontal toolbar-fixed toolbar-loading user-logged-in path-frontpage bg-dark d-flex flex-column h-100">

_pratik_’s picture

Assigned: Unassigned » _pratik_

Thanks @ressa, my bad, i missed that spacing.
sending a updated patch.

_pratik_’s picture

Assigned: _pratik_ » Unassigned
Status: Needs work » Needs review
StatusFileSize
new782 bytes
new602 bytes

Here is the updated patch with interdiff.
Thanks

ressa’s picture

Title: Fix classes in body tag » Fix classes in body and footer tag
Issue summary: View changes
Status: Needs review » Needs work

Looks good @pratik, there are only one space now, both with or without background enabled.

It wasn't part of the initial issue, but I just took a look at the source, and stumbled over another instance of extra white-spaces, coming from templates/layout/page.html.twig:

<footer class="mt-auto footer-dark text-light bg-secondary">

Would it be possible for you to take a look at it as well?

_pratik_’s picture

Assigned: Unassigned » _pratik_

yes sure @ressa

_pratik_’s picture

Assigned: _pratik_ » Unassigned
Status: Needs work » Needs review
StatusFileSize
new825 bytes

Try this one for footer please.

ressa’s picture

Status: Needs review » Needs work

Thanks! It almost works, but if I enable "Footer options" > "Footer background", I get this:

<footer class="mt-auto bg-primary">

shyam_bhatt’s picture

Status: Needs work » Needs review
StatusFileSize
new1.21 KB

@ressa please check the patch which includes both the solution.

After patch,
<body class="toolbar-icon-9 toolbar-tray-open toolbar-horizontal toolbar-fixed user-logged-in path-frontpage d-flex flex-column h-100" >

<footer class="mt-auto footer-dark text-light bg-secondary">

ressa’s picture

Status: Needs review » Needs work

Thanks @Shyam_Bhatt, it works sort of, but I still see this: <footer class="mt-auto "> and <footer class="mt-auto bg-secondary">.

shyam_bhatt’s picture

Status: Needs work » Needs review

@ressa please check patch <footer class="mt-auto{{ footer_classes|replace({' ': ' '}) }}">

ressa’s picture

Status: Needs review » Needs work

Sure, that's also what it says in my file ... but I still get the spacing.

It's probably best to aim for a single unified patch, which fixes both body and footer tag at the same time.

vladimiraus’s picture

ressa’s picture

Thanks for the fresh release of 2.0.1 @VladimirAus, but it still has the spacing issue. Also, it happens both in the default theme, but also sub-themes.

vladimiraus’s picture

@ressa space is not critical. default empty bs5 classes now should be populated.
FYI, 2.0.2 was released as 2.0.1 was broken with removal of classy.

ressa’s picture

I agree, it is not critical, but can be solved, and there was progress here solving that. Also, there is a "half" class, displayed as bg- which could be an issue, and should be fixed in my opinion.

Thanks for the tip about the 2.0.2 release. Perhaps a short note could be added on https://www.drupal.org/project/bootstrap5/releases/2.0.2 to explain the reason why it was released?

ressa’s picture

Issue summary: View changes
Priority: Normal » Minor
Status: Needs work » Reviewed & tested by the community

Sorry @Shyam_Bhatt, your patch in #14 is indeed unified, including the fix for the body, and adding a solution for the footer, which works sort of: There are still spaces in the footer, just less ...

The body, which was my main concern was fixed by @_pratik_, so thanks for that.

The issue is solved, so I am changing Status and lowering Priority, since nothing is broken, and it's more a nice-to-have than need-to-have.

ressa’s picture

Title: Fix classes in body and footer tag » Fix classes in body tag
Issue summary: View changes
Status: Reviewed & tested by the community » Needs review

I have been thinking some more about this, and maybe it's better to deal with getting the classes right in the preprocess stage, rather than Twig? Here is a patch with an attempt. Also, I am removing the footer task for now, footer and navbar can always be fixed in another issue.

shyam_bhatt’s picture

Status: Needs review » Fixed
ressa’s picture

Status: Fixed » Needs review

@Shyam_Bhatt: A patch in an issue needs to go through the steps required, with thorough review, and then changing status to "Reviewed and tested by the community", if it looks good and works well, the code guidelines are followed, etc.

For more, see Review a patch or merge request.

dineshreddymathuku’s picture

#12 and #14 patches looks good for me
Thanks

ressa’s picture

Thanks, but the two patches in #12 and #14 are no longer valid. The patch for review is #23, and the Merge Request is https://git.drupalcode.org/project/bootstrap5/-/merge_requests/17

shyam_bhatt’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new17.8 KB
new21.49 KB

@ressa I have checked the "MR !17" working fine. Please check the below images. After applying the MR the unwanted space and class will be removed from the body tag.

2022-10-26/3311824-29-after.png
2022-10-26/3311824-29_2-after.png

ressa’s picture

Thanks @Shyam_Bhatt. Perhaps you can also check if bg-classes are added correctly, if Body theme and Body background options are enabled, and share your observations here?

ressa’s picture

Issue summary: View changes

I have created #3317503: Check and fix classes in footer and navbar, if needed to check if other tags such as footer and navbar have the same issue, to maybe also move the logic to bootstrap5.theme file.

  • VladimirAus committed a6942a6 on 2.0.x
    Issue #3311824 by _pratik_, ressa, Shyam_Bhatt, Anchal_gupta,...
vladimiraus’s picture

Status: Reviewed & tested by the community » Fixed
ressa’s picture

Status: Fixed » Needs work

This is the Merge Request which was reviewed by @Shyam_Bhatt:
https://git.drupalcode.org/project/bootstrap5/-/merge_requests/17

It looks like something else was committed ...

shyam_bhatt’s picture

@ressa Let's create new issue for remaining fixes, after taking latest pull.

vladimiraus’s picture

I missed merged request. Reverting it back.
Sounds like there is a bit of a mess with this issue.
Please either add tests or test cases, so it is easier to test.

  • VladimirAus committed 6e62703 on 2.0.x
    Issue #3311824 by _pratik_, ressa, Shyam_Bhatt, Anchal_gupta,...
vladimiraus’s picture

Status: Needs work » Needs review

Added hook update for none value.
Please review.

ressa’s picture

@Shyam_Bhatt: Right, and I created #3317503: Check and fix classes in footer and navbar, if needed, as I mentioned in #31. Or do you mean something else?

shyam_bhatt’s picture

Status: Needs review » Reviewed & tested by the community
StatusFileSize
new17.8 KB
new21.49 KB

Reviewed the "MR ! 17", working fine.

2022-12-06/3311824-40-after.png
2022-12-06/3311824-40_2-after.png

jannakha’s picture

looks ok

vladimiraus’s picture

Status: Reviewed & tested by the community » Fixed

Thank you 🥤

Status: Fixed » Closed (fixed)

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