[#181] mobile layout: set heights of all components to make up 100vh

src/web/App.mjs

@@ -668,7 +668,7 @@ class App {
         this.manager.recipe.adjustWidth();
         this.manager.input.calcMaxTabs();
         this.manager.output.calcMaxTabs();
-        this.manager.controls.calcControlsHeight();
+        this.manager.controls.calcControlsHeight(); //@TODO
     }
 
 

src/web/TODO.md

@@ -6,7 +6,7 @@
 ### Desktop UI:
 - restore desktop UI
 - `search-results` should really be at the top once input, with `categories` below it
-- `calcControlsHeight` and `adjustComponentSizes` sometimes cause trouble in `recipe` `rec-list`
+- `calcControlsHeight` and `adjustComponentSizes` cause trouble in `recipe` `rec-list` when resizing from desktop to mobile
 
 ### Mobile UI:
 - bootstrap native 'x' in `input[type="search"]` should clear input value and
@@ -14,7 +14,6 @@
 - on click of `input[type="search]`, `favourites` briefly opens and closes. Initially, it should be opened
 - on invalid search input ( and no results ), categories should be displayed
 - test with keyboard popping up because that messes with the viewheights on mobile probably
-- make sure panels in `workspace-wrapper` grow and add up to 100%
 
 ### General UI:
 - fix up key / tab events so UI can be navigated comfortably with keys ( inc. visual focus feedback ). Probably a lot

src/web/html/index.html

@@ -193,7 +193,7 @@
                 </div>
             </div>
             <div id="workspace-wrapper">
-                <!--operations-->
+
                 <div id="operations" class="split split-horizontal no-select">
                     <div class="title no-select"
                          data-help-title="Operations list"
@@ -210,7 +210,7 @@
                         </span>
 
                     </div>
-                    <div class="dropdown-operations">
+                    <div class="operations-wrapper">
                         <input id="search"
                                type="search"
                                class="form-control"
@@ -225,8 +225,6 @@
                         <div id="categories" class="panel-group no-select hidden"></div>
                     </div>
                 </div>
-
-                <!--recipe-->
                 <div id="recipe" class="split split-horizontal no-select" data-help-title="Recipe pane" data-help="<p>The Recipe pane is where your chosen Operations are configured. If you are a programmer, think of these as functions. If you are not a programmer, these are like steps in a cake recipe. The Input data will be processed based on the Operations in your Recipe.</p><ul><li>To reorder, simply drag and drop the Operations into the order your require</li><li>To remove an operation, either double click it, or drag it outside of the Recipe pane</li></ul><p>The arguments (or 'Ingredients' in CyberChef terminology) can be configured to change how an Operation processes the data.</p>">
                     <div class="title no-select">
                         Recipe
@@ -269,7 +267,6 @@
                     </div>
                 </div>
 
-                <!--IO: input/output-->
                 <div id="IO" class="split split-horizontal">
                     <!--input-->
                     <div id="input" class="split no-select" data-help-title="Input pane" data-help="<p>Input data can be entered by typing it in, pasting it in, dragging it in, or using the 'Load file' or 'Load folder' buttons.</p><p>CyberChef does its best to represent data as accurately as possible to ensure you know exactly what you are working with. Non-printable characters are represented using control character pictures, for example a null byte (0x00) is displayed like this: <span title='Control character null' aria-label='Control character null' class='cm-specialChar'>␀</span>.</p>">

src/web/stylesheets/components/_operation.css

@@ -317,21 +317,6 @@ input.toggle-string {
     background-color: var(--disabled-border-colour) !important;
 }
 
-/*@TODO: move below block elsewhere, think of a better name*/
-/* Mobile UI for the dropdown operations search */
-.dropdown-operations {
-    position: relative;
-}
-
-#reset-operations.hidden,
-#search-results.hidden,
-#categories.hidden {
-    z-index: -10;
-    display: none;
-}
-/* end mobile UI for the dropdown operations search */
-
-
 
 
 

src/web/stylesheets/components/_recipe.css

@@ -11,7 +11,7 @@
 }
 
 #rec-list {
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 #rec-list .operation {

src/web/stylesheets/components/operations/_operations.css

@@ -0,0 +1,14 @@
+/**
+ * Operations component styles
+ */
+
+.operations-wrapper {
+    position: relative;
+}
+
+#reset-operations.hidden,
+#search-results.hidden,
+#categories.hidden {
+    z-index: -10;
+    display: none;
+}

src/web/stylesheets/components/operations/_search.css

@@ -1,3 +1,7 @@
+/**
+ * Operations - Search component and search-results list
+ */
+
 #search {
     padding-left: 10px;
     padding-right: 10px;

src/web/stylesheets/index.css

@@ -22,20 +22,21 @@
 @import "./preloader.css";
 
 /* Components */
-@import "./components/_banner.css";
 @import "./components/_button.css";
 @import "./components/_op-list.css";
 @import "./components/_operation.css";
 @import "./components/_pane.css";
-@import "./components/_modals.css";
-@import "./components/_recipe.css";
 @import "./components/_scrollbar.css";
-@import "./components/_controls.css";
 @import "./components/_dividers.css";
-/* Components: Operations group */
+@import "./components/_modals.css";
+@import "./components/_banner.css";
+@import "./components/_recipe.css";
+@import "./components/_controls.css";
+/* Components: Operations */
+@import "./components/operations/_operations.css";
 @import "./components/operations/_search.css";
 @import "./components/operations/_categories.css";
-/* Components: IO group */
+/* Components: IO */
 @import "./components/io/_io.css";
 @import "./components/io/_search-results.css";
 @import "./components/io/_tabs.css";

src/web/stylesheets/layout/_structure.css

@@ -6,6 +6,16 @@
  * @license Apache-2.0
  */
 
+/* Together, they make up 100vh */
+:root {
+    --banner-height: 40px;
+    --controls-height: 70px;
+    --workspace-height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)));;
+    --recipe-height: 20vh;
+    --operations-height: 88px;
+    --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height));
+}
+
 body {
     overflow: hidden;
 }
@@ -16,28 +26,24 @@ body {
     width: 100%;
 }
 
-#workspace-wrapper {
-    height: calc( 100vh - calc( var(--banner-height) + var(--controls-height)) );
-    margin-top: var(--banner-height);
-}
-
-#banner {
-    top: 0;
-    margin: 0;
-    height: var(--banner-height);
-}
-
 #content-wrapper {
     top: 0;
     bottom: 0;
 }
 
-#recipe { height: 20vh;}
-#IO { height: 50vh; }
+#workspace-wrapper {
+    height: var(--workspace-height);
+    margin-top: var(--banner-height);
+}
+
+#banner { height: var(--banner-height); }
+#operations { height: var(--operations-height); }
+#recipe { height: var(--recipe-height); }
+#IO { height: var(--io-height); }
+#controls { height: var(--controls-height); }
 
 #controls {
     bottom: 0;
-    height: var(--controls-height);
 }
 
 @media only screen and ( min-width: 768px ) {

src/web/stylesheets/themes/_classic.css

@@ -132,7 +132,5 @@
     --code-font-colour: #c7254e;
     --input-highlight-colour: #1976d2;
     --input-border-colour: #424242;
-    --banner-height: 40px;
-    --controls-height: 70px;
 }