general UI tweaks

vue3/src/apps/tandoor/Tandoor.vue

@@ -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>

vue3/src/components/inputs/GlobalSearchDialog.vue

@@ -1,40 +1,37 @@
 <template>
-    <v-dialog width="90%" max-width="800px" activator="parent" v-model="dialog" location="id_dialog_anchor"
+    <slot name="activator">
-              location-strategy="connected"
+        <v-btn @click="dialog = true"><i class="fas fa-search mr-1"></i> Search</v-btn>
-    >
+    </slot>
-        <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>
 
-        <template v-slot:default="{ isActive }">
+    <v-dialog width="90%" max-width="800px" v-model="dialog" location="id_dialog_anchor"
-            <v-card>
+              location-strategy="connected">
-                <v-card-text class="pb-0">
+
-                    <v-text-field
+        <v-card>
-                        id="id_global_search_input"
+            <v-card-text class="pb-0">
-                        v-model="search_query"
+                <v-text-field
-                        autocomplete="off"
+                    id="id_global_search_input"
-                        clearable
+                    v-model="search_query"
-                        placeholder="Search"
+                    autocomplete="off"
-                        prepend-inner-icon="fas fa-search"
+                    clearable
-                        variant="solo"
+                    placeholder="Search"
-                    ></v-text-field>
+                    prepend-inner-icon="fas fa-search"
-                </v-card-text>
+                    variant="solo"
-                <v-divider></v-divider>
+                ></v-text-field>
-                <v-card-text>
+            </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){
+        search_query: function (newValue) {
-            if (this.selected_result >= this.search_results.length){
+            if (this.selected_result >= this.search_results.length) {
-                this.selected_result = this.search_results.length -1
+                this.selected_result = this.search_results.length - 1
             }
         },
     },

vue3/src/pages/RecipeSearchPage.vue

@@ -1,16 +1,13 @@
 <template>
     <v-container>
 
-
+        <!--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="New Recipes" :recipes="new_recipes"></horizontal-recipe-scroller>
-       <horizontal-recipe-scroller title="Top Rated" :recipes="high_rated_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>