mirror of
https://github.com/hay-kot/mealie.git
synced 2025-07-31 12:10:26 -07:00
d5a340bde1
* Dummy Commit * consolidate sidebar and app bar * fix image error * consolidate sidebar * new icon for user menu * fixes #329 * fix double click on mobile * swap to computed properties * fix open/close bug * rewrite search for mobile * fix ingredient checkbox * cleanup console.logs * set default lang + bump version * draft changelog * reword * update env variables Co-authored-by: hay-kot <hay-kot@pm.me>
106 lines
No EOL
2.4 KiB
Vue
106 lines
No EOL
2.4 KiB
Vue
<template>
|
|
<div class="text-center ">
|
|
<v-dialog
|
|
v-model="dialog"
|
|
width="600px"
|
|
height="0"
|
|
:fullscreen="isMobile"
|
|
content-class="top-dialog"
|
|
>
|
|
<v-card>
|
|
<v-app-bar dark color="primary lighten-1" rounded="0">
|
|
<SearchBar
|
|
ref="mealSearchBar"
|
|
@results="updateResults"
|
|
@selected="emitSelect"
|
|
:show-results="!isMobile"
|
|
max-width="568"
|
|
:dense="false"
|
|
:nav-on-click="false"
|
|
:autofocus="true"
|
|
/>
|
|
<v-btn icon @click="dialog = false" class="mt-1">
|
|
<v-icon> mdi-close </v-icon>
|
|
</v-btn>
|
|
</v-app-bar>
|
|
<v-card-text v-if="isMobile">
|
|
<div v-for="recipe in searchResults.slice(0, 7)" :key="recipe.name">
|
|
<MobileRecipeCard
|
|
class="ma-1 px-0"
|
|
:name="recipe.item.name"
|
|
:description="recipe.item.description"
|
|
:slug="recipe.item.slug"
|
|
:rating="recipe.item.rating"
|
|
:image="recipe.item.image"
|
|
:route="true"
|
|
@selected="dialog = false"
|
|
/>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import SearchBar from "./SearchBar";
|
|
import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
|
|
export default {
|
|
components: {
|
|
SearchBar,
|
|
MobileRecipeCard,
|
|
},
|
|
data() {
|
|
return {
|
|
searchResults: [],
|
|
dialog: false,
|
|
};
|
|
},
|
|
computed: {
|
|
isMobile() {
|
|
return this.$vuetify.breakpoint.name === "xs";
|
|
},
|
|
},
|
|
watch: {
|
|
"$route.hash"(newHash, oldHash) {
|
|
if (newHash === "#mobile-search") {
|
|
this.dialog = true;
|
|
} else if (oldHash === "#mobile-search") {
|
|
this.dialog = false;
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
updateResults(results) {
|
|
this.searchResults = results;
|
|
},
|
|
emitSelect(slug, name) {
|
|
this.$emit("select", name, slug);
|
|
this.dialog = false;
|
|
},
|
|
open() {
|
|
this.dialog = true;
|
|
this.$refs.mealSearchBar.resetSearch();
|
|
this.$router.push("#search");
|
|
},
|
|
toggleDialog(open) {
|
|
if (open) {
|
|
this.$router.push("#search");
|
|
} else {
|
|
this.$router.back(); // 😎 back button click
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scope>
|
|
.mobile-dialog {
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.top-dialog {
|
|
align-self: flex-start;
|
|
}
|
|
</style> |