moodle/moodle
3
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-08-05 08:56:36 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

MDL-30637 Simplify moodle forms

Browse source 
Make the forms easier to use and navigate by adding functionality to
collapse and extend form sections (headers). The logic is as follows:

If form contains 2 and less sections (headers):

* Display the form as non-collapsible at all.
* The point above can be overridden if developer marks the section as expanded
  in form definition (e.g. $mform->setExpanded('foo'));

If form contains 3 and more sections (headers):

* always expanding the first section and closing all others by default;
* always expanding a section containing at least one "required" element;
* expanding any section which contains validation errors after submission;
* expanding any section which was previously open on previous submit (e.g. when
  adding new choices);
* expanding the section which is marked as expanded in form definition (e.g.
  $mform->setExpanded('foo');
This commit is contained in:
Ruslan Kabalin 2013-02-07 14:13:36 +00:00
parent 1918a2452e
commit a4067bfc48
3 changed files with 259 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

4
theme/base/style/core.css
View file

@ -234,6 +234,10 @@ a.skip:active {position: static;display: block;}
.mform fieldset.hidden {border-width:0;}
.mform fieldset.group {margin-bottom: 0}
.mform fieldset.error {border: 1px solid #A00;}
.mform fieldset.collapsible legend a.fheader {padding: 0 5px 0 15px; background: url([[pix:t/expanded]]) 2px center no-repeat;}
.mform fieldset.collapsed legend a.fheader {background: url([[pix:t/collapsed]]) 2px center no-repeat;}
.mform fieldset.collapsed.jsprocessed {border-width: 1px 0 0 0; padding: 0;}
.mform fieldset.collapsed.jsprocessed div.fcontainer {display: none;}
.mform .fitem {width:100%;overflow:hidden;margin-top:5px;margin-bottom:1px;clear:right;}
.mform .fitem .fitemtitle {width:15%;text-align:right;float:left;}
.mform .fitem .fitemtitle div {display: inline;}