From 0868d97ceee4dafb69ca7f28cc014b987544898c Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Wed, 10 May 2023 15:27:43 +1200 Subject: [PATCH] [#181] adjust #controls panel template and css so it will automatically scale based on #controls height, which makes adjustWidth() redundant. Controls is now 50px height on mobile ( 70 was just a lot of wasted space that can be better spend ) --- src/web/App.mjs | 11 ++-- src/web/TODO.md | 3 ++ src/web/html/index.html | 2 +- src/web/stylesheets/components/_controls.css | 57 +++++++++++--------- src/web/stylesheets/layout/_structure.css | 8 ++- src/web/stylesheets/themes/_structure.css | 4 +- src/web/waiters/RecipeWaiter.mjs | 25 --------- 7 files changed, 53 insertions(+), 57 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index 015b0964..ac672ac0 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -314,7 +314,7 @@ class App { this.columnSplitter = Split(["#operations", "#recipe", "#IO"], { sizes: [20, 30, 50], - minSize: minimise ? [0, 0, 0] : [20, 30, 50], + minSize: minimise ? [0, 0, 0] : [20, 330, 50], gutterSize: 4, expandToMin: true, onDrag: debounce(function() { @@ -663,7 +663,6 @@ class App { * Adjust components to fit their containers. */ adjustComponentSizes() { - this.manager.recipe.adjustWidth(); this.manager.input.calcMaxTabs(); this.manager.output.calcMaxTabs(); } @@ -877,7 +876,7 @@ class App { setDesktopUI(minimise){ $("[data-toggle=tooltip]").tooltip("enable"); this.setDesktopSplitter(minimise); - // this.adjustComponentSizes(); + this.adjustComponentSizes(); this.populateOperationsList(); this.manager.recipe.clearAllSelectedClasses(); } @@ -903,7 +902,11 @@ class App { * ( themes/_structure ) if you make changes to those elements' height. */ assignAvailableHeight( isMobile ){ - const remainingSpace = window.innerHeight - (40+50+90-2); // banner, controls height, operations, accounting for some borders + const bannerHeight = 40; + const controlsHeight = 50; + const operationsHeight = 90; + + const remainingSpace = window.innerHeight - (bannerHeight+controlsHeight+operationsHeight-2); // 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 43fe7075..ed8a2c34 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -8,6 +8,9 @@ - maybe a bit annoying that the fav cat opens whenever you add a new fav via icon-fav-click on mobile - backspace on fs view should close max view. Keep making the same mistake and navigating away when for instance recipe is expanded and double click the window to fs > resolve. Reset layout +### Desktop +- fixed status panel ( rhs ) overlays recipe column if split all the way to the right + ### JS: - `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original diff --git a/src/web/html/index.html b/src/web/html/index.html index 38c2dbbd..47ba2563 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -251,7 +251,7 @@
diff --git a/src/web/stylesheets/components/_controls.css b/src/web/stylesheets/components/_controls.css index 3cfd30d8..4e13030c 100644 --- a/src/web/stylesheets/components/_controls.css +++ b/src/web/stylesheets/components/_controls.css @@ -15,19 +15,47 @@ #controls-content { display: flex; - align-items: center; + /*align-items: center;*/ padding: 10px 0; + height: 100%; +} + +#controls-content > div { + height: 100%; +} + +/* bake button */ +#bake { + box-shadow: none; +} + +/* bake and step buttons */ +#controls .btn { + border-radius: 30px; + margin: 0; + font-size: initial; + line-height: 0; + height: 100%; +} + +/* auto bake */ +#controls-content .form-group { + text-align: center; + height: 100%; +} + +#controls-content .form-group > .checkbox { + height: 100%; + display: flex; + align-items: center; + justify-content: center; } #auto-bake-label { - /*display: inline-block;*/ - /*width: 100px;*/ padding: 0; margin: 0; font-size: initial; - /*text-align: center;*/ color: var(--primary-font-colour); - /*font-size: 14px;*/ cursor: pointer; } @@ -43,24 +71,5 @@ 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; -} - -#controls-content .form-group { - text-align: center; -} - - diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css index 4c783168..921d0197 100755 --- a/src/web/stylesheets/layout/_structure.css +++ b/src/web/stylesheets/layout/_structure.css @@ -10,6 +10,10 @@ #operations { height: var(--operations-height); } #controls { height: var(--controls-height); } +@media only screen and ( min-width: 768px ) { + #controls { height: var(--desktop-controls-height); } +} + #banner, #content-wrapper { position: absolute; @@ -47,11 +51,11 @@ @media only screen and ( min-width: 768px ) { #recipe { - padding-bottom: var(--controls-height); + padding-bottom: var(--desktop-controls-height); } #recipe .list-area { - bottom: var(--controls-height); + bottom: var(--desktop-controls-height); } #workspace-wrapper { diff --git a/src/web/stylesheets/themes/_structure.css b/src/web/stylesheets/themes/_structure.css index 9bbad27b..714774e2 100644 --- a/src/web/stylesheets/themes/_structure.css +++ b/src/web/stylesheets/themes/_structure.css @@ -1,9 +1,11 @@ :root { /* Fixed heights */ --banner-height: 40px; - --controls-height: 50px; /*initial mobile height*/ + --controls-height: 50px; --operations-height: 90px; + + --desktop-controls-height: 70px; } /** diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs index 7cf18345..f94418f0 100755 --- a/src/web/waiters/RecipeWaiter.mjs +++ b/src/web/waiters/RecipeWaiter.mjs @@ -589,31 +589,6 @@ class RecipeWaiter { } - /** - * Adjusts the number of ingredient columns as the width of the recipe changes. - */ - adjustWidth() { - const recList = document.getElementById("rec-list"); - - // Hide Chef icon on Bake button if the page is compressed - const bakeIcon = document.querySelector("#bake img"); - - if (recList.clientWidth < 370) { - // Hide Chef icon on Bake button - bakeIcon.style.display = "none"; - } else { - bakeIcon.style.display = "inline-block"; - } - - // Scale controls to fit pane width - const controls = document.getElementById("controls"); - const controlsContent = document.getElementById("controls-content"); - const scale = (controls.clientWidth - 1) / controlsContent.scrollWidth; - - controlsContent.style.transform = `scale(${scale})`; - } - - /** * Remove all "selected" classes for op-list list items at once *