diff options
| -rw-r--r-- | css/codeq.css | 151 | ||||
| -rw-r--r-- | index.html | 49 |
2 files changed, 115 insertions, 85 deletions
diff --git a/css/codeq.css b/css/codeq.css index cfe0ebc..c4dd259 100644 --- a/css/codeq.css +++ b/css/codeq.css @@ -6,51 +6,90 @@ */ +/* override bootcrap’s fixed font sizes */ html { font-size: medium; } -body { - font-size: 1em; - padding-top: 50px; -} - +body, +code, +pre, .btn { font-size: 1em; } +/* code text style */ code { background-color: #f4f2f9; color: #1525c6; - font-size: 1em; padding: 0.1em 0.2em; } pre { - font-size: 1em; padding: 0.5em 1em; } -.title { - /*color: whitesmoke;*/ - /*margin-left: 5px;*/ +.btn { + height: 2em; + line-height: 1em; } -/* brand */ -.navbar-brand { - padding: 7px 15px; /*adjust the top/bottom padding if your logo looks too small */ - margin-top: 0; /* you can adjust this if your logo needs to be moved up or down but simply adjusting the padding is easier */ - height: 50px; /* this should be equal to computed height of .navbar-nav>li>a */ +/* rework header bar to allow user-specified font sizes */ +body { + padding-top: 3em; /* padding-top = topbar.min-height */ } -.navbar-brand>img { - -o-object-fit: contain; /* Opera Support */ - object-fit: contain; /* Resize down to fit container */ - max-height: 100%; /* resize DOWN to height of container which is set to 50px */ - height: 100%; /* resize UP to fit*/ - max-width: 100%; - width: auto; /* resize based on height */ - margin: 0 auto; +div#topbar { + border-bottom-style: 1px solid black; + min-height: 3em; +} + +div.container-fluid { + padding: 0; +} + +div.container-fluid > div.navbar-header, +div.container-fluid > div.navbar-collapse { + margin: 0; +} + +div.navbar-collapse { + padding: 0; +} + +button.navbar-toggle { + margin: 0.6em; /* line-height + 2*(margin + padding) = topbar.min-height */ + padding: 0.4em; + border-style: none; +} + +div.navbar-header > a > img { + height: 3em; /* height = topbar.min-height */ + width: auto; + float: left; + padding: 0.6em 1em; +} + +.navbar-nav { + margin: 0; +} + +.navbar-nav > li > a { + line-height: 1em; /* line-height + 2*padding = topbar.min-height */ + padding: 1em; +} + +p.navbar-text { + line-height: 1em; /* line-height + 2*margin = topbar.min-height */ + margin: 1em; +} + +button.navbar-toggle > span.glyphicon { + color: #888; +} + +.row { + margin: 0; } /* modal screens*/ @@ -125,22 +164,47 @@ div.vertical-line{ /* hints */ +.block.block4 { + padding-bottom: 1em; +} + .block > .hints { padding: 0.5em 0.5em 20px 0.5em; } -.block.block4 { - padding-bottom: 1em; +/* code_editor */ +.block.block2 { + padding-top: 3em; /* padding-top = 2*block-toolbar.padding + .btn.height */ + padding-bottom: 1.5em; /* padding-bottom = .block-statusbar.height */ } -/* code_editor */ .block > .code_editor { + border-bottom: 1px solid #e5e5e5; + border-top: 1px solid #e5e5e5; min-height: 8em; } -.block.block2 { - padding-top: 51px; - padding-bottom: 21px; +.block-toolbar { + position: absolute; + right: 0; + left: 0; + top: 0; + background-color: #F7F7F7; + padding: 0.5em; +} + +.block-statusbar { + height: 1.5em; + line-height: 1em; + padding: 0.25em; + position: absolute; + bottom: 0; + left: 0; + right: 0; + background-color: #F7F7F7; + /*font-family: monospace;*/ + opacity: .7; + text-align: left; } /* console */ @@ -165,20 +229,6 @@ div.vertical-line{ text-align: right; } -.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; - padding: 0 4px; -} - /* robot connection & sensor info */ #screen_robot .block3 .status { background-color: #666; @@ -191,17 +241,6 @@ div.vertical-line{ right: 1em; } -/* block-toolbar */ -.block-toolbar { - position: absolute; - right: 0; - left: 0; - top: 0; - border:0; - border-bottom: 1px solid #e5e5e5; - background-color: #F7F7F7; -} - /*CodeMirror for mobile design*/ .CodeMirror { height: auto; @@ -221,8 +260,8 @@ div.vertical-line{ } .block > .scrollable-content-container { - padding-left: 1.5em; - padding-right: 1.5em; + padding-left: 1em; + padding-right: 1em; } /***** responsiveness *****/ @@ -59,14 +59,11 @@ <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> + <span class="glyphicon glyphicon-menu-hamburger"></span> </button> - <a id="navigation-home" class="navbar-brand" tabindex="10" accesskey="1" href="#" title="Intelligent tutor system"> + <a id="navigation-home" tabindex="10" accesskey="1" href="#" title="Intelligent tutor system"> <img src="res/CodeQ_logo-sivi.png" class="img-responsive"> </a> - <!--a class="navbar-brand" id="title"></a--> </div> <!-- Collect the nav links, forms, and other content for toggling --> @@ -346,13 +343,11 @@ </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 ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button> - </div> - </nav> + <div class="block-toolbar"> + <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> + <button type="button" class="btn btn-default 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 ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button> + </div> <div class="code_editor"></div> <div class="block-statusbar"></div> <div class="block-label" data-tkey="code">Code</div> @@ -387,15 +382,13 @@ </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 ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</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="block-toolbar"> + <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> + <button type="button" class="btn btn-default 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 ladda-button btn-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button> + <button type="button" class="btn btn-default btn-run" data-tkey="btn_run">Run</button> + <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button> + </div> <div class="code_editor"></div> <div class="block-statusbar"></div> <div class="block-label" data-tkey="code">Code</div> @@ -430,14 +423,12 @@ </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="block-toolbar"> + <button type="button" class="btn btn-default btn-plan" data-tkey="btn_plan">Plan</button> + <button type="button" class="btn btn-default 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 btn-run" data-tkey="btn_run">Run</button> + <button type="button" class="btn btn-default btn-stop" data-tkey="btn_stop">Stop</button> + </div> <div class="code_editor"></div> <div class="block-statusbar"></div> <div class="block-label" data-tkey="code">Code</div> |