diff options
| -rw-r--r-- | css/codeq.css | 70 | ||||
| -rw-r--r-- | index.html | 58 |
2 files changed, 97 insertions, 31 deletions
diff --git a/css/codeq.css b/css/codeq.css index a701d5c..44901f0 100644 --- a/css/codeq.css +++ b/css/codeq.css @@ -51,8 +51,8 @@ body { /* screen problems*/ .block { - border-right: 1px solid #e5e5e5; - border-bottom: 1px solid #e5e5e5; + /*border-right: 1px solid #e5e5e5; + border-bottom: 1px solid #e5e5e5;*/ padding: 0; min-height: 4em; overflow: hidden; @@ -63,11 +63,17 @@ body { padding: 0.5em 0.5em 20px 0.5em; } -/* info */ +.block.block1 { + border-bottom: 1px solid #ddd; +} + + +/* hints */ .block > .hints { padding: 0.5em 0.5em 20px 0.5em; } + /* code_editor */ .block > .code_editor { } @@ -82,6 +88,7 @@ body { background: black; font-size: 14px; padding: 0; + min-height: 4em; } .block-label { @@ -156,6 +163,17 @@ body { min-height: 100%; height: 100%; } + /* code_editor */ + #screen_python .block.block2 { + min-height: 100%; height: 100%; + } + + /* console */ + #screen_python .block.block3 { + min-height: 100%; height: 100%; + } + + } /* md */ @@ -170,12 +188,31 @@ body { min-height: 50%; height: 50%; } + .quadrants#screen_python > * > .block { + overflow: auto; + min-height: 100%; height: 100%; + } + + /* code_editor */ + #screen_python .block.block2 { + min-height: 50%; height: 50%; + } + + /* console */ + #screen_python .block.block3 { + min-height: 50%; height: 50%; + } + } /* md & ld */ @media (min-width: 992px) { - /* description */ - .block > .description { + .block-left, .block-right { + min-height: 100%; height: 100%; + } + + .block-left { + border-right: 1px solid #ddd; } /* info */ @@ -184,6 +221,20 @@ body { overflow-y: auto; } + .block.block1 { + border-right: 1px solid #ddd; + } + + #screen_python .block.block1 { + min-height: 30%; height: 30%; + border-right: 0; + } + + /* hints */ + #screen_python .block.block4 { + min-height: 70%; height: 70%; + } + /* code_editor */ .block > .code_editor { min-height: 100%; @@ -214,6 +265,15 @@ body { @media (max-width: 767px) { } +/* xs & sm */ +@media (max-width: 991px) { + + /* info */ + .block.block4 { + border-bottom: 1px solid #ddd; + } + +} /* codeq hints */ @@ -192,36 +192,42 @@ <!-- problem screen: python --> <div class="container-fluid quadrants block1" id="screen_python" style="display: none;"> <div class="row"> - <div class="col-lg-3 col-md-6 col-sm-12 block block1"> - <div class="description"> - <h2 class="title translatable" data-dict="python" data-tkey="slug"></h2> - <div class="translatable" data-dict="python" 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"> + <h2 class="title translatable" data-dict="python" data-tkey="slug"></h2> + <div class="translatable" data-dict="python" data-tkey="description"></div> + </div> + </div> + <div class="block-label">Instructions</div> </div> - <div class="block-label">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" data-tkey="btn_plan">Plan</button> - <button type="button" class="btn btn-default navbar-btn btn-hint" data-tkey="btn_hint">Hint</button> - <button type="button" class="btn btn-default navbar-btn btn-test" data-tkey="btn_test">Test</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 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">Code</div> - </div> - <div class="col-lg-3 col-md-6 col-sm-12 block block3"> - <div class="console"></div> - <div class="block-label">Console</div> + <div class="block-label">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 btn-hint" data-tkey="btn_hint">Hint</button> + <button type="button" class="btn btn-default navbar-btn btn-test" data-tkey="btn_test">Test</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">Code</div> + </div> + <div class="col-lg-6 col-md-12 col-sm-12 block block3"> + <div class="console"></div> + <div class="block-label">Console</div> </div> - <div class="block-label">Hints</div> </div> </div><!--/row--> </div><!--container--> |