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

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;
 }