Thanks, will give this a test later on in the day

I have tested this item ✅ successfully on 2c14e62

@ciar4n the tags seems to be broken for the typing text:

Before the PR on the edit article screen the fields for tags and notes are the same size
After the PR the tags field is not as high as the notes field

Chosen selects seem to be not as high as before. That is apparent especially if combined with an appended button:
Original:

After applying PR:

@dgt41 @brianteeman Thank you. Sorted.

@Bakual Would you have any details on how I can recreate this field?

I have it in my extension as a custom field. I don't think something similar is used in core, but it for sure could be used in other 3rd party extensions. As long as the chosen select has the same height as the other input fields, it will work ?
If you want to test with my extension, it's free: http://www.sermonspeaker.net/download/sermonspeaker-component/sermonspeaker-component-5-5-2.html. After installation, look at the sermon form and there the "files and details" tab. You will see several of those selects there.

@Bakual Thank you. This brought to light an issue that should be now amended.

@ciar4n Thanks, issue is indeed fixed now.

For arguments sake here's a sample shot from a slightly less flat version of the same thing. Pretty much just 2 lines of CSS in the difference from the PR however may be suitable as a go between to test the water with a flat UI.

@ciar4n that looks like my initial proposal (almost, I used transparent). Can you make a screenshot with transparent the background? I think it would work nicely

EDIT: I was looking at the status published micro button, which obviously is not what you are proposing here, so discard my comment.

Sure. Transparent toolbar behind buttons or the buttons themselves (remove boxed icons)?

I like the boxed icons. It's a refreshing change.

@ciar4n I was thinking transparent bg but keeping the boxed part for the icon-span with the current bg

Like this? Button color transparent with a slight opaque gradient.

@ciar4n the chosen will be better like this, the buttons not really...

The slight grad on chosen with toolbar left as the PR.

@ciar4n I meant the inner part of the chosen to match that of the search next to the search tools button (transparent/white). Personally I am against grads, but that's just my preference

I'd be of the same thinking myself. Little steps to a flat design might just make the transition easier for some.

@ciar4n 3.7 might be the last of the 3 series, so I will go with take the pill once instead of small doses

@ciar4n couple more glitches on chosen:

@ciar4n and also the rtl buttons need some attention:

Thank you @dgt41

Bit of an issue replicating the 'Status' issue. Could you detail where you found this? Displaying fine in articles, modules and categories.

@ciar4n try creating a new article, the status should be on the right panel

@dgt41 Are you loading the latest commit? Should look like the following...

@ciar4n probably some short of caching on my side I guess. I can confirm that there is no problem on chosen!
Sorry for the false alarm

@dgt41 No bother. Thank you for the update. I'll take a look at the RTL buttons.

@ciar4n what do you think about:

.chzn-container-single .chzn-single {
   background-color: #fff;
}

which gives:

The background of chosen element is better to match those of the rest of the input elements. At least my preference

@dgt41 Looks good. I'll add it in there!

@ciar4n if you do so you need to change also this

.chzn-container .chzn-results {
background-color: #fff;
}

RTL support added along with an amendment to the chosen element background

I have tested this item ✅ successfully on f0cace7

in RTL shouldn't "Options" and "Help" buttons be on the other side?

@ciar4n just found another glitch on the modal for article versions:

#toolbar .btn break the padding of the modal buttons.

This should fix it:

        #toolbar .modal .btn {
            padding: 4px 12px;
        }

@andrepereiradasilva they are:

ok just saw the image above and they aren't. ignore my comment them

@andrepereiradasilva My fault.. I hadn't set dir="rtl" for the screenshot which made it inaccurate..

@dgt41 Thank you. This along with some other minor issues should be now amended.

i'm no designer nor will try to be, but i like a clean flat design. ?
i leave this for those who know about this: designers

Is this ready for testing now? Looks good so far

@zero-24 Yes should be good to go!

I have tested this item ✅ successfully on ac1151e

looks ok to me. I have not tested a direction change.

I have tested this item ✅ successfully on ac1151e

I have tested this item ✅ successfully on ac1151e

Since all the reported glitches are fixed I am going to move this to RTC

Great work @ciar4n. Thank you!

Is it correct and good practice to override the entire chosen.css file. Surely we should only override the classes that change. If we override everything then its going to make updating chosen.css hard/impossible - its hard enough as it is

@brianteeman why? chosen comes with some very generic css. Joomla on the other hand is tightly coupled to bootstrap, icomoon, etc. I don't see a reason why Joomla should ever use generic css files when the result :

• is disappointing
• increases http requests.

I mean templates have the ability to override assets (js,css), so I don't see something odd been done here. But, to be fair, it would be way better is chosen had a less/scss instead of a css file. In such case the @extends would be the way to go. Unfortunately that's not the case

Already explained why. Updating!

And chosen.scss is available

And an http request in the admin is really not an issue

I had to check their repo (haven;t done for some time) and saw that there is a scss version, so your right. Bad news joomla don't uses scss and there is no way to compile that. So I guess someone needs to make a PR with node, npm, node-sass and a script to create css files out of this chosen scss (maybe with specific extends for each template) and the original generic css in the media/css.
@C-Lodder what do you think?

Except it's not that simple

elaborate please

