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

fix: update recipe time row direction on small screens (#5107)

Browse Source
This commit is contained in:
Kuchenpirat
2025-02-27 14:48:29 +01:00
committed by GitHub
parent 4843a9a74a
commit 3d1b76bcad
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,9 +15,9 @@
<v-divider class="my-2" /> <v-divider class="my-2" />
<SafeMarkdown :source="recipe.description" /> <SafeMarkdown :source="recipe.description" />
<v-divider v-if="recipe.description" /> <v-divider v-if="recipe.description" />
<v-container class="d-flex flex-row flex-wrap justify-center align-center"> <v-container class="d-flex flex-row flex-wrap justify-center">
<div class="mx-6"> <div class="mx-6">
<v-row no-gutters class="mb-1"> <v-row no-gutters>
<v-col v-if="recipe.recipeYieldQuantity || recipe.recipeYield" cols="12" class="d-flex flex-wrap justify-center"> <v-col v-if="recipe.recipeYieldQuantity || recipe.recipeYield" cols="12" class="d-flex flex-wrap justify-center">
<RecipeYield <RecipeYield
:yield-quantity="recipe.recipeYieldQuantity" :yield-quantity="recipe.recipeYieldQuantity"

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

@@ -12,15 +12,19 @@
<v-divider v-if="validateTotalTime && (validatePrepTime || validatePerformTime)" class="my-2" /> <v-divider v-if="validateTotalTime && (validatePrepTime || validatePerformTime)" class="my-2" />
<!-- Prep Time & Perform Time --> <!-- Prep Time & Perform Time -->
<div v-if="validatePrepTime || validatePerformTime" class="time-card-flex mx-auto"> <div v-if="validatePrepTime || validatePerformTime" class="time-card-flex mx-auto">
<v-row no-gutters class="d-flex justify-center align-center" style="width: 100%;" :style="fontSize"> <v-row
<div v-if="validatePrepTime" class="d-flex flex-no-wrap"> no-gutters
class="d-flex justify-center align-center" :class="{'flex-column': $vuetify.breakpoint.smAndDown}"
style="width: 100%;" :style="fontSize"
>
<div v-if="validatePrepTime" class="d-flex flex-no-wrap my-1">
<v-icon :large="!small" :dense="small" left color="primary"> <v-icon :large="!small" :dense="small" left color="primary">
{{ $globals.icons.knfife }} {{ $globals.icons.knfife }}
</v-icon> </v-icon>
<p class="my-0"><span class="font-weight-bold">{{ validatePrepTime.name }}</span><br>{{ validatePrepTime.value }}</p> <p class="my-0"><span class="font-weight-bold">{{ validatePrepTime.name }}</span><br>{{ validatePrepTime.value }}</p>
</div> </div>
<v-divider v-if="validatePrepTime && validatePerformTime" vertical class="mx-4" /> <v-divider v-if="validatePrepTime && validatePerformTime" vertical class="mx-4" />
<div v-if="validatePerformTime" class="d-flex flex-no-wrap"> <div v-if="validatePerformTime" class="d-flex flex-no-wrap my-1">
<v-icon :large="!small" :dense="small" left color="primary"> <v-icon :large="!small" :dense="small" left color="primary">
{{ $globals.icons.potSteam }} {{ $globals.icons.potSteam }}
</v-icon> </v-icon>