diff options
| -rw-r--r-- | css/codeq.css | 56 | ||||
| -rw-r--r-- | css/codeq/hint.css | 9 | ||||
| -rw-r--r-- | index.html | 60 | ||||
| -rw-r--r-- | js/codeq/prolog.js | 11 | ||||
| -rw-r--r-- | js/codeq/python.js | 11 | ||||
| -rw-r--r-- | js/codeq/robot.js | 11 |
6 files changed, 35 insertions, 123 deletions
diff --git a/css/codeq.css b/css/codeq.css index f7bab6c..cc39ad9 100644 --- a/css/codeq.css +++ b/css/codeq.css @@ -171,13 +171,13 @@ h2.group-title a.view-solutions { } /* description */ -.block.block1 { - border-bottom: 1px solid #ddd; - padding-bottom: 1em; +.block-left { + padding-left: 1em; + padding-right: 1em; } .description-container { - padding: 0.5em; + padding-bottom: 1em; } .description-container > h1 { @@ -185,15 +185,6 @@ h2.group-title a.view-solutions { font-weight: bold; } -/* hints */ -.block.block4 { - padding-bottom: 1em; -} - -.block > .hints { - padding: 0.5em 0.5em 20px 0.5em; -} - /* code_editor */ .block.block2 { padding-top: 3em; /* padding-top = 2*block-toolbar.padding + .btn.height */ @@ -419,40 +410,6 @@ h2.group-title a.view-solutions { overflow-y: auto; } - .block.block1 { - border-right: 1px solid #ddd; - } - - /* prolog */ - #screen_prolog .block.block1 { - min-height: 50%; height: 50%; - border-right: 0; - } - /* hints */ - #screen_prolog .block.block4 { - min-height: 50%; height: 50%; - } - - /* python */ - #screen_python .block.block1 { - min-height: 50%; height: 50%; - border-right: 0; - } - /* hints */ - #screen_python .block.block4 { - min-height: 50%; height: 50%; - } - - /* robot */ - #screen_robot .block.block1 { - min-height: 50%; height: 50%; - border-right: 0; - } - /* hints */ - #screen_robot .block.block4 { - min-height: 50%; height: 50%; - } - /* code_editor */ .block > .code_editor { min-height: 100%; @@ -476,11 +433,6 @@ h2.group-title a.view-solutions { /* xs & sm */ @media (max-width: 991px) { - /* info */ - .block.block4 { - border-bottom: 1px solid #ddd; - } - /*layout selection is disable on small screens*/ #gui_layout_select_form_group { display: none; diff --git a/css/codeq/hint.css b/css/codeq/hint.css index 803479f..114a5d4 100644 --- a/css/codeq/hint.css +++ b/css/codeq/hint.css @@ -28,12 +28,17 @@ div.hint-static img { } div.hints > div.feedback { - border-top: 1px solid gray; + border-top: 1px solid #ddd; margin-bottom: 1.5em; margin-top: 0.5em; + opacity: 0.75; } div.hints > div.feedback:first-child { - border-top: none; + border-top: 1px solid gray; + opacity: 1; +} +div.hints > div.feedback:hover { + opacity: 1; } div.hints > div.feedback > div { @@ -334,24 +334,14 @@ </div> <!-- problem screen: prolog --> - <div class="container-fluid quadrants block1" id="screen_prolog" style="display: none;"> + <div class="container-fluid quadrants" id="screen_prolog" style="display: none;"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> - <div class="col-lg-12 col-md-12 col-sm-12 block block1"> - <div class="scrollable-content-container"> - <div class="description-container"> - <h1 class="title" data-dict="prolog" data-tkey="name"></h1> - <div class="description" data-dict="prolog" data-tkey="description"></div> - </div> - </div> - <div class="block-label" data-tkey="instructions">Instructions</div> - </div> - <div class="col-lg-12 col-md-12 col-sm-12 block block4"> - <div class="scrollable-content-container"> - <div class="hints"></div> - </div> - <div class="block-label" data-tkey="hints">Hints</div> + <div class="description-container"> + <h1 class="title" data-dict="prolog" data-tkey="name"></h1> + <div class="description" data-dict="prolog" data-tkey="description"></div> </div> + <div class="hints"></div> </div> <div class="col-lg-8 col-md-8 col-sm-12 block block-right "> <div class="col-lg-6 col-md-12 col-sm-12 block block2"> @@ -372,24 +362,14 @@ </div><!--container--> <!-- problem screen: python --> - <div class="container-fluid quadrants block1" id="screen_python" style="display: none;"> + <div class="container-fluid quadrants" id="screen_python" style="display: none;"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> - <div class="col-lg-12 col-md-12 col-sm-12 block block1"> - <div class="scrollable-content-container"> - <div class="description-container"> - <h1 class="title" data-dict="python" data-tkey="slug"></h1> - <div class="description" data-dict="python" data-tkey="description"></div> - </div> - </div> - <div class="block-label" data-tkey="instructions">Instructions</div> - </div> - <div class="col-lg-12 col-md-12 col-sm-12 block block4"> - <div class="scrollable-content-container"> - <div class="hints"></div> - </div> - <div class="block-label" data-tkey="hints">Hints</div> + <div class="description-container"> + <h1 class="title" data-dict="python" data-tkey="name"></h1> + <div class="description" data-dict="python" data-tkey="description"></div> </div> + <div class="hints"></div> </div> <div class="col-lg-8 col-md-8 col-sm-12 block block-right "> <div class="col-lg-6 col-md-12 col-sm-12 block block2"> @@ -412,24 +392,14 @@ </div><!--container--> <!-- problem screen: robot --> - <div class="container-fluid quadrants block1" id="screen_robot" style="display: none;"> + <div class="container-fluid quadrants" id="screen_robot" style="display: none;"> <div class="row"> <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> - <div class="col-lg-12 col-md-12 col-sm-12 block block1"> - <div class="scrollable-content-container"> - <div class="description-container"> - <h1 class="title" data-dict="robot" data-tkey="slug"></h1> - <div class="description" data-dict="robot" data-tkey="description"></div> - </div> - </div> - <div class="block-label" data-tkey="instructions">Instructions</div> - </div> - <div class="col-lg-12 col-md-12 col-sm-12 block block4"> - <div class="scrollable-content-container"> - <div class="hints"></div> - </div> - <div class="block-label" data-tkey="hints">Hints</div> + <div class="description-container"> + <h1 class="title" data-dict="robot" data-tkey="name"></h1> + <div class="description" data-dict="robot" data-tkey="description"></div> </div> + <div class="hints"></div> </div> <div class="col-lg-8 col-md-8 col-sm-12 block block-right "> <div class="col-lg-6 col-md-12 col-sm-12 block block2"> diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js index a4a916f..111ea68 100644 --- a/js/codeq/prolog.js +++ b/js/codeq/prolog.js @@ -18,11 +18,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ "use strict"; var jqScreen = $('#screen_prolog'), // the screen container element // quadrants - jqDescription = jqScreen.find('.block1'), jqCode = jqScreen.find('.block2'), jqConsole = jqScreen.find('.block3'), - jqInfo = jqScreen.find('.block4'), - jqAllQuadrants = jqDescription.add(jqCode).add(jqConsole).add(jqInfo), // all the quadrants + jqInfo = jqScreen.find('.block-left'), + jqAllQuadrants = jqCode.add(jqConsole).add(jqInfo), // all the quadrants // buttons jqBtnPlan = jqScreen.find('.btn-plan'), jqBtnTest = jqScreen.find('.btn-test').ladda(), @@ -61,7 +60,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ jqScreen.css('display', 'none'); prologHandler.destroy(); prologHandler = null; - jqScreen.addClass('block1'); $('#navigation-problem_list').css('display', 'none'); var navigationProlog = $("#navigation-prolog"); @@ -166,8 +164,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ }); var createPrologHandler = function (problemDef, commonDef, currentSolution) { - var jqDescriptionContent = jqDescription.find('.description'), - jqEditor = jqCode.find('.code_editor'), + var jqEditor = jqCode.find('.code_editor'), jqTerminal = jqConsole.find('.console'), jqHints = jqInfo.find('.hints'), editor = codeq.makeEditor(jqEditor[0], @@ -270,10 +267,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ activityHandler.flush(); hinter.destroy(); terminal.destroy(); - jqDescriptionContent.empty(); jqEditor.empty(); // TODO: perhaps you do not want to "free" the editor, just empty it jqTerminal.empty(); // TODO: the same with the console - jqDescriptionContent = null; jqEditor = null; jqTerminal = null; jqHints = null; diff --git a/js/codeq/python.js b/js/codeq/python.js index 302a0fb..ab557e5 100644 --- a/js/codeq/python.js +++ b/js/codeq/python.js @@ -18,11 +18,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ "use strict"; var jqScreen = $('#screen_python'), // the screen container element // quadrants - jqDescription = jqScreen.find('.block1'), jqCode = jqScreen.find('.block2'), jqConsole = jqScreen.find('.block3'), - jqInfo = jqScreen.find('.block4'), - jqAllQuadrants = jqDescription.add(jqCode).add(jqConsole).add(jqInfo), // all the quadrants + jqInfo = jqScreen.find('.block-left'), + jqAllQuadrants = jqCode.add(jqConsole).add(jqInfo), // all the quadrants // buttons jqBtnPlan = jqScreen.find('.btn-plan'), jqBtnTest = jqScreen.find('.btn-test').ladda(), @@ -64,7 +63,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ jqScreen.css('display', 'none'); pythonHandler.destroy(); pythonHandler = null; - jqScreen.addClass('block1'); $('#navigation-problem_list').css('display', 'none'); var navigationPhython = $("#navigation-python"); @@ -115,8 +113,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ }); var createPythonHandler = function (problemDef, commonDef, currentSolution) { - var jqDescriptionContent = jqDescription.find('.description'), - jqEditor = jqCode.find('.code_editor'), + var jqEditor = jqCode.find('.code_editor'), jqTerminal = jqConsole.find('.console'), jqHints = jqInfo.find('.hints'), editor = codeq.makeEditor(jqEditor[0], @@ -234,10 +231,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ activityHandler.flush(); hinter.destroy(); terminal.destroy(); - jqDescriptionContent.empty(); jqEditor.empty(); // TODO: perhaps you do not want to "free" the editor, just empty it jqTerminal.empty(); // TODO: the same with the console - jqDescriptionContent = null; jqEditor = null; jqTerminal = null; jqHints = null; diff --git a/js/codeq/robot.js b/js/codeq/robot.js index 338abe7..43bfb12 100644 --- a/js/codeq/robot.js +++ b/js/codeq/robot.js @@ -18,11 +18,10 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ "use strict"; var jqScreen = $('#screen_robot'), // the screen container element // quadrants - jqDescription = jqScreen.find('.block1'), jqCode = jqScreen.find('.block2'), jqConsole = jqScreen.find('.block3'), - jqInfo = jqScreen.find('.block4'), - jqAllQuadrants = jqDescription.add(jqCode).add(jqConsole).add(jqInfo), // all the quadrants + jqInfo = jqScreen.find('.block-left'), + jqAllQuadrants = jqCode.add(jqConsole).add(jqInfo), // all the quadrants // buttons jqBtnPlan = jqScreen.find('.btn-plan'), jqBtnHint = jqScreen.find('.btn-hint').ladda(), @@ -65,7 +64,6 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ jqScreen.css('display', 'none'); robotHandler.destroy(); robotHandler = null; - jqScreen.addClass('block1'); $('#navigation-problem_list').css('display', 'none'); var navigationRobot = $("#navigation-robot"); @@ -90,8 +88,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ }); var createRobotHandler = function (problemDef, commonDef, currentSolution) { - var jqDescriptionContent = jqDescription.find('.description'), - jqEditor = jqCode.find('.code_editor'), + var jqEditor = jqCode.find('.code_editor'), jqTerminal = jqConsole.find('.console'), jqHints = jqInfo.find('.hints'), jqStatus = jqConsole.find('.status'), @@ -232,9 +229,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ activityHandler.queueTrace({'typ': 'close'}); activityHandler.flush(); hinter.destroy(); - jqDescriptionContent.empty(); jqEditor.empty(); // TODO: perhaps you do not want to "free" the editor, just empty it - jqDescriptionContent = null; jqEditor = null; jqHints = null; codeq.tr.registerDictionary('robot', codeq.tr.emptyDictionary); |