github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 14:33:33 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 20

improve mobile search

Browse source
This commit is contained in:
hay-kot 2021-03-30 14:54:39 -08:00
commit c2fcc2695b
2 changed files with 11 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
frontend/src/App.vue
View file

@ -1,13 +1,13 @@
<template> <template>
<v-app> <v-app>
<v-app-bar clipped-left dense app color="primary" dark class="d-print-none"> <v-app-bar clipped-left dense app color="primary" dark class="d-print-none">
<router-link to="/"> <router-link v-if="!(isMobile && search)" to="/">
<v-btn icon> <v-btn icon>
<v-icon size="40"> mdi-silverware-variant </v-icon> <v-icon size="40"> mdi-silverware-variant </v-icon>
</v-btn> </v-btn>
</router-link> </router-link>
<div btn class="pl-2"> <div v-if="!isMobile" btn class="pl-2">
<v-toolbar-title style="cursor: pointer" @click="$router.push('/')" <v-toolbar-title style="cursor: pointer" @click="$router.push('/')"
>Mealie >Mealie
</v-toolbar-title> </v-toolbar-title>
@ -20,6 +20,7 @@
v-if="search" v-if="search"
:show-results="true" :show-results="true"
@selected="navigateFromSearch" @selected="navigateFromSearch"
:max-width="isMobile ? '100%' : '450px'"
/> />
</v-expand-x-transition> </v-expand-x-transition>
<v-btn icon @click="search = !search"> <v-btn icon @click="search = !search">
@ -64,6 +65,12 @@ export default {
this.search = false; this.search = false;
}, },
}, },
computed: {
isMobile() {
return this.$vuetify.breakpoint.name === "xs";
},
},
created() { created() {
window.addEventListener("keyup", e => { window.addEventListener("keyup", e => {
if (e.key == "/" && !document.activeElement.id.startsWith("input")) { if (e.key == "/" && !document.activeElement.id.startsWith("input")) {

4
frontend/src/components/UI/Search/SearchBar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<v-menu v-model="menuModel" offset-y readonly :max-width="maxWidth"> <v-menu v-model="menuModel" offset-y readonly :width="maxWidth">
<template #activator="{ attrs }"> <template #activator="{ attrs }">
<v-text-field <v-text-field
class="mt-6" class="mt-6"
@ -16,7 +16,7 @@
> >
</v-text-field> </v-text-field>
</template> </template>
<v-card v-if="showResults" max-height="500" :max-width="maxWidth"> <v-card v-if="showResults" max-height="500" :max-width="maxWidth">
<v-card-text class="py-1">Results</v-card-text> <v-card-text class="py-1">Results</v-card-text>
<v-divider></v-divider> <v-divider></v-divider>
<v-list scrollable> <v-list scrollable>