From 5796a0d930b52380856099bd7e74053962818f1e Mon Sep 17 00:00:00 2001
From: Romain Goyet <romain.goyet@numworks.com>
Date: Wed, 25 Sep 2019 15:10:09 +0200
Subject: [PATCH] [ion/sdl/web] Fix the HTML page actions

---
 ion/src/simulator/web/simulator.html | 49 +++++++++++++++-------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/ion/src/simulator/web/simulator.html b/ion/src/simulator/web/simulator.html
index ef38170c6..5de5de636 100644
--- a/ion/src/simulator/web/simulator.html
+++ b/ion/src/simulator/web/simulator.html
@@ -7,7 +7,7 @@
     <title>NumWorks graphing calculator</title>
 <style>
 body {
-  background: #E3E3E3 linear-gradient(0deg, #E3E3E3, #FFFFFF) no-repeat;
+  background: #C2C2C2;
   margin: 0;
   padding: 0;
   text-align: center;
@@ -38,8 +38,8 @@ body.fullscreen .col-calculator {
 
 a.action {
   display: block;
-  width: 4%;
-  padding: 1.5% 3%;
+  width: 3%;
+  padding: 1% 2%;
   border: 1px solid black;
   border-radius: 100px;
   cursor: pointer;
@@ -55,6 +55,20 @@ a.action svg {
   display: block;
 }
 
+.actions {
+  position: absolute;
+  bottom: 2%;
+  text-align: left;
+  left: 0;
+  right: 0;
+  margin-left: 20px; /* Center the buttons - compensate the 10px margin below */
+}
+
+.actions a {
+  display: inline-block;
+  margin-right: 10px;
+}
+
 .calculator {
   margin: 0 auto;
   position: relative;
@@ -72,18 +86,6 @@ a.action svg {
     width: 67.5%;
     height: 26.3%;
     border: 0 none; }
-  .calculator .actions {
-    position: absolute;
-    bottom: 2%;
-    text-align: center;
-    left: 0;
-    right: 0;
-    margin-left: 20px; /* Center the buttons - compensate the 10px margin below */
-  }
-  .calculator .actions a {
-    display: inline-block;
-      margin-right: 10px;
-  }
   .calculator .keyboard {
     position: absolute;
     top: 38.5%;
@@ -228,19 +230,20 @@ a.action svg {
               <span data-key="52"></span>
             </div>
           </div>
-          <div class="actions">
-            <a id="action-fullscreen" class="action">
-              <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#434343"><path d="M5.075,6.95 L6.918,5.088 L3.938,2.062 L5.955,0.018 L0.052,0.018 L0.052,6.004 L2.098,3.928 L5.075,6.95 Z" class="si-glyph-fill"></path><path d="M16.0034788,9.916 L13.832,12.013 L10.799,8.96 L8.918,10.841 L11.957,13.897 L9.961,15.9813842 L16.0034788,15.9813842 L16.0034788,9.916 Z"></path></g></g></svg>
-            </a>
-            <a id="action-screenshot" class="action">
-              <svg viewBox="0 1.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>871</title><defs></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(0.995000, 2.980000)" fill="#434343"><circle cx="7.958" cy="6.958" r="2.958" class="si-glyph-fill"></circle><path d="M14.666,2.042 L10.953,2.042 L9.937,0.031 L6,0.031 L5,2.042 L1.333,2.042 C0.597,2.042 0,2.639 0,3.375 L0,10.625 C0,11.361 0.597,11.959 1.333,11.959 L14.666,11.959 C15.402,11.959 16,11.361 16,10.625 L16,3.375 C16,2.639 15.402,2.042 14.666,2.042 L14.666,2.042 Z M6.953,0.969 L9.047,0.969 L9.047,2.031 L6.953,2.031 L6.953,0.969 L6.953,0.969 Z M8.002,11.033 C5.764,11.033 3.947,9.221 3.947,6.985 C3.947,4.749 5.763,2.937 8.002,2.937 C10.242,2.937 12.057,4.749 12.057,6.985 C12.057,9.221 10.242,11.033 8.002,11.033 L8.002,11.033 Z M14,4.031 L11.953,4.031 L11.953,2.969 L14,2.969 L14,4.031 L14,4.031 Z" class="si-glyph-fill"></path></g></g></svg>
-            </a>
-          </div>
         </div>
       </div>
       <div class="col-fullscreen">
         <canvas class="screen-magnified" width="320" height="240"></canvas>
       </div>
+      <div class="actions">
+        <a id="action-fullscreen" class="action">
+          <svg viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g fill="#434343"><path d="M5.075,6.95 L6.918,5.088 L3.938,2.062 L5.955,0.018 L0.052,0.018 L0.052,6.004 L2.098,3.928 L5.075,6.95 Z" class="si-glyph-fill"></path><path d="M16.0034788,9.916 L13.832,12.013 L10.799,8.96 L8.918,10.841 L11.957,13.897 L9.961,15.9813842 L16.0034788,15.9813842 L16.0034788,9.916 Z"></path></g></g></svg>
+        </a>
+        <a id="action-screenshot" class="action">
+          <svg viewBox="0 1.5 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>871</title><defs></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(0.995000, 2.980000)" fill="#434343"><circle cx="7.958" cy="6.958" r="2.958" class="si-glyph-fill"></circle><path d="M14.666,2.042 L10.953,2.042 L9.937,0.031 L6,0.031 L5,2.042 L1.333,2.042 C0.597,2.042 0,2.639 0,3.375 L0,10.625 C0,11.361 0.597,11.959 1.333,11.959 L14.666,11.959 C15.402,11.959 16,11.361 16,10.625 L16,3.375 C16,2.639 15.402,2.042 14.666,2.042 L14.666,2.042 Z M6.953,0.969 L9.047,0.969 L9.047,2.031 L6.953,2.031 L6.953,0.969 L6.953,0.969 Z M8.002,11.033 C5.764,11.033 3.947,9.221 3.947,6.985 C3.947,4.749 5.763,2.937 8.002,2.937 C10.242,2.937 12.057,4.749 12.057,6.985 C12.057,9.221 10.242,11.033 8.002,11.033 L8.002,11.033 Z M14,4.031 L11.953,4.031 L11.953,2.969 L14,2.969 L14,4.031 L14,4.031 Z" class="si-glyph-fill"></path></g></g></svg>
+        </a>
+      </div>
+
     </div>
     <script src="epsilon.js"></script>
     <script>