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

some styling stuff

Browse Source
This commit is contained in:
vabene1111
2024-12-23 12:28:42 +01:00
parent 205eae785e
commit 7a2b3c2d2e
6 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
<v-spacer></v-spacer>
<global-search-dialog></global-search-dialog>
<v-btn icon="$add">
<v-icon icon="$add"></v-icon>
<v-icon icon="$add" class="fa-fw"></v-icon>
<v-menu activator="parent">
<v-list>
<v-list-item prepend-icon="$add" :to="{ name: 'ModelEditPage', params: {model: 'recipe'} }">{{ $t('Create Recipe') }}</v-list-item>

2
vue3/src/components/display/HorizontalMealPlanWindow.vue
View File

@@ -28,7 +28,7 @@
</v-list-item>
<v-divider v-if="mealPlanGridItem.plan_entries.length > 0"></v-divider>
<v-list-item v-for="p in mealPlanGridItem.plan_entries">
<v-list-item v-for="p in mealPlanGridItem.plan_entries" link>
<template #prepend>
<v-avatar :image="p.recipe.image" v-if="p.recipe?.image"></v-avatar>
<v-avatar image="../../assets/recipe_no_image.svg" v-else></v-avatar>

4
vue3/src/components/display/HorizontalRecipeWindow.vue
View File

@@ -10,8 +10,8 @@
<v-col>
<v-window show-arrows>
<v-window-item v-for="w in recipeWindows" class="pt-1 pb-1">
<v-row>
<v-col v-for="r in w" :key="r.id">
<v-row dense>
<v-col class="pr-0 pl-0" v-for="r in w" :key="r.id">
<recipe-card :recipe="r" :show_description="true" :show_keywords="true" style="height: 20vh"></recipe-card>
</v-col>
</v-row>

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

@@ -2,7 +2,7 @@
<div v-if="props.keywords">
<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>
<v-chip class="me-1 mb-1" :label="props.label" :color="props.color" :size="props.size" :variant="props.variant" v-for="k in keywords"> {{ k.label }}</v-chip>
<slot name="append"></slot>
</div>
@@ -12,14 +12,24 @@
<script setup lang="ts">
import {Keyword, KeywordLabel} from "@/openapi";
import {PropType} from "vue";
import {computed, PropType} from "vue";
const props = defineProps({
keywords: Array as PropType<Array<Keyword> | Array<KeywordLabel> | undefined>,
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}
label: {type: Boolean, default: true},
// maximum number of keywords, 0 for all
maxKeywords : {type: Number, default: 0},
})
const keywords = computed(() => {
if (props.maxKeywords > 0){
return props.keywords?.slice(0, props.maxKeywords)
} else {
return props.keywords
}
})
</script>

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

@@ -1,12 +1,14 @@
<template>
<template v-if="!props.loading">
<recipe-image :to="`/recipe/${props.recipe.id}`" :style="{'height': props.height}" :recipe="props.recipe" rounded="lg" class="mr-3 ml-3">
<router-link :to="{name: 'view_recipe', params: {id: props.recipe.id}}">
<recipe-image :style="{'height': props.height}" :recipe="props.recipe" rounded="lg" class="mr-3 ml-3">
</recipe-image>
</recipe-image>
</router-link>
<div class="ml-3">
<div class="d-flex ">
<div class="flex-grow-1 ">
<div class="flex-grow-1 cursor-pointer" @click="router.push({name: 'view_recipe', params: {id: props.recipe.id}})">
<p class="font-weight-bold mt-2">{{ props.recipe.name }}</p>
</div>
<div class="mt-1">
@@ -15,6 +17,14 @@
</div>
</div>
<!-- <p class="text-disabled">{{ props.recipe.createdBy.displayName}}</p>-->
<keywords-component variant="outlined" :keywords="props.recipe.keywords" :max-keywords="3">
<template #prepend>
<v-chip class="mb-1 me-1" size="x-small" prepend-icon="far fa-clock" label variant="outlined"
v-if="props.recipe.workingTime != undefined && props.recipe.workingTime > 0">
{{ recipe.workingTime! + recipe.waitingTime! }}
</v-chip>
</template>
</keywords-component>
</div>
@@ -85,6 +95,7 @@ import {Recipe, RecipeOverview} from "@/openapi";
import RecipeContextMenu from "@/components/inputs/RecipeContextMenu.vue";
import RecipeImage from "@/components/display/RecipeImage.vue";
import {useRouter} from "vue-router";
const props = defineProps({
recipe: {type: {} as PropType<Recipe | RecipeOverview>, required: true,},
@@ -94,6 +105,8 @@ const props = defineProps({
height: {type: String, required: false, default: '15vh'},
})
const router = useRouter()
</script>
<style scoped>

6
vue3/src/components/inputs/GlobalSearchDialog.vue
View File

@@ -1,7 +1,7 @@
<template>
<slot name="activator">
<v-btn @click="dialog = true" variant="plain" density="default">
<i class="fas fa-search mr-1"></i>
<v-btn @click="dialog = true" variant="plain" density="default" :icon="mobile">
<v-icon icon="fa-solid fa-search" class="mr-1 fa-fw"></v-icon>
<span class="d-none d-sm-block">{{$t('Search')}}</span>
<v-chip size="x-small" variant="tonal" class="d-none d-md-flex ml-1" label>{{$t('Ctrl+K')}}</v-chip>
</v-btn>
@@ -62,8 +62,10 @@ import {computed, defineComponent, onMounted, ref, watch} from 'vue'
import {SearchResult} from "@/types/SearchTypes";
import {ApiApi, Recipe, RecipeFlat} from "@/openapi";
import {useRouter} from "vue-router";
import {useDisplay} from "vuetify";
const router = useRouter()
const {mobile} = useDisplay()
const dialog = ref(false)
const recipes = ref([] as Recipe[])