From 6f6786d79e98259b81722624cb959ccee74e7208 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Fri, 28 Jun 2019 17:09:00 +0100
Subject: [PATCH] Baking controls now scale to fit the pane correctly

---
 src/web/App.mjs                          |  6 +++---
 src/web/RecipeWaiter.mjs                 | 17 +++++++++++++++++
 src/web/html/index.html                  |  2 +-
 src/web/stylesheets/layout/_controls.css |  8 ++++++++
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/web/App.mjs b/src/web/App.mjs
index 8019d483..868684de 100755
--- a/src/web/App.mjs
+++ b/src/web/App.mjs
@@ -244,7 +244,7 @@ class App {
     /**
      * Sets up the adjustable splitter to allow the user to resize areas of the page.
      *
-     * @param {boolean} [minimise=false] - Set this flag if attempting to minimuse frames to 0 width
+     * @param {boolean} [minimise=false] - Set this flag if attempting to minimise frames to 0 width
      */
     initialiseSplitter(minimise=false) {
         if (this.columnSplitter) this.columnSplitter.destroy();
@@ -252,9 +252,9 @@ class App {
 
         this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
             sizes: [20, 30, 50],
-            minSize: minimise ? [0, 0, 0] : [240, 370, 450],
+            minSize: minimise ? [0, 0, 0] : [240, 310, 450],
             gutterSize: 4,
-            expandToMin: false,
+            expandToMin: true,
             onDrag: function() {
                 this.manager.recipe.adjustWidth();
             }.bind(this)
diff --git a/src/web/RecipeWaiter.mjs b/src/web/RecipeWaiter.mjs
index b8b523dc..b408beb0 100755
--- a/src/web/RecipeWaiter.mjs
+++ b/src/web/RecipeWaiter.mjs
@@ -617,6 +617,23 @@ class RecipeWaiter {
             ingredientRule.style.gridTemplateColumns = "auto auto auto auto";
             ingredientChildRule.style.gridColumn = "1 / span 4";
         }
+
+        // Hide Chef icon on Bake button if the page is compressed
+        const bakeIcon = document.querySelector("#bake img");
+
+        if (recList.clientWidth < 370) {
+            // Hide Chef icon on Bake button
+            bakeIcon.style.display = "none";
+        } else {
+            bakeIcon.style.display = "inline-block";
+        }
+
+        // Scale controls to fit pane width
+        const controls = document.getElementById("controls");
+        const controlsContent = document.getElementById("controls-content");
+        const scale = (controls.clientWidth - 1) / controlsContent.scrollWidth;
+
+        controlsContent.style.transform = `translate(-50%, -50%) scale(${scale})`;
     }
 
 }
diff --git a/src/web/html/index.html b/src/web/html/index.html
index 700cc24c..350c4a37 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -191,7 +191,7 @@
                     <ul id="rec-list" class="list-area no-select"></ul>
 
                     <div id="controls" class="no-select">
-                        <div class="d-flex align-items-center">
+                        <div id="controls-content" class="d-flex align-items-center">
                             <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
                                 Step
                             </button>
diff --git a/src/web/stylesheets/layout/_controls.css b/src/web/stylesheets/layout/_controls.css
index 380cd284..8f4cdf0b 100755
--- a/src/web/stylesheets/layout/_controls.css
+++ b/src/web/stylesheets/layout/_controls.css
@@ -21,6 +21,14 @@
     background-color: var(--secondary-background-colour);
 }
 
+#controls-content {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    transform-origin: center left;
+}
+
 #auto-bake-label {
     display: inline-block;
     width: 100px;