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

search and car styling

Browse Source
This commit is contained in:
Kaibu
2021-06-30 15:36:56 +02:00
parent c4905d39c1
commit 5518199f64
4 changed files with 49 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cookbook/static/themes/tandoor.min.css vendored
View File

@ -10458,3 +10458,7 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
.multiselect__tag-icon:after { .multiselect__tag-icon:after {
color: #212529 !important color: #212529 !important
} }
.form-control-search {
font-size: 20px;
}

2
cookbook/static/vue/js/recipe_search_view.js
View File

File diff suppressed because one or more lines are too long

42
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@ -1,44 +1,42 @@
<template> <template>
<div id="app" style="margin-bottom: 4vh"> <div id="app" style="margin-bottom: 4vh">
<div class="row"> <div class="row">
<div class="col-md-2 d-none d-md-block"> <div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
</div>
<div class="col-xl-8 col-12">
<div class="row"> <div class="row">
<div class="col col-md-12"> <div class="col col-md-12">
<div class="row justify-content-center">
<div class="col-12 col-lg-10 col-xl-8 mt-3 mb-3">
<b-input-group class="mt-3"> <b-input-group>
<b-input class="form-control" v-model="settings.search_input" v-bind:placeholder="$t('Search')"></b-input> <b-input class="form-control form-control-lg form-control-borderless form-control-search" v-model="settings.search_input"
v-bind:placeholder="$t('Search')"></b-input>
<b-input-group-append> <b-input-group-append>
<b-button v-b-toggle.collapse_advanced_search <b-button v-b-toggle.collapse_advanced_search
v-bind:class="{'btn-primary': !isAdvancedSettingsSet(), 'btn-danger': isAdvancedSettingsSet()}" v-bind:class="{'btn-primary': !isAdvancedSettingsSet(), 'btn-danger': isAdvancedSettingsSet()}"
class="shadow-none btn"><i class="shadow-none btn"><i
class="fas fa-caret-down" v-if="!settings.advanced_search_visible"></i><i class="fas fa-caret-up" class="fas fa-caret-down" v-if="!settings.advanced_search_visible"></i><i
class="fas fa-caret-up"
v-if="settings.advanced_search_visible"></i> v-if="settings.advanced_search_visible"></i>
</b-button> </b-button>
</b-input-group-append> </b-input-group-append>
</b-input-group> </b-input-group>
</div>
</div>
<b-collapse id="collapse_advanced_search" class="mt-2" v-model="settings.advanced_search_visible"> <b-collapse id="collapse_advanced_search" class="mt-2 shadow-sm" v-model="settings.advanced_search_visible">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body p-4">
<div class="row"> <div class="row">
<div class="col-md-3" style="margin-top: 1vh"> <div class="col-md-3">
<a class="btn btn-primary btn-block text-uppercase" <a class="btn btn-primary btn-block text-uppercase"
:href="resolveDjangoUrl('new_recipe')">{{ $t('New_Recipe') }}</a> :href="resolveDjangoUrl('new_recipe')">{{ $t('New_Recipe') }}</a>
</div> </div>
<div class="col-md-3" style="margin-top: 1vh"> <div class="col-md-3">
<a class="btn btn-primary btn-block text-uppercase" <a class="btn btn-primary btn-block text-uppercase"
:href="resolveDjangoUrl('data_import_url')">{{ $t('Import') }}</a> :href="resolveDjangoUrl('data_import_url')">{{ $t('Import') }}</a>
</div> </div>
<div class="col-md-3" style="margin-top: 1vh"> <div class="col-md-3">
<button class="btn btn-block text-uppercase" v-b-tooltip.hover :title="$t('show_only_internal')" <button class="btn btn-block text-uppercase" v-b-tooltip.hover :title="$t('show_only_internal')"
v-bind:class="{'btn-success':settings.search_internal, 'btn-primary':!settings.search_internal}" v-bind:class="{'btn-success':settings.search_internal, 'btn-primary':!settings.search_internal}"
@click="settings.search_internal = !settings.search_internal;refreshData()"> @click="settings.search_internal = !settings.search_internal;refreshData()">
@ -46,9 +44,9 @@
</button> </button>
</div> </div>
<div class="col-md-3" style="position: relative; margin-top: 1vh"> <div class="col-md-3">
<button id="id_settings_button" class="btn btn-primary btn-block text-uppercase"><i <button id="id_settings_button" class="btn btn-primary btn-block text-uppercase"><i
class="fas fa-cog"></i> class="fas fa-cog fa-lg m-1"></i>
</button> </button>
</div> </div>
@ -99,7 +97,7 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<b-input-group style="margin-top: 1vh"> <b-input-group class="mt-2">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_keywords" <generic-multiselect @change="genericSelectChanged" parent_variable="search_keywords"
:initial_selection="settings.search_keywords" :initial_selection="settings.search_keywords"
search_function="listKeywords" label="label" search_function="listKeywords" label="label"
@ -121,7 +119,7 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<b-input-group style="margin-top: 1vh"> <b-input-group class="mt-2">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_foods" <generic-multiselect @change="genericSelectChanged" parent_variable="search_foods"
:initial_selection="settings.search_foods" :initial_selection="settings.search_foods"
search_function="listFoods" label="name" search_function="listFoods" label="name"
@ -143,7 +141,7 @@
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<b-input-group style="margin-top: 1vh"> <b-input-group class="mt-2">
<generic-multiselect @change="genericSelectChanged" parent_variable="search_books" <generic-multiselect @change="genericSelectChanged" parent_variable="search_books"
:initial_selection="settings.search_books" :initial_selection="settings.search_books"
search_function="listRecipeBooks" label="name" search_function="listRecipeBooks" label="name"

19
vue/src/components/RecipeCard.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<b-card no-body> <b-card no-body v-hover>
<a :href="clickUrl()"> <a :href="clickUrl()">
<b-card-img-lazy style="height: 15vh; object-fit: cover" :src=recipe_image v-bind:alt="$t('Recipe_Image')" <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> top></b-card-img-lazy>
<div class="card-img-overlay h-100 d-flex flex-column justify-content-right" <div class="card-img-overlay h-100 d-flex flex-column justify-content-right"
style="float:right; text-align: right; padding-top: 10px; padding-right: 5px"> style="float:right; text-align: right; padding-top: 10px; padding-right: 5px">
@ -14,7 +15,7 @@
</a> </a>
<b-card-body style="padding: 16px"> <b-card-body class="p-4">
<h6><a :href="clickUrl()"> <h6><a :href="clickUrl()">
<template v-if="recipe !== null">{{ recipe.name }}</template> <template v-if="recipe !== null">{{ recipe.name }}</template>
<template v-else>{{ meal_plan.title }}</template> <template v-else>{{ meal_plan.title }}</template>
@ -97,6 +98,18 @@ export default {
return resolveDjangoUrl('view_plan_entry', this.meal_plan.id) return resolveDjangoUrl('view_plan_entry', this.meal_plan.id)
} }
} }
},
directives: {
hover: {
inserted: function (el) {
el.addEventListener('mouseenter', () => {
el.classList.add("shadow")
});
el.addEventListener('mouseleave', () => {
el.classList.remove("shadow")
});
}
}
} }
} }
</script> </script>