finished block toolbar, course and task title static mockup, same css adjustments

3 files changed, 53 insertions, 73 deletions

diff --git a/css/codeq.css b/css/codeq.css
index 1cfeae5..48515c0 100644
--- a/css/codeq.css
+++ b/css/codeq.css
@@ -2,6 +2,12 @@ body {
     padding-top: 50px;
 }
 
+
+#title {
+    color: whitesmoke;
+}
+
+
 .block {
     border-right: 1px solid #e5e5e5;
     border-bottom: 1px solid #e5e5e5;
@@ -17,12 +23,22 @@ body {
     right: 1em;
     bottom: 0.25em;
     margin: 0;
-    width: 100%;
+    width: 150px;
     text-transform: uppercase;
     font-size: large;
     text-align: right;
 }
 
+/* block-toolbar */
+
+#block-toolbar {
+    position: absolute;
+    width:100%;
+    margin-bottom: 0px;
+    border: 0;
+}
+
+/***** responsiveness *****/
 /* lg */
 @media (min-width: 1200px) {
     html, body, #gui, #block-row {
@@ -55,6 +71,8 @@ body {
 @media (max-width: 767px) {
 }
 
+
+/***** blocks *****/
 /* description */
 #description {
     padding: 0.5em;
@@ -69,7 +87,10 @@ body {
 #code_editor {
     min-height: 100%;
     height: 100%;
-    padding: 0;
+    padding-top: 50px;
+    padding-right: 0;
+    padding-left: 0;
+    padding-bottom: 0;
 }
 
 /* console */
@@ -120,67 +141,6 @@ body {
 }
 
 
-/* webkit-scrollbar */
-
-::-webkit-scrollbar {
-    width: 12px;
-}
-
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-    border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb {
-    border-radius: 10px;
-    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
-}
-
-/*toolbar
-
-#editor-toolbar {
-    width: 100%;
-    padding-left: 15px;
-    height: 25px;
-    display: inline-block;
-}
-
-#editor-toolbar .tool-icon {
-    font-size: 16px;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-.nav-xs {
-    list-style:none;
-    padding-left: 0;
-    float:left;
-    white-space:nowrap;
-    margin-bottom: 0;
-}
-
-.nav-xs>li {
-    list-style: none;
-    white-space: nowrap;
-    position: relative;
-    display: inline-block !important;
-    background-color: transparent;
-    background: linear-gradient(to bottom, #2a3f53 0%,#192f42 100%);
-    border-right: 1px solid #000;
-}
-
-.nav-xs>li>a {
-    display: block;
-    padding: 2px 6px 3px 6px;
-    font-size: 12px;
-}
-.nav-xs>li>a{
-    color: #fff;
-}
-
-*/
-
-
 /* codeq hints */
 
 /* the highlighted part of the text, used in pop-up and drop-down hints */
@@ -194,3 +154,19 @@ body {
     color: #e7c3c3;
     border: 1px solid black;
 }
+
+
+/***** helpers *****/
+/* webkit-scrollbar */
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
diff --git a/prolog.html b/prolog.html
index a7e73c8..190ccc3 100644
--- a/prolog.html
+++ b/prolog.html
@@ -27,15 +27,17 @@
                     <span class="icon-bar"></span>
                 </button>
                 <a class="navbar-brand" href="#" title="Intelligent tutor system">CodeQ</a>
+                <a class="navbar-brand" id="title">Intro to Prolog programming</a>
             </div>
             <div class="collapse navbar-collapse">
-                <ul class="nav navbar-nav">
+                <!--<p class="title">Course: Intro to Prolog programming</p>-->
+                <!--<ul class="nav navbar-nav">
                     <li><a href="#">Run</a></li>
                     <li><a href="#">Break</a></li>
                     <li><a href="#">Hint</a></li>
-                </ul>
+                </ul>-->
                 <ul class="nav navbar-nav navbar-right">
-                    <li><a href="#"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a></li>
+                    <p class="navbar-text">Signed in as Franc Jožef</p>
                     <li class="dropdown">
                         <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                             <span class="glyphicon glyphicon glyphicon-user"></span>
@@ -46,6 +48,7 @@
                             <li><a href="#">Logout</a></li>
                         </ul>
                     </li>
+                    <li><a href="#"><span class="glyphicon glyphicon glyphicon-wrench" aria-hidden="true"></span></a></li>
                 </ul>
             </div><!--/.nav-collapse -->
 
@@ -59,13 +62,13 @@
                 <div class="block-label">Instructions</div>
             </div>
             <div class="col-lg-3 col-md-6 col-sm-12 block">
-                <!-- <div id="editor-toolbar">
-                    <ul class="nav-xs pull-left">
-                        <li><a title="Run" href="" class="tip tool-icon">Run</a></li>
-                        <li><a title="Break" href="" class="tip tool-icon">Break</a></li>
-                        <li><a title="Hint" href="" class="tip tool-icon">Hint</a></li>
-                    </ul>
-                </div> -->
+                <nav class="navbar navbar-default" id="block-toolbar">
+                    <div class="container-fluid">
+                        <button type="button" class="btn btn-default navbar-btn">Run</button>
+                        <button type="button" class="btn btn-default navbar-btn">Break</button>
+                        <button type="button" class="btn btn-default navbar-btn">Hint</button>
+                    </div>
+                </nav>
                 <div id="code_editor"></div>
                 <div class="block-label">Code</div>
             </div>
diff --git a/sister.py b/sister.py
index 66ef3cd..20d8f1d 100644
--- a/sister.py
+++ b/sister.py
@@ -1,6 +1,7 @@
 # coding=utf-8
 # najprej opis
 description = """\
+<h1>Sister</h1>
 <p>Predikat <code>sister(X, Y)</code> velja natanko takrat, kadar je <code>X</code> sestra od <code>Y</code>.
 Primer klica:</p>
 <p><code>