From 222bb624ae378b660afa46ad178cd9235b4cccf4 Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Wed, 10 May 2023 13:15:01 +1200 Subject: [PATCH] [#181] decrease size of controls for mobile UI --- src/web/App.mjs | 14 ++++---- src/web/TODO.md | 1 + src/web/html/index.html | 34 +++++++++++-------- src/web/stylesheets/components/_controls.css | 25 +++++++++----- src/web/stylesheets/components/_operation.css | 2 +- src/web/stylesheets/components/io/_io.css | 5 +++ .../stylesheets/components/io/_status-bar.css | 1 + src/web/stylesheets/themes/_structure.css | 5 ++- 8 files changed, 52 insertions(+), 35 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index 22e4de1f..015b0964 100755 --- a/src/web/App.mjs +++ b/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, - * that is: #banner, #operations and #controls. -2 is accounting for - * some borders. - * Be mindful to update these accordingly in the stylesheets - * ( themes/_structure ) if you want to make changes. + * Be mindful to update these fixed numbers accordingly in the stylesheets + * ( themes/_structure ) if you make changes to those elements' height. */ 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 ) => { diff --git a/src/web/TODO.md b/src/web/TODO.md index bb597af2..43fe7075 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -13,5 +13,6 @@ ### Misc: - Gruntfile revert dev config +- Update README instructions per Mobile UI - delete this file when done :) diff --git a/src/web/html/index.html b/src/web/html/index.html index eab663d1..38c2dbbd 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -244,21 +244,25 @@
- - - - -
-
- +
+ +
+
+ +
+
+
+
+ +
diff --git a/src/web/stylesheets/components/_controls.css b/src/web/stylesheets/components/_controls.css index 2f952975..3cfd30d8 100644 --- a/src/web/stylesheets/components/_controls.css +++ b/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; - width: 100px; + /*display: inline-block;*/ + /*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 { - z-index: 200; +#controls-content .form-group { + text-align: center; } + + diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index 5a303e56..1cb48691 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/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; } diff --git a/src/web/stylesheets/components/io/_io.css b/src/web/stylesheets/components/io/_io.css index e0ea0184..4eeb0981 100755 --- a/src/web/stylesheets/components/io/_io.css +++ b/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; +} diff --git a/src/web/stylesheets/components/io/_status-bar.css b/src/web/stylesheets/components/io/_status-bar.css index 050ca70f..a700414e 100644 --- a/src/web/stylesheets/components/io/_status-bar.css +++ b/src/web/stylesheets/components/io/_status-bar.css @@ -115,3 +115,4 @@ right: 15px; } + diff --git a/src/web/stylesheets/themes/_structure.css b/src/web/stylesheets/themes/_structure.css index 7cc8d75f..9bbad27b 100644 --- a/src/web/stylesheets/themes/_structure.css +++ b/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 - * function for more information. + * in App.js */