";
return html;
}
diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs
index 3f3510ea..1a6146e4 100755
--- a/src/web/HTMLOperation.mjs
+++ b/src/web/HTMLOperation.mjs
@@ -69,13 +69,15 @@ class HTMLOperation {
* @returns {string}
*/
toFullHtml() {
- let html = `
`;
for (let i = 0; i < this.ingList.length; i++) {
html += this.ingList[i].toHtml();
}
- html += `
+ html += `
+
pause
not_interested
diff --git a/src/web/RecipeWaiter.mjs b/src/web/RecipeWaiter.mjs
index cc5a2988..ad009421 100755
--- a/src/web/RecipeWaiter.mjs
+++ b/src/web/RecipeWaiter.mjs
@@ -479,6 +479,44 @@ class RecipeWaiter {
op.insertAdjacentHTML("beforeend", registerListEl);
}
+ /**
+ * Adjusts the number of ingredient columns as the width of the recipe changes.
+ */
+ adjustWidth() {
+ const recList = document.getElementById("rec-list");
+
+ if (!this.ingredientRuleID) {
+ this.ingredientRuleID = null;
+ this.ingredientChildRuleID = null;
+
+ // Find relevant rules in the stylesheet
+ 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;
+ }
+ }
+ }
+
+ if (!this.ingredientRuleID || !this.ingredientChildRuleID) return;
+
+ const ingredientRule = document.styleSheets[0].cssRules[this.ingredientRuleID],
+ 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";
+ }
+ }
+
}
export default RecipeWaiter;
diff --git a/src/web/html/index.html b/src/web/html/index.html
index a02de9b7..76d5e641 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -282,7 +282,9 @@
-
🕑
+
+ access_time
+
diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index dd523db2..bcc1d794 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -7,7 +7,7 @@
*/
.operation {
- cursor: pointer;
+ cursor: grab;
padding: 10px;
list-style-type: none;
position: relative;
@@ -18,10 +18,29 @@
border-right: none;
}
+#rec-list .operation {
+ cursor: pointer;
+ padding: 14px;
+}
+
.op-title {
font-weight: var(--op-title-font-weight);
}
+.ingredients {
+ display: grid;
+ grid-template-columns: auto auto auto;
+ grid-column-gap: 14px;
+}
+
+.ingredients > div {
+ grid-column: 1 / span 3;
+}
+
+.ingredients > div.inline {
+ grid-column: unset;
+}
+
.arg {
font-family: var(--fixed-width-font-family);
text-overflow: ellipsis;
@@ -33,28 +52,10 @@ select.arg {
}
textarea.arg {
- min-height: 68px;
+ min-height: 74px;
resize: vertical;
}
-@media (min-width: 576px) {
- .arg.inline {
- display: inline-block;
- width: auto;
- vertical-align: middle;
- }
-
- .form-group.inline {
- display: inline-block;
- margin-right: 20px;
- width: unset;
- }
-
- .input-group-append.inline {
- display: inline-block;
- }
-}
-
div.toggle-string {
flex: 1;
}
@@ -69,7 +70,8 @@ div.toggle-string {
.operation .is-focused [class*=' bmd-label'],
.operation .is-focused [class^='bmd-label'],
.operation .is-focused [class*=' bmd-label'],
-.operation .is-focused label {
+.operation .is-focused label,
+.operation .checkbox label:hover {
color: #1976d2;
}
diff --git a/src/web/stylesheets/components/_pane.css b/src/web/stylesheets/components/_pane.css
index ba25c1be..1bb8b523 100755
--- a/src/web/stylesheets/components/_pane.css
+++ b/src/web/stylesheets/components/_pane.css
@@ -12,7 +12,7 @@
.title {
padding: 8px;
- padding-left: 20px;
+ padding-left: 12px;
padding-right: 12px;
height: var(--title-height);
border-bottom: 1px solid var(--primary-border-colour);
@@ -20,7 +20,7 @@
font-size: var(--title-size);
color: var(--title-colour);
background-color: var(--title-background-colour);
- line-height: calc(var(--title-height) - 20px);
+ line-height: calc(var(--title-height) - 14px);
}
.list-area {
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index 767457b6..35dac120 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -129,11 +129,14 @@
visibility: hidden;
transition: all 0.3s;
margin-left: 5px;
- font-size: larger;
- font-weight: normal;
cursor: help;
}
+#stale-indicator i {
+ vertical-align: middle;
+ margin-bottom: 5px;
+}
+
#output-loader .loading-msg {
opacity: 1;
font-family: var(--primary-font-family);
diff --git a/src/web/stylesheets/layout/_operations.css b/src/web/stylesheets/layout/_operations.css
index 4452d00d..e5e4c887 100755
--- a/src/web/stylesheets/layout/_operations.css
+++ b/src/web/stylesheets/layout/_operations.css
@@ -31,3 +31,13 @@
border: 2px dashed var(--rec-list-operation-font-colour) !important;
padding: 8px 8px 9px 8px;
}
+
+#categories a {
+ color: #1976d2;
+ cursor: pointer;
+}
+
+#categories a:hover,
+.op-list .operation:hover {
+ filter: brightness(98%);
+}
diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css
index ba42d940..7debc450 100755
--- a/src/web/stylesheets/themes/_classic.css
+++ b/src/web/stylesheets/themes/_classic.css
@@ -44,7 +44,7 @@
--rec-list-operation-font-colour: #468847;
--rec-list-operation-bg-colour: #dff0d8;
- --rec-list-operation-border-colour: #d6e9c6;
+ --rec-list-operation-border-colour: #d3e8c0;
--selected-operation-font-color: #c09853;
--selected-operation-bg-colour: #fcf8e3;
diff --git a/src/web/stylesheets/utils/_overrides.css b/src/web/stylesheets/utils/_overrides.css
index 0f166ef8..6d519716 100755
--- a/src/web/stylesheets/utils/_overrides.css
+++ b/src/web/stylesheets/utils/_overrides.css
@@ -108,6 +108,10 @@ input[type="search"]::-webkit-search-cancel-button {
appearance: searchfield-cancel-button;
}
+select.form-control:not([size]):not([multiple]), select.custom-file-control:not([size]):not([multiple]) {
+ height: unset;
+}
+
code {
border: 0;
white-space: pre-wrap;