Merge pull request #2941 from tomtjes/add-human-friendly-css-classes

Add human-friendly css classes and scaling indicators

vue/src/apps/CookbookView/CookbookView.vue

@@ -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">

vue/src/apps/MealPlanView/MealPlanView.vue

@@ -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">

vue/src/apps/RecipeSearchView/RecipeSearchView.vue

@@ -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">

vue/src/apps/RecipeView/RecipeView.vue

@@ -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>

vue/src/apps/ShoppingListView/ShoppingListView.vue

@@ -1,5 +1,5 @@
 <template>
- <div id="app">
+ <div id="app" class="shopping">
  <b-alert :show="shopping_list_store.has_failed_items" class="float-up mt-2" variant="warning">
  {{ $t('ShoppingBackgroundSyncWarning') }}
  </b-alert>
@@ -55,7 +55,6 @@
  </span>
  </div>
  </template>
-
  <!-- Entry input on large screens -->
  <b-row class="d-lg-block d-print-none d-none mb-3 mt-3">
  <b-col cols="12">

vue/src/components/IngredientComponent.vue

@@ -1,60 +1,49 @@
 <template>
- <tr>
+ <tr class="ingredients__item">
  <template v-if="ingredient.is_header">
- <td colspan="5" @click="done">
+ <td class="ingredients__header-note 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">
- <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 class="ingredients__check d-print-none align-baseline py-2" v-if="detailed" @click="done">
+ <i class="ingredients__check ingredients__check_checked far fa-check-circle text-success" v-if="ingredient.checked"></i>
+ <i class="ingredients__check ingredients__check_checked_false far fa-check-circle text-primary" v-if="!ingredient.checked"></i>
  </td>
- <td class="text-nowrap" @click="done">
- <span v-if="ingredient.amount !== 0 && !ingredient.no_amount" v-html="calculateAmount(ingredient.amount)"></span>
+ <td class="ingredients__amount text-nowrap" @click="done">
+ <span class="ingredients__amount" :class="amountClass" v-if="ingredient.amount !== 0 && !ingredient.no_amount" v-html="amount"></span>
  </td>
- <td @click="done">
- <template v-if="ingredient.unit !== null && !ingredient.no_amount">
- <template>
- <template v-if="ingredient.unit.plural_name === '' || ingredient.unit.plural_name === null">
- <span>{{ ingredient.unit.name }}</span>
- </template>
- <template v-else>
- <span v-if="ingredient.always_use_plural_unit">{{ ingredient.unit.plural_name }}</span>
- <span v-else-if="ingredient.amount * this.ingredient_factor > 1">{{ ingredient.unit.plural_name }}</span>
- <span v-else>{{ ingredient.unit.name }}</span>
- </template>
- </template>
- </template>
+ <td class="ingredients__unit" @click="done">
+ <span v-if="ingredient.unit !== null && !ingredient.no_amount" :class="unitClass">{{ unitName }}</span>
  </td>
- <td @click="done">
+ <td class="ingredients__food" :class="foodClass" @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) }}
+ {{ foodName }}
  </a>
  <a :href="ingredient.food.url" v-else-if="ingredient.food.url !== ''" target="_blank" rel="noopener noreferrer">
- {{ ingredientName(ingredient) }}</a>
+ {{ foodName }}</a>
  <template v-else>
- <span>{{ ingredientName(ingredient) }}</span>
+ <span :class="foodClass">{{ foodName }}</span>
  </template>
  </template>
  </td>
- <td v-if="detailed" class="align-baseline">
+ <td v-if="detailed" class="ingredients__note align-baseline">
  <template v-if="ingredient.note">
- <span class="d-print-none touchable py-0 px-2" v-b-popover.hover="ingredient.note">
+ <span class="ingredients__note ingredients__note_hover d-print-none touchable py-0 px-2" v-b-popover.hover="ingredient.note">
  <i class="far fa-comment"></i>
  </span>
 
- <div class="d-none d-print-block"><i class="far fa-comment-alt d-print-none"></i> {{ ingredient.note }}</div>
+ <div class="ingredients__note ingredients__note_print d-none d-print-block"><i class="far fa-comment-alt d-print-none"></i> {{ ingredient.note }}</div>
  </template>
  </td>
  </template>
  </tr>
 </template>
 
 <script>
-import {calculateAmount, ResolveUrlMixin} from "@/utils/utils"
+import {calculateAmount, ResolveUrlMixin, EscapeCSSMixin} from "@/utils/utils"
 
 import Vue from "vue"
 import VueSanitize from "vue-sanitize"
@@ -68,7 +57,7 @@ export default {
  ingredient_factor: {type: Number, default: 1},
  detailed: {type: Boolean, default: true},
  },
