[4.0] Articles frontend associations badges changed to buttons and more

[infograf768]

Pull Request for Issue #32978

Summary of Changes

Using buttons instead of badges to display lang tags for articles associations.
(see f7833a4 as example)

Using full lang tag in button to let choose when we have the same language for different countries: de-DE, de-AT,

----EDIT: Creating btn-secondary and btn-sm overrides

Testing Instructions

Create a multilingual site with the specific sample data.
Create a list category for the category concerned by the associated articles per default.
Make sure Articles Options Associations are set and not use flags

Load Home page. Load list category menu item.

patch and test again.

Needs npm

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Note: may need some more concerning a11y

[ghost]

Thanks @infograf768 for the PR which i can not test cause Needs npm, sorry.

[joomdonation]

@sandramay0905 You can test it by download update package for this PR https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/32992/downloads/41573/Joomla_4.0.0-beta8-dev+pr.32992-Development-Update_Package.zip , go to System -> Update -> Joomla, open Upload & Update tab, select that package, click on Upload & Install button

[brianteeman]

It seems wrong to me to be adding this class to the bootstrap file as that is really for overrides not for new classes

I dont see why you are inventing a new class of btn-badge and then having to invent a new size when the badge size would be perfectly ok if that was used.

The problem you are trying to solve here (as I understand it) is the current hover styling making the text unreadable and the underline.

Both of those can be resolved purely in css without changing any markup and still only targeting the associations

.association a {
    color: #fff;
    text-decoration: none;
}

[ghost]

I have tested this item ✅ successfully on 63e08b2

Thanks @joomdonation for the hint. I used the custom update server, i wasn't aware of both possibilities.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/32992.}

[infograf768]

I dont see why

Indeed you don't.

[brianteeman]

So please explain

[infograf768]

Please @drmenzelit explain to the guy.
I am tired.

[drmenzelit]

In Bootstrap 4 it was possible to use .badge-* as contextual class in links (https://getbootstrap.com/docs/4.0/components/badge/#links). That was changed in Bootstrap 5, now one should use .btn-* classes. The class .btn-sm is still too big for the associations and we have already an override for .btn-secondary. We have two options: we create a new class or we have to make some overrides of the BS classes for the associations views.
We can move the new class to _global.scss or on a new file under joomla-custom-elements to avoid confusions with the overrides of BS classes.

[brianteeman]

Which is what I said. As its not an override it should not be in the bootstrap override files but instead be in a component specific file in the pages folder such as _com_associatons

[chmst]

I vote for overrides of the BS classes for the associations views.

[infograf768]

OK. Things are now clearer.
We have to use buttons instead of badges in frontend and create our own button for this specific case.

Now, where do we add the new classes?
Do the new classes have to be added in the build/media_source/com_associations/css/sidebyside.css (which is only loaded in the association tmpl) or a new buttons.css file in the same folder,
and then loaded directly in both cases layout/content/info_block/associations.php and /components/com_content/tmpl/category/default_articles.php via

if (Associations::isEnabled())
{
/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
$wa = $app->getDocument()->getWebAssetManager();
$wa->registerAndUseStyle('com_associations, 'com_associations/sidebyside.css'); // or buttons.css
}

[infograf768]

The other solution is to make sure we have a association class added in the /components/com_content/tmpl/category/default_articles.php <div> (it exists in the infoblock for <dd>)

and then create the override for btn-secondary in the bootstap overrides _buttons.scss (or in a new file _associations.scss) in vendor/bootstrap/ as

.association .btn-secondary {

.association .btn-sm {

[infograf768]

Modified PR to override btn-secondary and btn-sm instead of creating btn-badge and btn-vsm

Same results. Modifying now description.

[infograf768]

Can be tested again. Needs NPM.
@sandramay0905 At this time we have an issue with drone and it is impossible to get the corrected update package for the PR.

[infograf768]

@Quy
used visually-hidden instead of sr-only + reformatted the css

[infograf768]

@sandramay0905

you can now use https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/32992/downloads/41753/Joomla_4.0.0-beta8-dev+pr.32992-Development-Full_Package.zip

[ghost]

I have tested this item 🔴 unsuccessfully on bff5a71


"Standard Colour Theme" show different look than "Expected result AFTER applying this Pull Request":

Article	Category List

"Alternative Colour Theme" show like "Expected result AFTER applying this Pull Request":

Article	Category List

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/32992.}

[infograf768]

@sandramay0905
I do not confirm your findings here. The colors are totally independent of the colors themes

.article-info .association,
.cat-list-association {
  .btn-secondary {
    font-weight: 700;
    color: $white;
    background-color: $gray-600;
    border-color: $gray-400;

    &:hover,
    &:focus {
      color: $white;
      background-color: $gray-800;
    }
  }

I guess you had an issue when applying the PR.

[ghost]

I used https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/32992/downloads/41753/pr_list.xml for update.

[infograf768]

Please make a clean install of https://ci.joomla.org/artifacts/joomla/joomla-cms/4.0-dev/32992/downloads/41753/Joomla_4.0.0-beta8-dev+pr.32992-Development-Full_Package.zip

I just checked that pack and it includes the correct css and modifiations in the php files

[ghost]

Please make a clean install

i can only make a clean install of Joomla4 at launch.joomla.org and test.

[infograf768]

Then maybe use the same trick explained above
#32992 (comment)

[ghost]

Then maybe use the same trick explained above

Using this trick i found, what i wrote at #32992 (comment):

The Info by Joomla You can test this package as an update by using this custom update server is not true?

[infograf768]

no ideA. i never use that...

[ghost]

i used it at other pr's and it worked.

[Quy]

I have tested this item ✅ successfully on bff5a71

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/32992.}

[ghost]

@infograf768 unsuccessfully test #32992 (comment) looks like a firefox-issue on mac.

Firefox	Safari

[infograf768]

@sandramay0905
It is working here on Firefox Macintosh.(87.0 (64-bit)) OS 10.12.6

Clean all your caches.

[infograf768]

@PhilETaylor
I know you have Mac OS 10.13.
Please test this PR on Firefox.

[ghost]

It is working here on Firefox Macintosh.(87.0 (64-bit)) OS 10.12.6

then there is a failure on my side, sorry.

[Quy]

@sandramay0905 Try clearing your browser's cache.

[ghost]

I have tested this item ✅ successfully on bff5a71


Private Modus of firefox was the solution. Not true, got at another test similar problems. Best solution seems #32992 (comment)
Thanks for the help at all.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/32992.}

[infograf768]

RTC

Tks for testing

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/32992.}