summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--css/codeq.css61
-rw-r--r--index.html56
-rw-r--r--js/codeq/settings.js1
3 files changed, 83 insertions, 35 deletions
diff --git a/css/codeq.css b/css/codeq.css
index f7ec93b..c3b1043 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -275,30 +275,41 @@ div.vertical-line{
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 {
+ min-height: 100%; height: 100%;
+ min-width: 50%; width: 50%;
+ }
+ /* console */
+ .line-layout#screen_robot .block.block3 {
+ min-height: 100%; height: 100%;
+ min-width: 50%; width: 50%;
+ }
/*~~ square-layout ~~*/
.quadrants.square-layout > * > .block:not(.block-left):not(.block-right) {/*the not-s are important here, because else the height of the surrounding divs will be set to 50% and the entire page will only be for half the screen*/
@@ -306,11 +317,11 @@ div.vertical-line{
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%;
@@ -319,24 +330,22 @@ div.vertical-line{
.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 */
.quadrants.square-layout#screen_python.prof2 > * > .block {
overflow: auto;
min-height: 100%; height: 100%;
}
-
/* instructions+hints */
.square-layout#screen_python .block-left {
min-width: 33%; width: 33%;
@@ -345,18 +354,40 @@ div.vertical-line{
.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 */
+ .quadrants.square-layout#screen_robot.prof2 > * > .block {
+ overflow: auto;
+ min-height: 100%; height: 100%;
+ }
+ /* instructions+hints */
+ .square-layout#screen_robot .block-left {
+ min-width: 33%; width: 33%;
+ }
+ /* code_editor + console */
+ .square-layout#screen_robot .block-right {
+ min-width: 67%; width: 67%;
+ }
+ /* code_editor */
+ .square-layout#screen_robot .block.block2 {
+ min-height: 50%; height: 50%;
+ min-width: 100%; width: 100%;
+ }
+ /* console */
+ .square-layout#screen_robot .block.block3 {
+ min-height: 50%; height: 50%;
+ min-width: 100%; width: 100%;
+ }
/* END layouts */
@@ -379,26 +410,36 @@ div.vertical-line{
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%;
diff --git a/index.html b/index.html
index abb4d20..91cb59c 100644
--- a/index.html
+++ b/index.html
@@ -410,35 +410,41 @@
<!-- problem screen: robot -->
<div class="container-fluid quadrants block1" id="screen_robot" style="display: none;">
<div class="row">
- <div class="col-lg-3 col-md-6 col-sm-12 block block1">
- <div class="description-container">
- <h2 class="title" data-dict="robot" data-tkey="slug"></h2>
- <div class="description" data-dict="robot" data-tkey="description"></div>
+ <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">
+ <h2 class="title" data-dict="robot" data-tkey="slug"></h2>
+ <div class="description" data-dict="robot" data-tkey="description"></div>
+ </div>
+ </div>
+ <div class="block-label" data-tkey="instructions">Instructions</div>
</div>
- <div class="block-label" data-tkey="instructions">Instructions</div>
- </div>
- <div class="col-lg-3 col-md-6 col-sm-12 block block2">
- <nav class="navbar navbar-default block-toolbar">
- <div class="container-fluid">
- <button type="button" class="btn btn-default navbar-btn btn-plan">Plan</button>
- <button type="button" class="btn btn-default navbar-btn 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 navbar-btn btn-run">Run</button>
- <button type="button" class="btn btn-default navbar-btn btn-stop">Stop</button>
+ <div class="col-lg-12 col-md-12 col-sm-12 block block4">
+ <div class="scrollable-content-container">
+ <div class="hints"></div>
</div>
- </nav>
- <div class="code_editor"></div>
- <div class="block-statusbar"></div>
- <div class="block-label" data-tkey="code">Code</div>
- </div>
- <div class="col-lg-3 col-md-6 col-sm-12 block block3">
- <div class="console"></div>
- <div class="block-label" data-tkey="console">Console</div>
+ <div class="block-label" data-tkey="hints">Hints</div>
+ </div>
</div>
- <div class="col-lg-3 col-md-6 col-sm-12 block block4">
- <div class="scrollable-content-container">
- <div class="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">
+ <nav class="navbar navbar-default block-toolbar">
+ <div class="container-fluid">
+ <button type="button" class="btn btn-default navbar-btn btn-plan" data-tkey="btn_plan">Plan</button>
+ <button type="button" class="btn btn-default navbar-btn 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 navbar-btn btn-run" data-tkey="btn_run">Run</button>
+ <button type="button" class="btn btn-default navbar-btn btn-stop" data-tkey="btn_stop">Stop</button>
+ </div>
+ </nav>
+ <div class="code_editor"></div>
+ <div class="block-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="console"></div>
+ <div class="block-label" data-tkey="console">Console</div>
</div>
- <div class="block-label" data-tkey="hints">Hints</div>
</div>
</div><!--/row-->
</div><!--container-->
diff --git a/js/codeq/settings.js b/js/codeq/settings.js
index f0e7ff0..172a154 100644
--- a/js/codeq/settings.js
+++ b/js/codeq/settings.js
@@ -14,6 +14,7 @@
codeq.on('layoutchange', function(){
$("#screen_prolog").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
$("#screen_python").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
+ $("#screen_robot").removeClass(codeq.supportedLayouts.join(" ")).addClass(codeq.getLayout());
});
codeq.globalStateMachine.register('settings',{
generated by cgit v1.2.1 (git 2.18.0) at 2024-12-25 19:18:35 +0000