mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2026-01-01 12:18:45 -05:00
general UI tweaks
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user