? NPM Resource Changed bug PR-4.3-dev Pending

User tests: Successful: Unsuccessful:

avatar sandewt
sandewt
20 Apr 2023

Pull Request for Issue #40306

Summary of Changes

Changes some code in _global.scss file

Testing Instructions

  • See #40306
  • See #40420
  • Build: npm ci
  • Clear the browser cache (historie) after the patch if necessary

Actual result BEFORE applying this Pull Request

Text NOT continues to be read.

Expected result AFTER applying this Pull Request

Text continues to be read.

Link to documentations

Please select:

  • Documentation link for docs.joomla.org:

  • No documentation changes for docs.joomla.org needed

  • Pull Request link for manual.joomla.org:

  • No documentation changes for manual.joomla.org needed

Thanks @joomlaphp and @dgrammatiko

avatar joomla-cms-bot joomla-cms-bot - change - 20 Apr 2023
Category Repository NPM Change
avatar sandewt sandewt - open - 20 Apr 2023
avatar sandewt sandewt - change - 20 Apr 2023
Status New Pending
avatar sandewt
sandewt - comment - 21 Apr 2023

@dgrammatiko for clarity

I used this code:

  &:not(.btn):hover,
  &:not(.btn):focus {
    color: var(--cassiopeia-color-hover);
  }

Instead of the code from your comment, see #40306 (comment)
Because this last one caused an npm error.

avatar N6REJ N6REJ - test_item - 21 Apr 2023 - Tested successfully
avatar N6REJ N6REJ - test_item - 21 Apr 2023 - Tested successfully
avatar N6REJ
N6REJ - comment - 21 Apr 2023

I have tested this item successfully on 3399b30


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40435.

avatar sandewt sandewt - change - 22 Apr 2023
The description was changed
avatar sandewt sandewt - edited - 22 Apr 2023
avatar sandewt
sandewt - comment - 22 Apr 2023

Drone: Build is failing
Does this have to do with this pr or just ignore this message?

avatar sandewt
sandewt - comment - 22 Apr 2023

@joomlaphp

I made the changes in the templates/site/cassiopeia/scss/blocks/_global.scss file. Do I need to make changes to another file as well?
Browser cookies + Joomla cookies cleared.

Please, give your comment here #40435

Here you will find information about testing: https://docs.joomla.org/Testing_Joomla!_patches

avatar richard67 richard67 - change - 22 Apr 2023
Labels Added: NPM Resource Changed bug PR-4.3-dev
avatar richard67 richard67 - alter_testresult - 22 Apr 2023 - N6REJ: Tested successfully
avatar sandewt
sandewt - comment - 28 May 2023

I would benefit from testing this pr, thanks in advance.

@joomlaphp

avatar joomlaphp
joomlaphp - comment - 30 May 2023

I would benefit from testing this pr, thanks in advance.

@joomlaphp

Hi @sandewt ,

No problem as there is no link:: <button type="button" class="btn btn-primary">Primary</button>

The problem persists after the link is given. All cookies etc. I cleaned: <a class="btn btn-primary" href="#" role="button">Link</a>

I'm good at CSS and I can fix it with user.css but it's so annoying :)
Regards

avatar sandewt
sandewt - comment - 30 May 2023

The problem persists after the link is given. All cookies etc. I cleaned:

Did you run npm ci after installing the patch ?

[EDIT @joomlaphp does the thumb mean that you run npm ci ? Yes or no ?]

avatar chmst chmst - test_item - 18 Jun 2023 - Tested successfully
avatar chmst
chmst - comment - 18 Jun 2023

I have tested this item successfully on 26b3009


This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/40435.

avatar N6REJ N6REJ - change - 18 Jun 2023
Status Pending Ready to Commit
avatar joomla-cms-bot joomla-cms-bot - edited - 18 Jun 2023
avatar N6REJ
N6REJ - comment - 18 Jun 2023

RTC

avatar obuisard obuisard - change - 18 Jun 2023
Labels Added: ?
avatar obuisard obuisard - close - 2 Jul 2023
avatar obuisard obuisard - merge - 2 Jul 2023
avatar obuisard obuisard - change - 2 Jul 2023
Status Ready to Commit Fixed in Code Base
Closed_Date 0000-00-00 00:00:00 2023-07-02 00:07:01
Closed_By obuisard
avatar obuisard
obuisard - comment - 2 Jul 2023

Thank you for the PR @sandewt :-)

avatar sandewt
sandewt - comment - 2 Jul 2023

Thanks all.

avatar brianteeman
brianteeman - comment - 19 Jul 2023

This needs to be reverted as it caused #41153 and #41172

avatar sandewt
sandewt - comment - 19 Jul 2023

This needs to be reverted as it caused #41153 and #41172

That's just the question. These both issues (#41153 and #41172) are easy to solve with some extra css code.

avatar sandewt
sandewt - comment - 22 Jul 2023

This needs to be reverted as it caused #41153 and #41172

I'm looking for a solution, my finding is the following:

The :not() CSS pseudo-class represents elements that do not match a list of selectors. See: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

In this case these are the buttons (.btn) that are excluded, what the desired behavior is. See the code below.

