[#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 )

This commit is contained in:
Robin Scholtes 2023-05-10 15:27:43 +12:00
parent 222bb624ae
commit 0868d97cee
7 changed files with 53 additions and 57 deletions

View file

@ -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
*