import page style update

This commit is contained in:
vabene1111
2020-06-23 12:46:13 +02:00
parent 5ed369ba69
commit 0266476aef
2 changed files with 62 additions and 64 deletions

View File

@ -54,7 +54,7 @@
</button> </button>
<div class="collapse navbar-collapse" id="navbarText"> <div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto"> <ul class="navbar-nav mr-auto">
<li class="nav-item {% if request.resolver_match.url_name in 'view_search,edit_recipe,edit_internal_recipe,edit_external_recipe,view_recipe' %}active{% endif %}"> <li class="nav-item {% if request.resolver_match.url_name in 'view_search,edit_recipe,edit_internal_recipe,edit_external_recipe,view_recipe,data_import_url' %}active{% endif %}">
<a class="nav-link" href="{% url 'view_search' %}"><i <a class="nav-link" href="{% url 'view_search' %}"><i
class="fas fa-book"></i> {% trans 'Cookbook' %}<span class="fas fa-book"></i> {% trans 'Cookbook' %}<span
class="sr-only">(current)</span></a> class="sr-only">(current)</span></a>

View File

@ -20,7 +20,7 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div class="input-group mb-3"> <div class="input-group mb-3">
<input class="form-control" v-model="remote_url"> <input class="form-control" v-model="remote_url" placeholder="{% trans 'Enter website URL' %}">
<div class="input-group-append"> <div class="input-group-append">
<button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button" <button @click="loadRecipe()" class="btn btn-primary shadow-none" type="button"
id="id_btn_search"><i class="fas fa-search"></i> id="id_btn_search"><i class="fas fa-search"></i>
@ -67,67 +67,68 @@
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<table class="table"> <template v-for="(i, index) in recipe_data.recipeIngredient">
<thead>
<tr>
<th>{% trans 'Amount' %}</th>
<th>{% trans 'Unit' %}</th>
<th>{% trans 'Ingredient' %}</th>
<th></th>
</tr>
</thead>
<tbody>
<template v-for="(i, index) in recipe_data.recipeIngredient">
<tr> <div class="card" style="margin-top: 4px">
<td><input class="form-control" v-model="i.amount"></td> <div class="card-body">
<td> <div class="row" v-if="i.original">
<multiselect <div class="col-md-12" style="margin-bottom: 4px">
v-model="i.unit" <span class="text-muted"><i class="fas fa-globe"></i> [[i.original]]</span>
:options="units" </div>
:close-on-select="true" </div>
:clear-on-select="true" <div class="row">
:hide-selected="true" <div class="col-md-1">
:preserve-search="true" <input class="form-control" v-model="i.amount">
placeholder="{% trans 'Select one' %}" </div>
tag-placeholder="{% trans 'Create new' %}" <div class="col-md-5">
label="text" <multiselect
:taggable="true" v-model="i.unit"
track-by="id" :options="units"
:multiple="false"> :close-on-select="true"
</multiselect> :clear-on-select="true"
:hide-selected="true"
:preserve-search="true"
placeholder="{% trans 'Select one' %}"
tag-placeholder="{% trans 'Create new' %}"
label="text"
:taggable="true"
track-by="id"
:multiple="false">
</multiselect>
</td> </div>
<td> <div class="col-md-5">
<multiselect
v-model="i.ingredient"
:options="ingredients"
:taggable="true"
@tag="addIngredientType"
placeholder="{% trans 'Select one' %}"
tag-placeholder="{% trans 'Create new' %}"
:close-on-select="true"
:clear-on-select="true"
:hide-selected="true"
:preserve-search="true"
label="text"
:id="index"
track-by="id"
:multiple="false">
</multiselect>
</td> <multiselect
<td style="vertical-align: middle;text-align: center"> v-model="i.ingredient"
<button class="btn btn-outline-danger" type="button" :options="ingredients"
@click="deleteIngredient(i)"><i :taggable="true"
class="fas fa-trash-alt"></i></button> @tag="addIngredientType"
</td> placeholder="{% trans 'Select one' %}"
</tr> tag-placeholder="{% trans 'Create new' %}"
</template> :close-on-select="true"
:clear-on-select="true"
:hide-selected="true"
:preserve-search="true"
label="text"
:id="index"
track-by="id"
:multiple="false">
</multiselect>
</div>
<div class="col-md-1">
<button class="btn btn-outline-danger btn-lg" type="button"
@click="deleteIngredient(i)"><i
class="fas fa-trash-alt"></i></button>
</div>
</div>
</div>
</div>
</tbody>
</table> </template>
<div style="text-align: center">
<div style="text-align: center; margin-top: 16px">
<button class="btn btn-success" type="button" @click="addIngredient()"><i <button class="btn btn-success" type="button" @click="addIngredient()"><i
class="fas fa-plus"></i></button> class="fas fa-plus"></i></button>
<br/><br/> <br/><br/>
@ -167,7 +168,7 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<button type="button" @click="importRecipe()">{% trans 'Import' %}</button> <button type="button" class="btn btn-success" @click="importRecipe()">{% trans 'Import' %}</button>
</div> </div>
<br/> <br/>
@ -205,8 +206,6 @@
class="card-link">{% trans 'GitHub Issues' %}</a> class="card-link">{% trans 'GitHub Issues' %}</a>
<a href="https://schema.org/Recipe" target="_blank" rel="noreferrer nofollow" <a href="https://schema.org/Recipe" target="_blank" rel="noreferrer nofollow"
class="card-link">{% trans 'Recipe Markup Specification' %}</a> class="card-link">{% trans 'Recipe Markup Specification' %}</a>
</div> </div>
</div> </div>
</div> </div>
@ -236,7 +235,7 @@
{name: 'Javascript', code: 'js'}, {name: 'Javascript', code: 'js'},
{name: 'Open Source', code: 'os'} {name: 'Open Source', code: 'os'}
], ],
remote_url: 'https://www.rezeptschachtel.de/schwarzwaelder_kirschtorte_rezept.html', remote_url: '',
keywords: [], keywords: [],
units: [], units: [],
ingredients: [], ingredients: [],
@ -246,7 +245,6 @@
all_keywords: false, all_keywords: false,
}, },
mounted: function () { mounted: function () {
this.loadRecipe();
this.getKeywords(); this.getKeywords();
this.getUnits(); this.getUnits();
this.getIngredients(); this.getIngredients();