Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-10-28 00:34:47 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: Incorrect Usage of $vuetify.display (#6066)

Browse Source
This commit is contained in:
Michael Genson
2025-09-03 03:36:42 -05:00
committed by GitHub
parent 89c1e007cb
commit 608dbaa4c1
8 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/components/Domain/Recipe/RecipeCardSection.vue
View File

@@ -199,7 +199,7 @@ const emit = defineEmits<{
appendRecipes: [recipes: Recipe[]]; appendRecipes: [recipes: Recipe[]];
}>(); }>();
const { $vuetify } = useNuxtApp(); const display = useDisplay();
const preferences = useUserSortPreferences(); const preferences = useUserSortPreferences();
const EVENTS = { const EVENTS = {
@@ -215,7 +215,7 @@ const $auth = useMealieAuth();
const { $globals } = useNuxtApp(); const { $globals } = useNuxtApp();
const { isOwnGroup } = useLoggedInState(); const { isOwnGroup } = useLoggedInState();
const useMobileCards = computed(() => { const useMobileCards = computed(() => {
return $vuetify.display.smAndDown.value || preferences.value.useMobileCards; return display.smAndDown.value || preferences.value.useMobileCards;
}); });
const displayTitleIcon = computed(() => { const displayTitleIcon = computed(() => {

10
frontend/components/Domain/Recipe/RecipePage/RecipePage.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown.value }"> <v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown }">
<v-card :flat="$vuetify.display.smAndDown.value" class="d-print-none"> <v-card :flat="$vuetify.display.smAndDown" class="d-print-none">
<RecipePageHeader <RecipePageHeader
:recipe="recipe" :recipe="recipe"
:recipe-scale="scale" :recipe-scale="scale"
@@ -107,7 +107,7 @@
<v-divider /> <v-divider />
</v-col> </v-col>
<v-col class="overflow-y-auto" <v-col class="overflow-y-auto"
:class="$vuetify.display.smAndDown.value ? 'py-2': 'py-6'" :class="$vuetify.display.smAndDown ? 'py-2': 'py-6'"
style="height: 100%" cols="12" sm="7"> style="height: 100%" cols="12" sm="7">
<h2 class="text-h5 px-4 font-weight-medium opacity-80"> <h2 class="text-h5 px-4 font-weight-medium opacity-80">
{{ $t('recipe.instructions') }} {{ $t('recipe.instructions') }}
@@ -188,7 +188,7 @@ import { useNavigationWarning } from "~/composables/use-navigation-warning";
const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true }); const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
const { $vuetify } = useNuxtApp(); const display = useDisplay();
const i18n = useI18n(); const i18n = useI18n();
const $auth = useMealieAuth(); const $auth = useMealieAuth();
const route = useRoute(); const route = useRoute();
@@ -278,7 +278,7 @@ async function deleteRecipe() {
*/ */
const landscape = computed(() => { const landscape = computed(() => {
const preferLandscape = recipe.value.settings?.landscapeView; const preferLandscape = recipe.value.settings?.landscapeView;
const smallScreen = !$vuetify.display.smAndUp.value; const smallScreen = !display.smAndUp.value;
if (preferLandscape) { if (preferLandscape) {
return true; return true;

4
frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCardImage.vue
View File

@@ -27,7 +27,7 @@ const props = withDefaults(defineProps<Props>(), {
maxWidth: undefined, maxWidth: undefined,
}); });
const { $vuetify } = useNuxtApp(); const display = useDisplay();
const { recipeImage } = useStaticRoutes(); const { recipeImage } = useStaticRoutes();
const { imageKey } = usePageState(props.recipe.slug); const { imageKey } = usePageState(props.recipe.slug);
const { user } = usePageUser(); const { user } = usePageUser();
@@ -42,7 +42,7 @@ if (user) {
const hideImage = ref(false); const hideImage = ref(false);
const imageHeight = computed(() => { const imageHeight = computed(() => {
return $vuetify.display.xs.value ? "200" : "400"; return display.xs.value ? "200" : "400";
}); });
const recipeImageUrl = computed(() => { const recipeImageUrl = computed(() => {

5
frontend/components/Domain/Recipe/RecipeTimelineItem.vue
View File

@@ -117,7 +117,8 @@ defineEmits<{
delete: []; delete: [];
}>(); }>();
const { $vuetify, $globals } = useNuxtApp(); const { $globals } = useNuxtApp();
const display = useDisplay();
const { recipeTimelineEventImage } = useStaticRoutes(); const { recipeTimelineEventImage } = useStaticRoutes();
const { eventTypeOptions } = useTimelineEventTypes(); const { eventTypeOptions } = useTimelineEventTypes();
@@ -127,7 +128,7 @@ const route = useRoute();
const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || ""); const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || "");
const useMobileFormat = computed(() => { const useMobileFormat = computed(() => {
return $vuetify.display.smAndDown.value; return display.smAndDown.value;
}); });
const attrs = computed(() => { const attrs = computed(() => {

5
frontend/components/Layout/DefaultLayout.vue
View File

@@ -128,7 +128,8 @@ import type { HouseholdSummary } from "~/lib/api/types/household";
export default defineNuxtComponent({ export default defineNuxtComponent({
setup() { setup() {
const i18n = useI18n(); const i18n = useI18n();
const { $globals, $vuetify } = useNuxtApp(); const { $globals } = useNuxtApp();
const display = useDisplay();
const $auth = useMealieAuth(); const $auth = useMealieAuth();
const { isOwnGroup } = useLoggedInState(); const { isOwnGroup } = useLoggedInState();
@@ -196,7 +197,7 @@ export default defineNuxtComponent({
const sidebar = ref<boolean>(false); const sidebar = ref<boolean>(false);
onMounted(() => { onMounted(() => {
sidebar.value = $vuetify.display.mdAndUp.value; sidebar.value = display.mdAndUp.value;
}); });
function cookbookAsLink(cookbook: ReadCookBook): SideBarLink { function cookbookAsLink(cookbook: ReadCookBook): SideBarLink {

4
frontend/components/global/BaseStatCard.vue
View File

@@ -90,13 +90,13 @@ export default defineNuxtComponent({
}, },
}, },
setup() { setup() {
const { $vuetify } = useNuxtApp(); const display = useDisplay();
const hasHeading = computed(() => false); const hasHeading = computed(() => false);
const hasAltHeading = computed(() => false); const hasAltHeading = computed(() => false);
const classes = computed(() => { const classes = computed(() => {
return { return {
"v-card--material--has-heading": hasHeading, "v-card--material--has-heading": hasHeading,
"mt-3": $vuetify.display.name.value === "xs" || $vuetify.display.name.value === "sm", "mt-3": display.name.value === "xs" || display.name.value === "sm",
}; };
}); });

5
frontend/layouts/admin.vue
View File

@@ -38,11 +38,12 @@ import TheSnackbar from "~/components/Layout/LayoutParts/TheSnackbar.vue";
import type { SidebarLinks } from "~/types/application-types"; import type { SidebarLinks } from "~/types/application-types";
const i18n = useI18n(); const i18n = useI18n();
const { $globals, $vuetify } = useNuxtApp(); const display = useDisplay();
const { $globals } = useNuxtApp();
const sidebar = ref<boolean>(false); const sidebar = ref<boolean>(false);
onMounted(() => { onMounted(() => {
sidebar.value = !$vuetify.display.md.value; sidebar.value = !display.md.value;
}); });
const topLinks: SidebarLinks = [ const topLinks: SidebarLinks = [

4
frontend/pages/g/[groupSlug]/recipes/finder/index.vue
View File

@@ -428,7 +428,7 @@ interface RecipeSuggestions {
export default defineNuxtComponent({ export default defineNuxtComponent({
components: { QueryFilterBuilder, RecipeSuggestion, SearchFilter }, components: { QueryFilterBuilder, RecipeSuggestion, SearchFilter },
setup() { setup() {
const { $vuetify } = useNuxtApp(); const display = useDisplay();
const i18n = useI18n(); const i18n = useI18n();
const $auth = useMealieAuth(); const $auth = useMealieAuth();
const route = useRoute(); const route = useRoute();
@@ -437,7 +437,7 @@ export default defineNuxtComponent({
title: i18n.t("recipe-finder.recipe-finder"), title: i18n.t("recipe-finder.recipe-finder"),
}); });
const useMobile = computed(() => $vuetify.display.smAndDown.value); const useMobile = computed(() => display.smAndDown.value);
const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || ""); const groupSlug = computed(() => route.params.groupSlug as string || $auth.user.value?.groupSlug || "");
const { isOwnGroup } = useLoggedInState(); const { isOwnGroup } = useLoggedInState();