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:
parent
8f8127a5fc
commit
822663905d
33 changed files with 273 additions and 119 deletions
|
@ -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() {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue