general UI tweaks

This commit is contained in:
vabene1111
2024-03-02 07:58:58 +01:00
committed by smilerz
parent 8006d7663c
commit 45f8d2b1c8
3 changed files with 42 additions and 48 deletions

View File

@@ -3,10 +3,12 @@
<v-app-bar color="tandoor" flat density="comfortable">
<v-img class="ms-2" src="../../assets/brand_logo.svg"></v-img>
<router-link :to="{name: 'view_search', params: {}}">
<v-img src="../../assets/brand_logo.svg" width="140px" class="ms-2"></v-img>
</router-link>
<global-search-dialog></global-search-dialog>
<v-spacer></v-spacer>
<v-btn density="compact" icon="fas fa-ellipsis-v"></v-btn>
<!-- <v-btn density="compact" icon="fas fa-ellipsis-v"></v-btn>-->
</v-app-bar>
@@ -16,7 +18,7 @@
</v-container>
</v-main>
<v-bottom-navigation>
<v-bottom-navigation grow>
<v-btn value="recent" to="/search">
<v-icon icon="fas fa-book"/>
<span>Recipes</span>

View File

@@ -1,40 +1,37 @@
<template>
<v-dialog width="90%" max-width="800px" activator="parent" v-model="dialog" location="id_dialog_anchor"
location-strategy="connected"
>
<template v-slot:activator="{ props }">
<slot name="activator">
<v-btn v-bind="props" size="small" density="default" variant="outlined"><i class="fas fa-search mr-1"></i> Search</v-btn>
</slot>
</template>
<slot name="activator">
<v-btn @click="dialog = true"><i class="fas fa-search mr-1"></i> Search</v-btn>
</slot>
<template v-slot:default="{ isActive }">
<v-card>
<v-card-text class="pb-0">
<v-text-field
id="id_global_search_input"
v-model="search_query"
autocomplete="off"
clearable
placeholder="Search"
prepend-inner-icon="fas fa-search"
variant="solo"
></v-text-field>
</v-card-text>
<v-divider></v-divider>
<v-card-text>
<v-dialog width="90%" max-width="800px" v-model="dialog" location="id_dialog_anchor"
location-strategy="connected">
<v-card>
<v-card-text class="pb-0">
<v-text-field
id="id_global_search_input"
v-model="search_query"
autocomplete="off"
clearable
placeholder="Search"
prepend-inner-icon="fas fa-search"
variant="solo"
></v-text-field>
</v-card-text>
<v-divider></v-divider>
<v-card-text>
<v-card :variant="cardVariant(index)" v-for="(item, index) in search_results" hover class="mt-1" @click="selected_result = index">
<v-card-title @click="goToSelectedRecipe()">
<v-avatar v-if="item.image" :image="item.image"></v-avatar>
<v-icon :icon="item.icon" v-if="item.icon"></v-icon>
{{ item.name }}
</v-card-title>
</v-card>
</v-card-text>
</v-card>
<v-card :variant="cardVariant(index)" v-for="(item, index) in search_results" hover class="mt-1" @click="selected_result = index">
<v-card-title @click="goToSelectedRecipe()">
<v-avatar v-if="item.image" :image="item.image"></v-avatar>
<v-icon :icon="item.icon" v-if="item.icon"></v-icon>
{{ item.name }}
</v-card-title>
</v-card>
</v-card-text>
</v-card>
</template>
</v-dialog>
</template>
@@ -61,9 +58,9 @@ export default defineComponent({
}
}, 20)
},
search_query: function (newValue){
if (this.selected_result >= this.search_results.length){
this.selected_result = this.search_results.length -1
search_query: function (newValue) {
if (this.selected_result >= this.search_results.length) {
this.selected_result = this.search_results.length - 1
}
},
},

View File

@@ -1,16 +1,13 @@
<template>
<v-container>
<horizontal-recipe-scroller title="New Recipes" :recipes="new_recipes"></horizontal-recipe-scroller>
<horizontal-recipe-scroller title="Top Rated" :recipes="high_rated_recipes"></horizontal-recipe-scroller>
<!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
<horizontal-recipe-scroller title="New Recipes" :recipes="new_recipes"></horizontal-recipe-scroller>
<horizontal-recipe-scroller title="Top Rated" :recipes="high_rated_recipes"></horizontal-recipe-scroller>
</v-container>
<!--TODO ideas for "start page": new recipes, meal plan, "last year/month/cooked long ago", high rated, random keyword -->
</template>
<script lang="ts">
@@ -51,9 +48,7 @@ export default defineComponent({
})
},
methods: {
}
methods: {}
})
</script>