cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add classes to main components/views

Browse Source
This commit is contained in:
tomtjes 2024-02-07 19:18:51 -05:00
parent 14c2be9277
commit 1819ff2bbd
10 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
vue/src/apps/CookbookView/CookbookView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="app" class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1 offset"> <div id="app" class="books col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1 offset">
<div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1"> <div class="col-12 col-xl-8 col-lg-10 offset-xl-2 offset-lg-1">
<div class="row"> <div class="row">
<div class="col col-md-12"> <div class="col col-md-12">

2
vue/src/apps/MealPlanView/MealPlanView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div id="app" class="mealplan">
<div class="d-none d-lg-block"> <div class="d-none d-lg-block">
<div class="row "> <div class="row ">
<div class="col col-2"> <div class="col col-2">

2
vue/src/apps/RecipeSearchView/RecipeSearchView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="app" style="padding-bottom: 60px"> <div id="app" class="search" style="padding-bottom: 60px">
<RecipeSwitcher ref="ref_recipe_switcher" /> <RecipeSwitcher ref="ref_recipe_switcher" />
<div class="row"> <div class="row">
<div class="col-12 col-xl-10 col-lg-10 offset-xl-1 offset-lg-1"> <div class="col-12 col-xl-10 col-lg-10 offset-xl-1 offset-lg-1">

2
vue/src/apps/RecipeView/RecipeView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="app" v-if="recipe_id !== undefined"> <div id="app" class="recipe" v-if="recipe_id !== undefined">
<recipe-view-component :recipe_id="recipe_id"></recipe-view-component> <recipe-view-component :recipe_id="recipe_id"></recipe-view-component>
<bottom-navigation-bar active-view="view_search"></bottom-navigation-bar> <bottom-navigation-bar active-view="view_search"></bottom-navigation-bar>

2
vue/src/apps/ShoppingListView/ShoppingListView.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div id="app"> <div id="app" class="shopping">
<b-alert :show="!online" dismissible class="small float-up" variant="warning">{{ $t("OfflineAlert") }}</b-alert> <b-alert :show="!online" dismissible class="small float-up" variant="warning">{{ $t("OfflineAlert") }}</b-alert>
<div class="row float-top w-100"> <div class="row float-top w-100">

14
vue/src/components/IngredientComponent.vue
View File

@ -1,20 +1,20 @@
<template> <template>
<tr> <tr class="ingredient">
<template v-if="ingredient.is_header"> <template v-if="ingredient.is_header">
<td colspan="5" @click="done"> <td class="header" colspan="5" @click="done">
<b>{{ ingredient.note }}</b> <b>{{ ingredient.note }}</b>
</td> </td>
</template> </template>
<template v-else> <template v-else>
<td class="d-print-none align-baseline py-2" v-if="detailed" @click="done"> <td class="check d-print-none align-baseline py-2" v-if="detailed" @click="done">
<i class="far fa-check-circle text-success" v-if="ingredient.checked"></i> <i class="far fa-check-circle text-success" v-if="ingredient.checked"></i>
<i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i> <i class="far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
</td> </td>
<td class="text-nowrap" @click="done"> <td class="amount text-nowrap" @click="done">
<span v-if="ingredient.amount !== 0 && !ingredient.no_amount" v-html="calculateAmount(ingredient.amount)"></span> <span v-if="ingredient.amount !== 0 && !ingredient.no_amount" v-html="calculateAmount(ingredient.amount)"></span>
</td> </td>
<td @click="done"> <td class="unit" @click="done">
<template v-if="ingredient.unit !== null && !ingredient.no_amount"> <template v-if="ingredient.unit !== null && !ingredient.no_amount">
<template> <template>
<template v-if="ingredient.unit.plural_name === '' || ingredient.unit.plural_name === null"> <template v-if="ingredient.unit.plural_name === '' || ingredient.unit.plural_name === null">
@ -28,7 +28,7 @@
</template> </template>
</template> </template>
</td> </td>
<td @click="done"> <td class="food" @click="done">
<template v-if="ingredient.food !== null"> <template v-if="ingredient.food !== null">
<a :href="resolveDjangoUrl('view_recipe', ingredient.food.recipe.id)" v-if="ingredient.food.recipe !== null" target="_blank" rel="noopener noreferrer"> <a :href="resolveDjangoUrl('view_recipe', ingredient.food.recipe.id)" v-if="ingredient.food.recipe !== null" target="_blank" rel="noopener noreferrer">
{{ ingredientName(ingredient) }} {{ ingredientName(ingredient) }}
@ -40,7 +40,7 @@
</template> </template>
</template> </template>
</td> </td>
<td v-if="detailed" class="align-baseline"> <td v-if="detailed" class="note align-baseline">
<template v-if="ingredient.note"> <template v-if="ingredient.note">
<span class="d-print-none touchable py-0 px-2" v-b-popover.hover="ingredient.note"> <span class="d-print-none touchable py-0 px-2" v-b-popover.hover="ingredient.note">
<i class="far fa-comment"></i> <i class="far fa-comment"></i>

