cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests 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

22
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="keyword 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,14 +9,18 @@
<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, escapeCSS} from "@/utils/utils";
import Vue from "vue"
import VueSanitize from "vue-sanitize"
Vue.use(VueSanitize)
export default {
name: 'KeywordsComponent',
@ -31,7 +35,15 @@ 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)
},
escapeCSS: function (classname) {
return CSS.escape(this.$sanitize(escapeCSS(classname)))
}
}
}