[#181] a few cosmetic touch ups, todo update

src/web/App.mjs

@@ -336,8 +336,9 @@ class App {
      *
      * A note: there is some code repetition here ( re setDesktopLayout ),
      * but I found some lingering gutters or odd behaviour on window resizing that is
-     * resolved by always destroying splitters. Now setDesktopLayout and setMobileLayout
-     * can be called on window resizing events and the switch gets handled smoothly.
+     * resolved by always destroying and rebuilding the splitters. Now setDesktopLayout
+     * and setMobileLayout can be called on window resizing events and the switch
+     * gets handled smoothly.
      */
     setMobileLayout() {
         if (this.columnSplitter) this.columnSplitter.destroy();
@@ -353,7 +354,6 @@ class App {
         this.ioSplitter = Split(["#input", "#output"], {
             direction: "vertical",
             gutterSize: 0,
-            minSize: [50, 50]
         });
     }
 

src/web/TODO.md

@@ -3,15 +3,17 @@
 
 ---
 
-### Mobile UI:
-#### Operations:
+#### Mobile UI ( on real device ):
 - on mobile UI, there is almost no visual feedback when adding an operation to the recipe list. Since the recipe list is not visible like on desktop, this is very confusing UX
+- adding an operation only works with drag and drop, not on double tap or the like. This todo is related to the remaining mobile UI one.
+  Dragging and dropping won't be an option on mobile, because then you can't scroll the operations list. I'm thinking to add
+  operations on mobile via double tap, then add a checkmark at the right end of the op list item. Remove an item directly in the list via
+  another double tap ( or clearing the recipe list via trash icon as normal ).
+- the above causes a problem for adding favourites though, there is some UX difficulty here.
 
-#### Mobile UI on real device:
 - test *thoroughly* with keyboard popping up because that messes with view-heights on mobile probably and might make it a very frustrating experience
 - test drag and drop etc. Regular mobile events / UX
 - view-heights not correct due to variable taskbar on mobile devices
-- adding an operation only works with drag and drop, not on double tap or the like. This todo is related to the remaining mobile UI one ( I think maybe add a checkmark on double tap, then remove it again on double tap or when recipe list gets cleared )
 
 ### Desktop UI:
 ### General UI:
@@ -22,7 +24,6 @@
 
 ### Misc:
 - remove ln 215 in gruntfile ( for mobile testing )
-- comb through CSS and improve organisation for better DevX
-- write / complete UI tests
+- comb through CSS and improve organisation for better DevX. Ask repo owners to open another issue perhaps and just redo all of the stylesheets ( preferably with SASS )
 - delete this file when done :)
 

src/web/html/index.html

@@ -238,10 +238,7 @@
                             </button>
                         </span>
                     </div>
-                    <!--selected recipes list-->
                     <ul id="rec-list" class="list-area no-select"></ul>
-
-                    <!--controls-->
                     <div id="controls" class="no-select hide-on-maximised-output">
                         <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>">

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

@@ -25,12 +25,12 @@ label[for="output-text"] {
 
 #input .cm-scroller,
 #output .cm-scroller {
-    overflow-y: scroll;
+    overflow-y: auto;
 }
 
 #input .cm-scroller:hover,
 #output .cm-scroller:hover {
-    cursor: pointer;
+    cursor: initial;
 }
 
 #output-text.html-output .cm-content,
@@ -79,7 +79,6 @@ label[for="output-text"] {
     display: flex;
     justify-content: center;
     align-items: center;
-
     transition: all 0.5s ease;
 }
 

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

@@ -21,7 +21,7 @@
     width: 100%;
     min-width: 120px;
     float: left;
-    padding: 0px;
+    padding: 0;
     text-align: center;
     border-right: 1px solid var(--primary-border-colour);
     height: var(--tab-height);

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

@@ -2,6 +2,9 @@
  * Operations - Categories list
  */
 
+#categories {
+    border-top: 1px solid var(--primary-border-colour);
+}
 
 .category-title {
     display: flex;

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

@@ -7,3 +7,4 @@
     padding-right: 10px;
     background-image: none;
 }
+

src/web/stylesheets/layout/_structure.css

@@ -6,20 +6,15 @@
  * @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;
+    --workspace-height: calc( 100vh - var(--banner-height) - var(--controls-height));
+    --recipe-height: 16vh;
+    --operations-height: 89px;
     --io-height: calc(100vh - var(--banner-height) - var(--controls-height) - var(--recipe-height) - var(--operations-height));
 }
 
-body {
-    overflow: hidden;
-}
-
 #banner,
 #content-wrapper {
     position: absolute;
@@ -46,7 +41,23 @@ body {
     bottom: 0;
 }
 
+#IO {
+    padding-bottom: var(--controls-height);
+}
+
 @media only screen and ( min-width: 768px ) {
+    #IO {
+        padding-bottom: 0;
+    }
+
+    #recipe {
+        padding-bottom: var(--controls-height);
+    }
+
+    #recipe .list-area  {
+        bottom: var(--controls-height);
+    }
+
     #workspace-wrapper {
         height: calc( 100vh - var(--banner-height));
     }