Mirrors/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-10-26 15:54:20 -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[]];
}>();
const { $vuetify } = useNuxtApp();
const display = useDisplay();
const preferences = useUserSortPreferences();
const EVENTS = {
@@ -215,7 +215,7 @@ const $auth = useMealieAuth();
const { $globals } = useNuxtApp();
const { isOwnGroup } = useLoggedInState();
const useMobileCards = computed(() => {
return $vuetify.display.smAndDown.value || preferences.value.useMobileCards;
return display.smAndDown.value || preferences.value.useMobileCards;
});
const displayTitleIcon = computed(() => {

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

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

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

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

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

@@ -117,7 +117,8 @@ defineEmits<{
delete: [];
}>();
const { $vuetify, $globals } = useNuxtApp();
const { $globals } = useNuxtApp();
const display = useDisplay();
const { recipeTimelineEventImage } = useStaticRoutes();
const { eventTypeOptions } = useTimelineEventTypes();
@@ -127,7 +128,7 @@ const route = useRoute();
const groupSlug = computed(() => (route.params.groupSlug as string) || currentUser?.value?.groupSlug || "");
const useMobileFormat = computed(() => {
return $vuetify.display.smAndDown.value;
return display.smAndDown.value;
});
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({
setup() {
const i18n = useI18n();
const { $globals, $vuetify } = useNuxtApp();
const { $globals } = useNuxtApp();
const display = useDisplay();
const $auth = useMealieAuth();
const { isOwnGroup } = useLoggedInState();
@@ -196,7 +197,7 @@ export default defineNuxtComponent({
const sidebar = ref<boolean>(false);
onMounted(() => {
sidebar.value = $vuetify.display.mdAndUp.value;
sidebar.value = display.mdAndUp.value;
});
function cookbookAsLink(cookbook: ReadCookBook): SideBarLink {

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

@@ -90,13 +90,13 @@ export default defineNuxtComponent({
},
},
setup() {
const { $vuetify } = useNuxtApp();
const display = useDisplay();
const hasHeading = computed(() => false);
const hasAltHeading = computed(() => false);
const classes = computed(() => {
return {
"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";
const i18n = useI18n();
const { $globals, $vuetify } = useNuxtApp();
const display = useDisplay();
const { $globals } = useNuxtApp();
const sidebar = ref<boolean>(false);
onMounted(() => {
sidebar.value = !$vuetify.display.md.value;
sidebar.value = !display.md.value;
});
const topLinks: SidebarLinks = [

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

@@ -428,7 +428,7 @@ interface RecipeSuggestions {
export default defineNuxtComponent({
components: { QueryFilterBuilder, RecipeSuggestion, SearchFilter },
setup() {
const { $vuetify } = useNuxtApp();
const display = useDisplay();
const i18n = useI18n();
const $auth = useMealieAuth();
const route = useRoute();
@@ -437,7 +437,7 @@ export default defineNuxtComponent({
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 { isOwnGroup } = useLoggedInState();