[gchq#181] adjust #controls panel template and css so it will automatically scale based on #controls height, which makes adjustWidth() redundant. Controls is now 50px height on mobile ( 70 was just a lot of wasted space that can be better spend )

Author: valdelaseras

src/web/App.mjs

@@ -314,7 +314,7 @@ class App {
 
         this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
             sizes: [20, 30, 50],
-            minSize: minimise ? [0, 0, 0] : [20, 30, 50],
+            minSize: minimise ? [0, 0, 0] : [20, 330, 50],
             gutterSize: 4,
             expandToMin: true,
             onDrag: debounce(function() {
@@ -663,7 +663,6 @@ class App {
      * Adjust components to fit their containers.
      */
     adjustComponentSizes() {
-        this.manager.recipe.adjustWidth();
         this.manager.input.calcMaxTabs();
         this.manager.output.calcMaxTabs();
     }
@@ -877,7 +876,7 @@ class App {
     setDesktopUI(minimise){
         $("[data-toggle=tooltip]").tooltip("enable");
         this.setDesktopSplitter(minimise);
-        // this.adjustComponentSizes();
+        this.adjustComponentSizes();
         this.populateOperationsList();
         this.manager.recipe.clearAllSelectedClasses();
     }
@@ -903,7 +902,11 @@ class App {
      * ( themes/_structure ) if you make changes to those elements' height.
      */
     assignAvailableHeight( isMobile ){
-        const remainingSpace = window.innerHeight - (40+50+90-2); // banner, controls height, operations, accounting for some borders
+        const bannerHeight = 40;
+        const controlsHeight = 50;
+        const operationsHeight = 90;
+
+        const remainingSpace = window.innerHeight - (bannerHeight+controlsHeight+operationsHeight-2);
 
         // equally divide among recipe, input and output
         ["recipe", "input", "output"].forEach(( div ) => {

src/web/TODO.md

@@ -8,6 +8,9 @@
 - maybe a bit annoying that the fav cat opens whenever you add a new fav via icon-fav-click on mobile
 - backspace on fs view should close max view. Keep making the same mistake and navigating away when for instance recipe is expanded and double click the window to fs > resolve. Reset layout
 
+### Desktop
+- fixed status panel ( rhs ) overlays recipe column if split all the way to the right
+
 ### JS:
 - `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original
 

src/web/html/index.html

@@ -251,7 +251,7 @@
                             </div>
                             <div class="col-6">
                                 <button type="button" class="btn btn-success btn-raised btn-block" id="bake" data-help-title="Baking" data-help="<p>Baking causes CyberChef to run the Recipe against your data. This involves three steps:</p><ol><li>The data in the Input is encoded into bytes using the character encoding selected in the Input status bar.</li><li>The data is run through each of the operations in the Recipe in turn with the output of one operation being fed into the next operation as its input.</li><li>The outcome of the final operation in the Recipe is decoded into Output text using the character encoding selected in the Output status bar.</li></ol><p>If there are multiple Inputs, the Bake button causes every Input to be baked simultaneously.</p>">
-<!--                                    <img aria-hidden="true" class="desktop-only" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>-->
+                                    <img aria-hidden="true" class="desktop-only" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
                                     <span>Bake!</span>
                                 </button>
                             </div>

src/web/stylesheets/components/_controls.css

@@ -15,32 +15,13 @@
 
 #controls-content {
     display: flex;
-    align-items: center;
+    /*align-items: center;*/
     padding: 10px 0;
+    height: 100%;
 }
 
-#auto-bake-label {
-    /*display: inline-block;*/
-    /*width: 100px;*/
-    padding: 0;
-    margin: 0;
-    font-size: initial;
-    /*text-align: center;*/
-    color: var(--primary-font-colour);
-    /*font-size: 14px;*/
-    cursor: pointer;
-}
-
-#auto-bake-label .check,
-#auto-bake-label .check::before {
-    border-color: var(--input-highlight-colour);
-    color: var(--input-highlight-colour);
-}
-
-#auto-bake-label .checkbox-decorator {
-    position: relative;
-    margin: 0;
-    padding: 0;
+#controls-content > div {
+    height: 100%;
 }
 
 /* bake button */
@@ -54,13 +35,41 @@
     margin: 0;
     font-size: initial;
     line-height: 0;
-    height: 30px;
+    height: 100%;
 }
 
+/* auto bake */
 #controls-content .form-group {
     text-align: center;
+    height: 100%;
+}
+
+#controls-content .form-group > .checkbox {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
+#auto-bake-label {
+    padding: 0;
+    margin: 0;
+    font-size: initial;
+    color: var(--primary-font-colour);
+    cursor: pointer;
+}
+
+#auto-bake-label .check,
+#auto-bake-label .check::before {
+    border-color: var(--input-highlight-colour);
+    color: var(--input-highlight-colour);
+}
+
+#auto-bake-label .checkbox-decorator {
+    position: relative;
+    margin: 0;
+    padding: 0;
+}
 
 
 

src/web/stylesheets/layout/_structure.css

@@ -10,6 +10,10 @@
 #operations { height: var(--operations-height); }
 #controls { height: var(--controls-height); }
 
+@media only screen and ( min-width: 768px ) {
+    #controls { height: var(--desktop-controls-height); }
+}
+
 #banner,
 #content-wrapper {
     position: absolute;
@@ -47,11 +51,11 @@
 
 @media only screen and ( min-width: 768px ) {
     #recipe {
-        padding-bottom: var(--controls-height);
+        padding-bottom: var(--desktop-controls-height);
     }
 
     #recipe .list-area  {
-        bottom: var(--controls-height);
+        bottom: var(--desktop-controls-height);
     }
 
     #workspace-wrapper {

src/web/stylesheets/themes/_structure.css

@@ -1,9 +1,11 @@
 :root {
     /* Fixed heights */
     --banner-height: 40px;
-    --controls-height: 50px;
     /*initial mobile height*/
+    --controls-height: 50px;
     --operations-height: 90px;
+
+    --desktop-controls-height: 70px;
 }
 
 /**

src/web/waiters/RecipeWaiter.mjs

@@ -589,31 +589,6 @@ class RecipeWaiter {
     }
 
 
-    /**
-     * Adjusts the number of ingredient columns as the width of the recipe changes.
-     */
-    adjustWidth() {
-        const recList = document.getElementById("rec-list");
-
-        // 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 = `scale(${scale})`;
-    }
-
-
     /**
      * Remove all "selected" classes for op-list list items at once
      *