homepage: fix counter appareance on MyCustoms vue tab

This commit is contained in:
Mathieu Jaumotte 2022-02-01 19:13:25 +01:00
parent e98b1b049b
commit 496e5f0259

View File

@ -6,22 +6,34 @@
<div class="custom1">
<ul class="list-unstyled">
<li v-if="counter.notifications > 0">
<span class="counter">{{ $tc('counter.unread_notifications', {n: counter.notifications }) }}</span>
<i18n-t keypath="counter.unread_notifications" tag="span" :class="counterClass" :plural="counter.notifications">
<template v-slot:n><span>{{ counter.notifications }}</span></template>
</i18n-t>
</li>
<li v-if="counter.accompanyingCourses > 0">
<span class="counter">{{ $tc('counter.assignated_courses', {n: counter.accompanyingCourses }) }}</span>
<i18n-t keypath="counter.assignated_courses" tag="span" :class="counterClass" :plural="counter.accompanyingCourses">
<template v-slot:n><span>{{ counter.accompanyingCourses }}</span></template>
</i18n-t>
</li>
<li v-if="counter.works > 0">
<span class="counter">{{ $tc('counter.assignated_actions', {n: counter.works }) }}</span>
<i18n-t keypath="counter.assignated_actions" tag="span" :class="counterClass" :plural="counter.works">
<template v-slot:n><span>{{ counter.works }}</span></template>
</i18n-t>
</li>
<li v-if="counter.evaluations > 0">
<span class="counter">{{ $tc('counter.assignated_evaluations', {n: counter.evaluations }) }}</span>
<i18n-t keypath="counter.assignated_evaluations" tag="span" :class="counterClass" :plural="counter.evaluations">
<template v-slot:n><span>{{ counter.evaluations }}</span></template>
</i18n-t>
</li>
<li v-if="counter.tasksAlert > 0">
<span class="counter">{{ $tc('counter.alert_tasks', {n: counter.tasksAlert }) }}</span>
<i18n-t keypath="counter.alert_tasks" tag="span" :class="counterClass" :plural="counter.tasksAlert">
<template v-slot:n><span>{{ counter.tasksAlert }}</span></template>
</i18n-t>
</li>
<li v-if="counter.tasksWarning > 0">
<span class="counter">{{ $tc('counter.warning_tasks', {n: counter.tasksWarning }) }}</span>
<i18n-t keypath="counter.warning_tasks" tag="span" :class="counterClass" :plural="counter.tasksWarning">
<template v-slot:n><span>{{ counter.tasksWarning }}</span></template>
</i18n-t>
</li>
</ul>
</div>
@ -54,6 +66,13 @@ import Masonry from 'masonry-layout/masonry';
export default {
name: "MyCustoms",
data() {
return {
counterClass: {
counter: true //hack to pass class 'counter' in i18n-t
}
}
},
computed: {
...mapGetters(['counter']),
noResults() {
@ -67,11 +86,16 @@ export default {
}
</script>
<style scoped>
<style lang="scss" scoped>
div.custom4,
div.custom3,
div.custom2 {
font-style: italic;
color: var(--bs-chill-gray);
}
span.counter {
& > span {
background-color: unset;
}
}
</style>