cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved shopping list ui

Browse Source
This commit is contained in:
vabene1111
2020-02-18 23:00:23 +01:00
parent c98dbd065e
commit 8192a8dc8f
2 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
cookbook/forms.py
View File

@ -81,7 +81,7 @@ class ShoppingForm(forms.Form):
markdown_format = forms.BooleanField(
help_text=_('Include <code>- [ ]</code> in list for easier usage in markdown based documents.'),
required=False,
initial=True
initial=False
)

24
cookbook/templates/shopping_list.html
View File

@ -22,14 +22,22 @@
<br/>
<br/>
<button class="btn btn-success" onclick="copy()"><i class="far fa-copy"></i></button>
<div class="row">
<div class="col col-md-12">
<!--// @formatter:off-->
<textarea id="id_list" style="height: 50vh" class="form-control">{% for i in ingredients %}{% if markdown_format %}- [ ]{% endif %} {{ i.amount.normalize }} {{ i.unit }} {{ i.ingredient.name }}&#10;{% endfor %}</textarea>
<textarea id="id_list" class="form-control" rows="{{ ingredients|length|add:1 }}">{% for i in ingredients %}{% if markdown_format %}- [ ]{% endif %} {{ i.amount.normalize }} {{ i.unit }} {{ i.ingredient.name }}&#10;{% endfor %}</textarea>
<!--// @formatter:on-->
</div>
</div>
<br/>
<div class="row">
<div class="col col-md-12 text-center">
<button class="btn btn-success" onclick="copy()" style="width: 15vw" data-toggle="tooltip"
data-placement="top" title="{% trans 'Copy list to clipboard' %}" id="id_btn_copy" onmouseout="resetTooltip()"><i
class="far fa-copy"></i></button>
</div>
</div>
<script type="text/javascript">
function copy() {
@ -37,8 +45,20 @@
list.select();
$('#id_btn_copy').attr('data-original-title','{% trans 'Copied!' %}').tooltip('show');
document.execCommand("copy");
}
function resetTooltip() {
setTimeout(function () {
$('#id_btn_copy').attr('data-original-title','{% trans 'Copy list to clipboard' %}');
}, 300);
}
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
{% endblock %}