From 9eb9da9a66c287f72b708cdc0700d28c6a14093f Mon Sep 17 00:00:00 2001 From: Timotej Lazar Date: Wed, 2 Mar 2016 17:16:11 +0100 Subject: More CSS cleanups --- css/codeq.css | 107 ++++++++--------------------------------------------- index.html | 30 +++++++-------- js/codeq/editor.js | 4 +- js/codeq/prolog.js | 4 +- js/codeq/python.js | 4 +- 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; } diff --git a/index.html b/index.html index b26db02..ca34854 100644 --- a/index.html +++ b/index.html @@ -374,16 +374,16 @@
-
-
+
+
-
-
+
+
Code
-
+
Console
@@ -402,18 +402,18 @@
-
-
+
+
-
-
+
+
Code
-
+
Console
@@ -432,18 +432,18 @@
-
-
+
+
-
-
+
+
Code
-
+
Console
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 . */ 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 . */ (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 . */ }); 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 . */ (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 . */ }); 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 . */ (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 . */ }); 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'), -- cgit v1.2.1