Refactoring: simplified python.js and prolog.js, removed all DOM IDs except for the top-level block #screen_prolog, made a copy of the latter into #screen_python so the two screens can now diverge.

1 files changed, 41 insertions, 53 deletions

diff --git a/css/codeq.css b/css/codeq.css
index cfb9286..3de5b0b 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -39,7 +39,7 @@ body {
 }
 
 /**** animations *****/
-.transition{
+.transition, .quadrants > * > .block {
     -moz-transition: all 1s ease;
     -webkit-transition: all 1s ease;
     -o-transition: all 1s ease;
@@ -55,34 +55,24 @@ body {
         height: 100%;
     }
 
-    .block {
+    /* default for all quadrants (no focus anywhere) */
+    .quadrants > * > .block {
         overflow: auto;
         min-height: 100%; height: 100%;
     }
 
-    .block-focus {
-        overflow: auto;
-        min-height: 100%; height: 100%;
-        min-width: 34%; width: 34%;
-    }
-
-    .block-less-height{/*these names were made for the 'md' variant but need to be the same here for the javascript code to resize them when the focus changes*/
-        overflow: auto;
-        min-height: 100%; height: 100%;
-        min-width: 22%; width: 22%;
-    }
-
-    .block-less-width{/*these names were made for the 'md' variant but need to be the same here for the javascript code to resize them when the focus changes*/
-        overflow: auto;
-        min-height: 100%; height: 100%;
-        min-width: 22%; width: 22%;
-    }
-
-    .block-less-everything{/*these names were made for the 'md' variant but need to be the same here for the javascript code to resize them when the focus changes*/
-        overflow: auto;
-        min-height: 100%; height: 100%;
-        min-width: 22%; width: 22%;
-    }
+    /* focus on 1st block */
+    .quadrants.block1 > * > .block { min-width: 22%; width: 22%; }
+    .quadrants.block1 > * > .block.block1 { min-width: 34%; width: 34%; }
+    /* focus on 2nd block */
+    .quadrants.block2 > * > .block { min-width: 22%; width: 22%; }
+    .quadrants.block2 > * > .block.block2 { min-width: 34%; width: 34%; }
+    /* focus on 3rd block */
+    .quadrants.block3 > * > .block { min-width: 22%; width: 22%; }
+    .quadrants.block3 > * > .block.block3 { min-width: 34%; width: 34%; }
+    /* focus on 4th block */
+    .quadrants.block4 > * > .block { min-width: 22%; width: 22%; }
+    .quadrants.block4 > * > .block.block4 { min-width: 34%; width: 34%; }
 }
 
 /* md */
@@ -91,34 +81,32 @@ body {
         height: 100%;
     }
 
-    .block {
+    /* default for all quadrants (no focus anywhere) */
+    .quadrants > * > .block {
         overflow: auto;
         min-height: 50%; height: 50%;
     }
 
-    .block-focus {
-        overflow: auto;
-        min-height: 60%; height: 60%;
-        min-width: 60%; width: 60%;
-    }
-
-    .block-less-height{
-        overflow: auto;
-        min-height: 40%; height: 40%;
-        min-width: 60%; width: 60%;
-    }
-
-    .block-less-width{
-        overflow: auto;
-        min-height: 60%; height: 60%;
-        min-width: 40%; width: 40%;
-    }
-
-    .block-less-everything{
-        overflow: auto;
-        min-height: 40%; height: 40%;
-        min-width: 40%; width: 40%;
-    }
+    /* focus on 1st block */
+    .quadrants.block1 > * > .block1 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; }
+    .quadrants.block1 > * > .block2 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; }
+    .quadrants.block1 > * > .block3 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; }
+    .quadrants.block1 > * > .block4 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; }
+    /* focus on 2nd block */
+    .quadrants.block2 > * > .block1 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; }
+    .quadrants.block2 > * > .block2 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; }
+    .quadrants.block2 > * > .block3 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; }
+    .quadrants.block2 > * > .block4 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; }
+    /* focus on 3rd block */
+    .quadrants.block3 > * > .block1 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; }
+    .quadrants.block3 > * > .block2 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; }
+    .quadrants.block3 > * > .block3 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; }
+    .quadrants.block3 > * > .block4 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; }
+    /* focus on 4th block */
+    .quadrants.block4 > * > .block1 { min-height: 40%; height: 40%; min-width: 40%; width: 40%; }
+    .quadrants.block4 > * > .block2 { min-height: 40%; height: 40%; min-width: 60%; width: 60%; }
+    .quadrants.block4 > * > .block3 { min-height: 60%; height: 60%; min-width: 40%; width: 40%; }
+    .quadrants.block4 > * > .block4 { min-height: 60%; height: 60%; min-width: 60%; width: 60%; }
 }
 
 /* sm */
@@ -132,17 +120,17 @@ body {
 
 /***** blocks *****/
 /* description */
-#description {
+.block > .description {
     padding: 0.5em;
 }
 
 /* info */
-#info {
+.block > .hints {
     padding: 0.5em;
 }
 
 /* code_editor */
-#code_editor {
+.block > .code_editor {
     min-height: 100%;
     height: 100%;
     padding-top: 50px;
@@ -152,7 +140,7 @@ body {
 }
 
 /* console */
-#console {
+.block > .console {
     background: black;
     font-size: 14px;
     height: 100%;