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

small visual tweaks to search page

Browse Source
This commit is contained in:
vabene1111 2022-09-17 08:06:38 +02:00
parent 54c9e200a0
commit 0ca29cd677
2 changed files with 367 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2815,6 +2815,323 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
width: 100%
}
.btn {
font-size: .875rem;
font-family: Poppins, sans-serif;
padding: .625rem 1.25rem;
outline: none;
line-height: 1.5;
}
.btn.btn-rounded {
border-radius: 50px
}
.btn.btn-white {
background: #fff;
transition: all .5s ease-in-out
}
.btn.btn-white:hover {
background: #a7240e;
color: #fff
}
.btn:focus {
box-shadow: none
}
.btn-primary {
transition: all .5s ease-in-out;
color: #fff
}
.btn-primary:hover {
background: transparent;
color: #b98766;
border: 1px solid #b98766
}
.btn-secondary {
transition: all .5s ease-in-out;
color: #fff
}
.btn-secondary:hover {
background: transparent;
color: #b55e4f;
border: 1px solid #b55e4f
}
.btn-success {
transition: all .5s ease-in-out;
color: #fff
}
.btn-success:hover {
background: transparent;
color: #82aa8b;
border: 1px solid #82aa8b
}
.btn-info {
transition: all .5s ease-in-out;
color: #fff
}
.btn-info:hover {
background: transparent;
color: #385f84;
border: 1px solid #385f84
}
.btn-warning {
transition: all .5s ease-in-out;
color: #fff
}
.btn-warning:hover {
background: transparent;
color: #eaaa21;
border: 1px solid #eaaa21
}
.btn-danger {
transition: all .5s ease-in-out;
color: #fff
}
.btn-danger:hover {
background: transparent;
color: #a7240e;
border: 1px solid #a7240e
}
.btn-light {
transition: all .5s ease-in-out;
color: #fff
}
.btn-light:hover {
background-color: hsla(0, 0%, 18%, .5);
color: #cfd5cd;
border: 1px solid hsla(0, 0%, 18%, .5)
}
.btn-dark {
transition: all .5s ease-in-out;
color: #fff
}
.btn-dark:hover {
background: transparent;
color: #221e1e;
border: 1px solid #221e1e
}
.btn-opacity-primary {
color: #b98766;
background-color: #0012a7;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-primary:hover {
color: #b98766;
background-color: #fff;
border: 2px solid #b98766
}
.btn-opacity-secondary {
color: #b55e4f;
background-color: #fff;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-secondary:hover {
color: #b55e4f;
background-color: #fff;
border: 2px solid #b55e4f
}
.btn-opacity-success {
color: #82aa8b;
background-color: #b7eddd;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-success:hover {
color: #82aa8b;
background-color: #fff;
border: 2px solid #82aa8b
}
.btn-opacity-info {
color: #385f84;
background-color: #89caff;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-info:hover {
color: #385f84;
background-color: #fff;
border: 2px solid #385f84
}
.btn-opacity-warning {
color: #eaaa21;
background-color: #ffd170;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-warning:hover {
color: #eaaa21;
background-color: #fff;
border: 2px solid #eaaa21
}
.btn-opacity-danger {
color: #a7240e;
background-color: #ff7070;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-danger:hover {
color: #a7240e;
background-color: #fff;
border: 2px solid #a7240e
}
.btn-opacity-light {
color: #cfd5cd;
background-color: #fec4af;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-light:hover {
color: #cfd5cd;
background-color: #fff;
border: 2px solid #cfd5cd
}
.btn-opacity-dark {
color: #221e1e;
background-color: #5e5353;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-dark:hover {
color: #221e1e;
background-color: #fff;
border: 2px solid #221e1e
}
.btn-outline-primary {
color: #b98766;
background-color: #fff;
border: 2px solid #b98766;
transition: all .5s ease-in-out
}
.btn-outline-primary:hover {
color: #fff;
background-color: #b98766
}
.btn-outline-secondary {
color: #b55e4f;
background-color: #fff;
border: 2px solid #b55e4f;
transition: all .5s ease-in-out
}
.btn-outline-secondary:hover {
color: #fff;
background-color: #b55e4f
}
.btn-outline-success {
color: #82aa8b;
background-color: #fff;
border: 2px solid #82aa8b;
transition: all .5s ease-in-out
}
.btn-outline-success:hover {
color: #fff;
background-color: #82aa8b
}
.btn-outline-info {
color: #385f84;
background-color: #fff;
border: 2px solid #385f84;
transition: all .5s ease-in-out
}
.btn-outline-info:hover {
color: #fff;
background-color: #385f84
}
.btn-outline-warning {
color: #eaaa21;
background-color: #fff;
border: 2px solid #eaaa21;
transition: all .5s ease-in-out
}
.btn-outline-warning:hover {
color: #fff;
background-color: #eaaa21
}
.btn-outline-danger {
color: #a7240e;
background-color: #fff;
border: 2px solid #a7240e;
transition: all .5s ease-in-out
}
.btn-outline-danger:hover {
color: #fff;
background-color: #a7240e
}
.btn-outline-light {
color: #cfd5cd;
background-color: #fff;
border: 2px solid #cfd5cd;
transition: all .5s ease-in-out
}
.btn-outline-light:hover {
color: #fff;
background-color: #cfd5cd
}
.btn-outline-dark {
color: #221e1e;
background-color: #fff;
border: 2px solid #221e1e;
transition: all .5s ease-in-out
}
.btn-outline-dark:hover {
color: #fff;
background-color: #221e1e
}
.fade {
transition: opacity .15s linear
}
@ -3148,6 +3465,13 @@ input[type=button].btn-block, input[type=reset].btn-block, input[type=submit].bt
margin-right: 0
}
.btn-sm, .btn-group-sm > .btn {
padding: 0.25rem 0.5rem;
font-size: 0.8203125rem;
line-height: 1.5;
border-radius: 0.2rem
}
.btn-group-sm > .btn + .dropdown-toggle-split, .btn-sm + .dropdown-toggle-split {
padding-right: .375rem;
padding-left: .375rem
@ -4611,7 +4935,7 @@ a.badge:focus, a.badge:hover {
a.badge-primary:focus, a.badge-primary:hover {
color: #fff;
background-color: #000004
background-color: var(--primary);
}
a.badge-primary.focus, a.badge-primary:focus {
@ -6113,11 +6437,12 @@ a.close.disabled {
.align-text-top {
vertical-align: text-top !important
}
/*!
* technically the wrong color but not used anywhere besides nav and this way changing nav color is supported
*/
.bg-primary {
background-color: rgb(221, 191, 134) !important;
background-color: rgb(221, 191, 134) !important;
}
a.bg-primary:focus, a.bg-primary:hover, button.bg-primary:focus, button.bg-primary:hover {
@ -10065,319 +10390,6 @@ footer a:hover {
min-width: 100%
}
.btn {
font-size: .875rem;
font-family: Poppins, sans-serif;
padding: .625rem 1.25rem;
outline: none
}
.btn.btn-rounded {
border-radius: 50px
}
.btn.btn-white {
background: #fff;
transition: all .5s ease-in-out
}
.btn.btn-white:hover {
background: #a7240e;
color: #fff
}
.btn:focus {
box-shadow: none
}
.btn-primary {
transition: all .5s ease-in-out;
color: #fff
}
.btn-primary:hover {
background: transparent;
color: #b98766;
border: 1px solid #b98766
}
.btn-secondary {
transition: all .5s ease-in-out;
color: #fff
}
.btn-secondary:hover {
background: transparent;
color: #b55e4f;
border: 1px solid #b55e4f
}
.btn-success {
transition: all .5s ease-in-out;
color: #fff
}
.btn-success:hover {
background: transparent;
color: #82aa8b;
border: 1px solid #82aa8b
}
.btn-info {
transition: all .5s ease-in-out;
color: #fff
}
.btn-info:hover {
background: transparent;
color: #385f84;
border: 1px solid #385f84
}
.btn-warning {
transition: all .5s ease-in-out;
color: #fff
}
.btn-warning:hover {
background: transparent;
color: #eaaa21;
border: 1px solid #eaaa21
}
.btn-danger {
transition: all .5s ease-in-out;
color: #fff
}
.btn-danger:hover {
background: transparent;
color: #a7240e;
border: 1px solid #a7240e
}
.btn-light {
transition: all .5s ease-in-out;
color: #fff
}
.btn-light:hover {
background-color: hsla(0, 0%, 18%, .5);
color: #cfd5cd;
border: 1px solid hsla(0, 0%, 18%, .5)
}
.btn-dark {
transition: all .5s ease-in-out;
color: #fff
}
.btn-dark:hover {
background: transparent;
color: #221e1e;
border: 1px solid #221e1e
}
.btn-opacity-primary {
color: #b98766;
background-color: #0012a7;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-primary:hover {
color: #b98766;
background-color: #fff;
border: 2px solid #b98766
}
.btn-opacity-secondary {
color: #b55e4f;
background-color: #fff;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-secondary:hover {
color: #b55e4f;
background-color: #fff;
border: 2px solid #b55e4f
}
.btn-opacity-success {
color: #82aa8b;
background-color: #b7eddd;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-success:hover {
color: #82aa8b;
background-color: #fff;
border: 2px solid #82aa8b
}
.btn-opacity-info {
color: #385f84;
background-color: #89caff;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-info:hover {
color: #385f84;
background-color: #fff;
border: 2px solid #385f84
}
.btn-opacity-warning {
color: #eaaa21;
background-color: #ffd170;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-warning:hover {
color: #eaaa21;
background-color: #fff;
border: 2px solid #eaaa21
}
.btn-opacity-danger {
color: #a7240e;
background-color: #ff7070;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-danger:hover {
color: #a7240e;
background-color: #fff;
border: 2px solid #a7240e
}
.btn-opacity-light {
color: #cfd5cd;
background-color: #fec4af;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-light:hover {
color: #cfd5cd;
background-color: #fff;
border: 2px solid #cfd5cd
}
.btn-opacity-dark {
color: #221e1e;
background-color: #5e5353;
border: 2px solid transparent;
transition: all .5s ease-in-out
}
.btn-opacity-dark:hover {
color: #221e1e;
background-color: #fff;
border: 2px solid #221e1e
}
.btn-outline-primary {
color: #b98766;
background-color: #fff;
border: 2px solid #b98766;
transition: all .5s ease-in-out
}
.btn-outline-primary:hover {
color: #fff;
background-color: #b98766
}
.btn-outline-secondary {
color: #b55e4f;
background-color: #fff;
border: 2px solid #b55e4f;
transition: all .5s ease-in-out
}
.btn-outline-secondary:hover {
color: #fff;
background-color: #b55e4f
}
.btn-outline-success {
color: #82aa8b;
background-color: #fff;
border: 2px solid #82aa8b;
transition: all .5s ease-in-out
}
.btn-outline-success:hover {
color: #fff;
background-color: #82aa8b
}
.btn-outline-info {
color: #385f84;
background-color: #fff;
border: 2px solid #385f84;
transition: all .5s ease-in-out
}
.btn-outline-info:hover {
color: #fff;
background-color: #385f84
}
.btn-outline-warning {
color: #eaaa21;
background-color: #fff;
border: 2px solid #eaaa21;
transition: all .5s ease-in-out
}
.btn-outline-warning:hover {
color: #fff;
background-color: #eaaa21
}
.btn-outline-danger {
color: #a7240e;
background-color: #fff;
border: 2px solid #a7240e;
transition: all .5s ease-in-out
}
.btn-outline-danger:hover {
color: #fff;
background-color: #a7240e
}
.btn-outline-light {
color: #cfd5cd;
background-color: #fff;
border: 2px solid #cfd5cd;
transition: all .5s ease-in-out
}
.btn-outline-light:hover {
color: #fff;
background-color: #cfd5cd
}
.btn-outline-dark {
color: #221e1e;
background-color: #fff;
border: 2px solid #221e1e;
transition: all .5s ease-in-out
}
.btn-outline-dark:hover {
color: #fff;
background-color: #221e1e
}
.card {
border: none;
border-radius: 6px
@ -10443,7 +10455,7 @@ footer a:hover {
background-color: transparent !important;
}
textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([class="select2-search__field"]):not([class="vue-treeselect__input"]), select {
textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([class="select2-search__field"]):not([class="vue-treeselect__input"]), select {
background-color: white !important;
border-radius: .25rem !important;
border: 1px solid #ced4da !important;
@ -10467,6 +10479,6 @@ textarea, input:not([type="submit"]):not([class="multiselect__input"]):not([clas
}
.ghost {
opacity: 0.5 !important;
background: #b98766 !important;
opacity: 0.5 !important;
background: #b98766 !important;
}

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

@ -2,11 +2,11 @@
<div id="app" style="margin-bottom: 4vh">
<RecipeSwitcher ref="ref_recipe_switcher"/>
<div class="row">
<div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
<div class="col-12 col-xl-10 col-lg-10 offset-xl-1 offset-lg-1">
<div class="row">
<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">
<div class="col-12 col-lg-10 col-xl-10 mt-2">
<b-input-group>
<b-input
class="form-control form-control-lg form-control-borderless form-control-search"
@ -16,16 +16,10 @@
v-if="debug && ui.sql_debug">
<i class="fas fa-bug" style="font-size: 1.5em"></i>
</b-button>
<b-button variant="light" v-b-tooltip.hover :title="$t('Random Recipes')"
@click="openRandom()">
<i class="fas fa-dice-five" style="font-size: 1.5em"></i>
</b-button>
<b-button v-b-toggle.collapse_advanced_search v-b-tooltip.hover
:title="$t('advanced_search_settings')"
v-bind:variant="searchFiltered(true) ? 'danger' : 'primary'">
<!-- TODO consider changing this icon to a filter -->
<i class="fas fa-caret-down" v-if="!search.advanced_search_visible"></i>
<i class="fas fa-caret-up" v-if="search.advanced_search_visible"></i>
<i class="fas fa-sliders-h"></i>
</b-button>
</b-input-group-append>
</b-input-group>
@ -799,37 +793,46 @@
</div>
</div>
<div class="row align-content-center">
<div class="col col-md-6" style="margin-top: 2vh">
<b-dropdown id="sortby" :text="sortByLabel" variant="link" toggle-class="text-decoration-none "
class="m-0 p-0">
<div v-for="o in sortOptions" :key="o.id">
<b-dropdown-item
v-on:click="
<div class="row mt-2">
<div class="col-12 col-xl-10 col-lg-10 offset-xl-1 offset-lg-1">
<div style="overflow-x:auto; overflow-y: hidden; white-space: nowrap; ">
<b-dropdown id="sortby" :text="sortByLabel" variant="outline-primary" size="sm"
class="shadow-none" toggle-class="text-decoration-none">
<div v-for="o in sortOptions" :key="o.id">
<b-dropdown-item
v-on:click="
search.sort_order = [o]
refreshData(false)
"
>
<span>{{ o.text }}</span>
</b-dropdown-item>
</div>
</b-dropdown>
</div>
<div class="col col-md-6 text-right" style="margin-top: 2vh">
<span class="text-muted">
{{ $t("Page") }} {{
>
<span>{{ o.text }}</span>
</b-dropdown-item>
</div>
</b-dropdown>
<b-button variant="outline-primary" size="sm" class="shadow-none ml-1"
@click="resetSearch()"><i class="fas fa-file-alt"></i> {{
search.pagination_page
}}/{{ Math.ceil(pagination_count / ui.page_size) }}
<a href="#" @click="resetSearch()"><i class="fas fa-times-circle"></i> {{ $t("Reset") }}</a>
</span>
}}/{{ Math.ceil(pagination_count / ui.page_size) }} {{ $t("Reset") }} <i
class="fas fa-times-circle"></i>
</b-button>
<b-button variant="outline-primary" size="sm" class="shadow-none ml-1"
@click="openRandom()"><i class="fas fa-dice-five"></i> {{ $t("Random") }}
</b-button>
</div>
</div>
</div>
<div v-if="recipes.length > 0">
<div v-if="recipes.length > 0" class="mt-4">
<div class="row">
<div class="col col-md-12">
<div
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 0.8rem">
style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 0.4rem">
<template v-if="!searchFiltered()">
<recipe-card
v-bind:key="`mp_${m.id}`"
@ -1116,7 +1119,7 @@ export default {
},
mounted() {
this.recipes = Array(this.ui.page_size).fill({loading:true})
this.recipes = Array(this.ui.page_size).fill({loading: true})
this.$nextTick(function () {
if (this.$cookies.isKey(UI_COOKIE_NAME)) {
@ -1503,10 +1506,10 @@ export default {
this.genericAPI(this.Models.CUSTOM_FILTER, this.Actions.CREATE, params)
.then((result) => {
this.search.search_filter = result.data
StandardToasts.makeStandardToast(this,StandardToasts.SUCCESS_CREATE)
StandardToasts.makeStandardToast(this, StandardToasts.SUCCESS_CREATE)
})
.catch((err) => {
StandardToasts.makeStandardToast(this,StandardToasts.FAIL_CREATE, err)
StandardToasts.makeStandardToast(this, StandardToasts.FAIL_CREATE, err)
})
},
addField: function (field, count) {
@ -1566,4 +1569,5 @@ export default {
.vue-treeselect__control-arrow-container {
width: 30px;
}
</style>