[#181] decrease size of controls for mobile UI

src/web/App.mjs

@@ -877,7 +877,7 @@ class App {
     setDesktopUI(minimise){
         $("[data-toggle=tooltip]").tooltip("enable");
         this.setDesktopSplitter(minimise);
-        this.adjustComponentSizes();
+        // this.adjustComponentSizes();
         this.populateOperationsList();
         this.manager.recipe.clearAllSelectedClasses();
     }
@@ -896,16 +896,14 @@ class App {
     /**
      * Due to variable available heights on mobile devices ( due to the
      * address bar etc. ), we need to calculate the available space and
-     * set some heights programmatically.
+     * set some heights programmatically based on the full view height,
+     * minus fixed height elements.
      *
-     * The numbers 40, 70 and 90 refer to divs with fixed heights,
+     * Be mindful to update these fixed numbers accordingly in the stylesheets
-     * that is: #banner, #operations and #controls. -2 is accounting for
+     * ( themes/_structure ) if you make changes to those elements' height.
-     * some borders.
-     * Be mindful to update these accordingly in the stylesheets
-     * ( themes/_structure ) if you want to make changes.
      */
     assignAvailableHeight( isMobile ){
-        const remainingSpace = window.innerHeight - (40+70+90-2); // banner, operations, controls height
+        const remainingSpace = window.innerHeight - (40+50+90-2); // banner, controls height, operations, accounting for some borders
 
         // equally divide among recipe, input and output
         ["recipe", "input", "output"].forEach(( div ) => {

src/web/TODO.md

@@ -13,5 +13,6 @@
 
 ### Misc:
 - Gruntfile revert dev config
+- Update README instructions per Mobile UI
 - delete this file when done :)
 

src/web/html/index.html

@@ -244,21 +244,25 @@
                     <ul id="rec-list" class="list-area no-select"></ul>
                     <div id="controls" class="no-select">
                         <div id="controls-content">
-                            <button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe" data-help-title="Stepping through the Recipe" data-help="<p>The Step button allows you to execute one operation at a time, rather than running the whole Recipe from beginning to end.</p><p>Step allows you to inspect the data at each stage of the Recipe and understand what is being passed to the next operation.</p>">
+                            <div class="col-3">
-                                Step
+                                <button type="button" class="btn btn-block btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe" data-help-title="Stepping through the Recipe" data-help="<p>The Step button allows you to execute one operation at a time, rather than running the whole Recipe from beginning to end.</p><p>Step allows you to inspect the data at each stage of the Recipe and understand what is being passed to the next operation.</p>">
-                            </button>
+                                    Step
-
+                                </button>
-                            <button type="button" class="mx-2 btn btn-lg 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>">
+                            </div>
-                                <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
+                            <div class="col-6">
-                                <span>Bake!</span>
+                                <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>">
-                            </button>
+<!--                                    <img aria-hidden="true" class="desktop-only" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>-->
-
+                                    <span>Bake!</span>
-                            <div class="form-group" style="display: contents;">
+                                </button>
-                                <div class="mx-1 checkbox" data-help-title="Auto-bake" data-help="<p>When Auto-bake is turned on, CyberChef will bake the Input using the Recipe whenever anything in the Input or Recipe changes.</p>This includes:<ul><li>Adding or removing operations</li><li>Modifying operation arguments</li><li>Editing the Input</li><li>Changing the Input character encoding</li></ul><p>If there are multiple inputs, only the currently active tab will be baked when Auto-bake triggers. You can bake all inputs manually using the Bake button.</p>">
+                            </div>
-                                    <label id="auto-bake-label">
+                            <div class="col-3">
-                                        <input type="checkbox" checked="checked" id="auto-bake">
+                                <div class="form-group" style="display: contents;">
-                                        <br>Auto Bake
+                                    <div class="checkbox" data-help-title="Auto-bake" data-help="<p>When Auto-bake is turned on, CyberChef will bake the Input using the Recipe whenever anything in the Input or Recipe changes.</p>This includes:<ul><li>Adding or removing operations</li><li>Modifying operation arguments</li><li>Editing the Input</li><li>Changing the Input character encoding</li></ul><p>If there are multiple inputs, only the currently active tab will be baked when Auto-bake triggers. You can bake all inputs manually using the Bake button.</p>">
-                                    </label>
+                                        <label id="auto-bake-label">
+                                            <input type="checkbox" checked="checked" id="auto-bake">
+                                            <small>Auto</small>
+                                        </label>
+                                    </div>
                                 </div>
                             </div>
                         </div>

src/web/stylesheets/components/_controls.css

@@ -8,7 +8,6 @@
 
 #controls {
     width: 100%;
-    padding: 10px 0;
     border-top: 1px solid var(--primary-border-colour);
     background-color: var(--secondary-background-colour);
     overflow: hidden;
@@ -16,18 +15,19 @@
 
 #controls-content {
     display: flex;
-    flex-flow: row nowrap;
     align-items: center;
+    padding: 10px 0;
 }
 
 #auto-bake-label {
-    display: inline-block;
+    /*display: inline-block;*/
-    width: 100px;
+    /*width: 100px;*/
     padding: 0;
     margin: 0;
-    text-align: center;
+    font-size: initial;
+    /*text-align: center;*/
     color: var(--primary-font-colour);
-    font-size: 14px;
+    /*font-size: 14px;*/
     cursor: pointer;
 }
 
@@ -39,19 +39,28 @@
 
 #auto-bake-label .checkbox-decorator {
     position: relative;
+    margin: 0;
+    padding: 0;
 }
 
+/* bake button */
 #bake {
     box-shadow: none;
 }
 
+/* bake and step buttons */
 #controls .btn {
     border-radius: 30px;
     margin: 0;
+    font-size: initial;
+    line-height: 0;
+    height: 30px;
 }
 
-.top-zindex {
+#controls-content .form-group {
-    z-index: 200;
+    text-align: center;
 }
 
 
+
+

src/web/stylesheets/components/_operation.css

@@ -40,7 +40,7 @@
     margin: 0 10px 0 0;
     padding: 0;
     color: var(--category-list-font-colour);
-    opacity: .5;
+    opacity: .35;
     cursor: pointer;
 }
 

src/web/stylesheets/components/io/_io.css

@@ -198,3 +198,8 @@ label[for="output-text"] {
 #output .cm-panels {
     border-color: var(--primary-border-colour);
 }
+
+/* maximise pane and lay on top of everything ( mobile UI )*/
+.top-zindex {
+    z-index: 200;
+}

src/web/stylesheets/components/io/_status-bar.css

@@ -115,3 +115,4 @@
     right: 15px;
 }
 
+

src/web/stylesheets/themes/_structure.css

@@ -1,7 +1,7 @@
 :root {
     /* Fixed heights */
     --banner-height: 40px;
-    --controls-height: 70px;
+    --controls-height: 50px;
     /*initial mobile height*/
     --operations-height: 90px;
 }
@@ -10,8 +10,7 @@
  * A note:
  *
  * Heights of #recipe, #input and #output are set programmatically
- * in App.js > divideAvailableSpace(), please see the docs for that
+ * in App.js
- * function for more information.
  */