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.
Labels |
Removed:
?
|
I changed the id of the selector to "adminForm" so that it would only be applied to the backend.
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
Labels |
Added:
?
|
http://caniuse.com/#search=vh
vh is not supported in IE8 and joomla still supports it https://docs.joomla.org/Joomla_Browser_Support
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?
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).
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.
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.
(Edits just need a little time to be updated )
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.
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
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.
Category | UI/UX | ⇒ | Feature Request UI/UX |
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2016-03-21 14:23:58 |
Closed_By | ⇒ | brianteeman |
As it is (now) possible to Press F10 to toggle Full Screen editing I am closing this issue
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.
Usefull tiny fix! Should be included!
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