- mixins: [ResolveUrlMixin],
+ mixins: [ResolveUrlMixin, EscapeCSSMixin],
  data() {
  return {
  checked: false,
@@ -77,27 +66,65 @@ export default {
  watch: {},
  mounted() {
  },
- methods: {
- calculateAmount: function (x) {
- return this.$sanitize(calculateAmount(x, this.ingredient_factor))
+ computed: {
+ amount: function() {
+ return this.$sanitize(calculateAmount(this.ingredient.amount, this.ingredient_factor))
  },
- // sends parent recipe ingredient to notify complete has been toggled
- done: function () {
- this.$emit("checked-state-changed", this.ingredient)
+ isScaledUp: function() {
+ return this.ingredient_factor > 1 ? true:false
  },
- ingredientName: function (ingredient) {
- if (ingredient.food.plural_name == null || ingredient.food.plural_name === '') {
- return ingredient.food.name
+ isScaledDown: function() {
+ return this.ingredient_factor < 1 ? true:false
+ },
+ amountClass: function () {
+ if (this.isScaledDown) {
+ return this.escapeCSS('ingredients__amount_scaled_down')
+ } else if (this.isScaledUp) {
+ return this.escapeCSS('ingredients__amount_scaled_up')
+ } else {
+ return this.escapeCSS('ingredients__amount_scaled_false')
  }
-  if (ingredient.always_use_plural_food) {
-  return ingredient.food.plural_name
- } else if (ingredient.no_amount) {
- return ingredient.food.name
- } else if (ingredient.amount * this.ingredient_factor > 1) {
- return ingredient.food.plural_name
+ },
+ isUnitPlural: function () {
+ if (this.ingredient.unit.plural_name === '' || this.ingredient.unit.plural_name === null) {
+ return false
+ } else if (this.ingredient.always_use_plural_unit || this.ingredient.amount * this.ingredient_factor > 1) {
+ return true
  } else {
- return ingredient.food.name
+ return false
  }
+ },
+ isFoodPlural: function () {
+ if (this.ingredient.food.plural_name == null || this.ingredient.food.plural_name === '') {
+ return false
+ }
+ if (this.ingredient.always_use_plural_food) {
+ return true
+ } else if (this.ingredient.no_amount) {
+ return false
+ } else if (this.ingredient.amount * this.ingredient_factor > 1) {
+ return true
+ } else {
+ return false
+ }
+ },
+ unitClass: function () {
+ return this.escapeCSS('_unitname-' + this.ingredient.unit.name)
+ },
+ foodClass: function () {
+ return this.escapeCSS('_foodname-' + this.ingredient.food.name)
+ },
+ unitName: function () {
+ return this.isUnitPlural ? this.ingredient.unit.plural_name : this.ingredient.unit.name
+ },
+ foodName: function () {
+ return this.isFoodPlural ? this.ingredient.food.plural_name : this.ingredient.food.name
+ }
+ },
+ methods: {
+ // sends parent recipe ingredient to notify complete has been toggled
+ done: function () {
+ this.$emit("checked-state-changed", this.ingredient)
  }
  },
 }

vue/src/components/IngredientsCard.vue

@@ -1,5 +1,5 @@
 <template>
- <div :class="{ 'card border-primary no-border': header }">
+ <div class="ingredients" :class="{ 'card border-primary no-border': header }">
  <div :class="{ 'card-body': header, 'p-0': header }">
  <div class="card-header" v-if="header">
  <div class="row">
@@ -15,7 +15,7 @@
  <table class="table table-sm mb-0">
  <!-- eslint-disable vue/no-v-for-template-key-on-child -->
  <template v-for="s in steps">
- <tr v-bind:key="s.id" v-if="s.show_as_header && s.name !== '' && steps.length > 1">
+ <tr class="ingredients__header-step-name" v-bind:key="s.id" v-if="s.show_as_header && s.name !== '' && steps.length > 1">
  <td colspan="5">
  <b>{{ s.name }}</b>
  </td>

vue/src/components/KeywordsComponent.vue

@@ -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">
+ <div class="keywords" 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="keywords__item pl-1" :class="keywordClass(k)">
  <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>
@@ -9,18 +9,17 @@
  <template v-else>
  <b-badge pill variant="light" class="font-weight-normal">{{ k.label }}</b-badge>
  </template>
-
  </span>
  </div>
 </template>
 
 <script>
 
-import {ResolveUrlMixin} from "@/utils/utils";
+import {ResolveUrlMixin, EscapeCSSMixin} from "@/utils/utils";
 
 export default {
  name: 'KeywordsComponent',
- mixins: [ResolveUrlMixin],
+ mixins: [ResolveUrlMixin, EscapeCSSMixin],
  props: {
  recipe: Object,
  limit: Number,
@@ -31,7 +30,12 @@ export default {
  if (this.limit) {
  return this.limit
  }
- return this.recipe.keywords.lenght
+ return this.recipe.keywords.length
+ }
+ },
+ methods: {
+ keywordClass: function(k) {
+ return this.escapeCSS('_keywordname-' + k.label)
  }
  }
 }

vue/src/components/LastCooked.vue

@@ -1,5 +1,5 @@
 <template>
- <div>
+ <div class="last-cooked">
  <span class="pl-1" v-if="recipe.last_cooked !== undefined && recipe.last_cooked !== null">
  <b-badge pill variant="primary" class="font-weight-normal"><i class="fas fa-utensils"></i> {{
  formatDate(recipe.last_cooked)

vue/src/components/RecipeRating.vue

@@ -1,5 +1,5 @@
 <template>
- <div>
+ <div class="rating">
  <span class="d-inline" v-if="recipe.rating > 0">
  <div v-if="!pill">
  <i class="fas fa-star fa-xs text-primary" v-for="i in Math.floor(recipe.rating)" v-bind:key="i"></i>