summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--css/codeq.css229
-rw-r--r--index.html22
-rw-r--r--js/codeq/editor.js6
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 */
diff --git a/index.html b/index.html
index 042e59a..f7971bf 100644
--- a/index.html
+++ b/index.html
@@ -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);