Skip to content

Commit

Permalink
Baking controls now scale to fit the pane correctly
Browse files Browse the repository at this point in the history
  • Loading branch information
n1474335 committed Jun 28, 2019
1 parent a5ea7f7 commit 6f6786d
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 4 deletions.
6 changes: 3 additions & 3 deletions src/web/App.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -244,17 +244,17 @@ class App {
/**
* Sets up the adjustable splitter to allow the user to resize areas of the page.
*
* @param {boolean} [minimise=false] - Set this flag if attempting to minimuse frames to 0 width
* @param {boolean} [minimise=false] - Set this flag if attempting to minimise frames to 0 width
*/
initialiseSplitter(minimise=false) {
if (this.columnSplitter) this.columnSplitter.destroy();
if (this.ioSplitter) this.ioSplitter.destroy();

this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
sizes: [20, 30, 50],
minSize: minimise ? [0, 0, 0] : [240, 370, 450],
minSize: minimise ? [0, 0, 0] : [240, 310, 450],
gutterSize: 4,
expandToMin: false,
expandToMin: true,
onDrag: function() {
this.manager.recipe.adjustWidth();
}.bind(this)
Expand Down
17 changes: 17 additions & 0 deletions src/web/RecipeWaiter.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -617,6 +617,23 @@ class RecipeWaiter {
ingredientRule.style.gridTemplateColumns = "auto auto auto auto";
ingredientChildRule.style.gridColumn = "1 / span 4";
}

// 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 = `translate(-50%, -50%) scale(${scale})`;
}

}
Expand Down
2 changes: 1 addition & 1 deletion src/web/html/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@
<ul id="rec-list" class="list-area no-select"></ul>

<div id="controls" class="no-select">
<div class="d-flex align-items-center">
<div id="controls-content" class="d-flex align-items-center">
<button type="button" class="mx-2 btn btn-lg btn-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
Step
</button>
Expand Down
8 changes: 8 additions & 0 deletions src/web/stylesheets/layout/_controls.css
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,14 @@
background-color: var(--secondary-background-colour);
}

#controls-content {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: center left;
}

#auto-bake-label {
display: inline-block;
width: 100px;
Expand Down

0 comments on commit 6f6786d

Please sign in to comment.