Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-20 13:49:40 +02:00
Code Issues Releases Activity

feature/mobile-layout (#431)

Browse source 
* 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
Download patch file Download diff file Expand all files Collapse all files

63
frontend/src/components/UI/CardSection.vue
View file

@ -1,24 +1,24 @@
<template>
<div v-if="recipes">
<v-app-bar color="transparent" flat class="mt-n1 rounded" v-if="!disableToolbar">
<v-app-bar color="transparent" flat class="mt-n1 flex-sm-wrap rounded " v-if="!disableToolbar">
<v-icon large left v-if="title">
{{ displayTitleIcon }}
</v-icon>
<v-toolbar-title class="headline"> {{ title }} </v-toolbar-title>
<v-spacer></v-spacer>
<v-btn text @click="navigateRandom">
<v-icon left>
<v-btn :icon="$vuetify.breakpoint.xsOnly" text @click="navigateRandom">
<v-icon :left="!$vuetify.breakpoint.xsOnly">
mdi-dice-multiple
</v-icon>
{{ $t("general.random") }}
{{ $vuetify.breakpoint.xsOnly ? null : $t("general.random") }}
</v-btn>
<v-menu offset-y left v-if="$listeners.sort">
<template v-slot:activator="{ on, attrs }">
<v-btn text v-bind="attrs" v-on="on" :loading="sortLoading">
<v-icon left>
<v-btn text :icon="$vuetify.breakpoint.xsOnly" v-bind="attrs" v-on="on" :loading="sortLoading">
<v-icon :left="!$vuetify.breakpoint.xsOnly">
mdi-sort
</v-icon>
{{ $t("general.sort") }}
{{ $vuetify.breakpoint.xsOnly ? null : $t("general.sort") }}
</v-btn>
</template>
<v-list>
@ -58,14 +58,16 @@
<div v-if="recipes" class="mt-2">
<v-row v-if="!viewScale">
<v-col :sm="6" :md="6" :lg="4" :xl="3" v-for="recipe in recipes.slice(0, cardLimit)" :key="recipe.name">
<RecipeCard
:name="recipe.name"
:description="recipe.description"
:slug="recipe.slug"
:rating="recipe.rating"
:image="recipe.image"
:tags="recipe.tags"
/>
<v-lazy>
<RecipeCard
:name="recipe.name"
:description="recipe.description"
:slug="recipe.slug"
:rating="recipe.rating"
:image="recipe.image"
:tags="recipe.tags"
/>
</v-lazy>
</v-col>
</v-row>
<v-row v-else dense>
@ -78,33 +80,29 @@
v-for="recipe in recipes.slice(0, cardLimit)"
:key="recipe.name"
>
<MobileRecipeCard
:name="recipe.name"
:description="recipe.description"
:slug="recipe.slug"
:rating="recipe.rating"
:image="recipe.image"
:tags="recipe.tags"
/>
<v-lazy>
<MobileRecipeCard
:name="recipe.name"
:description="recipe.description"
:slug="recipe.slug"
:rating="recipe.rating"
:image="recipe.image"
:tags="recipe.tags"
/>
</v-lazy>
</v-col>
</v-row>
</div>
<div v-intersect="bumpList" class="d-flex">
<v-expand-x-transition>
<v-progress-circular
v-if="loading"
class="mx-auto mt-1"
:size="50"
:width="7"
color="primary"
indeterminate
></v-progress-circular>
<SiteLoader v-if="loading" :loading="loading" :size="150" />
</v-expand-x-transition>
</div>
</div>
</template>
<script>
import SiteLoader from "@/components/UI/SiteLoader";
import RecipeCard from "../Recipe/RecipeCard";
import MobileRecipeCard from "@/components/Recipe/MobileRecipeCard";
import { utils } from "@/utils";
@ -114,6 +112,7 @@ export default {
components: {
RecipeCard,
MobileRecipeCard,
SiteLoader,
},
props: {
disableToolbar: {
@ -139,7 +138,7 @@ export default {
data() {
return {
sortLoading: false,
cardLimit: 30,
cardLimit: 50,
loading: false,
EVENTS: {
az: "az",