Merge pull request #409 from AltGr/movbuttons

Move the toplevel buttons to the bottom-right

Author: erikmd

static/css/learnocaml_exercise.css

@@ -306,7 +306,7 @@ body {
 /* -------------------- toplevel tab ------------------------------ */
 #learnocaml-exo-tab-toplevel > .toplevel-pane {
   position: absolute;
-  left: 0; top: 0; bottom: 0px; width: 100%;
+  left: 0; top: 0; bottom: 40px; width: 100%;
   z-index: 1002;
   margin: 5px 0 0 0;
 }
@@ -318,25 +318,23 @@ body {
 }
 #learnocaml-exo-tab-toplevel > .buttons {
   position: absolute;
-  right: 1%; top: 5px; width: 49%; height: 40px;
+  left: 0; bottom: 0px; width: 100%; height: 39px;
   background: linear-gradient(to bottom, #fff 0px, #ddd 10px, #aaa 60px);
   color: #fff;
   line-height: 40px;
   display: flex;
-  flex-direction: row;
+  flex-direction: row-reverse;
   z-index: 1003;
+  border-top: 1px #000 solid;
 }
 #learnocaml-exo-tab-toplevel > .buttons > button {
-  flex: 1;
+  flex: 0 0.33 200px;
   background: none;
   border: none;
   color: #222;
   text-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-  border-top: 1px #666 solid;
   position: relative;
   padding: 0;
-}
-#learnocaml-exo-tab-toplevel > .buttons > button:not(:first-child) {
   border-left: 1px #666 solid;
 }
 @media (max-width: 550px) {

static/css/learnocaml_main.css

@@ -335,11 +335,11 @@ body {
 }
 #learnocaml-main-toplevel > .toplevel-pane {
   position: absolute;
-  left: 0px; top: 0; right: 0; bottom: 0px;
+  left: 0px; top: 0; right: 0; bottom: 40px;
 }
 #learnocaml-main-toplevel > .buttons {
   position: absolute;
-  top: 13px; right: 1%; bottom: 5px; width: 49%; height: 40px;
+  left: 0; bottom: 0px; width: 100%; height: 40px;
   background: linear-gradient(to bottom, #fff 0px, #ddd 10px, #aaa 60px);
   color: #fff;
   line-height: 40px;

static/exercise.html

@@ -99,6 +99,13 @@
         <!-- <iframe src="/standalone-descr.html"></iframe> -->
       </div>
       <div id="learnocaml-exo-tab-toplevel" class="front-tab">
+        <div id="learnocaml-exo-toplevel-pane" class="toplevel-pane">
+          <!-- <pre class="output"></pre> -->
+          <!-- <pre class="input"> -->
+          <!--   <code id="sharp" class="sharp"></code> -->
+          <!--   <textarea class="console" style="height: 28px">saucisse</textarea> -->
+          <!-- </pre> -->
+        </div>
         <div id="learnocaml-exo-toplevel-toolbar" class="buttons">
           <!-- Any button can be added.
                Structure: button>img, button>span.label. -->
@@ -115,14 +122,6 @@
           <!--   <span class="label">Download</span> -->
           <!-- </button> -->
         </div>
-        <div id="learnocaml-exo-toplevel-pane" class="toplevel-pane">
-          <!-- <pre class="output"></pre> -->
-          <!-- <pre class="input"> -->
-          <!--   <code id="sharp" class="sharp"></code> -->
-          <!--   <textarea class="console" style="height: 28px">saucisse</textarea> -->
-          <!-- </pre> -->
-        </div>
-        
       </div>
       <div id="learnocaml-exo-tab-report">
         <!-- Using an iframe is the easiest way to isolate the CSSs. -->