diff --git a/src/website/app.js b/src/website/app.js index 1237a24..764c7cb 100644 --- a/src/website/app.js +++ b/src/website/app.js @@ -64,11 +64,12 @@ const app = { const round = (grams) => grams < 10 ? Math.ceil(grams) : round5(grams); const toGrams = (ingredient) => round((isVolume ? byVolume(ingredient) : qty * gramsPerUnit)); const toMetric = (ingredient) => ({ ingredient: ingredient, grams: toGrams(ingredient)}); + const byGrams = (metric1, metric2) => metric1.grams - metric2.grams; const calcResults = () => ({ qty, unitsLabel, key, - metric: ingredients.map(toMetric), + metric: ingredients.map(toMetric).sort(byGrams), packed: ingredients.some(ingredient => ingredient.packed), }); if (qty) diff --git a/src/website/calculator/calculator.less b/src/website/calculator/calculator.less index 7f1b1e7..4de543e 100644 --- a/src/website/calculator/calculator.less +++ b/src/website/calculator/calculator.less @@ -2,6 +2,23 @@ // Style: Calculator section.grams-calculator { + // section.grams-calculator + // h2 + // div + // form + // label + // input[name=quantity] + // label + // select[name=units] + // label + // select[name=ingredient] + // p + // figure#grams-calculator-result + // figcaption + // p + // div + // output + // small min-height: 750px; //reduce jitter when calculations refresh >div { position: relative; @@ -34,11 +51,19 @@ section.grams-calculator { margin-bottom: 15px; } >div { + display: flex; + flex-direction: column; + width: max-content; + align-items: start; + margin: 0px auto; >output { display: block; font-style: normal; margin-bottom: 5px; - b { + b:first-child { + display: inline-block; + min-width: 3em; + text-align: right; } } } diff --git a/src/website/calculator/ingredients-db.js b/src/website/calculator/ingredients-db.js index 03412e9..d14a7df 100644 --- a/src/website/calculator/ingredients-db.js +++ b/src/website/calculator/ingredients-db.js @@ -389,9 +389,6 @@ globalThis.ingredientsDB = [ { key: 'Groats', description: 'Roasted Buckwheat Groats', gramsPerCup: 198 }, { key: 'Gumdrops', description: 'Gumdrops', gramsPerCup: 162 }, { key: 'Ham', description: 'Cooked Diced Ham', gramsPerCup: 150 }, - { key: 'Hazelnuts', description: 'Chopped Hazelnuts', gramsPerCup: 175 }, - { key: 'Hazelnuts', description: 'Ground Hazelnuts', gramsPerCup: 100 }, - { key: 'Hazelnuts', description: 'Whole Hazelnuts', gramsPerCup: 155 }, { key: 'Honey', description: 'Honey', gramsPerCup: 340 }, { key: 'Ice', description: 'Crushed Ice', gramsPerCup: 140 }, { key: 'Ice', description: 'Dry Ice', gramsPerCup: 200 }, @@ -478,8 +475,10 @@ globalThis.ingredientsDB = [ { key: 'Noodles', description: 'Dry Egg Noodles', gramsPerCup: 38 }, { key: 'Noodles', description: 'UnCooked Noodles', gramsPerCup: 75 }, { key: 'Nuts', description: 'Chopped Cashew Nuts', gramsPerCup: 150 }, + { key: 'Nuts', description: 'Chopped Hazelnuts', gramsPerCup: 175 }, { key: 'Nuts', description: 'Chopped Nuts', gramsPerCup: 150 }, { key: 'Nuts', description: 'Chopped Pistachio Nuts', gramsPerCup: 100 }, + { key: 'Nuts', description: 'Ground Hazelnuts', gramsPerCup: 100 }, { key: 'Nuts', description: 'Ground Nuts', gramsPerCup: 120 }, { key: 'Nuts', description: 'Nutella Hazelnut Cocoa Spread', gramsPerCup: 298 }, { key: 'Nuts', description: 'Pine Nuts', gramsPerCup: 130 }, @@ -487,6 +486,7 @@ globalThis.ingredientsDB = [ { key: 'Nuts', description: 'Shelled Pistachio Nuts', gramsPerCup: 120 }, { key: 'Nuts', description: 'Whole Brazil Nuts', gramsPerCup: 153 }, { key: 'Nuts', description: 'Whole Cashew Nuts', gramsPerCup: 150 }, + { key: 'Nuts', description: 'Whole Hazelnuts', gramsPerCup: 155 }, { key: 'Nuts', description: 'Whole Macadamia Nuts', gramsPerCup: 149 }, { key: 'Nuts', description: 'Whole Pistachio Nuts', gramsPerCup: 150 }, { key: 'Oats', description: 'Oat Bran', gramsPerCup: 80 },