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
*