1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-03 12:35:22 +02:00

feature/mobile-layout (#431)

* lazy load cards

* shopping list recipe search bug

* admin layout fluid

* site loader

* username support

* mobile tabs

* set username at signup

* update user tests

* patch bug on shopping list

* public mealplan links

* support link (I'm a monster)

* icon only on mobile

* padding

Co-authored-by: hay-kot <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-05-25 21:01:22 -07:00 committed by GitHub
parent 8f8127a5fc
commit 822663905d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
33 changed files with 273 additions and 119 deletions

View file

@ -43,25 +43,31 @@
</div>
<router-link to="/search"> Advanced Search </router-link>
</v-card-actions>
<MobileRecipeCard
v-for="(recipe, index) in results.slice(0, 10)"
:tabindex="index"
:key="index"
class="ma-1 arrow-nav"
:name="recipe.name"
:description="recipe.description"
:slug="recipe.slug"
:rating="recipe.rating"
:image="recipe.image"
:route="true"
v-on="$listeners.selected ? { selected: () => grabRecipe(recipe) } : {}"
/>
<v-card-actions v-if="loading">
<SiteLoader :loading="loading" />
</v-card-actions>
<div v-else>
<MobileRecipeCard
v-for="(recipe, index) in results.slice(0, 10)"
:tabindex="index"
:key="index"
class="ma-1 arrow-nav"
:name="recipe.name"
:description="recipe.description"
:slug="recipe.slug"
:rating="recipe.rating"
:image="recipe.image"
:route="true"
v-on="$listeners.selected ? { selected: () => grabRecipe(recipe) } : {}"
/>
</div>
</v-card>
</v-dialog>
</div>
</template>
<script>
import SiteLoader from "@/components/UI/SiteLoader";
const SELECTED_EVENT = "selected";
import FuseSearchBar from "@/components/UI/Search/FuseSearchBar";
import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
@ -69,9 +75,11 @@ export default {
components: {
FuseSearchBar,
MobileRecipeCard,
SiteLoader,
},
data() {
return {
loading: false,
selectedIndex: -1,
dialog: false,
searchString: "",
@ -82,14 +90,17 @@ export default {
$route() {
this.dialog = false;
},
dialog(val) {
async dialog(val) {
if (!val) {
this.resetSelected();
} else if (this.allItems.length <= 0) {
this.loading = true;
await this.$store.dispatch("requestAllRecipes");
this.loading = false;
}
},
},
mounted() {
this.$store.dispatch("requestAllRecipes");
document.addEventListener("keydown", this.onUpDown);
},
beforeDestroy() {