github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-22 14:33:33 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 20

adjust mobile view on times

Browse source
This commit is contained in:
hay-kot 2021-02-19 18:14:26 -09:00
commit 81c24a641a
1 changed files with 52 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

96
frontend/src/components/Recipe/RecipeTimeCard.vue
View file

@ -1,50 +1,58 @@
<template> <template>
<v-card <v-card
color="accent" color="accent"
class="custom-transparent" class="custom-transparent d-flex justify-start align-center text-center "
tile tile
:width="`${timeCardWidth}`" :width="`${timeCardWidth}`"
v-if="totalTime || prepTime || performTime"
> >
<v-card-text <v-card flat color="rgb(255, 0, 0, 0.0)">
class="text-caption white--text" <v-icon large color="white" class="mx-2"> mdi-clock-outline </v-icon>
v-if="totalTime || prepTime || performTime" </v-card>
<v-divider vertical color="white" class="py-1" v-if="totalTime">
</v-divider>
<v-card flat color="rgb(255, 0, 0, 0.0)" class=" my-2 " v-if="totalTime">
<v-card-text class="white--text">
<div>
<strong> {{ $t("recipe.total-time") }} </strong>
</div>
<div>{{ totalTime }}</div>
</v-card-text>
</v-card>
<v-divider vertical color="white" class="py-1" v-if="prepTime"> </v-divider>
<v-card
flat
color="rgb(255, 0, 0, 0.0)"
class="white--text my-2 "
v-if="prepTime"
> >
<v-row align="center" dense> <v-card-text class="white--text">
<v-col :cols="iconColumn"> <div>
<v-icon large color="white"> mdi-clock-outline </v-icon> <strong> {{ $t("recipe.prep-time") }} </strong>
</v-col> </div>
<v-divider <div>{{ prepTime }}</div>
vertical </v-card-text>
color="white" </v-card>
class="my-1"
v-if="totalTime" <v-divider vertical color="white" class="my-1" v-if="performTime">
></v-divider> </v-divider>
<v-col v-if="totalTime">
<div><strong> {{ $t("recipe.total-time") }} </strong></div> <v-card
<div>{{ totalTime }}</div> flat
</v-col> color="rgb(255, 0, 0, 0.0)"
<v-divider class="white--text py-2 "
vertical v-if="performTime"
color="white" >
class="my-1" <v-card-text class="white--text">
v-if="prepTime" <div>
></v-divider> <strong> {{ $t("recipe.perform-time") }} </strong>
<v-col v-if="prepTime"> </div>
<div><strong> {{ $t("recipe.prep-time") }} </strong></div> <div>{{ performTime }}</div>
<div>{{ prepTime }}</div> </v-card-text>
</v-col> </v-card>
<v-divider
vertical
color="white"
class="my-1"
v-if="performTime"
></v-divider>
<v-col v-if="performTime">
<div><strong> {{ $t("recipe.perform-time") }} </strong></div>
<div>{{ performTime }}</div>
</v-col>
</v-row>
</v-card-text>
</v-card> </v-card>
</template> </template>
@ -59,7 +67,7 @@ export default {
timeLength() { timeLength() {
let times = []; let times = [];
let timeArray = [this.totalTime, this.prepTime, this.performTime]; let timeArray = [this.totalTime, this.prepTime, this.performTime];
timeArray.forEach((element) => { timeArray.forEach(element => {
if (element) { if (element) {
times.push(element); times.push(element);
} }
@ -83,10 +91,10 @@ export default {
}, },
timeCardWidth() { timeCardWidth() {
let timeArray = [this.totalTime, this.prepTime, this.performTime]; let timeArray = [this.totalTime, this.prepTime, this.performTime];
let width = 120; let width = 80;
timeArray.forEach((element) => { timeArray.forEach(element => {
if (element) { if (element) {
width += 70; width += 95;
} }
}); });