Switched arg layout to use flexbox instead of css grid
This commit is contained in:
n1474335
parent
bd16378e23
commit
cab83cae35
@ -54,7 +54,7 @@ class HTMLIngredient {
|
||||
case "string":
|
||||
case "binaryString":
|
||||
case "byteArray":
|
||||
html += `<div class="form-group">
|
||||
html += `<div class="form-group ing-wide">
|
||||
<label for="${this.id}"
|
||||
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
|
||||
class="bmd-label-floating">${this.name}</label>
|
||||
@ -70,7 +70,7 @@ class HTMLIngredient {
|
||||
break;
|
||||
case "shortString":
|
||||
case "binaryShortString":
|
||||
html += `<div class="form-group inline">
|
||||
html += `<div class="form-group ing-short">
|
||||
<label for="${this.id}"
|
||||
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
|
||||
class="bmd-label-floating inline">${this.name}</label>
|
||||
@ -85,7 +85,7 @@ class HTMLIngredient {
|
||||
</div>`;
|
||||
break;
|
||||
case "toggleString":
|
||||
html += `<div class="form-group input-group">
|
||||
html += `<div class="form-group input-group ing-wide">
|
||||
<div class="toggle-string">
|
||||
<label for="${this.id}"
|
||||
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
|
||||
@ -111,7 +111,7 @@ class HTMLIngredient {
|
||||
</div>`;
|
||||
break;
|
||||
case "number":
|
||||
html += `<div class="form-group inline">
|
||||
html += `<div class="form-group inline ing-medium">
|
||||
<label for="${this.id}"
|
||||
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
|
||||
class="bmd-label-floating inline">${this.name}</label>
|
||||
@ -128,7 +128,7 @@ class HTMLIngredient {
|
||||
</div>`;
|
||||
break;
|
||||
case "boolean":
|
||||
html += `<div class="form-group inline boolean-arg">
|
||||
html += `<div class="form-group inline boolean-arg ing-flexible">
|
||||
<div class="checkbox">
|
||||
<label ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}>
|
||||
<input type="checkbox"
|
||||
@ -144,7 +144,7 @@ class HTMLIngredient {
|
||||
</div>`;
|
||||
break;
|
||||
case "option":
|
||||
html += `<div class="form-group inline">
|
||||
html += `<div class="form-group ing-medium">
|
||||
<label for="${this.id}"
|
||||
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
|
||||
class="bmd-label-floating inline">${this.name}</label>
|
||||
@ -168,7 +168,7 @@ class HTMLIngredient {
|
||||
break;
|
||||
case "populateOption":
|
||||
case "populateMultiOption":
|
||||
html += `<div class="form-group">
|
||||
html += `<div class="form-group ing-medium">
|
||||
<label for="${this.id}"
|
||||
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
|
||||
class="bmd-label-floating">${this.name}</label>
|
||||
@ -199,7 +199,7 @@ class HTMLIngredient {
|
||||
this.manager.addDynamicListener("#" + this.id, "change", eventFn, this);
|
||||
break;
|
||||
case "editableOption":
|
||||
html += `<div class="form-group input-group">
|
||||
html += `<div class="form-group input-group ing-wide">
|
||||
<label for="${this.id}"
|
||||
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
|
||||
class="bmd-label-floating">${this.name}</label>
|
||||
@ -230,7 +230,7 @@ class HTMLIngredient {
|
||||
this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
|
||||
break;
|
||||
case "editableOptionShort":
|
||||
html += `<div class="form-group input-group inline">
|
||||
html += `<div class="form-group input-group ing-short">
|
||||
<label for="${this.id}"
|
||||
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
|
||||
class="bmd-label-floating inline">${this.name}</label>
|
||||
@ -261,7 +261,7 @@ class HTMLIngredient {
|
||||
this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
|
||||
break;
|
||||
case "text":
|
||||
html += `<div class="form-group">
|
||||
html += `<div class="form-group ing-very-wide">
|
||||
<label for="${this.id}"
|
||||
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
|
||||
class="bmd-label-floating">${this.name}</label>
|
||||
@ -275,7 +275,7 @@ class HTMLIngredient {
|
||||
</div>`;
|
||||
break;
|
||||
case "argSelector":
|
||||
html += `<div class="form-group inline">
|
||||
html += `<div class="form-group inline ing-medium">
|
||||
<label for="${this.id}"
|
||||
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
|
||||
class="bmd-label-floating inline">${this.name}</label>
|
||||
@ -298,7 +298,7 @@ class HTMLIngredient {
|
||||
this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this);
|
||||
break;
|
||||
case "label":
|
||||
html += `<div class="form-group">
|
||||
html += `<div class="form-group ing-flexible">
|
||||
<label>${this.name}</label>
|
||||
<input type="hidden"
|
||||
class="form-control arg"
|
||||
|
||||
@ -27,17 +27,31 @@
|
||||
}
|
||||
|
||||
.ingredients {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-column-gap: 14px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: flex-start;
|
||||
column-gap: 14px;
|
||||
row-gap: 0;
|
||||
}
|
||||
|
||||
.ingredients > div {
|
||||
grid-column: 1 / span 3;
|
||||
.ing-very-wide {
|
||||
flex: 4 400px;
|
||||
}
|
||||
|
||||
.ingredients > div.inline {
|
||||
grid-column: unset;
|
||||
.ing-wide {
|
||||
flex: 3 200px;
|
||||
}
|
||||
|
||||
.ing-medium {
|
||||
flex: 2 120px;
|
||||
}
|
||||
|
||||
.ing-short {
|
||||
flex: 1 80px;
|
||||
}
|
||||
|
||||
.ing-flexible {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.ingredients .form-group {
|
||||
@ -64,6 +78,11 @@ div.toggle-string {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
input.toggle-string {
|
||||
border-top-right-radius: 0 !important;
|
||||
height: 42px !important;
|
||||
}
|
||||
|
||||
.operation [class^='bmd-label'],
|
||||
.operation [class*=' bmd-label'] {
|
||||
top: 13px !important;
|
||||
@ -160,7 +179,7 @@ div.toggle-string {
|
||||
}
|
||||
|
||||
.input-group .form-control {
|
||||
border-top-left-radius: 4px !important;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
.input-group-append button {
|
||||
|
||||
@ -585,42 +585,6 @@ class RecipeWaiter {
|
||||
adjustWidth() {
|
||||
const recList = document.getElementById("rec-list");
|
||||
|
||||
if (!this.ingredientRuleID) {
|
||||
this.ingredientRuleID = null;
|
||||
this.ingredientChildRuleID = null;
|
||||
|
||||
// Find relevant rules in the stylesheet
|
||||
// try/catch for chrome 64+ CORS error on cssRules.
|
||||
try {
|
||||
for (const i in document.styleSheets[0].cssRules) {
|
||||
if (document.styleSheets[0].cssRules[i].selectorText === ".ingredients") {
|
||||
this.ingredientRuleID = i;
|
||||
}
|
||||
if (document.styleSheets[0].cssRules[i].selectorText === ".ingredients > div") {
|
||||
this.ingredientChildRuleID = i;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
// Do nothing.
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.ingredientRuleID || !this.ingredientChildRuleID) return;
|
||||
|
||||
const ingredientRule = document.styleSheets[0].cssRules[this.ingredientRuleID];
|
||||
const ingredientChildRule = document.styleSheets[0].cssRules[this.ingredientChildRuleID];
|
||||
|
||||
if (recList.clientWidth < 450) {
|
||||
ingredientRule.style.gridTemplateColumns = "auto auto";
|
||||
ingredientChildRule.style.gridColumn = "1 / span 2";
|
||||
} else if (recList.clientWidth < 620) {
|
||||
ingredientRule.style.gridTemplateColumns = "auto auto auto";
|
||||
ingredientChildRule.style.gridColumn = "1 / span 3";
|
||||
} else {
|
||||
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");
|
||||
|
||||
@ -636,7 +600,7 @@ class RecipeWaiter {
|
||||
const controlsContent = document.getElementById("controls-content");
|
||||
const scale = (controls.clientWidth - 1) / controlsContent.scrollWidth;
|
||||
|
||||
controlsContent.style.transform = `translate(-50%, -50%) scale(${scale})`;
|
||||
controlsContent.style.transform = `scale(${scale})`;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user