summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/codeq.css32
-rw-r--r--index.html227
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;
diff --git a/index.html b/index.html
index 004d0e7..4b5a697 100644
--- a/index.html
+++ b/index.html
@@ -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">