responsiveness and scrolling fixed for all viewport sizes

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 24a4836..700a170 100644
--- a/index.html
+++ b/index.html
@@ -161,8 +161,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">Plan</button>
                             <button type="button" class="btn btn-default navbar-btn btn-hint">Hint</button>
@@ -170,6 +170,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">
@@ -191,8 +192,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">Plan</button>
                             <button type="button" class="btn btn-default navbar-btn btn-hint">Hint</button>
@@ -202,6 +203,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">
@@ -215,13 +217,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">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>
@@ -281,7 +283,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>
@@ -344,11 +346,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);