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

added collapsable cards

Browse Source
This commit is contained in:
smilerz 2021-03-23 12:54:41 -05:00
parent 1188ed9227
commit de60e12073
1 changed files with 48 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
cookbook/templates/url_import.html
View File

@ -130,61 +130,68 @@
<div class="card-body p-2"> <div class="card-body p-2">
<div class="card mb-2"> <div class="card mb-2">
<div class="card-header"> <div class="card-header" v-b-toggle.collapse-name>
<div class="row px-3" style="justify-content:space-between;"> <div class="row px-3" style="justify-content:space-between;">
{% trans 'Name' %} {% trans 'Name' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.name=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.name=''" title="{% trans 'Clear Contents'%}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Text dragged here will be appended to the name.'%}</div> <div class="small text-muted">{% trans 'Text dragged here will be appended to the name.'%}</div>
</div> </div>
<b-collapse id="collapse-name" visible class="mt-2">
<div class="card-body drop-zone" @drop="replacePreview('name', $event)" @dragover.prevent @dragenter.prevent> <div class="card-body drop-zone" @drop="replacePreview('name', $event)" @dragover.prevent @dragenter.prevent>
<div class="card-text">[[recipe_json.name]]</div> <div class="card-text">[[recipe_json.name]]</div>
</div> </div>
</b-collapse>
</div> </div>
<div class="card mb-2"> <div class="card mb-2">
<div class="card-header"> <div class="card-header" v-b-toggle.collapse-description>
<div class="row px-3" style="justify-content:space-between;"> <div class="row px-3" style="justify-content:space-between;">
{% trans 'Description' %} {% trans 'Description' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.description=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.description=''" title="{% trans 'Clear Contents'%}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Text dragged here will be appended to the description.'%}</div> <div class="small text-muted">{% trans 'Text dragged here will be appended to the description.'%}</div>
</div> </div>
<div class="card-body drop-zone" @drop="replacePreview('description', $event)" @dragover.prevent @dragenter.prevent> <b-collapse id="collapse-description" visible class="mt-2">
<div class="card-text">[[recipe_json.description]]</div> <div class="card-body drop-zone" @drop="replacePreview('description', $event)" @dragover.prevent @dragenter.prevent>
</div> <div class="card-text">[[recipe_json.description]]</div>
</div>
</b-collapse>
</div> </div>
<div class="card mb-2"> <div class="card mb-2">
<div class="card-header"> <div class="card-header" v-b-toggle.collapse-kw>
<div class="row px-3" style="justify-content:space-between;"> <div class="row px-3" style="justify-content:space-between;">
{% trans 'Keywords' %} {% trans 'Keywords' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.keywords=[]" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.keywords=[]" title="{% trans 'Clear Contents'%}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Keywords dragged here will be appended to current list'%}</div> <div class="small text-muted">{% trans 'Keywords dragged here will be appended to current list'%}</div>
</div> </div>
<div class="card-body drop-zone" @drop="replacePreview('keywords', $event)" @dragover.prevent @dragenter.prevent> <b-collapse id="collapse-kw" visible class="mt-2">
<div v-for="kw in recipe_json.keywords"> <div class="card-body drop-zone" @drop="replacePreview('keywords', $event)" @dragover.prevent @dragenter.prevent>
<div class="card-text">[[kw]] </div> <div v-for="kw in recipe_json.keywords">
<div class="card-text">[[kw]] </div>
</div>
</div> </div>
</div> </b-collapse>
</div> </div>
<div class="card mb-2"> <div class="card mb-2">
<div class="card-header" style="display:flex; justify-content:space-between;"> <div class="card-header" v-b-toggle.collapse-image style="display:flex; justify-content:space-between;">
{% trans 'Image' %} {% trans 'Image' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.image=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.image=''" title="{% trans 'Clear Contents'%}"></i>
</div> </div>
<div class="card-body m-0 p-0 drop-zone" @drop="replacePreview('image', $event)" @dragover.prevent @dragenter.prevent> <b-collapse id="collapse-image" visible class="mt-2">
<img class="card-img" v-bind:src="[[recipe_json.image]]" alt="Recipe Image"> <div class="card-body m-0 p-0 drop-zone" @drop="replacePreview('image', $event)" @dragover.prevent @dragenter.prevent>
</div> <img class="card-img" v-bind:src="[[recipe_json.image]]" alt="Recipe Image">
</div>
</b-collapse>
</div> </div>
<div class = "row mb-2"> <div class = "row mb-2">
<div class="col"> <div class="col">
<div class="card" > <div class="card">
<div class="card-header p-1" style="display:flex; justify-content:space-between;"> <div class="card-header p-1" style="display:flex; justify-content:space-between;">
{% trans 'Servings' %} {% trans 'Servings' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.servings=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.servings=''" title="{% trans 'Clear Contents'%}"></i>
</div> </div>
@ -218,38 +225,42 @@
</div> </div>
<div class="card mb-2"> <div class="card mb-2">
<div class="card-header"> <div class="card-header" v-b-toggle.collapse-ing>
<div class="row px-3" style="display:flex; justify-content:space-between;"> <div class="row px-3" style="display:flex; justify-content:space-between;">
{% trans 'Ingredients' %} {% trans 'Ingredients' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.recipeIngredient=[]" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.recipeIngredient=[]" title="{% trans 'Clear Contents'%}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Ingredients dragged here will be appended to current list.'%}</div> <div class="small text-muted">{% trans 'Ingredients dragged here will be appended to current list.'%}</div>
</div> </div>
<div class="card-body drop-zone" @drop="replacePreview('ingredients', $event)" @dragover.prevent @dragenter.prevent> <b-collapse id="collapse-ing" visible class="mt-2">
<ul class="list-group list-group"> <div class="card-body drop-zone" @drop="replacePreview('ingredients', $event)" @dragover.prevent @dragenter.prevent>
<div v-for="i in recipe_json.recipeIngredient"> <ul class="list-group list-group">
<li class="row border-light" > <div v-for="i in recipe_json.recipeIngredient">
<div class="col-sm-1 border">[[i.amount]]</div> <li class="row border-light" >
<div class="col-sm border">[[i.unit.text]]</div> <div class="col-sm-1 border">[[i.amount]]</div>
<div class="col-sm border">[[i.ingredient.text]]</div> <div class="col-sm border">[[i.unit.text]]</div>
<div class="col-sm border">[[i.note]]</div> <div class="col-sm border">[[i.ingredient.text]]</div>
</li> <div class="col-sm border">[[i.note]]</div>
</div> </li>
</ul> </div>
</div> </ul>
</div>
</b-collapse>
</div> </div>
<div class="card mb-2"> <div class="card mb-2">
<div class="card-header"> <div class="card-header" v-b-toggle.collapse-instructions>
<div class="row px-3" style="justify-content:space-between;"> <div class="row px-3" style="justify-content:space-between;">
{% trans 'Instructions' %} {% trans 'Instructions' %}
<i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.recipeInstructions=''" title="{% trans 'Clear Contents'%}"></i> <i class="fas fa-eraser" style="cursor:pointer;" @click="recipe_json.recipeInstructions=''" title="{% trans 'Clear Contents'%}"></i>
</div> </div>
<div class="small text-muted">{% trans 'Recipe instructions dragged here will be appended to current instructions.'%}</div> <div class="small text-muted">{% trans 'Recipe instructions dragged here will be appended to current instructions.'%}</div>
</div> </div>
<div class="card-body drop-zone" @drop="replacePreview('instructions', $event)" @dragover.prevent @dragenter.prevent> <b-collapse id="collapse-instructions" visible class="mt-2">
<div class="card-text">[[recipe_json.recipeInstructions]]</div> <div class="card-body drop-zone" @drop="replacePreview('instructions', $event)" @dragover.prevent @dragenter.prevent>
</div> <div class="card-text">[[recipe_json.recipeInstructions]]</div>
</div>
</b-collapse>
</div> </div>
</div> </div>
</div> </div>