mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2025-12-24 02:39:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

imrpvoed recipe card design

Browse Source
This commit is contained in:
vabene1111
2024-07-31 18:43:10 +02:00
parent 3630172723
commit abff1136f9
3 changed files with 45 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
vue3/src/apps/tandoor/Tandoor.vue
View File

@@ -6,9 +6,7 @@
</router-link>
<v-spacer></v-spacer>
<global-search-dialog></global-search-dialog>
<v-btn>DEBUG
<message-list-dialog></message-list-dialog>
</v-btn>
<v-avatar color="cyan" class="me-2">V
<v-menu activator="parent">
@@ -30,11 +28,11 @@
<v-list-item>Space 2</v-list-item>
<v-list-item>Space 3</v-list-item>
<v-divider></v-divider>
<v-list-item><template #prepend><v-icon icon="fa-solid fa-database"></v-icon></template>Messages<message-list-dialog></message-list-dialog></v-list-item>
<v-list-item><template #prepend><v-icon icon="fa-solid fa-arrow-right-from-bracket"></v-icon></template>Logout</v-list-item>
</v-list>
</v-menu>
</v-avatar>
Test: {{$t('Recipes')}}
</v-app-bar>
<v-main>
@@ -99,4 +97,7 @@ useUserPreferenceStore()
</script>
<style scoped></style>
<style scoped>
</style>

7
vue3/src/components/display/KeywordsBar.vue
View File

@@ -1,6 +1,10 @@
<template>
<div v-if="props.keywords">
<v-chip class="ms-1" :color="props.color" :size="props.size" :variant="props.variant" v-for="k in props.keywords"> {{ k.label }}</v-chip>
<slot name="prepend"></slot>
<v-chip class="me-1 mb-1" :label="props.label" :color="props.color" :size="props.size" :variant="props.variant" v-for="k in props.keywords"> {{ k.label }}</v-chip>
<slot name="append"></slot>
</div>
</template>
@@ -15,6 +19,7 @@ const props = defineProps({
size: {type: String, default: 'x-small'},
color: {type: String, default: ''},
variant: {type: String as PropType<NonNullable<"tonal" | "flat" | "text" | "elevated" | "outlined" | "plain"> | undefined>, default: 'tonal'},
label: {type: Boolean, default: true}
})
</script>

65
vue3/src/components/display/RecipeCard.vue
View File

@@ -14,18 +14,7 @@
width="100%"
:recipe="componentProps.recipe"
>
<template #overlay>
<v-chip size="x-small" prepend-icon="fa fa-clock" label color="light" variant="elevated"
class="float-start ms-1 mt-1" v-if="componentProps.recipe.workingTime != undefined && componentProps.recipe.workingTime > 0">
{{ 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" v-if="componentProps.recipe.waitingTime != undefined && componentProps.recipe.waitingTime > 0">
{{ recipe.waitingTime }}
</v-chip>
<keywords-component variant="flat" :keywords="componentProps.recipe.keywords"></keywords-component>
</template>
</recipe-image>
<v-divider class="p-0" v-if="componentProps.recipe.image == null"></v-divider>
@@ -35,29 +24,24 @@
{{ componentProps.recipe.description }}
</div>
</v-tooltip>
<v-card-item>
<v-card-title>
{{ componentProps.recipe.name }}
<recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>
</v-card-title>
<v-card-subtitle>by {{ componentProps.recipe.createdBy }}</v-card-subtitle>
<!-- <v-card-subtitle v-if="show_keywords">-->
<!-- <keywords-component :keywords="recipe.keywords"></keywords-component>-->
<!-- </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>-->
<div class="text-rows-2">
<h3>{{ componentProps.recipe.name }}</h3>
</div>
<!-- TODO decide if context menu should be re-added (maybe make it a setting) -->
<!-- <recipe-context-menu class="float-end" :recipe="recipe"></recipe-context-menu>-->
</v-card-item>
<v-card-text>
<div class="text-rows-2">
<keywords-component variant="outlined" :keywords="componentProps.recipe.keywords">
<template #prepend>
<v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined" v-if="componentProps.recipe.workingTime != undefined && componentProps.recipe.workingTime > 0">
{{ recipe.workingTime! + recipe.waitingTime! }}
</v-chip>
</template>
</keywords-component>
</div>
</v-card-text>
</v-card>
</template>
@@ -96,4 +80,21 @@ const componentProps = defineProps({
<style scoped>
.text-rows-1 {
overflow: hidden;
text-overflow: clip;
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
-webkit-box-orient: vertical;
}
.text-rows-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>