diff options
| author | Timotej Lazar <timotej.lazar@fri.uni-lj.si> | 2016-09-09 10:45:21 +0200 |
|---|---|---|
| committer | Timotej Lazar <timotej.lazar@fri.uni-lj.si> | 2016-09-09 10:45:21 +0200 |
| commit | 6337a155b61e6c1cf3dc29923b2d9509d3edaec2 (patch) | |
| tree | f1652975b22731b8ec16ed5adc65f77785770f91 | |
| parent | 47cfa1b9c8abdd96e4aa9c02daf2e735c3a24024 (diff) | |
Declare HTML5 doctype and fix related issues
Also ensure the topbar stays fixed regardless of the content scrollbar.
| -rw-r--r-- | css/codeq.css | 32 | ||||
| -rw-r--r-- | index.html | 227 |
2 files changed, 128 insertions, 131 deletions
diff --git a/css/codeq.css b/css/codeq.css index 964909e..919dc53 100644 --- a/css/codeq.css +++ b/css/codeq.css @@ -48,16 +48,20 @@ pre { line-height: 1em; } -/* rework header bar to allow user-specified font sizes */ -body { - padding-top: 3em; /* padding-top = topbar.min-height */ -} - div#topbar { border-bottom-style: 1px solid black; min-height: 3em; } +div#content { + overflow: auto; + position: absolute; + top: 3em; + bottom: 0; + left: 0; + right: 0; +} + div.container-fluid { padding: 0; } @@ -72,8 +76,9 @@ div.navbar-collapse { } button.navbar-toggle { - margin: 0.6em; /* line-height + 2*(margin + padding) = topbar.min-height */ - padding: 0.4em; + line-height: 1em; /* line-height + 2*(margin + padding) = topbar.min-height */ + margin: 0.5em; + padding: 0.5em; border-style: none; } @@ -102,7 +107,8 @@ button.navbar-toggle > span.glyphicon { color: #888; } -.row { +div.row { + height: 100%; margin: 0; } @@ -159,6 +165,12 @@ div#disabled { padding: 1em 0; } +#aai-iframe { + height: 100%; + width: 100%; + overflow: hidden; +} + /* screen language */ #screen-language { margin-top: 4em; @@ -246,6 +258,10 @@ div.vertical-line{ content: '● '; /* non-breaking spaces */ } +div#content div.container-fluid { + height: 100%; +} + /* description */ .block-left { padding-left: 1em; @@ -1,6 +1,7 @@ +<!DOCTYPE html> <html> <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta charset="utf-8" /> <!--meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"--> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name='HandheldFriendly' content='True'> @@ -104,9 +105,9 @@ </div> </div> - <!-- login screen --> - <div class="container" id="screen-login" style="display: none;"> - <div class="row"> + <div id="content"> + <!-- login screen --> + <div class="container" id="screen-login" style="display: none;"> <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> @@ -153,21 +154,15 @@ </div> </div> </div> - </div> - <!-- AAI login --> - <div class="container-fluid" id="screen-aai-login" style="display: none;"> - <div class="row"> - <div class="col-md-12" style="padding: 0;"> - <button type="button" class="pull-right" id="cancel-aai-login" style="position: absolute; top:10px; left:10px;" data-tkey="go_back">Go back</button> - <iframe width="100%" height="100%" frameborder="0" scrolling="yes" allowtransparency="true" src="" id="aai-iframe"></iframe> - </div> + <!-- AAI login --> + <div class="container-fluid" id="screen-aai-login" style="display: none;"> + <button type="button" class="pull-right" id="cancel-aai-login" style="position: absolute; top:10px; left:10px;" data-tkey="go_back">Go back</button> + <iframe frameborder="0" scrolling="yes" allowtransparency="true" src="" id="aai-iframe"></iframe> </div> - </div> - <!--Sign up screen--> - <div class="container" id="screen-signup" style="display: none;"> - <div class="row"> + <!--Sign up screen--> + <div class="container" id="screen-signup" style="display: none;"> <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> @@ -229,11 +224,9 @@ </div> </div> </div> - </div> - <!-- change password screen --> - <div class="container" id="screen-change-password" style="display: none;"> - <div class="row"> + <!-- change password screen --> + <div class="container" id="screen-change-password" style="display: none;"> <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> @@ -267,11 +260,9 @@ </div> </div> </div> - </div> - <!-- upgrade account to AAI screen --> - <div class="container" id="screen-upgrade-to-aai" style="display: none;"> - <div class="row"> + <!-- upgrade account to AAI screen --> + <div class="container" id="screen-upgrade-to-aai" style="display: none;"> <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> @@ -307,11 +298,9 @@ </div> </div> </div> - </div> - <!-- about screen --> - <div class="container" id="screen-about" style="display: none;"> - <div class="row"> + <!-- about screen --> + <div class="container" id="screen-about" style="display: none;"> <div class="col-md-12"> <h2 data-tkey="about">About</h2> <div class="btn-group"> @@ -323,11 +312,9 @@ </div> </div> </div> - </div> - <!-- main screen: programming language selection, settings, etc. --> - <div class="container" id="screen-language" style="text-align: center; display: none;"> - <div class="row"> + <!-- main screen: programming language selection, settings, etc. --> + <div class="container" id="screen-language" style="text-align: center; display: none;"> <div class="col-lg-4"> <a href="#" id="choose-prolog" style="display: block;" tabindex="100"> <img class="img-circle" src=res/prolog.png alt="Generic placeholder image" width="140" height="140"> @@ -347,14 +334,12 @@ </a> </div> </div> - </div> - <!-- problem selection screen for a specific language: groups of problems, with descriptions --> - <div class="container" id="screen-problem-list" style="display: none;"></div> + <!-- problem selection screen for a specific language: groups of problems, with descriptions --> + <div class="container" id="screen-problem-list" style="display: none;"></div> - <!-- screen to display all user solutions for a given langauge --> - <div class="container" id="screen-solutions" style="display: none;"> - <div class="row"> + <!-- screen to display all user solutions for a given langauge --> + <div class="container" id="screen-solutions" style="display: none;"> <div class="col-md-12"> <h2 data-tkey="your_solutions">Your solutions</h2> <div class="btn-group"> @@ -364,106 +349,104 @@ <div class="solutions"></div> </div> </div> - </div> - <!-- problem screen: prolog --> - <div class="container-fluid quadrants" id="screen-prolog" style="display: none;"> - <div class="row"> - <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> - <div class="description-container"> - <h1 class="title" data-dict="prolog" data-tkey="name"></h1> - <div class="description" data-dict="prolog" data-tkey="description"></div> - </div> - <div class="hints"></div> - </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 block-editor"> - <div class="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-test" data-style="slide-up" data-spinner-color="blue"><span class="ladda-label" data-tkey="btn_test">Test</span></button> + <!-- problem screen: prolog --> + <div class="container-fluid quadrants" id="screen-prolog" style="display: none;"> + <div class="row"> + <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> + <div class="description-container"> + <h1 class="title" data-dict="prolog" data-tkey="name"></h1> + <div class="description" data-dict="prolog" data-tkey="description"></div> </div> - <div class="code-editor"></div> - <div class="statusbar"></div> - <div class="block-label" data-tkey="code">Code</div> + <div class="hints"></div> </div> - <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> - <div class="console"></div> - <div class="block-label" data-tkey="console">Console</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 block-editor"> + <div class="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-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="statusbar"></div> + <div class="block-label" data-tkey="code">Code</div> + </div> + <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> + <div class="console"></div> + <div class="block-label" data-tkey="console">Console</div> + </div> </div> </div> </div> - </div> - <!-- problem screen: python --> - <div class="container-fluid quadrants" id="screen-python" style="display: none;"> - <div class="row"> - <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> - <div class="description-container"> - <h1 class="title" data-dict="python" data-tkey="name"></h1> - <div class="description" data-dict="python" data-tkey="description"></div> - </div> - <div class="hints"></div> - </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 block-editor"> - <div class="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-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> + <!-- problem screen: python --> + <div class="container-fluid quadrants" id="screen-python" style="display: none;"> + <div class="row"> + <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> + <div class="description-container"> + <h1 class="title" data-dict="python" data-tkey="name"></h1> + <div class="description" data-dict="python" data-tkey="description"></div> </div> - <div class="code-editor"></div> - <div class="statusbar"></div> - <div class="block-label" data-tkey="code">Code</div> + <div class="hints"></div> </div> - <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> - <div class="console"></div> - <div class="block-label" data-tkey="console">Console</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 block-editor"> + <div class="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-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="statusbar"></div> + <div class="block-label" data-tkey="code">Code</div> + </div> + <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> + <div class="console"></div> + <div class="block-label" data-tkey="console">Console</div> + </div> </div> </div> </div> - </div> - <!-- problem screen: robot --> - <div class="container-fluid quadrants" id="screen-robot" style="display: none;"> - <div class="row"> - <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> - <div class="description-container"> - <h1 class="title" data-dict="robot" data-tkey="name"></h1> - <div class="description" data-dict="robot" data-tkey="description"></div> - </div> - <div class="hints"></div> - </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 block-editor"> - <div class="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> + <!-- problem screen: robot --> + <div class="container-fluid quadrants" id="screen-robot" style="display: none;"> + <div class="row"> + <div class="col-lg-4 col-md-4 col-sm-12 block block-left"> + <div class="description-container"> + <h1 class="title" data-dict="robot" data-tkey="name"></h1> + <div class="description" data-dict="robot" data-tkey="description"></div> </div> - <div class="code-editor"></div> - <div class="statusbar"></div> - <div class="block-label" data-tkey="code">Code</div> + <div class="hints"></div> </div> - <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> - <div class="console"></div> - <div class="status"></div> - <div class="block-label" data-tkey="console">Console</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 block-editor"> + <div class="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="statusbar"></div> + <div class="block-label" data-tkey="code">Code</div> + </div> + <div class="col-lg-6 col-md-12 col-sm-12 block block-console"> + <div class="console"></div> + <div class="status"></div> + <div class="block-label" data-tkey="console">Console</div> + </div> </div> </div> </div> - </div> - <!-- profile screen --> - <div class="container" id="screen-profile" style="display: none;"> - <h2 data-tkey="profile">Profile</h2> - <div class="btn-group"> - <button type="button" id="profile-change-password" class="btn btn-default saml-login-hide" data-tkey="change_pass">Change Password</button> - <button type="button" id="profile-back" class="btn btn-default" data-tkey="go_back">Go back</button> - </div> - <hr /> - <div class="row"> + <!-- profile screen --> + <div class="container" id="screen-profile" style="display: none;"> + <h2 data-tkey="profile">Profile</h2> + <div class="btn-group"> + <button type="button" id="profile-change-password" class="btn btn-default saml-login-hide" data-tkey="change_pass">Change Password</button> + <button type="button" id="profile-back" class="btn btn-default" data-tkey="go_back">Go back</button> + </div> + <hr /> <div class="col-lg-12 col-md-12"> <div class="panel panel-default"> <div class="panel-heading"> @@ -483,11 +466,9 @@ </div> </div> </div> - </div> - <!-- Settings screen --> - <div class="container" id="screen-settings" style="display: none;"> - <div class="row"> + <!-- Settings screen --> + <div class="container" id="screen-settings" style="display: none;"> <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1"> <div class="panel panel-default"> <div class="panel-heading"> |