From 16d2d1251bc5b059fe1dcd1701781d0fac396285 Mon Sep 17 00:00:00 2001
From: Louis Gesbert <louis.gesbert@ocamlpro.com>
Date: Wed, 28 Jul 2021 15:07:23 +0200
Subject: [PATCH 1/2] Revert "Merge pull request #261 from
 beobillly/placement_toplevel_buttons"

This reverts commit 3972fe179a4befa676a3b4b4915fabe52887b0ae, reversing
changes made to d5c078ca79ec609ee571c10724df82e77251ae6c.
---
 static/css/learnocaml_exercise.css |  4 ++--
 static/css/learnocaml_main.css     |  4 ++--
 static/exercise.html               | 15 +++++++--------
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/static/css/learnocaml_exercise.css b/static/css/learnocaml_exercise.css
index 1ebc2c2da..01bff301b 100644
--- a/static/css/learnocaml_exercise.css
+++ b/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,7 +318,7 @@ body {
 }
 #learnocaml-exo-tab-toplevel > .buttons {
   position: absolute;
-  right: 1%; top: 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;
diff --git a/static/css/learnocaml_main.css b/static/css/learnocaml_main.css
index 54cf03a26..142955574 100644
--- a/static/css/learnocaml_main.css
+++ b/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;
diff --git a/static/exercise.html b/static/exercise.html
index c53570007..ca7ffb934 100644
--- a/static/exercise.html
+++ b/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. -->

From d61e7c076fc7816deadefda8df0480caf5d4e73e Mon Sep 17 00:00:00 2001
From: Louis Gesbert <louis.gesbert@ocamlpro.com>
Date: Wed, 28 Jul 2021 15:42:40 +0200
Subject: [PATCH 2/2] Fix for #400 and #202

* move buttons to the right so that they are less easy to misclick
* reverse order so that "eval phrase" is first
---
 static/css/learnocaml_exercise.css | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/static/css/learnocaml_exercise.css b/static/css/learnocaml_exercise.css
index 01bff301b..1517c8bf7 100644
--- a/static/css/learnocaml_exercise.css
+++ b/static/css/learnocaml_exercise.css
@@ -318,25 +318,23 @@ body {
 }
 #learnocaml-exo-tab-toplevel > .buttons {
   position: absolute;
-  left: 0; bottom: 0px; width: 100%; 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) {