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

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

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