Add human-friendly css classes and scaling indicators

[tomtjes]

With the new custom themes feature I thought some more descriptive CSS classes would help making better use of it.

I also wanted to have an indication for when a number in a recipe has been scaled or is able to be scaled. I added respective CSS classes. Here's an implementation example:

Step text:

In a 20cm-bowl, combine {{ scale(ingredients[0].numeric_amount / 10) }}g of the {{ ingredients[0].food }} with {{ scale(0.25) }} cup water and stir for 5-10 minutes, before adding the remaining {{ scale(ingredients[0].numeric_amount / 10 * 9) }}g of the {{ ingredients[0].food }}.

CSS:

.scaled-up::before {
    content: '\025B3';
}

.scaled-down::before {
    content: '\025BD';
}

.unscaled::before {
    content: '\025B7';
}

.scalable::before {
    color: var(--primary);
    padding-right: .1em;
}

[vabene1111]

hi, thanks for the PR. Two thoughts

1. should we maybe not show an icon in text when nothing was scaled, just to keep it clean?
2. do you think it would make sense to name the sub CSS classes with more context, e.g. the instructions inside the step could be step-instructions, ...

[tomtjes]

Hey, thanks for your response.

1. the css is not part of the PR, but I can certainly add it if you want (happy to omit the non-scaled icon). I wasn't sure if it would be best to add the css to vue or to a theme or leave it up to users to add it as custom css.

   • Speaking of themes, I would also like to fix some theming issues, but I'm not sure what's the best way to edit the minified theme css so you could easily track the changes in a PR.

2. Sure, I can do that. I'm lacking the experience to know what's more common, to use selectors like .step .ingredients or .step-ingredients.

[vabene1111]

1. i think we misunderstood each other, I was thinking about removing the "unscaled" option so that an arrow only shows if either scaled up or down and nothing shows when its not scaled. or is that CSS related as well?

 <span class="scalable" :class="[this.factor===1 ? 'unscaled' : (this.factor > 1 ? 'scaled-up':'scaled-down')]" v-html="calculateAmount(number)"></span>

2. honestly I am unsure as well but for me it feels less ambiguous to have one uniquely named class for each custom themable element.

regarding general CSS: as you probably know as a long time user of tandoor I suck at CSS/frontend design. I would absolutely love some to help me sort out that mess so If you want to take that or part of it onto yourself that would be much appreciate.
If you want to do that I suggest we hop on a quick discord call and discuss what I have planned for the future and which options we both see. Just let me know if you are interested and feel up to the challenge.

[tomtjes]

I educated myself and came to the conclusion that BEM is a popular way to structure CSS classes (here is a quick intro to it). I updated the PR to use BEM classes (mostly following the recommendations from the first link).

I also introduced class names reflecting each food, unit, step and keyword in a recipe. I couldn't make that fit with BEM, so I invented my own naming scheme for those:

._foodname-yellow-onion
._unitname-gram
._keywordname-vegetarian
._stepname-bake

Such dynamically generated CSS class names are escaped (spaces replaced by dashes and special characters taken care of: _foodname-salt-\&-pepper) to ensure they don't mess up the HTML. They always use singular, never plural names.

How can this be useful?

• add a tooltip to units showing conversions (e.g. tbsp could get a tooltip equals 15ml
• prohibit a unit from being displayed (e.g. a unit piece that is necessary for property calculation but unnecessary for the user: 2 limes instead of 2 pieces limes)
• style steps named variations or storage or do ahead differently from recipe instructions.
• highlight food names in recipes after searching for them
• ...

[vabene1111]

looks really good!

[tomtjes]

Couldn't find your review anywhere but I hope I caught everything.

[vabene1111]

ah stupid me, i forgot to save the review again 😂 I will look trough it again, do you think you could rebase on the latest develop because otherwise I probabyl wont be able to merge the ShoppingListView.

[tomtjes]

Honestly, I don't know how to deal with the rebase. I tried it but I'm getting a lot of merge conflicts on files I haven't even touched. The only change I made to the shopping list was adding class="shopping" to the div wrapping it. Feel free to drop it.

[vabene1111]

I was able to merge it in the browser today which for some reason did not work yesterday so everything done. Thanks for the PR