2
vue/src/components/IngredientsCard.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="{ 'card border-primary no-border': header }"> <div :class="{ 'ingredients card border-primary no-border': header }">
<div :class="{ 'card-body': header, 'p-0': header }"> <div :class="{ 'card-body': header, 'p-0': header }">
<div class="card-header" v-if="header"> <div class="card-header" v-if="header">
<div class="row"> <div class="row">

2
vue/src/components/KeywordsComponent.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div v-if="recipe.keywords.length > 0"> <div v-if="recipe.keywords.length > 0">
<span :key="k.id" v-for="k in recipe.keywords.slice(0,keyword_splice).filter((kk) => { return kk.show || kk.show === undefined })" class="pl-1"> <span :key="k.id" v-for="k in recipe.keywords.slice(0,keyword_splice).filter((kk) => { return kk.show || kk.show === undefined })" class="keyword pl-1">
<template v-if="enable_keyword_links"> <template v-if="enable_keyword_links">
<a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`"> <a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`">
<b-badge pill variant="light" class="font-weight-normal">{{ k.label }}</b-badge> <b-badge pill variant="light" class="font-weight-normal">{{ k.label }}</b-badge>

28
vue/src/components/RecipeViewComponent.vue
View File

@ -1,38 +1,38 @@
<template> <template>
<div> <div>
<template v-if="loading"> <template v-if="loading">
<loading-spinner></loading-spinner> <loading-spinner></loading-spinner>
</template> </template>
<div v-if="!loading" style="padding-bottom: 60px"> <div v-if="!loading" style="padding-bottom: 60px">
<RecipeSwitcher ref="ref_recipe_switcher" @switch="quickSwitch($event)" v-if="show_recipe_switcher"/> <RecipeSwitcher ref="ref_recipe_switcher" @switch="quickSwitch($event)" v-if="show_recipe_switcher"/>
<div class="row"> <div class="title row">
<div class="col-12" style="text-align: center"> <div class="col-12" style="text-align: center">
<h3>{{ recipe.name }}</h3> <h3>{{ recipe.name }}</h3>
</div> </div>
</div> </div>
<div class="row text-center"> <div class="rating row text-center">
<div class="col col-md-12"> <div class="col col-md-12">
<recipe-rating :recipe="recipe"></recipe-rating> <recipe-rating :recipe="recipe"></recipe-rating>
<last-cooked :recipe="recipe" class="mt-2"></last-cooked> <last-cooked :recipe="recipe" class="mt-2"></last-cooked>
</div> </div>
</div> </div>
<div class="my-auto"> <div class="description my-auto">
<div class="col-12" style="text-align: center"> <div class="col-12" style="text-align: center">
<i>{{ recipe.description }}</i> <i>{{ recipe.description }}</i>
</div> </div>
</div> </div>
<div style="text-align: center"> <div class="keywords" style="text-align: center">
<keywords-component :recipe="recipe" :enable_keyword_links="enable_keyword_links"></keywords-component> <keywords-component :recipe="recipe" :enable_keyword_links="enable_keyword_links"></keywords-component>
</div> </div>
<hr/> <hr/>
<div class="row align-items-center"> <div class="prep-data row align-items-center">
<div class="col col-md-3"> <div class="prep-time col col-md-3">
<div class="d-flex"> <div class="d-flex">
<div class="my-auto mr-1"> <div class="my-auto mr-1">
<i class="fas fa-fw fa-user-clock fa-2x text-primary"></i> <i class="fas fa-fw fa-user-clock fa-2x text-primary"></i>
@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<div class="col col-md-3"> <div class="wait-time col col-md-3">
<div class="row d-flex"> <div class="row d-flex">
<div class="my-auto mr-1"> <div class="my-auto mr-1">
<i class="far fa-fw fa-clock fa-2x text-primary"></i> <i class="far fa-fw fa-clock fa-2x text-primary"></i>
@ -56,7 +56,7 @@
</div> </div>
</div> </div>
<div class="col col-md-4 col-10 mt-2 mt-md-0"> <div class="servings col col-md-4 col-10 mt-2 mt-md-0">
<div class="d-flex"> <div class="d-flex">
<div class="my-auto mr-1"> <div class="my-auto mr-1">
<i class="fas fa-fw fa-pizza-slice fa-2x text-primary"></i> <i class="fas fa-fw fa-pizza-slice fa-2x text-primary"></i>
@ -75,14 +75,14 @@
</div> </div>
</div> </div>
<div class="col col-md-2 col-2 mt-2 mt-md-0 text-right"> <div class="context-menu col col-md-2 col-2 mt-2 mt-md-0 text-right">
<recipe-context-menu v-bind:recipe="recipe" :servings="servings" <recipe-context-menu v-bind:recipe="recipe" :servings="servings"
:disabled_options="{print:false}" v-if="show_context_menu"></recipe-context-menu> :disabled_options="{print:false}" v-if="show_context_menu"></recipe-context-menu>
</div> </div>
</div> </div>
<hr/> <hr/>
<div class="row"> <div class="overview row">
<div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2" <div class="col-md-6 order-md-1 col-sm-12 order-sm-2 col-12 order-2"
v-if="recipe && ingredient_count > 0 && (recipe.show_ingredient_overview || recipe.steps.length < 2)"> v-if="recipe && ingredient_count > 0 && (recipe.show_ingredient_overview || recipe.steps.length < 2)">
<ingredients-card <ingredients-card
@ -118,7 +118,7 @@
</div> </div>
</template> </template>
<div v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh"> <div class="steps" v-for="(s, index) in recipe.steps" v-bind:key="s.id" style="margin-top: 1vh">
<step-component <step-component
:recipe="recipe" :recipe="recipe"
:step="s" :step="s"
@ -130,13 +130,13 @@
></step-component> ></step-component>
</div> </div>
<div v-if="recipe.source_url !== null"> <div class="source" v-if="recipe.source_url !== null">
<h6 class="d-print-none"><i class="fas fa-file-import"></i> {{ $t("Imported_From") }}</h6> <h6 class="d-print-none"><i class="fas fa-file-import"></i> {{ $t("Imported_From") }}</h6>
<span class="text-muted mt-1"><a style="overflow-wrap: break-word;" <span class="text-muted mt-1"><a style="overflow-wrap: break-word;"
:href="recipe.source_url">{{ recipe.source_url }}</a></span> :href="recipe.source_url">{{ recipe.source_url }}</a></span>
</div> </div>
<div class="row" style="margin-top: 2vh; "> <div class="properties row" style="margin-top: 2vh; ">
<div class="col-lg-6 offset-lg-3 col-12"> <div class="col-lg-6 offset-lg-3 col-12">
<property-view-component :recipe="recipe" :servings="servings" @foodUpdated="loadRecipe(recipe.id)"></property-view-component> <property-view-component :recipe="recipe" :servings="servings" @foodUpdated="loadRecipe(recipe.id)"></property-view-component>
</div> </div>

