CMS MADE SIMPLE FORGE

CMS Made Simple Core

 
Back Back to List

[#12300] Size of code and text/content boxes in all modules & views (vertical on screen size) is always too small (for my liking)

avatar
Created By: HJ. Nyffenegger (Hupi)
Date Submitted: 2020-04-26 06:19

Assigned To:
Resolution: None
State: Open
Summary:
Size of code and text/content boxes in all modules & views (vertical on screen size) is always too small (for my liking)
Detailed Description:
Whenever I edit content or code snippets, first thing I have to do is pulling
the bottom left corner of any of the input boxes to see enough content in
vertical direction. The input boxes are always too small for me. Now I get it,
some people may like it as it is, but I guess many users may have the same issue
with it as I do. Therefore, would it not be possible to have somewhere a default
setting which is adjusting that vertical size value to my liking? Then users
could set the default to 50 lines, 500px (or whatever measurement unit to be
used). Done.

History

Comments
avatar 
Date: 2020-04-26 10:55
Posted By: Matt Hornsby (DIGI3) (DIGI3)

Rather than larger, it probably makes more sense for a future admin theme to
take the screen height into consideration for this and have them be a bit
responsive. A height parameter in the content tag would also be more useful than
a user preference I think (some blocks tend to require more space than others.)

In the meantime, this is really easy to customize yourself, and is exactly what
the extcss folder was designed for. As per Rolf's excellent blog article -
https://cmscanbesimple.org/blog/customizing-admin-theme-without-hacking-files,
do the following:

Create a new folder at the webserver: website.com/admin/themes/OneEleven/extcss/
and in this new folder you create a new file named style.css and add something
like:

.mce-edit-area iframe {
    min-height: 400px;
}

You can be specific, too - for instance this is for a block with wysiwyg=false
(so it's now a textarea, not an iframe) that I want only a couple of lines to
show, but oneline=true didn't allow enough space:

#subheading {
    height: 50px;
}
avatar 
Date: 2020-04-28 06:38
Posted By: HJ. Nyffenegger (Hupi)

Hi Matt, taking the screen size into consideration is also a good idea. When I
think about, basically a sexy implementation would be a small button (probably
on the top right) on each multi-line input box, working as a "maximize" button.
Something like we all know from each window we open in Windows/MacOS. It would
then simply fullscreen the respective multi-line input box.

However your tip with the style.css is also working. Maybe this would be the
most simple addition for a future release. I created it with bellow contend (to
be refined), which works for me fine:

-------------
style.css
-------------

 /*** DEFINE SIZES OF EDIT AREAS ***/

	/*** MEDIA QUERIES ***/

	@media(max-width:767px){}

	@media(min-width:768px){}

	@media(min-width:992px){}

	@media(min-width:1200px){}
	
	@media(min-width:1600px){
		/* Content Input Area on Content Pages (Editor Area) */
		.mce-edit-area iframe {
			min-height: 600px;
		}
		/* Content Input Area on Content Pages (Source Code PopUp Window) */
		.mce-window {
			min-width: 800px;
		}
		/* Text/HTML Input Area on Content Pages */
		.cms_textarea {
			min-height: 600px;
		}
		/* Formbuilder Code Areas (Text/HTML) */
		.module_fb_area_wide {
			min-height: 600px;
		}
	}
	@media(min-width:2000px){
		/* Content Input Area on Content Pages (Editor Area) */
		.mce-edit-area iframe {
			min-height: 680px;
		}
		/* Content Input Area on Content Pages (Source Code PopUp Window) */
		.mce-window {
			min-width: 1000px;
		}
		/* Text/HTML Input Area on Content Pages */
		.cms_textarea {
			min-height: 680px;
		}
		/* Formbuilder Code Areas (Text/HTML) */
		.module_fb_area_wide {
			min-height: 680px;
		}
	}
	/*** END MEDIA QUERIES ***/