summaryrefslogtreecommitdiff
path: root/css
diff options
context:
space:
mode:
authorAleš Smodiš <aless@guru.si>2015-09-21 17:45:31 +0200
committerAleš Smodiš <aless@guru.si>2015-09-21 17:45:31 +0200
commitcee672f22d516ecc73f84a3dbe01328883a2a47d (patch)
tree2f977f01c4619d2e422cbc8b498218cbe9972dc4 /css
parent86b478fc57f6eb8bc1addd07d4feb95c83f6792c (diff)
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.
Diffstat (limited to 'css')
-rw-r--r--css/codeq.css94
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%;