mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-20 14:56:19 -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

24
src/web/HTMLIngredient.mjs
View file

@ -54,7 +54,7 @@ class HTMLIngredient {
case "string": case "string":
case "binaryString": case "binaryString":
case "byteArray": case "byteArray":
html += `<div class="form-group"> html += `<div class="form-group ing-wide">
<label for="${this.id}" <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""} ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label> class="bmd-label-floating">${this.name}</label>
@ -70,7 +70,7 @@ class HTMLIngredient {
break; break;
case "shortString": case "shortString":
case "binaryShortString": case "binaryShortString":
html += `<div class="form-group inline"> html += `<div class="form-group ing-short">
<label for="${this.id}" <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""} ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label> class="bmd-label-floating inline">${this.name}</label>
@ -85,7 +85,7 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "toggleString": case "toggleString":
html += `<div class="form-group input-group"> html += `<div class="form-group input-group ing-wide">
<div class="toggle-string"> <div class="toggle-string">
<label for="${this.id}" <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""} ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
@ -111,7 +111,7 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "number": case "number":
html += `<div class="form-group inline"> html += `<div class="form-group inline ing-medium">
<label for="${this.id}" <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""} ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label> class="bmd-label-floating inline">${this.name}</label>
@ -128,7 +128,7 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "boolean": case "boolean":
html += `<div class="form-group inline boolean-arg"> html += `<div class="form-group inline boolean-arg ing-flexible">
<div class="checkbox"> <div class="checkbox">
<label ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}> <label ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}>
<input type="checkbox" <input type="checkbox"
@ -144,7 +144,7 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "option": case "option":
html += `<div class="form-group inline"> html += `<div class="form-group ing-medium">
<label for="${this.id}" <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""} ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label> class="bmd-label-floating inline">${this.name}</label>
@ -168,7 +168,7 @@ class HTMLIngredient {
break; break;
case "populateOption": case "populateOption":
case "populateMultiOption": case "populateMultiOption":
html += `<div class="form-group"> html += `<div class="form-group ing-medium">
<label for="${this.id}" <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""} ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label> class="bmd-label-floating">${this.name}</label>
@ -199,7 +199,7 @@ class HTMLIngredient {
this.manager.addDynamicListener("#" + this.id, "change", eventFn, this); this.manager.addDynamicListener("#" + this.id, "change", eventFn, this);
break; break;
case "editableOption": case "editableOption":
html += `<div class="form-group input-group"> html += `<div class="form-group input-group ing-wide">
<label for="${this.id}" <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""} ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label> class="bmd-label-floating">${this.name}</label>
@ -230,7 +230,7 @@ class HTMLIngredient {
this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this); this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
break; break;
case "editableOptionShort": case "editableOptionShort":
html += `<div class="form-group input-group inline"> html += `<div class="form-group input-group ing-short">
<label for="${this.id}" <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""} ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label> 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); this.manager.addDynamicListener(".editable-option-menu a", "click", this.editableOptionClick, this);
break; break;
case "text": case "text":
html += `<div class="form-group"> html += `<div class="form-group ing-very-wide">
<label for="${this.id}" <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""} ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating">${this.name}</label> class="bmd-label-floating">${this.name}</label>
@ -275,7 +275,7 @@ class HTMLIngredient {
</div>`; </div>`;
break; break;
case "argSelector": case "argSelector":
html += `<div class="form-group inline"> html += `<div class="form-group inline ing-medium">
<label for="${this.id}" <label for="${this.id}"
${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""} ${this.hint ? `data-toggle="tooltip" title="${this.hint}"` : ""}
class="bmd-label-floating inline">${this.name}</label> class="bmd-label-floating inline">${this.name}</label>
@ -298,7 +298,7 @@ class HTMLIngredient {
this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this); this.manager.addDynamicListener(".arg-selector", "change", this.argSelectorChange, this);
break; break;
case "label": case "label":
html += `<div class="form-group"> html += `<div class="form-group ing-flexible">
<label>${this.name}</label> <label>${this.name}</label>
<input type="hidden" <input type="hidden"
class="form-control arg" class="form-control arg"

35
src/web/stylesheets/components/_operation.css
View file

@ -27,17 +27,31 @@
} }
.ingredients { .ingredients {
display: grid; display: flex;
grid-template-columns: auto auto auto; flex-flow: row wrap;
grid-column-gap: 14px; justify-content: flex-start;
column-gap: 14px;
row-gap: 0;
} }
.ingredients > div { .ing-very-wide {
grid-column: 1 / span 3; flex: 4 400px;
} }
.ingredients > div.inline { .ing-wide {
grid-column: unset; flex: 3 200px;
}
.ing-medium {
flex: 2 120px;
}
.ing-short {
flex: 1 80px;
}
.ing-flexible {
flex-grow: 1;
} }
.ingredients .form-group { .ingredients .form-group {
@ -64,6 +78,11 @@ div.toggle-string {
flex: 1; flex: 1;
} }
input.toggle-string {
border-top-right-radius: 0 !important;
height: 42px !important;
}
.operation [class^='bmd-label'], .operation [class^='bmd-label'],
.operation [class*=' bmd-label'] { .operation [class*=' bmd-label'] {
top: 13px !important; top: 13px !important;
@ -160,7 +179,7 @@ div.toggle-string {
} }
.input-group .form-control { .input-group .form-control {
border-top-left-radius: 4px !important; border-top-left-radius: 4px;
} }
.input-group-append button { .input-group-append button {

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

@ -585,42 +585,6 @@ class RecipeWaiter {
adjustWidth() { adjustWidth() {
const recList = document.getElementById("rec-list"); 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 // Hide Chef icon on Bake button if the page is compressed
const bakeIcon = document.querySelector("#bake img"); const bakeIcon = document.querySelector("#bake img");
@ -636,7 +600,7 @@ class RecipeWaiter {
const controlsContent = document.getElementById("controls-content"); const controlsContent = document.getElementById("controls-content");
const scale = (controls.clientWidth - 1) / controlsContent.scrollWidth; const scale = (controls.clientWidth - 1) / controlsContent.scrollWidth;
controlsContent.style.transform = `translate(-50%, -50%) scale(${scale})`; controlsContent.style.transform = `scale(${scale})`;
} }
} }