Skip to content

fix(ui): name every bundled Bootstrap on core's right floats - #6448

Open
e107help[bot] wants to merge 2 commits into
e107help/6328from
e107help/6425
Open

e107help[bot] wants to merge 2 commits into
e107help/6328from
e107help/6425

Conversation

@e107help

@e107help e107help Bot commented Sep 14, 2026

Copy link
Copy Markdown
Contributor

Why

Fixes #6425.

e107 bundles Bootstrap 3, 4 and 5, and all three declare float:right !important under a different name: pull-right, float-right and float-end respectively. None of them defines either of the others. Core markup that names one spelling therefore stops floating the moment the theme loads a framework it did not name, and a control meant to sit at the right edge drops back into the flow.

Twenty-one class lists on master already carry all three together, so the house answer was in the tree before this change; the rest of core had simply not been brought onto it. Sweeping every site at once rather than one at a time is Deltik's ruling on #6328 applied to the float list, and applying it here was the orchestrator's call rather than his. He can veto it on this pull request.

Stacked on #6430, which owns the shared test support and has already brought three of these sites onto the float list. GitHub will retarget this to master when #6430 merges.

What Changed

Thirty-six class lists in e107_admin, e107_core, e107_handlers, e107_plugins and the root pages. Twenty-six gain the spellings they lacked; ten lose one instead, those ten being the forum's post-options entries, where the float was the defect rather than the fix. e107_themes is untouched: a theme declares the one Bootstrap it loads, so naming that version's spelling alone is honest there in a way it is not in core, and @Jimmi08 has been asked on the issue whether the six lines under e107_themes should follow.

The ten post-options entries in the forum are each an <li> inside <ul class="dropdown-menu"> carrying text-right text-end float-right, and Bootstrap 4 is the only bundled framework that defines float-right. Rendering that markup against the bundled Bootstrap 4 stylesheet and measuring it: a 160px menu draws its entries 117px, 110px and 87px wide instead of 158px, so only the label is clickable rather than the whole row, and the separator between the two groups is pushed out of the flow the floats took over and drawn beside the first entry instead of between them. text-right text-end is what right-aligns the labels, and it is already there, so float-right comes off. Line 948 named it twice into the bargain.

The forum search box at forum_template.php:115 runs the other way from every other addition: it named 4's and 5's spellings and not 3's, so it is the one edit whose effect lands on legacy Bootstrap 3 themes. The right beside them is core's own text-align:right in e107.css, not a float, so the box spanned the row there instead of sitting at the right of it.

Test\Markup takes the tokeniser-based class-attribute reader out of DropdownMenuAlignmentConventionsTest so both conventions tests share one copy and one pass over the tree, and Test\Tree learns which of its trees hold core's own code so a rule that stops at the bundled themes does not have to spell the directory name a second time.

chatbox_menu, gallery and hero are version-bumped, not having been bumped since v2.3.3; featurebox, forum and pm already were this cycle, so only their date moves. online ships no plugin.xml.

How It Was Tested

e107_tests/tests/unit/RightFloatConventionsTest.php reads every class attribute core writes, through token_get_all() rather than a regex over the file, and fails any list that names one of the three spellings without naming all three. It reds on the unfixed tree at thirty-six failures and greens with the change; reverting the source paths and re-running is how that was proved rather than read. A second test holds the scan itself above twenty lists so an empty scan cannot pass vacuously; it currently finds forty-eight.

The whole unit suite passes on this branch. php -l and the downgrade fixed-point check pass over all thirty-two changed files.

The rendering behind the forum measurements above is a static page of that same markup against e107_web/lib/bootstrap/4/css/bootstrap.min.css, measured with getBoundingClientRect() in headless Chrome. No bundled theme loads Bootstrap 4, so the defect it shows needs a third-party Bootstrap 4 theme to meet in a stock install.

Backwards Compatibility

Rendered HTML gains class tokens on twenty-five elements. On a framework that does not define an added spelling the token is inert and the page is byte-for-byte equivalent in effect, so nothing moves on a theme that already worked.

Three changes do move something, deliberately:

  • The ten forum entries stop floating on Bootstrap 4. That is the defect described above, and the menu returns to a stack with full-width entries. Bootstrap 3 and 5 never read float-right, so neither is touched.
  • The forum search box begins floating on Bootstrap 3, which is where most in-place upgrades from 1.x are. Its parent has no clearfix, so that parent collapses, and the table below it is width:100% and clears under the float rather than sitting beside it. The box is shrink-wrapped at the right of the row where it used to span the row.
  • The hero media wrapper begins floating on Bootstrap 4 and 5. The media there is a 400x400 thumbnail fixed by the template's own {SETIMAGE: w=400&h=400}, it sits alone in a half-width column, and hero.css insets that column 45px on the right, so a thumbnail held at the column's right edge is what the plugin was written to. Bootstrap 3 draws that today; on 4 and 5 the w-100 on the image stretched a 400px thumbnail across the column instead. The column contains nothing but that wrapper and is a block formatting context in all three frameworks, a float on 3 and a flex item on 4 and 5, so its height still follows the image.

