ui improvements
This commit is contained in:
Kaibu
@ -16,86 +16,112 @@
|
|||||||
<!-- URL -->
|
<!-- URL -->
|
||||||
<b-card no-body>
|
<b-card no-body>
|
||||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||||
<b-button block v-b-toggle.id_accordion_url variant="info">Website</b-button>
|
<b-col cols="12" md="6" offset="0" offset-md="3">
|
||||||
|
<b-button block v-b-toggle.id_accordion_url variant="info">Website</b-button>
|
||||||
|
</b-col>
|
||||||
</b-card-header>
|
</b-card-header>
|
||||||
<b-collapse id="id_accordion_url" visible accordion="url_import_accordion"
|
<b-collapse id="id_accordion_url" visible accordion="url_import_accordion"
|
||||||
role="tabpanel" v-model="collapse_visible.url">
|
role="tabpanel" v-model="collapse_visible.url">
|
||||||
<b-card-body>
|
<div class="row justify-content-center p-2">
|
||||||
|
<div class="col-12 col-lg-10 col-xl-8 mt-3 mb-3">
|
||||||
<div class="row">
|
<div class="row justify-content-center">
|
||||||
<div class="col col-md-12">
|
<div class="col-12 justify-content-cente">
|
||||||
<b-checkbox v-model="import_multiple" switch><span
|
<b-checkbox v-model="import_multiple" switch><span
|
||||||
v-if="import_multiple">Multiple Recipes</span><span
|
v-if="import_multiple">Multiple Recipes</span><span
|
||||||
v-if="!import_multiple">Single Recipe</span></b-checkbox>
|
v-if="!import_multiple">Single Recipe</span></b-checkbox>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col col-md-12">
|
|
||||||
<b-input-group>
|
|
||||||
<b-input v-model="website_url" placeholder="Website URL"></b-input>
|
|
||||||
<b-input-group-append>
|
|
||||||
<b-button variant="primary" @click="loadRecipe(false,undefined)"
|
|
||||||
v-if="!import_multiple"><i
|
|
||||||
class="fas fa-search fa-fw"></i>
|
|
||||||
</b-button>
|
|
||||||
<b-button variant="primary"
|
|
||||||
@click="website_url_list.push(website_url); website_url=''"
|
|
||||||
v-if="import_multiple"><i
|
|
||||||
class="fas fa-plus fa-fw"></i>
|
|
||||||
</b-button>
|
|
||||||
</b-input-group-append>
|
|
||||||
|
|
||||||
</b-input-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div class="col col-md-12">
|
|
||||||
<div v-if="!import_multiple">
|
|
||||||
<a href="#" @click="clearRecentImports()">Clear recent imports</a>
|
|
||||||
<ul>
|
|
||||||
<li v-for="x in recent_urls" v-bind:key="x">
|
|
||||||
<a href="#"
|
|
||||||
@click="website_url=x; loadRecipe(false, undefined)">{{
|
|
||||||
x
|
|
||||||
}}</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div v-if="import_multiple">
|
</div>
|
||||||
<a href="#" @click="website_url_list = []"
|
<b-input-group class="mt-2" :class="{ bounce: empty_input }">
|
||||||
v-if="website_url_list.length > 0">Clear import list</a>
|
<b-input
|
||||||
<ul>
|
class="form-control form-control-lg form-control-borderless form-control-search"
|
||||||
<li v-for="x in website_url_list" v-bind:key="x">
|
v-model="website_url"
|
||||||
{{ x }}
|
placeholder="Website URL" @paste="onURLPaste"></b-input>
|
||||||
</li>
|
<b-input-group-append>
|
||||||
</ul>
|
<b-button variant="primary" @click="loadRecipe(false,undefined)"
|
||||||
|
v-if="!import_multiple"><i
|
||||||
<b-button :disabled="website_url_list.length < 1"
|
class="fas fa-search fa-fw"></i>
|
||||||
@click="autoImport()">Import
|
|
||||||
</b-button>
|
</b-button>
|
||||||
|
<b-button variant="primary"
|
||||||
|
@click="addWebsiteToURLList(website_url); website_url=''"
|
||||||
|
v-if="import_multiple"><i
|
||||||
|
class="fas fa-plus fa-fw"></i>
|
||||||
|
</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
|
||||||
|
<div class="row mt-2">
|
||||||
|
<div class="col col-md-12">
|
||||||
|
<div v-if="!import_multiple">
|
||||||
|
<a href="#" @click="clearRecentImports()">Clear recent
|
||||||
|
imports</a>
|
||||||
|
<ul>
|
||||||
|
<li v-for="x in recent_urls" v-bind:key="x">
|
||||||
|
<a href="#"
|
||||||
|
@click="website_url=x; loadRecipe(false, undefined)">{{
|
||||||
|
x
|
||||||
|
}}</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div v-if="import_multiple">
|
||||||
|
<a href="#" @click="website_url_list = []"
|
||||||
|
v-if="website_url_list.length > 0">Clear import list</a>
|
||||||
|
<ul>
|
||||||
|
<li v-for="x in website_url_list" v-bind:key="x">
|
||||||
|
{{ x }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<b-button class="float-right"
|
||||||
|
:disabled="website_url_list.length < 1"
|
||||||
|
@click="autoImport()">Import
|
||||||
|
</b-button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</b-card-body>
|
|
||||||
</b-collapse>
|
</b-collapse>
|
||||||
</b-card>
|
</b-card>
|
||||||
|
|
||||||
|
<!-- Loading -->
|
||||||
|
<b-card no-body v-if="loading">
|
||||||
|
<loading-spinner></loading-spinner>
|
||||||
|
</b-card>
|
||||||
|
|
||||||
<!-- OPTIONS -->
|
<!-- OPTIONS -->
|
||||||
<b-card no-body>
|
<b-card no-body v-if="recipe_json !== undefined">
|
||||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||||
<b-button block v-b-toggle.id_accordion_add_options variant="info"
|
<b-col cols="12" md="6" offset="0" offset-md="3">
|
||||||
:disabled="recipe_json === undefined">Options
|
<b-button block v-b-toggle.id_accordion_add_options variant="info"
|
||||||
</b-button>
|
:disabled="recipe_json === undefined">Options
|
||||||
|
</b-button>
|
||||||
|
</b-col>
|
||||||
</b-card-header>
|
</b-card-header>
|
||||||
<b-collapse id="id_accordion_add_options" accordion="url_import_accordion"
|
<b-collapse id="id_accordion_add_options" accordion="url_import_accordion"
|
||||||
role="tabpanel" v-model="collapse_visible.options">
|
role="tabpanel" v-model="collapse_visible.options">
|
||||||
<b-card-body v-if="recipe_json !== undefined">
|
<b-card-body v-if="recipe_json !== undefined"
|
||||||
|
class="p-1 pb-md-5 pr-md-5 pl-md-5 pt-md-2">
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-12 col-md-8 offset-0 offset-md-2">
|
||||||
|
<h4 class="text-center flex-grow-1" v-b-tooltip.hover.bottom :title="$t('Click_To_Edit')" v-if="!edit_name"
|
||||||
|
@click="edit_name = true">{{
|
||||||
|
recipe_json.name
|
||||||
|
}} <span class="text-primary"><i class="fa fa-edit"></i> </span> </h4>
|
||||||
|
<b-input-group v-if="edit_name" class="mb-2">
|
||||||
|
<b-input
|
||||||
|
class="form-control form-control-borderless form-control-search"
|
||||||
|
v-model="recipe_json.name"></b-input>
|
||||||
|
<b-input-group-append>
|
||||||
|
<b-button variant="primary" @click="edit_name = false"><i
|
||||||
|
class="fas fa-save fa-fw"></i>
|
||||||
|
</b-button>
|
||||||
|
</b-input-group-append>
|
||||||
|
</b-input-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col col-md-12 text-center">
|
<div class="col col-md-12 text-center">
|
||||||
<b-img rounded fluid :src="recipe_json.image"
|
<b-img rounded fluid :src="recipe_json.image"
|
||||||
@ -107,44 +133,54 @@
|
|||||||
<div class="col col-md-12 text-center">
|
<div class="col col-md-12 text-center">
|
||||||
<small class="text-muted">Click the image you want to import for this
|
<small class="text-muted">Click the image you want to import for this
|
||||||
recipe</small> <!-- TODO localize -->
|
recipe</small> <!-- TODO localize -->
|
||||||
</div>
|
|
||||||
<div class="col col-md-12 text-center">
|
|
||||||
<span v-if="recipe_images.length === 0">No additional images found in source.</span>
|
<span v-if="recipe_images.length === 0">No additional images found in source.</span>
|
||||||
<b-img v-for="i in recipe_images" rounded thumbnail fluid :src="i"
|
<div class="scrolling-wrapper-flexbox">
|
||||||
style="max-height: 10vh" v-bind:key="i"
|
<div class="wrapper-card" v-for="i in recipe_images"
|
||||||
@click="recipe_json.image = i"></b-img>
|
v-bind:key="i"
|
||||||
|
@click="recipe_json.image = i">
|
||||||
|
<b-img rounded thumbnail fluid :src="i"
|
||||||
|
style="max-height: 10vh"
|
||||||
|
></b-img>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row mt-2">
|
<div class="row mt-2 mt-md-4">
|
||||||
<div class="col col-6">
|
<div class="col-12 col-md-6 offset-0 offset-md-3">
|
||||||
<b-card title="Used Keywords">
|
<b-card no-body>
|
||||||
|
<b-card-title>
|
||||||
<b-list-group>
|
<div class="clearfix">
|
||||||
<draggable :list="recipe_json.keywords" group="keywords"
|
<span class="float-left h5">Keywords</span>
|
||||||
:empty-insert-threshold="10">
|
<b-button-group class="float-right">
|
||||||
<b-list-group-item v-for="k in recipe_json.keywords"
|
<b-button class="float-right" variant="primary"
|
||||||
v-bind:key="k.name">{{
|
@click="$set(recipe_json, 'keywords', recipe_json.keywords.map(x => {x.show = true; return x}))">
|
||||||
k.label
|
<i
|
||||||
}}
|
class="fa fa-check-double"></i></b-button>
|
||||||
|
<b-button class="float-right" variant="secondary"
|
||||||
|
@click="$set(recipe_json, 'keywords', recipe_json.keywords.map(x => {x.show = false; return x}))">
|
||||||
|
<i
|
||||||
|
class="fa fa-times"></i></b-button>
|
||||||
|
</b-button-group>
|
||||||
|
</div>
|
||||||
|
</b-card-title>
|
||||||
|
<b-card-body class="m-0 p-0 p-md-5">
|
||||||
|
<b-list-group>
|
||||||
|
<b-list-group-item
|
||||||
|
v-for="(k, index) in recipe_json.keywords"
|
||||||
|
v-bind:key="k.name" style="cursor: pointer"
|
||||||
|
v-hover v-bind:class="{ 'bg-success': k.show }"
|
||||||
|
@click="k.show = (!k.show);$set(recipe_json.keywords, index, k)">
|
||||||
|
<div class="clearfix">
|
||||||
|
<span class="float-left">{{
|
||||||
|
k.label
|
||||||
|
}} </span>
|
||||||
|
<b-checkbox class="float-right" v-model="k.show"
|
||||||
|
disabled></b-checkbox>
|
||||||
|
</div>
|
||||||
</b-list-group-item>
|
</b-list-group-item>
|
||||||
</draggable>
|
</b-list-group>
|
||||||
|
</b-card-body>
|
||||||
</b-list-group>
|
|
||||||
</b-card>
|
|
||||||
</div>
|
|
||||||
<div class="col col-6">
|
|
||||||
<b-card title="Unused Keywords">
|
|
||||||
<b-list-group>
|
|
||||||
<draggable :list="recipe_json.unused_keywords" group="keywords"
|
|
||||||
:empty-insert-threshold="10">
|
|
||||||
<b-list-group-item v-for="k in recipe_json.unused_keywords"
|
|
||||||
v-bind:key="k.name">{{
|
|
||||||
k.label
|
|
||||||
}}
|
|
||||||
</b-list-group-item>
|
|
||||||
</draggable>
|
|
||||||
</b-list-group>
|
|
||||||
</b-card>
|
</b-card>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -157,27 +193,35 @@
|
|||||||
</b-card>
|
</b-card>
|
||||||
|
|
||||||
<!-- IMPORT -->
|
<!-- IMPORT -->
|
||||||
<b-card no-body>
|
<b-card no-body v-if="recipe_json !== undefined">
|
||||||
<b-card-header header-tag="header" class="p-1" role="tab">
|
<b-card-header header-tag="header" class="p-1" role="tab">
|
||||||
<b-button block v-b-toggle.id_accordion_import variant="info"
|
<b-col cols="12" md="6" offset="0" offset-md="3">
|
||||||
:disabled="recipe_json === undefined">Import
|
<b-button block v-b-toggle.id_accordion_import variant="info"
|
||||||
</b-button>
|
:disabled="recipe_json === undefined">Import
|
||||||
|
</b-button>
|
||||||
|
</b-col>
|
||||||
</b-card-header>
|
</b-card-header>
|
||||||
<b-collapse id="id_accordion_import" visible accordion="url_import_accordion"
|
<b-collapse id="id_accordion_import" visible accordion="url_import_accordion"
|
||||||
role="tabpanel" v-model="collapse_visible.import">
|
role="tabpanel" v-model="collapse_visible.import">
|
||||||
<b-card-body class="text-center">
|
<b-card-body class="text-center">
|
||||||
|
<b-row>
|
||||||
|
<b-col cols="12" md="6" xl="4" offset="0" offset-md="3" offset-xl="4">
|
||||||
|
<recipe-card :recipe="recipe_json" :detailed="false"
|
||||||
|
:show_context_menu="false"></recipe-card>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-card-body>
|
||||||
|
<b-card-footer class="text-center">
|
||||||
<b-button-group>
|
<b-button-group>
|
||||||
<b-button @click="importRecipe('view')">Import & View</b-button>
|
<b-button @click="importRecipe('view')">Import & View</b-button>
|
||||||
<b-button @click="importRecipe('edit')">Import & Edit</b-button>
|
<b-button @click="importRecipe('edit')" variant="success">Import & Edit
|
||||||
<b-button @click="importRecipe('import')">Import & start new import
|
</b-button>
|
||||||
|
<b-button @click="importRecipe('import')">Import & Restart
|
||||||
</b-button>
|
</b-button>
|
||||||
</b-button-group>
|
</b-button-group>
|
||||||
|
</b-card-footer>
|
||||||
</b-card-body>
|
|
||||||
</b-collapse>
|
</b-collapse>
|
||||||
</b-card>
|
</b-card>
|
||||||
|
|
||||||
</b-tab>
|
</b-tab>
|
||||||
<!-- App Tab -->
|
<!-- App Tab -->
|
||||||
<b-tab v-bind:title="$t('App')">
|
<b-tab v-bind:title="$t('App')">
|
||||||
@ -250,9 +294,10 @@ import 'bootstrap-vue/dist/bootstrap-vue.css'
|
|||||||
import {resolveDjangoStatic, resolveDjangoUrl, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils";
|
import {resolveDjangoStatic, resolveDjangoUrl, ResolveUrlMixin, StandardToasts, ToastMixin} from "@/utils/utils";
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
import {ApiApiFactory} from "@/utils/openapi/api";
|
import {ApiApiFactory} from "@/utils/openapi/api";
|
||||||
import draggable from "vuedraggable";
|
|
||||||
import {INTEGRATIONS} from "@/utils/integration";
|
import {INTEGRATIONS} from "@/utils/integration";
|
||||||
import ImportViewStepEditor from "@/apps/ImportView/ImportViewStepEditor";
|
import ImportViewStepEditor from "@/apps/ImportView/ImportViewStepEditor";
|
||||||
|
import RecipeCard from "@/components/RecipeCard";
|
||||||
|
import LoadingSpinner from "@/components/LoadingSpinner";
|
||||||
|
|
||||||
Vue.use(BootstrapVue)
|
Vue.use(BootstrapVue)
|
||||||
|
|
||||||
@ -263,8 +308,9 @@ export default {
|
|||||||
ToastMixin,
|
ToastMixin,
|
||||||
],
|
],
|
||||||
components: {
|
components: {
|
||||||
ImportViewStepEditor,
|
LoadingSpinner,
|
||||||
draggable,
|
RecipeCard,
|
||||||
|
ImportViewStepEditor
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@ -295,7 +341,9 @@ export default {
|
|||||||
recipe_app: undefined,
|
recipe_app: undefined,
|
||||||
import_duplicates: false,
|
import_duplicates: false,
|
||||||
recipe_files: [],
|
recipe_files: [],
|
||||||
// Bookmarklet
|
loading: false,
|
||||||
|
empty_input: false,
|
||||||
|
edit_name: false,// Bookmarklet
|
||||||
BOOKMARKLET_CODE: window.BOOKMARKLET_CODE
|
BOOKMARKLET_CODE: window.BOOKMARKLET_CODE
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -315,6 +363,8 @@ export default {
|
|||||||
* @param data: if parameter is passed ignore global application state and import form data variable
|
* @param data: if parameter is passed ignore global application state and import form data variable
|
||||||
*/
|
*/
|
||||||
importRecipe: function (action, data) {
|
importRecipe: function (action, data) {
|
||||||
|
this.$set(this.recipe_json, 'keywords', this.recipe_json.keywords.filter(k => k.show))
|
||||||
|
|
||||||
let apiFactory = new ApiApiFactory()
|
let apiFactory = new ApiApiFactory()
|
||||||
let recipe_json = data !== undefined ? data : this.recipe_json
|
let recipe_json = data !== undefined ? data : this.recipe_json
|
||||||
apiFactory.createRecipe(recipe_json).then(response => { // save recipe
|
apiFactory.createRecipe(recipe_json).then(response => { // save recipe
|
||||||
@ -372,6 +422,16 @@ export default {
|
|||||||
window.localStorage.setItem(this.LS_IMPORT_RECENT, JSON.stringify(this.recent_urls))
|
window.localStorage.setItem(this.LS_IMPORT_RECENT, JSON.stringify(this.recent_urls))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (this.website_url === '') {
|
||||||
|
this.empty_input = true
|
||||||
|
setTimeout(() => {
|
||||||
|
this.empty_input = false
|
||||||
|
}, 1000)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.loading = true
|
||||||
|
|
||||||
// reset all variables
|
// reset all variables
|
||||||
this.recipe_html = undefined
|
this.recipe_html = undefined
|
||||||
this.recipe_json = undefined
|
this.recipe_json = undefined
|
||||||
@ -389,10 +449,17 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return axios.post(resolveDjangoUrl('api_recipe_from_source'), payload,).then((response) => {
|
return axios.post(resolveDjangoUrl('api_recipe_from_source'), payload,).then((response) => {
|
||||||
|
this.loading = false
|
||||||
this.recipe_json = response.data['recipe_json'];
|
this.recipe_json = response.data['recipe_json'];
|
||||||
|
|
||||||
this.$set(this.recipe_json, 'unused_keywords', this.recipe_json.keywords.filter(k => k.id === undefined))
|
this.recipe_json.keywords.map(x => {
|
||||||
this.$set(this.recipe_json, 'keywords', this.recipe_json.keywords.filter(k => k.id !== undefined))
|
if (x.id === undefined) {
|
||||||
|
x.show = false
|
||||||
|
} else {
|
||||||
|
x.show = true
|
||||||
|
}
|
||||||
|
return x
|
||||||
|
})
|
||||||
|
|
||||||
this.recipe_tree = response.data['recipe_tree'];
|
this.recipe_tree = response.data['recipe_tree'];
|
||||||
this.recipe_html = response.data['recipe_html'];
|
this.recipe_html = response.data['recipe_html'];
|
||||||
@ -438,6 +505,22 @@ export default {
|
|||||||
})
|
})
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
|
* Adds Website to url list, prevents duplicates
|
||||||
|
*/
|
||||||
|
addWebsiteToURLList: function (url) {
|
||||||
|
if (this.website_url_list.indexOf(url) === -1 && url !== '') {
|
||||||
|
this.website_url_list.push(url)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Handles pasting URLs
|
||||||
|
*/
|
||||||
|
onURLPaste: function (evt) {
|
||||||
|
this.website_url = evt.clipboardData.getData('text')
|
||||||
|
this.loadRecipe(false, undefined)
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
/**loadRecipe(false,undefined)
|
||||||
* Clear list of recently imported recipe urls
|
* Clear list of recently imported recipe urls
|
||||||
*/
|
*/
|
||||||
clearRecentImports: function () {
|
clearRecentImports: function () {
|
||||||
@ -459,12 +542,62 @@ export default {
|
|||||||
`document.body.appendChild(document.createElement("script")).src="${localStorage.getItem('BASE_PATH')}${resolveDjangoStatic('/js/bookmarklet.js')}?r="+Math.floor(Math.random()*999999999)}` +
|
`document.body.appendChild(document.createElement("script")).src="${localStorage.getItem('BASE_PATH')}${resolveDjangoStatic('/js/bookmarklet.js')}?r="+Math.floor(Math.random()*999999999)}` +
|
||||||
`})()`
|
`})()`
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
directives: {
|
||||||
|
hover: {
|
||||||
|
inserted: function (el) {
|
||||||
|
el.addEventListener("mouseenter", () => {
|
||||||
|
el.classList.add("shadow")
|
||||||
|
})
|
||||||
|
el.addEventListener("mouseleave", () => {
|
||||||
|
el.classList.remove("shadow")
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
|
.bounce {
|
||||||
|
animation: bounce 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
10%,
|
||||||
|
90% {
|
||||||
|
transform: translate3d(-1px, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
20%,
|
||||||
|
80% {
|
||||||
|
transform: translate3d(2px, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
30%,
|
||||||
|
50%,
|
||||||
|
70% {
|
||||||
|
transform: translate3d(-4px, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
40%,
|
||||||
|
60% {
|
||||||
|
transform: translate3d(4px, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrolling-wrapper-flexbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow-x: auto;
|
||||||
|
-webkit-overflow-scrolling: touch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper-card {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-right: 3px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,13 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="recipe_json !== undefined">
|
<div v-if="recipe_json !== undefined" class="mt-2 mt-md-0">
|
||||||
Steps
|
<h5>Steps</h5>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col col-md-12 text-center">
|
<div class="col col-md-12 text-center">
|
||||||
<b-button @click="splitAllSteps('\n')" variant="secondary"><i
|
<b-button @click="splitAllSteps('\n')" variant="secondary" v-b-tooltip.hover :title="$t('Split_All_Steps')"><i
|
||||||
class="fas fa-expand-arrows-alt"></i> All
|
class="fas fa-expand-arrows-alt"></i> {{ $t('All') }}
|
||||||
</b-button>
|
</b-button>
|
||||||
<b-button @click="mergeAllSteps()" variant="primary" class="ml-1"><i
|
<b-button @click="mergeAllSteps()" variant="primary" class="ml-1" v-b-tooltip.hover :title="$t('Combine_All_Steps')"><i
|
||||||
class="fas fa-compress-arrows-alt"></i> All
|
class="fas fa-compress-arrows-alt"></i> {{ $t('All') }}
|
||||||
</b-button>
|
</b-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="recipe.keywords.length > 0">
|
<div v-if="recipe.keywords.length > 0">
|
||||||
<span :key="k.id" v-for="k in recipe.keywords" class="pl-1">
|
<span :key="k.id" v-for="k in recipe.keywords.filter((kk) => { return kk.show || kk.show === undefined })" class="pl-1">
|
||||||
<a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`"><b-badge pill variant="light"
|
<a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`"><b-badge pill variant="light"
|
||||||
class="font-weight-normal">{{ k.label }}</b-badge></a>
|
class="font-weight-normal">{{ k.label }}</b-badge></a>
|
||||||
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<b-card no-body v-hover v-if="recipe">
|
<b-card no-body v-hover v-if="recipe">
|
||||||
<a :href="clickUrl()">
|
<a :href="clickUrl()">
|
||||||
<b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image" v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
|
<b-card-img-lazy style="height: 15vh; object-fit: cover" class="" :src="recipe_image" v-bind:alt="$t('Recipe_Image')" top></b-card-img-lazy>
|
||||||
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right pt-2 pr-1">
|
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right float-right text-right pt-2 pr-1" v-if="show_context_menu">
|
||||||
<a>
|
<a>
|
||||||
<recipe-context-menu :recipe="recipe" class="float-right" v-if="recipe !== null"></recipe-context-menu>
|
<recipe-context-menu :recipe="recipe" class="float-right" v-if="recipe !== null"></recipe-context-menu>
|
||||||
</a>
|
</a>
|
||||||
@ -78,6 +78,7 @@ export default {
|
|||||||
footer_text: String,
|
footer_text: String,
|
||||||
footer_icon: String,
|
footer_icon: String,
|
||||||
detailed: { type: Boolean, default: true },
|
detailed: { type: Boolean, default: true },
|
||||||
|
show_context_menu: { type: Boolean, default: true }
|
||||||
},
|
},
|
||||||
mounted() {},
|
mounted() {},
|
||||||
computed: {
|
computed: {
|
||||||
|
|||||||
Reference in New Issue
Block a user