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>
<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="row">
<div class="col col-md-12">

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

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

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

@ -1,5 +1,5 @@
<template>
<div id="app" style="padding-bottom: 60px">
<div id="app" class="search" style="padding-bottom: 60px">
<RecipeSwitcher ref="ref_recipe_switcher" />
<div class="row">
<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>
<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>
<bottom-navigation-bar active-view="view_search"></bottom-navigation-bar>

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

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

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

@ -1,20 +1,20 @@
<template>
<tr>
<tr class="ingredient">
<template v-if="ingredient.is_header">
<td colspan="5" @click="done">
<td class="header" colspan="5" @click="done">
<b>{{ ingredient.note }}</b>
</td>
</template>
<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-primary" v-if="!ingredient.checked"></i>
</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>
</td>
<td @click="done">
<td class="unit" @click="done">
<template v-if="ingredient.unit !== null && !ingredient.no_amount">
<template>
<template v-if="ingredient.unit.plural_name === '' || ingredient.unit.plural_name === null">
@ -28,7 +28,7 @@
</template>
</template>
</td>
<td @click="done">
<td class="food" @click="done">
<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">
{{ ingredientName(ingredient) }}
@ -40,7 +40,7 @@
</template>
</template>
</td>
<td v-if="detailed" class="align-baseline">
<td v-if="detailed" class="note align-baseline">
<template v-if="ingredient.note">
<span class="d-print-none touchable py-0 px-2" v-b-popover.hover="ingredient.note">
<i class="far fa-comment"></i>

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

@ -1,5 +1,5 @@
<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-header" v-if="header">
<div class="row">

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

@ -1,6 +1,6 @@
<template>
<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">
<a :href="`${resolveDjangoUrl('view_search')}?keyword=${k.id}`">
<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>
<div>
<div>
<template v-if="loading">
<loading-spinner></loading-spinner>
</template>
<div v-if="!loading" style="padding-bottom: 60px">
<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">
<h3>{{ recipe.name }}</h3>
</div>
</div>
<div class="row text-center">
<div class="rating row text-center">
<div class="col col-md-12">
<recipe-rating :recipe="recipe"></recipe-rating>
<last-cooked :recipe="recipe" class="mt-2"></last-cooked>
</div>
</div>
<div class="my-auto">
<div class="description my-auto">
<div class="col-12" style="text-align: center">
<i>{{ recipe.description }}</i>
</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>
</div>
<hr/>
<div class="row align-items-center">
<div class="col col-md-3">
<div class="prep-data row align-items-center">
<div class="prep-time col col-md-3">
<div class="d-flex">
<div class="my-auto mr-1">
<i class="fas fa-fw fa-user-clock fa-2x text-primary"></i>
@ -44,7 +44,7 @@
</div>
</div>
<div class="col col-md-3">
<div class="wait-time col col-md-3">
<div class="row d-flex">
<div class="my-auto mr-1">
<i class="far fa-fw fa-clock fa-2x text-primary"></i>
@ -56,7 +56,7 @@
</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="my-auto mr-1">
<i class="fas fa-fw fa-pizza-slice fa-2x text-primary"></i>
@ -75,14 +75,14 @@
</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"
:disabled_options="{print:false}" v-if="show_context_menu"></recipe-context-menu>
</div>
</div>
<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"
v-if="recipe && ingredient_count > 0 && (recipe.show_ingredient_overview || recipe.steps.length < 2)">
<ingredients-card
@ -118,7 +118,7 @@
</div>
</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
:recipe="recipe"
:step="s"
@ -130,13 +130,13 @@
></step-component>
</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>
<span class="text-muted mt-1"><a style="overflow-wrap: break-word;"
:href="recipe.source_url">{{ recipe.source_url }}</a></span>
</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">
<property-view-component :recipe="recipe" :servings="servings" @foodUpdated="loadRecipe(recipe.id)"></property-view-component>
</div>

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

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