8
vue/src/components/StepComponent.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="step">
<hr/> <hr/>
<!-- Step header (only shown if more than one step --> <!-- Step header (only shown if more than one step -->
<div class="row mb-1" v-if="recipe.steps.length > 1"> <div class="row mb-1" v-if="recipe.steps.length > 1">
@ -32,7 +32,7 @@
<div class="row"> <div class="row">
<!-- ingredients table --> <!-- ingredients table -->
<div class="col col-md-4" <div class="ingredients col col-md-4"
v-if="step.show_ingredients_table && step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)"> v-if="step.show_ingredients_table && step.ingredients.length > 0 && (recipe.steps.length > 1 || force_ingredients)">
<table class="table table-sm"> <table class="table table-sm">
<ingredients-card :steps="[step]" :ingredient_factor="ingredient_factor" <ingredients-card :steps="[step]" :ingredient_factor="ingredient_factor"
@ -40,7 +40,7 @@
</table> </table>
</div> </div>
<div class="col" <div class="method col"
:class="{ 'col-md-8 col-12': recipe.steps.length > 1, 'col-md-12 col-12': recipe.steps.length <= 1 }"> :class="{ 'col-md-8 col-12': recipe.steps.length > 1, 'col-md-12 col-12': recipe.steps.length <= 1 }">
<!-- step text --> <!-- step text -->
<div class="row"> <div class="row">
@ -71,7 +71,7 @@
</div> </div>
<!-- Sub recipe (always full width own row) --> <!-- Sub recipe (always full width own row) -->
<div class="row"> <div class="subrecipe row">
<div class="col col-md-12"> <div class="col col-md-12">
<div class="card" v-if="step.step_recipe_data !== null"> <div class="card" v-if="step.step_recipe_data !== null">
<b-collapse id="collapse-1" v-model="details_visible"> <b-collapse id="collapse-1" v-model="details_visible">