mirror of
https://github.com/TandoorRecipes/recipes.git
synced 2025-12-30 21:49:50 -05:00
improved recipe card
This commit is contained in:
vabene1111
@@ -1,5 +1,10 @@
|
||||
{% load django_vite %}
|
||||
|
||||
{% load theming_tags %}
|
||||
{% load custom_tags %}
|
||||
|
||||
{% theme_values request as theme_values %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
@@ -8,7 +13,21 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, minimal-ui, shrink-to-fit=no">
|
||||
<meta name="robots" content="noindex,nofollow"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
|
||||
|
||||
<link rel="icon" href="{{ theme_values.logo_color_svg }}">
|
||||
<link rel="icon" href="{{ theme_values.logo_color_32 }}" sizes="32x32">
|
||||
<link rel="icon" href="{{ theme_values.logo_color_128 }}" sizes="128x128">
|
||||
<link rel="icon" href="{{ theme_values.logo_color_192 }}" sizes="192x192">
|
||||
<link rel="apple-touch-icon" href="{{ theme_values.logo_color_180 }}" sizes="180x180">
|
||||
|
||||
<meta name="msapplication-TileColor" content="{{ theme_values.nav_bg_color }}">
|
||||
<meta name="msapplication-TileImage" content="{{ theme_values.logo_color_144 }}">
|
||||
|
||||
<meta name="theme-color" content="{{ theme_values.nav_bg_color }}">
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
@@ -57,7 +57,7 @@ const props = defineProps(
|
||||
const {title, recipes} = toRefs(props)
|
||||
|
||||
let numberOfCols = computed(() => {
|
||||
return mdAndUp.value ? 5 : 2
|
||||
return mdAndUp.value ? 4 : 2
|
||||
})
|
||||
|
||||
type CustomWindow = {
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
<template>
|
||||
|
||||
<v-chip color="info" size="x-small" v-for="k in keywords"> {{ k?.label }}</v-chip>
|
||||
<template v-if="keywords">
|
||||
<v-chip color="info" size="x-small" v-for="k in keywords"> {{ k.label }}</v-chip>
|
||||
</template>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
||||
import {Keyword} from "@/openapi";
|
||||
import {Keyword, KeywordLabel} from "@/openapi";
|
||||
import {PropType} from "vue";
|
||||
|
||||
export default {
|
||||
name: 'KeywordsBar',
|
||||
mixins: [],
|
||||
props: {
|
||||
keywords: Array as PropType<Array<Keyword>>,
|
||||
keywords: Array as PropType<Array<Keyword> | Array<KeywordLabel> | undefined>,
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
|
||||
@@ -7,49 +7,52 @@
|
||||
no-click-animation
|
||||
:open-on-hover="recipe.description != null && recipe.description != ''"
|
||||
contained
|
||||
opacity="2%"
|
||||
>
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-img v-if="recipe.image != null" v-bind="props"
|
||||
cover
|
||||
<v-img cover
|
||||
height="60%"
|
||||
:src="recipe.image"
|
||||
></v-img>
|
||||
<v-img v-else src="../../assets/recipe_no_image.svg" cover v-bind="props"
|
||||
height="60%"></v-img>
|
||||
:src="recipeImageUrl"
|
||||
>
|
||||
<v-chip size="x-small" prepend-icon="fa fa-clock" label color="light" variant="elevated"
|
||||
class="float-start ms-1 mt-1">
|
||||
{{ recipe.workingTime }}
|
||||
</v-chip>
|
||||
<v-chip size="x-small" prepend-icon="fa fa-pause" label color="secondary" variant="elevated"
|
||||
class="float-start ms-1 mt-1">
|
||||
{{ recipe.waitingTime }}
|
||||
</v-chip>
|
||||
</v-img>
|
||||
<v-divider class="p-0" v-if="recipe.image == null"></v-divider>
|
||||
|
||||
</template>
|
||||
<div v-if="recipe.description != null && recipe.description != ''">
|
||||
{{recipe.description}}
|
||||
{{ recipe.description }}
|
||||
</div>
|
||||
</v-tooltip>
|
||||
|
||||
<v-card-item>
|
||||
<v-card-title>{{ recipe.name }}</v-card-title>
|
||||
<v-card-title>
|
||||
{{ recipe.name }}
|
||||
<recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>
|
||||
|
||||
</v-card-title>
|
||||
|
||||
|
||||
<v-card-subtitle v-if="show_keywords">
|
||||
<KeywordsComponent :keywords="recipe.keywords"></KeywordsComponent>
|
||||
</v-card-subtitle>
|
||||
<v-rating
|
||||
v-if="recipe.rating != null"
|
||||
v-model="recipe.rating"
|
||||
color="amber"
|
||||
density="comfortable"
|
||||
half-increments
|
||||
readonly
|
||||
size="x-small"
|
||||
></v-rating>
|
||||
|
||||
</v-card-item>
|
||||
|
||||
<v-card-text v-if="show_description">
|
||||
<v-row align="center" class="mx-0" v-if="recipe.rating">
|
||||
<v-rating
|
||||
:model-value="recipe.rating"
|
||||
color="amber"
|
||||
density="compact"
|
||||
half-increments
|
||||
readonly
|
||||
size="small"
|
||||
></v-rating>
|
||||
|
||||
<div class="text-grey ">
|
||||
{{ recipe.rating }}
|
||||
</div>
|
||||
</v-row>
|
||||
|
||||
</v-card-text>
|
||||
|
||||
</v-card>
|
||||
</template>
|
||||
<template v-else>
|
||||
@@ -71,16 +74,23 @@
|
||||
import {defineComponent, PropType} from 'vue'
|
||||
import KeywordsComponent from "@/components/display/KeywordsBar.vue";
|
||||
import {Recipe, RecipeOverview} from "@/openapi";
|
||||
import recipeNoImage from '@/assets/recipe_no_image.svg';
|
||||
import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "RecipeCard",
|
||||
components: {KeywordsComponent},
|
||||
components: {RecipeContextMenu, KeywordsComponent},
|
||||
props: {
|
||||
recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
|
||||
loading: {type: Boolean, required: false},
|
||||
show_keywords: {type: Boolean, required: false},
|
||||
show_description: {type: Boolean, required: false},
|
||||
height: {type: String, required: false, default: '25vh'},
|
||||
},
|
||||
computed: {
|
||||
recipeImageUrl: function () {
|
||||
return (this.recipe.image != null) ? this.recipe.image : recipeNoImage
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user