TheThomaas
00b49aa15b
commit 9b8fcecae7a2cb28a6e3061369c1a39e8e74791e
Author: TheThomaas <thethomaas@protonmail.ch>
Date: Mon Apr 21 14:28:24 2025 +0200
Add checkboxes to the ingredients list
72 lines
3.7 KiB
Plaintext
72 lines
3.7 KiB
Plaintext
{% extends 'layouts/base.njk' %}
|
|
|
|
{% block content %}
|
|
{% recipeimage image, "c-recipe__header-image", title, "100vw" %}
|
|
<h1 class="c-recipe__title">{{ title }}</h1>
|
|
<section>
|
|
<div class="l-container">
|
|
<div class="c-recipe__recipe-content-wrapper">
|
|
<div class="c-recipe__tag-list">
|
|
{% for tag in tags %}
|
|
<a class="c-tags__tag" href="/tags/{{ tag | noEmoji | slug }}">{{ tag }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
<div class="c-recipe__ingredients-wrapper" x-data='{currentServings: {{ servings if not servings == "" else false }}, ingredients: decodeURI("{{ ingredients | arrayToString }}").split("£") }'>
|
|
{% if time or not servings == "" %}
|
|
<div class="c-recipe__additional-info">
|
|
{% if time %}
|
|
<p>{% include "icons/time.svg" %}{{ time }}</p>
|
|
{% endif %}
|
|
{% if not servings == "" %}
|
|
<p>
|
|
<template x-if="currentServings > 1">
|
|
<button @click="currentServings -= 1" class="c-recipe__serving-button">
|
|
-
|
|
<span class="u-sr-only">Remove 1 serving</span>
|
|
</button>
|
|
</template>
|
|
<span x-text="currentServings"></span>
|
|
<button @click="currentServings += 1" class="c-recipe__serving-button">
|
|
+
|
|
<span class="u-sr-only">Add 1 serving</span>
|
|
</button>
|
|
<span>{{ site.servingsLabel }}</span>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<h3>{{ site.ingredientsLabel }}</h3>
|
|
<template x-if="currentServings">
|
|
<ul class="c-recipe__ingredients-list">
|
|
<template x-for="(ingredient, index) in ingredients" :key="index">
|
|
<li><label><input type="checkbox"><span x-text="adaptQuantity(ingredient, {{servings}}, currentServings)"></span></label></li>
|
|
</template>
|
|
</ul>
|
|
</template>
|
|
|
|
<template x-if="!currentServings">
|
|
<ul class="c-recipe__ingredients-list">
|
|
{% for ingredient in ingredients %}
|
|
<li><label><input type="checkbox"><span>{{ ingredient }}</span></label></li>
|
|
{% endfor %}
|
|
</ul>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="c-recipe__instructions-wrapper u-free-text">
|
|
{% if sourceLabel and sourceURL %}
|
|
<p>Source : <a href="{{ sourceURL }}" target="_blank" rel="noopener">{{ sourceLabel }}</a></p>
|
|
{% endif %}
|
|
{{ content | safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
function adaptQuantity (ingredient, originalServings, currentServings) {
|
|
return ingredient.replace(/(\d|\.|,)+/, match => Number(Math.round(parseFloat(match.replace(',', '.')) * currentServings / originalServings + 'e' + 2) + 'e-' + 2));
|
|
}
|
|
</script>
|
|
{% endblock %} |