See the recent merge of a chosen update that I've mentioned before.

On 1 Sep 2016 6:32 p.m., "Dimitri Grammatikogianni" <
notifications@github.com> wrote:

elaborate please

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#11832 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8X7UHBf0SlMWg6FjMkbj828e0999ks5qlwwfgaJpZM4JvPVL
.

Forget SCSS in Joomla 3.x, I'll be doing that for J4.x where I can re-write it all

@C-Lodder what I mean is maybe replace generates.php with a node script (less and scss)

@brianteeman @dgt41 Rather than editing chosen.css, we could simply override it where needed in the template.css(less)? Chosen.css is nicely designed and quite modular which would leave overrides to be minimal. Considering the nature of the changes here and presuming chosen.css doesn't change drastically, overrides should continue to work with future chosen.css updates. Easily amended if issues do arise.

Not for J3.x though. For 4.x I'll use Node JS for everything like I did before. I think for now, keep on track and either stick with that we have in this PR or do what @brianteeman suggested. Either way, I'm not bothered

@C-Lodder if you do the less file approach I will test it. @brianteeman what do you think?

@ciar4an exactly my point.

I'll sort that out tomorrow

@dgt41 @C-Lodder @brianteeman Quick question. I presume the same changes should be applied to the installation? Is it best to create a separate PR?

Oh yeah, I forgot about the installation. Probably best to add it to this PR

@C-Lodder Cheers. I'll get a look at it over the weekend.

Changes applied to installation template.css. Chosen.css is overridden within the installation template.css. To do so JS loaded before CSS in the index.php. Jury seems to be still if alternating the loading of JS and CSS makes any difference.

Removing RTC for now as there is ongoing work

To do so JS loaded before CSS in the index.php

Why do you need that? (by the way is not easy: css tags always inserted before js, check the head.php https://github.com/joomla/joomla-cms/blob/staging/libraries/joomla/document/renderer/html/head.php#L133)
What is the problem?

Edit: I figure out what you trying to achieve here: template.css needs to be loaded after chosen.css, so what you are doing is fine

@ciar4n also it would be better if you open another PR for the installation. It's gonna be way harder to get tests if people need to do multiple things...

@dgt41 As suggest I have created a new PR #11917. Should I remove the same changes here?

Yes please

On 4 September 2016 at 08:10, Ciaran Walsh notifications@github.com wrote:

@dgt41 https://github.com/dgt41 As suggest I have created a new PR
#11917 #11917. Should I remove
the same changes here?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#11832 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABPH8eZXxdmxC6wVRBonzE2smcDVoSKCks5qmm7RgaJpZM4JvPVL
.

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

@brianteeman Done!

@C-Lodder what's the status of the chosen work?

@brianteeman does this need other tests?

@wilsonge - I'll start doing that in a sec

Just looked at the diff between the 2 CSS files, so sorry, but I'm gonna pass on looking through that to LESSify it:

If nobody else wants to do it, leave as it and merge what we have in 3.7 cause I doubt we'll be updating chosen again in the 3.x series.

Well on the basis we literally have just updated it in 3.7 branch I disagree with the assessment we won't be updating it again

@wilsonge - feel free to convert all that to LESS then, I'm going to try and enjoy the rest of my Sunday

@wilsonge why do we make such a big deal this css? I mean if it will be broken in the future we will patch/fix it, regardless of what the original file contains.
@C-Lodder utilising the bootstrap mixins should make things a lot easier

I separated these changes from chosen.css on #11917 so not huge deal for me to extend that to here. I'll have a look at it in the morning.

@ciar4n #11917 you are still using the provided png not the icomoon font, which might be ok for installation, but here I really like the idea of reusing an already loaded asset

@dgt41 Yes I agree. The icon font you implemented is much better for Isis and I will ensure to continue using it. Considering the minimal usage I kept with the png for the installation.

Chosen.css has been removed from Isis with all chosen.css repaint styling added to template.less via chzn-override.less

Advantages

• Easier upgrade of chosen.css
• All updates now in LESS
• Chosen repaint linked to variables.less

Repaint to chosen.css can be disabled by commenting out the following in template.less

@import "chzn-override.less";

Will need to be tested again. Check different states of dropdown selects where issues may have been missed. Should be all ok thou.

@ciar4n I realise that I had created a less file back in 2014: https://github.com/dgt41/joomla-cms/blob/ce86ecc9c79d153d886cadeea61e36213e52147f/administrator/templates/isis/less/chosen.less
Will test it later on today. Thanks again!

@dgt41 that will be out of date now

I lessified chosen over the weekend if you want to use it

@C-Lodder We wouldn't need it here as currently we are just overriding the default chosen.css where needed and not actually loading a new chosen.css within Isis which was the case prior to the latest commit.

I have tested this item ✅ successfully on 5b07b4d

I have tested this item ✅ successfully on 5b07b4d

RTC

Thanks guys for all the testing! :)

I have tested this item ✅ successfully on 5b07b4d

better late than never :)

@ciar4n could you have a look at the conflicts and resolve them, thanks!

@ciar4n please have a look into: ciar4n#2 for the merge conflicts

I did agreed with @ciar4n to recreat that PR against 3.7.x to fix the merging conflicts so I'm closing here. Thanks! #12319