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

use BEM classes

Browse Source 
add class names for foods, units, keywords (not following BEM closely)
This commit is contained in:
tomtjes
2024-02-14 16:44:12 -05:00
parent 0ee5164aac
commit 8e72108290
9 changed files with 157 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,14 @@
<template>
<div class="step">
<div class="step" :class="stepClassName" >
<hr/>
<!-- Step header (only shown if more than one step -->
<div class="row mb-1" v-if="recipe.steps.length > 1">
<div class="col col-md-8">
<h5 class="text-primary">
<template v-if="step.name">{{ step.name }}</template>
<template v-else>{{ $t("Step") }} {{ index + 1 }}</template>
<small style="margin-left: 4px" class="text-muted" v-if="step.time !== 0"><i
<h5 class="step__name text-primary" :class="stepClassNameType">
{{ step_name }}
<small style="margin-left: 4px" class="step__time text-muted" v-if="step.time !== 0"><i
class="fas fa-user-clock"></i> {{ step_time }}</small>
<small v-if="start_time !== ''" class="d-print-none">
<small v-if="start_time !== ''" class="step__start-time d-print-none">
<b-link :id="`id_reactive_popover_${step.id}`" @click="openPopover" href="#">
{{ moment(start_time).add(step.time_offset, "minutes").format("HH:mm") }}
</b-link>
@@ -20,19 +19,19 @@
<b-button
@click="details_visible = !details_visible"
style="border: none; background: none"
class="shadow-none d-print-none"
:class="{ 'text-primary': details_visible, 'text-success': !details_visible }"
class="shadow-none d-print-none step__button-collapse"
:class="{ 'step__button-collapse_visible text-primary': details_visible, 'step_button-collapse_visible_false text-success': !details_visible }"
>
<i class="far fa-check-circle"></i>
</b-button>
</div>
</div>
<b-collapse id="collapse-1" v-model="details_visible">
<b-collapse id="collapse-1" class="step__details" :class="[details_visible ? 'step__details_visible':'step__details_visible_false']" v-model="details_visible">
<div class="row">
<!-- ingredients table -->
<div class="ingredients col col-md-4"
<div class="step__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 +39,7 @@
</table>
</div>
<div class="method col"
<div class="step__instructions 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">
@@ -51,7 +50,7 @@
</div>
<!-- File (preview if image, download else) -->
<div class="row" v-if="step.file !== null">
<div class="step__file row" v-if="step.file !== null">
<div class="col col-md-12">
<template>
<div
@@ -71,10 +70,10 @@
</div>
<!-- Sub recipe (always full width own row) -->
<div class="subrecipe row">
<div class="step__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">
<b-collapse id="collapse-1" :class="[details_visible ? 'step__details_visible':'step__details_visible_false']" v-model="details_visible">
<div class="card-body">
<h2 class="card-title">
<a :href="resolveDjangoUrl('view_recipe', step.step_recipe_data.id)">{{
@@ -123,13 +122,15 @@
</template>
<script>
import {calculateAmount, GettextMixin, getUserPreference} from "@/utils/utils"
import {calculateAmount, GettextMixin, getUserPreference, escapeCSS} from "@/utils/utils"
import CompileComponent from "@/components/CompileComponent"
import IngredientsCard from "@/components/IngredientsCard"
import Vue from "vue"
import moment from "moment"
import {ResolveUrlMixin, calculateHourMinuteSplit} from "@/utils/utils"
import VueSanitize from "vue-sanitize"
Vue.use(VueSanitize)
Vue.prototype.moment = moment
export default {
@@ -150,6 +151,25 @@ export default {
computed: {
step_time: function() {
return calculateHourMinuteSplit(this.step.time)},
step_name: function() {
if (this.step.name) {
return this.step.name
}
return this.$t("Step") + ' ' + String(this.index+1)
},
stepClassName: function() {
let classes = {}
const nameclass = this.escapeCSS("_stepname-" + this.step_name)
classes[nameclass] = !!this.step.name
classes['_stepname-' + String(this.index+1)] = !this.step.name
return classes
},
stepClassNameType: function() {
let classes = {}
classes['step__name_custom'] = !!this.step.name
classes['step__name_custom_false'] = !this.step.name
return classes
}
},
data() {
return {
@@ -179,6 +199,9 @@ export default {
openPopover: function () {
this.$refs[`id_reactive_popover_${this.step.id}`].$emit("open")
},
escapeCSS: function (classname) {
return CSS.escape(this.$sanitize(escapeCSS(classname)))
}
},
}
</script>