diff options
| -rw-r--r-- | css/codeq.css | 107 | ||||
| -rw-r--r-- | index.html | 30 | ||||
| -rw-r--r-- | js/codeq/editor.js | 4 | ||||
| -rw-r--r-- | js/codeq/prolog.js | 4 | ||||
| -rw-r--r-- | js/codeq/python.js | 4 | ||||
| -rw-r--r-- | js/codeq/robot.js | 4 |
6 files changed, 39 insertions, 114 deletions
diff --git a/css/codeq.css b/css/codeq.css index 0bd02b3..a54ea2a 100644 --- a/css/codeq.css +++ b/css/codeq.css @@ -239,18 +239,17 @@ div.vertical-line{ font-weight: bold; } -/* code_editor */ -.block.block2 { - padding-top: 3em; /* padding-top = 2*block-toolbar.padding + .btn.height */ - padding-bottom: 1.5em; /* padding-bottom = .block-statusbar.height */ +.block-editor { + padding-top: 3em; /* padding-top = 2*.toolbar.padding + .btn.height */ + padding-bottom: 1.5em; /* padding-bottom = .statusbar.height */ } -.block > .code_editor { +.block-editor > .code-editor { border-bottom: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; } -.block-toolbar { +.block-editor > .toolbar { position: absolute; right: 0; left: 0; @@ -259,7 +258,7 @@ div.vertical-line{ padding: 0.5em; } -.block-statusbar { +.block-editor > .statusbar { height: 1.5em; line-height: 1em; padding: 0.25em; @@ -306,7 +305,7 @@ div.vertical-line{ } /* robot connection & sensor info */ -#screen-robot .block3 .status { +#screen-robot .block-console .status { background-color: #666; border: 1px solid #444; color: yellow; @@ -332,39 +331,11 @@ div.vertical-line{ overflow: auto; min-height: 100%; height: 100%; } - - /* prolog */ - /* code_editor */ - .line-layout#screen-prolog .block.block2 { - min-height: 100%; height: 100%; - min-width: 50%; width: 50%; - } - /* console */ - .line-layout#screen-prolog .block.block3 { - min-height: 100%; height: 100%; - min-width: 50%; width: 50%; - } - - /* python */ - /* code_editor */ - .line-layout#screen-python .block.block2 { - min-height: 100%; height: 100%; - min-width: 50%; width: 50%; - } - /* console */ - .line-layout#screen-python .block.block3 { - min-height: 100%; height: 100%; - min-width: 50%; width: 50%; - } - - /* robot */ - /* code_editor */ - .line-layout#screen-robot .block.block2 { + .line-layout .block.block-editor { min-height: 100%; height: 100%; min-width: 50%; width: 50%; } - /* console */ - .line-layout#screen-robot .block.block3 { + .line-layout .block.block-console { min-height: 100%; height: 100%; min-width: 50%; width: 50%; } @@ -374,67 +345,23 @@ div.vertical-line{ overflow: auto; min-height: 50%; height: 50%; } - - /* prolog */ .quadrants.square-layout#screen-prolog > * > .block { overflow: auto; min-height: 100%; height: 100%; } /* instructions+hints */ - .square-layout#screen-prolog .block-left { - min-width: 33%; width: 33%; - } - /* code_editor + console */ - .square-layout#screen-prolog .block-right { - min-width: 67%; width: 67%; - } - /* code_editor */ - .square-layout#screen-prolog .block.block2 { - min-height: 50%; height: 50%; - min-width: 100%; width: 100%; - } - /* console */ - .square-layout#screen-prolog .block.block3 { - min-height: 50%; height: 50%; - min-width: 100%; width: 100%; - } - - /* python */ - /* instructions+hints */ - .square-layout#screen-python .block-left { - min-width: 33%; width: 33%; - } - /* code_editor + console */ - .square-layout#screen-python .block-right { - min-width: 67%; width: 67%; - } - /* code_editor */ - .square-layout#screen-python .block.block2 { - min-height: 50%; height: 50%; - min-width: 100%; width: 100%; - } - /* console */ - .square-layout#screen-python .block.block3 { - min-height: 50%; height: 50%; - min-width: 100%; width: 100%; - } - - /* robot */ - /* instructions+hints */ - .square-layout#screen-robot .block-left { + .square-layout .block-left { min-width: 33%; width: 33%; } - /* code_editor + console */ - .square-layout#screen-robot .block-right { + /* editor + console */ + .square-layout .block-right { min-width: 67%; width: 67%; } - /* code_editor */ - .square-layout#screen-robot .block.block2 { + .square-layout .block.block-editor { min-height: 50%; height: 50%; min-width: 100%; width: 100%; } - /* console */ - .square-layout#screen-robot .block.block3 { + .square-layout .block.block-console { min-height: 50%; height: 50%; min-width: 100%; width: 100%; } @@ -448,14 +375,12 @@ div.vertical-line{ border-right: 1px solid #ddd; } - /* code_editor */ - .block > .code_editor { + .block-editor > .code-editor { min-height: 100%; height: 100%; } - /* console */ - .block > .console { + .block-console > .console { height: 100%; overflow-y: auto; } @@ -374,16 +374,16 @@ <!-- end of experiment: Prolog hints --> </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"> - <div class="block-toolbar"> + <div class="col-lg-6 col-md-12 col-sm-12 block block-editor"> + <div class="toolbar"> <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> <button type="button" class="btn btn-default ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button> </div> - <div class="code_editor"></div> - <div class="block-statusbar"></div> + <div class="code-editor"></div> + <div class="statusbar"></div> <div class="block-label" data-tkey="code">Code</div> </div> - <div class="col-lg-6 col-md-12 col-sm-12 block block3"> + <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> <div class="console"></div> <div class="block-label" data-tkey="console">Console</div> </div> @@ -402,18 +402,18 @@ <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"> - <div class="block-toolbar"> + <div class="col-lg-6 col-md-12 col-sm-12 block block-editor"> + <div class="toolbar"> <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> <button type="button" class="btn btn-default ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button> <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button> <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button> </div> - <div class="code_editor"></div> - <div class="block-statusbar"></div> + <div class="code-editor"></div> + <div class="statusbar"></div> <div class="block-label" data-tkey="code">Code</div> </div> - <div class="col-lg-6 col-md-12 col-sm-12 block block3"> + <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> <div class="console"></div> <div class="block-label" data-tkey="console">Console</div> </div> @@ -432,18 +432,18 @@ <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"> - <div class="block-toolbar"> + <div class="col-lg-6 col-md-12 col-sm-12 block block-editor"> + <div class="toolbar"> <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> <button type="button" class="btn btn-default ladda-button btn-hint" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_hint">Hint</span></button> <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button> <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button> </div> - <div class="code_editor"></div> - <div class="block-statusbar"></div> + <div class="code-editor"></div> + <div class="statusbar"></div> <div class="block-label" data-tkey="code">Code</div> </div> - <div class="col-lg-6 col-md-12 col-sm-12 block block3"> + <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> <div class="console"></div> <div class="status"></div> <div class="block-label" data-tkey="console">Console</div> diff --git a/js/codeq/editor.js b/js/codeq/editor.js index 157c70e..478e461 100644 --- a/js/codeq/editor.js +++ b/js/codeq/editor.js @@ -1,5 +1,5 @@ /* CodeQ: an online programming tutor. - Copyright (C) 2015 UL FRI + Copyright (C) 2015,2016 UL FRI This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free @@ -16,7 +16,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ codeq.makeEditor = function (elt, options, onEscape) { "use strict"; - var statusBar = $(elt).siblings(".block-statusbar")[0], + var statusBar = $(elt).siblings(".statusbar")[0], updateStatusBar = function (pos) { statusBar.innerHTML = 'line ' + (pos.line+1) + ', column ' + (pos.ch+1); }, diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js index 7da12e2..e739b26 100644 --- a/js/codeq/prolog.js +++ b/js/codeq/prolog.js @@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ (function() { "use strict"; var jqScreen = $('#screen-prolog'), // the screen container element - jqConsole = jqScreen.find('.block3'), + jqConsole = jqScreen.find('.block-console'), jqBtnPlan = jqScreen.find('.btn-plan'), jqBtnTest = jqScreen.find('.btn-test').ladda(), jqAllButtons = jqBtnPlan.add(jqBtnTest), // all the buttons @@ -163,7 +163,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ }); var createPrologHandler = function (problemDef, commonDef, currentSolution) { - var jqEditor = jqScreen.find('.code_editor'), + var jqEditor = jqScreen.find('.code-editor'), jqHints = jqScreen.find('.hints'), jqTerminal = jqConsole.find('.console'), editor = codeq.makeEditor(jqEditor[0], diff --git a/js/codeq/python.js b/js/codeq/python.js index 055ada7..085ebfc 100644 --- a/js/codeq/python.js +++ b/js/codeq/python.js @@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ (function() { "use strict"; var jqScreen = $('#screen-python'), // the screen container element - jqConsole = jqScreen.find('.block3'), + jqConsole = jqScreen.find('.block-console'), jqBtnPlan = jqScreen.find('.btn-plan'), jqBtnTest = jqScreen.find('.btn-test').ladda(), jqBtnRun = jqScreen.find('.btn-run'), @@ -103,7 +103,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ }); var createPythonHandler = function (problemDef, commonDef, currentSolution) { - var jqEditor = jqScreen.find('.code_editor'), + var jqEditor = jqScreen.find('.code-editor'), jqHints = jqScreen.find('.hints'), jqTerminal = jqConsole.find('.console'), editor = codeq.makeEditor(jqEditor[0], diff --git a/js/codeq/robot.js b/js/codeq/robot.js index 8512df7..5936d56 100644 --- a/js/codeq/robot.js +++ b/js/codeq/robot.js @@ -17,7 +17,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ (function() { "use strict"; var jqScreen = $('#screen-robot'), // the screen container element - jqConsole = jqScreen.find('.block3'), + jqConsole = jqScreen.find('.block-console'), jqBtnPlan = jqScreen.find('.btn-plan'), jqBtnHint = jqScreen.find('.btn-hint').ladda(), jqBtnRun = jqScreen.find('.btn-run'), @@ -77,7 +77,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. */ }); var createRobotHandler = function (problemDef, commonDef, currentSolution) { - var jqEditor = jqScreen.find('.code_editor'), + var jqEditor = jqScreen.find('.code-editor'), jqHints = jqScreen.find('.hints'), jqStatus = jqConsole.find('.status'), jqTerminal = jqConsole.find('.console'), |