github/mealie
1
0
Fork 0
mirror of https://github.com/hay-kot/mealie.git synced 2025-08-21 05:53:36 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Fix time card layout issue

Browse source
This commit is contained in:
hay-kot 2021-04-21 16:46:00 -08:00
commit efa0d095b9
1 changed files with 29 additions and 75 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,57 +1,26 @@
<template> <template>
<v-card <v-card
color="accent" color="accent"
class="custom-transparent d-flex justify-start align-center text-center " class="custom-transparent d-flex justify-start align-center text-center time-card-flex"
tile tile
:width="`${timeCardWidth}`"
height="55"
v-if="totalTime || prepTime || performTime" v-if="totalTime || prepTime || performTime"
> >
<v-card flat color="rgb(255, 0, 0, 0.0)"> <v-card flat color="rgb(255, 0, 0, 0.0)">
<v-icon large color="white" class="mx-2"> mdi-clock-outline </v-icon> <v-icon large color="white" class="mx-2"> mdi-clock-outline </v-icon>
</v-card> </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 <v-card
v-for="(time, index) in allTimes"
:key="index"
class="d-flex justify-start align-center text-center time-card-flex"
flat flat
color="rgb(255, 0, 0, 0.0)" color="rgb(255, 0, 0, 0.0)"
class="white--text my-2 "
v-if="prepTime"
> >
<v-card-text class="white--text"> <v-card-text class="white--text py-2">
<div> <div>
<strong> {{ $t("recipe.prep-time") }} </strong> <strong> {{ time.name }} </strong>
</div> </div>
<div>{{ prepTime }}</div> <div>{{ time.value }}</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-text>
</v-card> </v-card>
</v-card> </v-card>
@ -65,51 +34,36 @@ export default {
performTime: String, performTime: String,
}, },
computed: { computed: {
timeLength() { allTimes() {
let times = []; return [
let timeArray = [this.totalTime, this.prepTime, this.performTime]; this.validateTotalTime,
timeArray.forEach(element => { this.validatePrepTime,
if (element) { this.validatePerformTime,
times.push(element); ];
}
});
return times.length;
}, },
iconColumn() { validateTotalTime() {
switch (this.timeLength) { return this.prepTime
case 0: ? { name: this.$t("recipe.prep-time"), value: this.prepTime }
return null; : null;
case 1:
return 4;
case 2:
return 3;
case 3:
return 2;
default:
return 1;
}
}, },
timeCardWidth() { validatePrepTime() {
let timeArray = [this.totalTime, this.prepTime, this.performTime]; return this.prepTime
let width = 80; ? { name: this.$t("recipe.prep-time"), value: this.prepTime }
timeArray.forEach(element => { : null;
if (element) { },
width += 95; validatePerformTime() {
} return this.prepTime
}); ? { name: this.$t("recipe.perform-time"), value: this.performTime }
: null;
if (this.$vuetify.breakpoint.name === "xs") {
return "100%";
}
return `${width}px`;
}, },
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.time-card-flex {
width: fit-content;
}
.custom-transparent { .custom-transparent {
opacity: 0.7; opacity: 0.7;
} }