diff options
| -rw-r--r-- | css/codeq.css | 229 | ||||
| -rw-r--r-- | index.html | 22 | ||||
| -rw-r--r-- | js/codeq/editor.js | 6 |
3 files changed, 167 insertions, 90 deletions
diff --git a/css/codeq.css b/css/codeq.css index 3a9195f..96033d0 100644 --- a/css/codeq.css +++ b/css/codeq.css @@ -1,51 +1,21 @@ +/* + + We use http://getbootstrap.com/ for ground HTML and CSS styling. RTFM! + General settings apply to all resolutions. + Put special viewport size settings inside @emedia queries. + +*/ + body { padding-top: 50px; } - .title { /*color: whitesmoke;*/ margin-left: 5px; } -/* form-signin */ -.form-signin { - max-width: 330px; - padding: 15px; - margin: 0 auto; -} -.form-signin .form-signin-heading, -.form-signin .checkbox { - margin-bottom: 10px; -} -.form-signin .checkbox { - font-weight: normal; -} -.form-signin .form-control { - position: relative; - height: auto; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 10px; - font-size: 16px; -} -.form-signin .form-control:focus { - z-index: 2; -} -.form-signin input[type="text"] { - margin-bottom: -1px; - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} -.form-signin input[type="password"] { - margin-bottom: 10px; - border-top-left-radius: 0; - border-top-right-radius: 0; -} - /* modalLogIn */ - #modalLogIn{ min-width: 250px; padding: 14px 14px 0; @@ -70,7 +40,6 @@ body { } - /* screen language */ #screen_language { margin-top: 20px; @@ -80,13 +49,34 @@ body { cursor: pointer; } -/* screen problems code*/ - +/* screen problems*/ .block { border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 0; min-height: 4em; + overflow: hidden; +} + +/* description */ +.block > .description { + padding: 0.5em 0.5em 20px 0.5em; +} + +/* info */ +.block > .hints { + padding: 0.5em 0.5em 20px 0.5em; +} + +/* code_editor */ +.block > .code_editor { +} + +/* console */ +.block > .console { + background: black; + font-size: 14px; + padding: 0; } .block-label { @@ -94,22 +84,47 @@ body { position: absolute; z-index: 60; opacity: .7; - right: 1em; - bottom: 0.25em; + right: 0.75em; + /*bottom: 0.25em;*/ + bottom: 0; margin: 0; width: 150px; text-transform: uppercase; - font-size: large; + /*font-size: large;*/ text-align: right; } -/* block-toolbar */ +.block-statusbar { + min-height: 20px; + position: absolute; + bottom: 0; + left: 0; + right: 0; + background-color: #F7F7F7; + border-top: 1px solid #DDD; + /*font-family: monospace;*/ + opacity: .7; + text-align: left; +} -#block-toolbar { +/* block-toolbar */ +.block-toolbar { position: absolute; - width:100%; - margin-bottom: 0px; - border: 0; + right: 0; + left: 0; + top: 0; + border:0; + border-bottom: 1px solid #e5e5e5; + background-color: #F7F7F7; +} + +/*CodeMirror for mobile design*/ +.CodeMirror { + height: auto; +} + +.CodeMirror-scroll { + height: auto; } /**** animations *****/ @@ -151,41 +166,49 @@ body { } -/* sm */ -@media (min-width: 768px) and (max-width: 991px) { -} +/* md & ld */ +@media (min-width: 992px) { + /* description */ + .block > .description { + } -/* xs */ -@media (max-width: 767px) { -} + /* info */ + .block > .hints { + height: 100%; + overflow-y: auto; + } + /* code_editor */ + .block > .code_editor { + min-height: 100%; + height: 100%; + } -/***** blocks *****/ -/* description */ -.block > .description { - padding: 0.5em; -} + /* console */ + .block > .console { + height: 100%; + overflow-y: auto; + } + + .CodeMirror { + height: 100%; + } + + .CodeMirror-scroll { + height: 100%; + } -/* info */ -.block > .hints { - padding: 0.5em; } -/* code_editor */ -.block > .code_editor { - min-height: 100%; - height: 100%; +/* sm */ +@media (min-width: 768px) and (max-width: 991px) { } -/* console */ -.block > .console { - background: black; - font-size: 14px; - height: 100%; - overflow-y: auto; - padding: 0; +/* xs */ +@media (max-width: 767px) { } + /* codeq hints */ /* the highlighted part of the text, used in pop-up and drop-down hints */ @@ -202,15 +225,15 @@ body { .editor-statusbar { background-color: #F7F7F7; - border-top: 1px solid #DDD; + border-top: 1px solid #e5e5e5; font-family: monospace; padding: 1px 4px; - text-align: right; + text-align: left; } /***** helpers *****/ -/* webkit-scrollbar */ -::-webkit-scrollbar { +/** webkit-scrollbar 1 **/ +/*::-webkit-scrollbar { width: 12px; } @@ -222,6 +245,56 @@ body { ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5); +}*/ + + +/** webkit-scrollbar 2**/ +::-webkit-scrollbar { + width: 6px; + background-color: #F5F5F5; +} + +/* Track */ +::-webkit-scrollbar-track { + background-color: #F5F5F5; +} +::-webkit-scrollbar-track:hover { + background: #F5F5F5; +} +::-webkit-scrollbar-track:active { + background: #F5F5F5; +} +/* Handle */ +::-webkit-scrollbar-thumb { + background-color: rgba(0,0,0,0.5); +} +::-webkit-scrollbar-thumb:hover { + background: rgba(0,0,0,0.7); +} +::-webkit-scrollbar-thumb:active { + background: rgba(0,0,0,0.9); +} + +/** special webkit-scrollbar for console **/ +/* Track */ +.console::-webkit-scrollbar-track { + background-color: #0b0b0b; +} +.console::-webkit-scrollbar-track:hover { + background: #0b0b0b; +} +.console::-webkit-scrollbar-track:active { + background: #0b0b0b; +} +/* Handle */ +.console::-webkit-scrollbar-thumb { + background-color: rgba(255,255,255,0.5); +} +.console::-webkit-scrollbar-thumb:hover { + background: rgba(255,255,255,0.7);; +} +.console::-webkit-scrollbar-thumb:active { + background: rgba(255,255,255,0.9);; } /* status bar */ @@ -162,8 +162,8 @@ <div class="description translatable" data-dict="prolog" data-tkey="description"></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"> + <div class="col-lg-3 col-md-6 col-sm-12 block block2" style="padding-top: 51px; padding-bottom: 21px;"> + <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> @@ -171,6 +171,7 @@ </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"> @@ -192,8 +193,8 @@ <div class="description translatable" data-dict="python" data-tkey="description"></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"> + <div class="col-lg-3 col-md-6 col-sm-12 block block2" style="padding-top: 51px; padding-bottom: 21px;"> + <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> @@ -235,6 +236,7 @@ </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"> @@ -248,13 +250,13 @@ </div><!--/row--> </div><!--container--> - <!-- problem screen: profile --> - <div class="container-fluid" id="screen_profile" style="display: none;"> + <!-- profile screen --> + <div class="container" id="screen_profile" style="display: none;"> <h2> Profile <div class="btn-group btn-group-xs hidden-md pull-right"> <a href="" data-toggle="modal" data-target="#modalChangePassword" class="btn btn-default" data-tkey="change_pass">Change Password</a> - <a href="#" class="btn btn-default">Go back</a> + <a href="#" class="btn btn-default" id="btnProfileGoBack">Go back</a> </div> </h2> <hr> @@ -314,7 +316,7 @@ </div><!--/col--> <div class="col-lg-12"> <div class="form-group"> - <button class="btn btn-lg btn-primary pull-right" type="submit">Save</button> + <button class="btn btn-lg btn-primary pull-right" type="button">Save</button> </div> </div><!--/col--> </form> @@ -377,11 +379,11 @@ </div> - <div id="modalSignUp" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;"> + <div id="modalSignUp" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" data-keyboard="false" data-backdrop="static" style="display: none;"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> - <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true" data-toggle="modal" data-target="#modalLogIn">×</button> <h3 class="text-center">Sign up</h3> </div> <div class="modal-body"> diff --git a/js/codeq/editor.js b/js/codeq/editor.js index e7d15f9..f84bd05 100644 --- a/js/codeq/editor.js +++ b/js/codeq/editor.js @@ -17,10 +17,12 @@ codeq.makeEditor = function (elt, options) { }; editor = CodeMirror(elt, options), - statusBar.className = 'editor-statusbar'; + //since addPanel brakes CodeMirrot responsiveness no mather what, we manually added block-statusbar located at the bottom of editor block + //statusBar.className = 'editor-statusbar'; + statusBar = statusBar = $(elt).siblings(".block-statusbar")[0]; updateStatusBar({line: 0, ch: 0}); - editor.addPanel(statusBar, {position: 'bottom'}); + //editor.addPanel(statusBar, {position: 'bottom'}); editor.on('cursorActivity', function (instance) { var pos = instance.getDoc().getCursor(); updateStatusBar(pos); |