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

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

Browse Source
This commit is contained in:
Kuchenpirat 2025-02-27 14:48:29 +01:00 committed by GitHub
parent 4843a9a74a
commit 3d1b76bcad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 5 deletions
frontend/components/Domain/Recipe
RecipePage/RecipePageParts
RecipePageInfoCard.vue
RecipeTimeCard.vue

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

@ -15,9 +15,9 @@
<v-divider class="my-2" />
<SafeMarkdown :source="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">
<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">
<RecipeYield
:yield-quantity="recipe.recipeYieldQuantity"

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

@ -12,15 +12,19 @@
<v-divider v-if="validateTotalTime && (validatePrepTime || validatePerformTime)" class="my-2" />
<!-- Prep Time & Perform Time -->
<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">
<div v-if="validatePrepTime" class="d-flex flex-no-wrap">
<v-row
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">
{{ $globals.icons.knfife }}
</v-icon>
<p class="my-0"><span class="font-weight-bold">{{ validatePrepTime.name }}</span><br>{{ validatePrepTime.value }}</p>
</div>
<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">
{{ $globals.icons.potSteam }}
</v-icon>