?
avatar JoshuaLewis
JoshuaLewis
20 Mar 2015

Joomla 3.4 currently uses a static 300px height for the CodeMirror editor. Scrolling through lots of code when making changes to a template is now more difficult as a result of it being a static size. Why not use something that works great in all browsers? I came up with the following code that seems to work well on both big and small screens:

.view-template #adminForm .CodeMirror {
height: calc(100vh - 300px);
height: 300px\9; /* EI8 Support */
}

Technically we could do without the calc function if there was concerns about browser compatibility. CSS3 introduces the viewport method of specifying an object height allowing us to directly declare it as 100% to view according to your screen size. I would have created a github change for this, but I'm still trying to understand how to use it with the Joomla project. I attached two screen shots showing what the changes would look like.

Votes

# of Users Experiencing Issue
1/1
Average Importance Score
3.00

avatar Josh-Lewis Josh-Lewis - open - 20 Mar 2015
avatar Josh-Lewis Josh-Lewis - change - 20 Mar 2015
Labels Removed: ?
avatar Josh-Lewis Josh-Lewis - change - 20 Mar 2015
The description was changed
avatar brianteeman
brianteeman - comment - 20 Mar 2015

Dont forget that codemirror can also be used as the default editor for all
content in both the front end and the admin. Its not just for the template
manager

avatar Josh-Lewis Josh-Lewis - change - 20 Mar 2015
The description was changed
avatar Josh-Lewis Josh-Lewis - change - 20 Mar 2015
The description was changed
avatar Josh-Lewis
Josh-Lewis - comment - 20 Mar 2015

I changed the id of the selector to "adminForm" so that it would only be applied to the backend.


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6510.
avatar brianteeman
brianteeman - comment - 20 Mar 2015

Josh sorry I think you missed what I was saying. CodeMirror can be set as
the default WYSIWYG editor for joomla. It is not just for the template
manager

avatar brianteeman brianteeman - change - 20 Mar 2015
Labels Added: ?
avatar brianteeman
brianteeman - comment - 20 Mar 2015

http://caniuse.com/#search=vh
vh is not supported in IE8 and joomla still supports it https://docs.joomla.org/Joomla_Browser_Support


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6510.
avatar Josh-Lewis
Josh-Lewis - comment - 20 Mar 2015

I was afraid of that, hence why I mentioned CSS3. Good to know that Joomla 3 still supports IE8. Perhaps Bootstrap 4 can coincide with Joomla 4 which BS4 does not support IE8. ;-) Anyways, right now the editor size is 300px which is difficult to navigate lots of code. Any ideas on what would be a good alternative for working with IE8 browsers and being mobile friendly?

avatar brianteeman
brianteeman - comment - 20 Mar 2015

Sorry I dont know but I really think that you should ONLY be targetting the use of codemirror in the template manager to achieve what you want (not saying if it is a good idea or not).


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6510.
avatar JoshuaLewis
JoshuaLewis - comment - 21 Mar 2015

Here's a version that only affects the template manger, and should work well with IE8:

.view-template #adminForm .CodeMirror {
height: calc(100vh - 300px);
height: 300px\9; /* EI8 Support */
}

Even if the CSS hack for IE8 fails for some reason in rare scenarios, the editor still displays well without a defined height. I updated my original post.


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6510.
avatar JoshuaLewis
JoshuaLewis - comment - 21 Mar 2015

I see that when I edit my posts on GitHub it does not translate over to the Jtracker. I updated the first post on GitHub to have the latest version that works well on IE8, only affects the template manager, and is mobile friendly.


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6510.
avatar brianteeman
brianteeman - comment - 21 Mar 2015

(Edits just need a little time to be updated )

avatar JoshuaLewis
JoshuaLewis - comment - 21 Mar 2015

I see, probably due to caching. Anyways, does the Joomla project accept CSS variations that use "\9" for older versions of IE? Without them it's quite difficult to make something responsive and work well with IE8.


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6510.
avatar brianteeman
brianteeman - comment - 21 Mar 2015

Maybe I am being thick but where are you putting this css and what exactly are you expecting to change.
I added it to the template.css for the isis template and went to the template manager and opened a file for editing and observed NO change in the height of the codemirror editor


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6510.
avatar JoshuaLewis
JoshuaLewis - comment - 21 Mar 2015

I would put it in: root/administrator/templates/isis/css/template.css
On line 7982 is where the editor class is mentioned. So I would put this code on line 7989 (just after the second editor selector).

The intent is to make the editor height 100% minus 300px. This allows for easier code modifications in the template manager when dealing with lots of code. Right now the Isis template is thousands of lines of code, scrolling through it on a 300px height editor is a bit harder to navigate as a result. As seen above there is a fallback method for IE8. Be sure to clear your cache to see it in action when applied to the file mentioned at the top of this post.

Regarding working with GitHub/Jtracker, I assume in the future I attach the modified file(s) to the original post, mention what it does and say the path of the file. But are there additional steps needed? I'm not well versed with merges and such.


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6510.
avatar brianteeman brianteeman - change - 25 Mar 2015
Category UI/UX Feature Request UI/UX
avatar brianteeman brianteeman - change - 21 Mar 2016
Status New Closed
Closed_Date 0000-00-00 00:00:00 2016-03-21 14:23:58
Closed_By brianteeman
avatar brianteeman brianteeman - close - 21 Mar 2016
avatar brianteeman brianteeman - close - 21 Mar 2016
avatar brianteeman
brianteeman - comment - 21 Mar 2016

As it is (now) possible to Press F10 to toggle Full Screen editing I am closing this issue


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6510.

avatar JoshuaLewis
JoshuaLewis - comment - 21 Mar 2016

While the F10 method is great, I don't see the advantage of keeping it a fixed size by default (it's some what small right now). With a comment field it makes a lot of sense, but with a page dedicated to code where it is likely for there to be hundreds if not thousands of lines it doesn't make as much sense.

avatar skid648
skid648 - comment - 26 May 2016

Usefull tiny fix! Should be included!


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/6510.

Add a Comment

Login with GitHub to post a comment