a:not(.btn):hover, a:not(.btn):focus {
  color: var(--cassiopeia-color-hover);
}

So it's strange (irrelevant) that elements in the footer that have nothing to do with a button, act on it.

This justifies not undoing this pr.

@brianteeman what is your opinion ? Do you have another solution for this pr ?

avatar brianteeman
brianteeman - comment - 22 Jul 2023

you misunderstood the css

a:not(.btn):hover, a:not(.btn):focus {
  color: var(--cassiopeia-color-hover);
}

in english that says

when you hover over any link that is not a button then set the color to blue

So the color of the links in the footer and the back-to-top (which is a link not a button) change to blue when you hover.

avatar brianteeman
brianteeman - comment - 22 Jul 2023

They did not before because they were set by the css

.footer a {
    color: currentColor;
}

but the change made in this PR override that

avatar sandewt
sandewt - comment - 23 Jul 2023

but the change made in this PR override that

That's why I want to extend the css, because I have no other solution for this PR.

.footer a, .footer a:focus, .footer a:hover {
  color: currentColor;
}
avatar obuisard
obuisard - comment - 1 Aug 2023

Have you tried to add?

.footer a:not(.btn):hover, .footer a:not(.btn):focus {
  color: currentColor;
}
avatar sandewt
sandewt - comment - 2 Aug 2023

Have you tried to add?

Yes, I have replaced this pr with your code proposal.
And it works. ?

[EDIT It doesn't work on any other website ? ]

avatar sandewt
sandewt - comment - 3 Aug 2023

Have you tried to add?

If you meant this suggestion only for the footer, we'd better have the discussion here: #41172

avatar obuisard
obuisard - comment - 14 Aug 2023

Have you tried to add?

If you meant this suggestion only for the footer, we'd better have the discussion here: #41172

No, I meant to add the specific code for the footer to complement this PR and fix all related issues at once.

avatar jackal-kr
jackal-kr - comment - 16 Aug 2023

This needs to be reverted as it caused #41153 and #41172

That's just the question. These both issues (#41153 and #41172) are easy to solve with some extra css code.

Hello, i have those two also after upgrade to 4.3.3 - can you please help me with the workaround in user.css? I am new to css and joomla so that fixing myself will take some time... thanks a lot!

also any idea, when these two will be fixed? in 4.4.4?,,,

avatar sandewt
sandewt - comment - 16 Aug 2023

Have you tried to add?

Yes, but not with the desired result.

No, I meant to add the specific code for the footer to complement this PR and fix all related issues at once.

Sorry @obuisard , it's not quite clear to me what you mean. If you would like to make the PR in question. I'll test.

avatar obuisard
obuisard - comment - 16 Aug 2023

also any idea, when these two will be fixed? in 4.3.4?

No, it won't, the version is already in RC phase, any fix will have to go to 4.3.5.

avatar obuisard
obuisard - comment - 16 Aug 2023

Sorry @obuisard , it's not quite clear to me what you mean. If you would like to make the PR in question. I'll test.

Ok, I'll give it a try (probably not today) and see if can come up with a fix that takes care of everything.

avatar obuisard
obuisard - comment - 17 Aug 2023

I was starting to look for a solution to fix this, but, to be honest, I cannot even replicate the initial issue stated in #40306.

image

My fix, in this instance, would be to revert this PR, as suggested by Brian @brianteeman early on.

Ugur @joomlaphp, before we do such a thing, could you share the URL of the site where you had the issue in the first place? I don't want to dismiss any issue and I need to see if your initial issue was not related to something else.

avatar sandewt
sandewt - comment - 26 Aug 2023

This needs to be reverted as it caused #41153 and #41172

I think this is the overall solution:

Change the code of this pr

a:not(.btn):hover, a:not(.btn):focus {
  color: var(--cassiopeia-color-hover);
}

in

a:not([class]):hover, a:not([class]):focus {
  color: currentColor;
}

We (@RickR2H and I) have tested this code in the PBF.

[EDIT I have tested in 4.4.0-alpha5-dev + 4.3.5-dev]

avatar sandewt
sandewt - comment - 27 Aug 2023

I was starting to look for a solution to fix this, but, to be honest, I cannot even replicate the initial issue stated in #40306.

@obuisard I can reproduce this issue in J4.3.5-dev, see:

Schermafbeelding 2023-08-27 105721

Method:
Create a custom module in the banner position, with the following button code:
<p><a class="btn btn-success" href="#!">Get started</a></p>

I changed the code to the original one:
\joomla\build\media_source\templates\site\cassiopeia\scss\blocks_global.scss

Line 63:
&:hover,
  &:focus {
    color: var(--cassiopeia-color-hover);
  }

Run: npm ci

avatar sandewt
sandewt - comment - 13 Sep 2023

I think this is the overall solution:

I am waiting for response(s), if ok then I will make a new PR.

avatar obuisard
obuisard - comment - 13 Sep 2023

I am waiting for response(s), if ok then I will make a new PR.

Yes, if you make a new PR to fix the issue, then we can have people test it. Thanks @sandewt !

avatar sandewt
sandewt - comment - 14 Sep 2023

Please test PR #41749

Add a Comment

Login with GitHub to post a comment