mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-25 01:06:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Switched arg layout to use flexbox instead of css grid

Browse source
This commit is contained in:
n1474335 2023-03-09 17:31:46 +00:00
parent bd16378e23
commit cab83cae35
3 changed files with 40 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/web/waiters/RecipeWaiter.mjs
View file

@ -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})`;
}
}