[#27298] - Replace inline styles with classes (joomla#27297)
- Fixed in Code Base
- 23 Dec 2019
- Medium
- Build: 4.0-dev
- # 27298
- Diff
- chang-zhao:patch-1
- Pending Hound Hound is busy sniffing around... Details
User tests: Successful: Unsuccessful:
Pull Request for Issue #27297 .
Summary of Changes
Replacing the usage of some inline styles (especially "display: none" /"display: block") with consistent usage of .classList.add('hidden') / .remove / .toggle, in order to reduce 'unsafe-inline' styles which hinder Content-Security-Policy.
Testing Instructions
Hiding and unhiding elements should behave properly.
Expected result
Actual result
Documentation Changes Required
The class .table-row { display: table-row} has been added to the templates.
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Administration com_banners com_categories com_contact com_content com_fields com_joomlaupdate com_languages com_menus com_modules com_newsfeeds com_plugins com_tags com_users com_workflow Templates (admin) JavaScript Repository NPM Change |
| Labels |
Added:
NPM Resource Changed
?
|
||
What about all the table header th with style="width:xx%"
Should these go as well. If so then perhaps with a helper class w1, w5, w10, w33 etc
What about all the table header th with style="width:xx%"
Should these go as well. If so then perhaps with a helper class w1, w5, w10, w33 etc
Yes. I think it might go in a next patch. Tailwind CSS library is a popular tool for adding such atomic classes, and it uses a particular system for naming them:
https://tailwindcss.com/docs/width/
I think we could use the same standard, to keep it from confusions:
.w-1/100 { width: 1% }
.w-1/10 { width: 10% }
.w-1/3 { width: 33% }
.w-4/10 { width: 40% }
and the like.
PS (14:01 GMT). It's a bit of inconvenience though that in .css and in js selectors slashes should be escaped, like this: .w-1\/10 — but not in HTML.
Bootstrap includes support for 25% w-25, 50% w-50, 75% w-75, 100% w-100, and auto w-auto by default.
https://getbootstrap.com/docs/4.4/utilities/sizing/
| Status | Pending | ⇒ | Fixed in Code Base |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2019-12-23 12:21:22 |
| Closed_By | ⇒ | wilsonge |
Think just keeping this to hidden classes is fine for this patch. So merging this.
Thanks for your first PR to Joomla!!
@chang-zhao Please fix admin login form not displaying.
@chang-zhao Please fix admin login form not displaying.
@chang-zhao Please fix admin login form not displaying.
How it's intented to works ? The fields username and password are still not displayed
@xillibit Are you testing with the nightly build? https://developer.joomla.org/nightly-builds.html
my Joomla! 4.0 install is a git clone of 4.0-dev tree and i just updated before posting my comment above
same for me, its always hidden. Why is there a hidden class on the form.
It was a false alarm, i deleted my Joomla! and re-done a clean install, now it works
Thank you for making your first pull request to Joomla