More CSS cleanups

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 @@
                     <!-- 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'),