? Success

User tests: Successful: Unsuccessful:

avatar Bakual
Bakual
22 Jun 2015

Issue

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:
before
After:
after
That being said, in RTL it looks currently like this:
rtl-before
and with my PR:
rtl-after

Testing

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..

Backward Compatibility

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".

avatar Bakual Bakual - open - 22 Jun 2015
avatar Bakual Bakual - change - 22 Jun 2015
Status New Pending
avatar joomla-cms-bot joomla-cms-bot - change - 22 Jun 2015
Labels Added: ?
avatar Bakual
Bakual - comment - 22 Jun 2015

@N6REJ @infograf768 Since you originally proposed that code, can you say if it's still needed or not?

avatar infograf768
infograf768 - comment - 22 Jun 2015

@Bakual
I indeed made some comments at one time on the original PR #4372, but did not originally propose the code nor tested it before merge and I did not merge it.

After this PR, this is what I get in LTR and RTL for Protostar:

LTR:
screen shot 2015-06-22 at 18 13 27

RTL
screen shot 2015-06-22 at 18 14 08

As you can see, we do have a slight alignment difference.

avatar Bakual
Bakual - comment - 22 Jun 2015

@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 :smile:

avatar wilsonge
wilsonge - comment - 22 Jun 2015

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)

avatar Bakual
Bakual - comment - 22 Jun 2015

@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.

avatar dgt41
dgt41 - comment - 22 Jun 2015

@Bakual finder maps had some <dd> but I don’t remember if there were some icons there

avatar Bakual
Bakual - comment - 23 Jun 2015

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 :smile:

avatar infograf768
infograf768 - comment - 23 Jun 2015

@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

avatar Bakual
Bakual - comment - 23 Jun 2015

Ah, but that's completely unrelated to this PR then.

avatar infograf768
infograf768 - comment - 23 Jun 2015

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.

avatar N6REJ
N6REJ - comment - 25 Jun 2015

@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.

avatar N6REJ
N6REJ - comment - 25 Jun 2015

btw, sorry if my code was crap, I thought I had done a good job

avatar Bakual
Bakual - comment - 25 Jun 2015

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.

avatar Kubik-Rubik Kubik-Rubik - alter_testresult - 9 Jul 2015 - infograf768: Tested successfully
avatar Kubik-Rubik Kubik-Rubik - test_item - 9 Jul 2015 - Tested successfully
avatar Kubik-Rubik Kubik-Rubik - change - 9 Jul 2015
Labels Added: ?
avatar Kubik-Rubik
Kubik-Rubik - comment - 9 Jul 2015

Thank you @Bakual! Merged.

avatar zero-24 zero-24 - close - 9 Jul 2015
avatar Bakual Bakual - change - 9 Jul 2015
Status Pending Closed
Closed_Date 0000-00-00 00:00:00 2015-07-09 20:04:26
Closed_By Bakual
avatar Bakual Bakual - close - 9 Jul 2015
avatar zero-24 zero-24 - change - 14 Oct 2015
Labels Removed: ?

Add a Comment

Login with GitHub to post a comment