User tests: Successful: Unsuccessful:
Our icomoon.less file contains some CSS rules which have no business in that file. The same CSS rules also are added to sprites.less where they even make less sense (we don't use that file at all) and in the bootstrap-rtl.less file.
Since we generate our template CSS files based on the LESS files, those rules also are present in Hathor, Isis and Protostar template.css files.
I saw this when I tried to update our media/jui/css/icomoon.css based on its media/jui/less/icomoon.less file as it was badly out of sync.
After investigating I found that it was introduced with #5512 (which is based on #4372). That PR did apply those rules wrongly in the icomoon.less file, when it should have been done in the template.less file for Protostar instead.
Next step was to figure out what the rules are effectively doing, and I found that they can be safely removed. I guess this is something which eventually got fixed elsewhere as well, making those rules unneeded.
This PR proposes to remove the following CSS rules quite specific to certain icon useage from the global LESS files.
dd > span[class^="icon-"] + time,
dd > span[class*=" icon-"] + time{
margin-left: -.25em;
}
dl.article-info dd.hits span[class^="icon-"],
dl.article-info dd.hits span[class*=" icon-"]{
margin-right: 0;
}
There is only a small difference in the spacing however since it's the same space for all icons I don't see an issue.
Currently:
After:
That being said, in RTL it looks currently like this:
and with my PR:
The only place where I found this rules being active is the "Article Details" section in frontend. One rule targets the calendar type entries (<time>
tags) , the other is the hits icon.
I couldn't find any use of it in the backend, so Isis and Hathor should be unaffected..
As that file is surely is used by some 3rd party templates, it will change the spacing there as well as soon as the template.css is generated again from LESS. Which usually is when the template provided creates a new release. Other than that, nothing will "break".
Status | New | ⇒ | Pending |
Labels |
Added:
?
|
@infograf768 You did suggest that code here: #4372 (comment). But I guess nobody really tested it ;-)
I only see an alignment issue between the author/category elements and the following dates/hits because the former have no icons. But that didn't change with this PR. We probably should add icons to those as well to make it look nice. But that would be another PR.
The eye and calendar icon however align fine imho. Or I need glasses
You might need to add it back in ISIS as well - as we do use some icons there (although I don't think there were pressing issues at the time)
@wilsonge Show me where those icons are used in a definition group (<dd>
tag) or even in an article-info section in the backend. The CS is quite specific to where it applies.
I doubt we use that anywhere together with icons in the backend. At least I didn't find any place when I had a quick look. So Isis and Hathor should be fine.
As said, a seach didn't bring up anything in backend.
In frontend it's only the article details section where this applies, and there it actually looks better without the rules (especially for RTL).
If someone thinks there is another place, please show me. I did search three times by now and still don't see any other place where this could be used
@Bakual
I meant the alignment of "Details" vs the column of infos (with or without icons).
We would need there a RTL-specific margin-right: 9px
instead of a margin-left: 9px
picked from the ltr template.css
If we merge my PR #7200 we will be able to solve this by just adding
.rtl dd {
margin-left: 0px;
margin-right: 9px;
}
in the new file template_rtl.less and run generatecss.php
Ah, but that's completely unrelated to this PR then.
Not totally unrelated. I guess at the time, these styles:
dd > span[class^="icon-"] + time,
dd > span[class*=" icon-"] + time{
margin-left: -.25em;
}
dl.article-info dd.hits span[class^="icon-"],
dl.article-info dd.hits span[class*=" icon-"]{
margin-right: 0;
}
should maybe only have been added to bootstrap-rtl.less as this was the only way to introduce something RTL specific in Protostar (this, at last, will change grace to #7200 )
(As you saw, I did not follow up on the original PR)
Testing protostar RTL, this PR here is fine for me.
@Bakual those class's were originally added to the .less ( unless someone removed them ) and were in place because there was a lot of hard coded spacing between the icons and icon content. .25em is a which is NOT equal to a space. ( or visa versa I forget ) it was also put int he .rtl @infograf768 request for rtl. The only thing it control was the spacing between icons and content. They were put in icomoon to replace hardcoded spacing that was in there, but I can agree it shouldn't be there. I suspect someone put the hard coded spaces back in.
btw, sorry if my code was crap, I thought I had done a good job
btw, sorry if my code was crap, I thought I had done a good job
It wasn't crap, just imho in the wrong place. But sicne it apparently has no effect anymore we can remove it safely.
Labels |
Added:
?
|
Status | Pending | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2015-07-09 20:04:26 |
Closed_By | ⇒ | Bakual |
Labels |
Removed:
?
|
@N6REJ @infograf768 Since you originally proposed that code, can you say if it's still needed or not?