From fbd97fa0a236a50cd07a1194c8f32c5445e685b9 Mon Sep 17 00:00:00 2001
From: Timotej Lazar <timotej.lazar@fri.uni-lj.si>
Date: Fri, 26 Feb 2016 11:56:08 +0100
Subject: Simplify description+hints blocks markup

---
 css/codeq.css      | 56 ++++----------------------------------------------
 css/codeq/hint.css |  9 ++++++--
 index.html         | 60 ++++++++++++++----------------------------------------
 js/codeq/prolog.js | 11 +++-------
 js/codeq/python.js | 11 +++-------
 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 {
diff --git a/index.html b/index.html
index 4640f19..c7fdf92 100644
--- a/index.html
+++ b/index.html
@@ -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);
-- 
cgit v1.2.1