Several additions are inert where they land and are made anyway, because a mechanical rule with sites carved out of it does not survive the next person to read it: the installer links the bundled bootstrap3 stylesheets and no others, no bundled theme gives the admin area anything but Bootstrap 3, the two Who's Online entries are flex items where float is ignored, and the menu-manager area selector is pinned position:absolute by one admin skin's stylesheet.

release/v2.3.x bundles all three frameworks and carries every one of these sites, so a twin follows against that branch.

AI Model

Claude Opus 5 (claude-opus-5), as e107help.

Checklist

  • Reproduction test that fails without the change
  • Unit suite green
  • Backwards-compatibility effects stated above
  • Core plugin versions bumped where this release cycle had not already bumped them
  • Merge decision is Deltik's

…ventions tests

The dropdown-menu conventions test walks core's PHP, reads every class attribute
through the tokeniser and keys each list by where it was found, and the
right-float conventions test that follows wants the same walk over the same
files. Test\Markup holds the one copy and each test filters what comes back,
beside Test\Tree, which already holds the file list that feeds it. Keeping what
each file read costs a little memory and saves the second rule a whole pass over
the tree.

Test\Tree also learns which of its trees hold core's own code, so a rule that
stops at the bundled themes asks it for corePhpFiles() instead of repeating the
directory name the class already carries.
Core bundles Bootstrap 3, 4 and 5, and each spells float:right !important
differently: pull-right, float-right and float-end respectively. None of the
three reads either of the others, so markup naming one of them stops floating on
a theme that loads a different one, and a control meant to sit at the right edge
drops back into the flow. Twenty-one class lists on master already carry all
three and #6328 brings two more; this puts the rest of core on the same list.

Core's own .f-right in e107_web/css/e107.css looks like the tidier answer to
"float right whatever the theme loads" and is deliberately not what is used. The
three vendor spellings are float:right !important and .f-right is not, so a
framework rule on the same box beats one and not the other. The custom page
navigation wrapper already carries .f-right and is completed anyway rather than
carved out.

The forum's post-options menu goes the other way, because there the float was
the defect. Its ten entries are each an <li> inside <ul class="dropdown-menu">
carrying text-right text-end float-right, and Bootstrap 4 is the one framework
that defines float-right. Measured against the bundled Bootstrap 4 stylesheet, a
160px menu draws its entries 117px, 110px and 87px wide instead of 158px, so
only the label is clickable, and the separator between the two groups leaves the
flow the floats took over and is drawn beside the first entry rather than
between the groups. text-right text-end is what right-aligns the labels and it
is already there, so float-right comes off rather than being completed. One of
them named it twice into the bargain.

The hero media wrapper is the one addition that changes what a modern theme
draws. The media is a 400x400 thumbnail, fixed by the {SETIMAGE: w=400&h=400} at
the top of the same template, it sits alone in a half-width column, and hero.css
insets that column 45px on the right, so a thumbnail held at the column's right
edge is what the plugin was written to. Bootstrap 3 draws that today and 4 and 5
do not, because neither reads pull-right; there the w-100 on the image stretches
a 400px thumbnail across the column instead. Completing the list gives all three
the same thumbnail at its own size where the stylesheet expects it. The column
holds nothing but that wrapper and is a block formatting context in all three
frameworks, a float on 3 and a flex item on 4 and 5, so its height still follows
the image.

The forum search box is the one addition live on Bootstrap 3 alone: it named 4's
and 5's spellings and not 3's, and the .right beside them is core's own
text-align:right rather than a float, so on a legacy theme the box spanned the
row instead of sitting at the right of it. It now floats there as it already
does on 4 and 5, and the table below it clears under it as it already does
there.

Several completions are inert where they land. The installer links the bundled
bootstrap3 stylesheets and no others; no bundled theme gives the admin area
anything but Bootstrap 3; and the two Who's Online entries are flex items, where
float is ignored. The menu-manager area selector is the case #6328 left at
pull-right, because bootstrap3/admin_style.css pins it position:absolute and
float computes to none on an absolutely positioned box. All of them are
completed regardless: that pin is one admin skin's rather than core's, and a
mechanical rule with sites carved out of it does not survive the next person to
read it.

e107_themes is left alone and the conventions test scopes itself to the trees
core ships its own code in. A theme declares the one Bootstrap it loads, so
naming that version's spelling alone is honest there in a way it is not in core.
The six lines concerned are Jimmi08's call and she has been asked on the issue.

Sweeping every site at once rather than one at a time is the ruling on #6328
applied to the float list.

chatbox_menu, gallery and hero are bumped, having not been bumped since v2.3.3;
featurebox, forum and pm already were this cycle and only their date moves.
online ships no plugin.xml.

Fixes #6425
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant