[#45794] - [6.0] Atum - add nice transition to open/close details
- Fixed in Code Base
- 6 Aug 2025
- Medium
- Build: 6.0-dev
- # 45794
- Diff
- hans2103:6.0-Atum-details-summary
User tests: Successful: Unsuccessful:
Pull Request for no issue.
Summary of Changes
This PR containing a CSS change add a nice open/close transition on the <details> element.
It will work in Chrome and Edge. It will not work (yet) in Safari nor Firefox and will neglect this feature.
https://nerdy.dev/open-and-close-transitions-for-the-details-element
Testing Instructions
-
Joomla Administrator > System > Global Configuration > Tab = Text Filters
-
Open and close one or all four items with a triangle before
-
Watch the transition of opening and closing
-
Apply PR
-
run
npm run build:css -
Repeat opening and closing
-
Watch the difference
Actual result BEFORE applying this Pull Request
Screen.Recording.2025-07-27.at.15.59.30.mov
Expected result AFTER applying this Pull Request
A nice transition is visible in both Crome and Edge browser
Firefox and Safari will remain as shown in "BEFORE" state and will use the nice transition once they implemented https://caniuse.com/?search=interpolate-size%3A%20allow-keywords
Screen.Recording.2025-07-27.at.15.59.02.mov
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
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Repository NPM Change |
There is a jerky motion when the details is collapsed. I set the duration to 1.2s so it can be easily seen in this video
chrome_16j1mstTDx.mp4
@brianteeman I see the jerky motion and will dive into it trying to solve it.
update:
caused by:
| Labels |
Added:
NPM Resource Changed
PR-6.0-dev
|
||
@brianteeman solved issue by replacing margin-top by padding-top.
I have tested this item ✅ successfully on 7b78a57
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45794.
jerky motion is now resolved - thanks
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45794.
I have tested this item ✅ successfully on 7b78a57
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45794.
| Status | Pending | ⇒ | Ready to Commit |
RTC
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45794.
| Labels |
Added:
RTC
|
||
The CSS linter (stylelint) is happy now as the composer updates have been merged up from 5.4-dev to 6.0-dev and the branch of this PR has been updated.
Update: no, there is an issue left, see my next comment.
@hans2103 The CSS linter has one problem left after the others have disappeared after the upmerge of the updated stylelint: https://github.com/joomla/joomla-cms/actions/runs/16757973888/job/47445675587?pr=45794
Could you fix that?
| Status | Ready to Commit | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2025-08-06 08:13:55 |
| Closed_By | ⇒ | softforge |
Thank you for all the hard work you put in to this and the testers for their time
Merge of this PR has to wait until PR #45784 has been merged
stylelint needs to be updated first