MDL-38574 qtype chooser: quick fix to make it fit on-screen.

MDL-32729 will provide a better fix for this, but we may as well apply
this quick fix on stable branches.
This commit is contained in:
Tim Hunt 2013-10-28 16:33:20 +00:00
parent e3552170da
commit c1db10b6d5
4 changed files with 37 additions and 4 deletions

View file

@ -1843,6 +1843,7 @@ function print_choose_qtype_to_add_form($hiddenparams, array $allowedqtypes = nu
echo "</div>\n"; echo "</div>\n";
echo '<div class="qtypes">' . "\n"; echo '<div class="qtypes">' . "\n";
echo '<div class="instruction">' . get_string('selectaqtypefordescription', 'question') . "</div>\n"; echo '<div class="instruction">' . get_string('selectaqtypefordescription', 'question') . "</div>\n";
echo '<div class="alloptions">' . "\n";
echo '<div class="realqtypes">' . "\n"; echo '<div class="realqtypes">' . "\n";
$fakeqtypes = array(); $fakeqtypes = array();
foreach (question_bank::get_creatable_qtypes() as $qtypename => $qtype) { foreach (question_bank::get_creatable_qtypes() as $qtypename => $qtype) {
@ -1862,6 +1863,7 @@ function print_choose_qtype_to_add_form($hiddenparams, array $allowedqtypes = nu
} }
echo "</div>\n"; echo "</div>\n";
echo "</div>\n"; echo "</div>\n";
echo "</div>\n";
echo '<div class="submitbuttons">' . "\n"; echo '<div class="submitbuttons">' . "\n";
echo '<input type="submit" value="' . get_string('next') . '" id="chooseqtype_submit" />' . "\n"; echo '<input type="submit" value="' . get_string('next') . '" id="chooseqtype_submit" />' . "\n";
echo '<input type="submit" id="chooseqtypecancel" name="addcancel" value="' . get_string('cancel') . '" />' . "\n"; echo '<input type="submit" id="chooseqtypecancel" name="addcancel" value="' . get_string('cancel') . '" />' . "\n";

View file

@ -21,11 +21,30 @@
#qtypechoicecontainer #chooseqtype {width: 35em;} #qtypechoicecontainer #chooseqtype {width: 35em;}
#qtypechoicecontainer #chooseqtypehead h3 {margin: 0;font-weight: normal;} #qtypechoicecontainer #chooseqtypehead h3 {margin: 0;font-weight: normal;}
#qtypechoicecontainer #chooseqtype .qtypes {position: relative;border-bottom: 1px solid #BBBBBB;padding: 0.24em 0;} #qtypechoicecontainer #chooseqtype .qtypes {position: relative;border-bottom: 1px solid #BBBBBB;padding: 0.24em 0;}
#qtypechoicecontainer #chooseqtype .alloptions {
overflow-x: hidden;
overflow-y: auto;
max-height: 400px;
max-height: calc(100vh - 8em);
width: 60%;
}
#qtypechoicecontainer #chooseqtype .qtypeoption {margin-bottom: 0; padding: 0.3em 0 0.3em 1.6em;} #qtypechoicecontainer #chooseqtype .qtypeoption {margin-bottom: 0; padding: 0.3em 0 0.3em 1.6em;}
#qtypechoicecontainer #chooseqtype .qtypeoption img {vertical-align: text-bottom;padding-left: 1em;padding-right: 0.5em;} #qtypechoicecontainer #chooseqtype .qtypeoption img {vertical-align: text-bottom;padding-left: 1em;padding-right: 0.5em;}
#qtypechoicecontainer #chooseqtype .selected {background-color: #FFFFFF;box-shadow: 0px 0px 10px 0px #CCCCCC;-webkit-box-shadow: 0px 0px 10px 0px #CCCCCC;-moz-box-shadow: 0px 0px 10px 0px #CCCCCC;} #qtypechoicecontainer #chooseqtype .selected {background-color: #FFFFFF;box-shadow: 0px 0px 10px 0px #CCCCCC;-webkit-box-shadow: 0px 0px 10px 0px #CCCCCC;-moz-box-shadow: 0px 0px 10px 0px #CCCCCC;}
#qtypechoicecontainer #chooseqtype .instruction, #qtypechoicecontainer #chooseqtype .instruction,
#qtypechoicecontainer #chooseqtype .qtypesummary {display: none;position: absolute;top: 0px;right: 0px;bottom: 0px;left: 60%;margin: 0;padding: 1.5em 1.6em;background-color: #FFFFFF;} #qtypechoicecontainer #chooseqtype .qtypesummary {
display: none;
position: absolute;
top: 0;
right: 0;
left: 60%;
margin: 0;
bottom: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 1.5em 1.6em;
background-color: #FFFFFF;
}
#qtypechoicecontainer #chooseqtype .instruction, #qtypechoicecontainer #chooseqtype .instruction,
#qtypechoicecontainer #chooseqtype .selected .qtypesummary {display: block;} #qtypechoicecontainer #chooseqtype .selected .qtypesummary {display: block;}

View file

@ -62,8 +62,7 @@
border-top: 0 none; border-top: 0 none;
.box-shadow(5px 5px 20px 0 #666); .box-shadow(5px 5px 20px 0 #666);
} }
//#qtypechoicecontainer #qtypechoicecontainer #chooseqtype {
#chooseqtype {
width: 40em; width: 40em;
} }
#chooseqtypehead h3 { #chooseqtypehead h3 {
@ -75,6 +74,17 @@
border-bottom: 1px solid #bbb; border-bottom: 1px solid #bbb;
padding: 0.24em 0; padding: 0.24em 0;
} }
#chooseqtype .alloptions {
overflow-x: hidden;
overflow-y: auto;
max-height: 400px;
max-height: calc(100vh - 15em);
/* The next line is a workaround because recess is crap. Delete ththe following line once
* https://github.com/twitter/recess/issues/59 / https://github.com/twitter/recess/issues/75
* is fixed. The previous line is the right one. */
max-height: 60vh;
width: 60%;
}
#chooseqtype .qtypeoption { #chooseqtype .qtypeoption {
margin-bottom: 0; margin-bottom: 0;
padding: 0.3em 0.3em 0.3em 1.6em; padding: 0.3em 0.3em 0.3em 1.6em;
@ -97,6 +107,8 @@
bottom: 0; bottom: 0;
left: 60%; left: 60%;
margin: 0; margin: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 1.5em 1.6em; padding: 1.5em 1.6em;
background-color: #fff; background-color: #fff;
overflow-y: auto; overflow-y: auto;

File diff suppressed because one or more lines are too long