aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/LdProposition.vue
diff options
context:
space:
mode:
Diffstat (limited to 'viewer/src/components/LdProposition.vue')
-rw-r--r--viewer/src/components/LdProposition.vue23
1 files changed, 14 insertions, 9 deletions
diff --git a/viewer/src/components/LdProposition.vue b/viewer/src/components/LdProposition.vue
index 088e249..07b27f5 100644
--- a/viewer/src/components/LdProposition.vue
+++ b/viewer/src/components/LdProposition.vue
@@ -19,11 +19,14 @@
19--> 19-->
20 20
21<template> 21<template>
22 <div class="proposition"> 22 <div :class="$style.proposition">
23 <h2 v-if="showCategory && Object.keys(propositions).length" class="subtitle category">{{ title }}</h2> 23 <h2 v-if="showCategory && Object.keys(propositions).length" :class="[$style.subtitle, $style.category]">
24 {{ title }}
25 </h2>
24 <div v-for="proposed in proposedTags" :key="proposed.rawTag"> 26 <div v-for="proposed in proposedTags" :key="proposed.rawTag">
25 <a 27 <a
26 class="operation-btns link" 28 class="link"
29 :class="$style.operationBtns"
27 :title="$t('tag-propositions.substraction')" 30 :title="$t('tag-propositions.substraction')"
28 @click="add(Operation.SUBSTRACTION, proposed.rawTag)" 31 @click="add(Operation.SUBSTRACTION, proposed.rawTag)"
29 > 32 >
@@ -31,7 +34,8 @@
31 </a> 34 </a>
32 35
33 <a 36 <a
34 class="operation-btns link" 37 class="link"
38 :class="$style.operationBtns"
35 :title="$t('tag-propositions.addition')" 39 :title="$t('tag-propositions.addition')"
36 @click="add(Operation.ADDITION, proposed.rawTag)" 40 @click="add(Operation.ADDITION, proposed.rawTag)"
37 > 41 >
@@ -39,7 +43,8 @@
39 </a> 43 </a>
40 44
41 <a 45 <a
42 class="operation-tag link" 46 class="link"
47 :class="$style.operationTag"
43 :title="$t('tag-propositions.intersection')" 48 :title="$t('tag-propositions.intersection')"
44 @click="add(Operation.INTERSECTION, proposed.rawTag)" 49 @click="add(Operation.INTERSECTION, proposed.rawTag)"
45 >{{ proposed.rawTag }}</a 50 >{{ proposed.rawTag }}</a
@@ -47,7 +52,7 @@
47 52
48 <div class="disabled" :title="$t('tag-propositions.item-count')">{{ proposed.count }}</div> 53 <div class="disabled" :title="$t('tag-propositions.item-count')">{{ proposed.count }}</div>
49 </div> 54 </div>
50 <div v-if="showMoreCount > 0" class="showmore" @click="limit += showMoreCount"> 55 <div v-if="showMoreCount > 0" :class="$style.showmore" @click="limit += showMoreCount">
51 {{ $t("tag-propositions.showmore", [showMoreCount]) }}<fa-icon icon="angle-double-down" /> 56 {{ $t("tag-propositions.showmore", [showMoreCount]) }}<fa-icon icon="angle-double-down" />
52 </div> 57 </div>
53 </div> 58 </div>
@@ -137,7 +142,7 @@ export default class LdProposition extends Vue {
137} 142}
138</script> 143</script>
139 144
140<style lang="scss"> 145<style lang="scss" module>
141@import "~@/assets/scss/theme.scss"; 146@import "~@/assets/scss/theme.scss";
142 147
143.proposition { 148.proposition {
@@ -153,14 +158,14 @@ export default class LdProposition extends Vue {
153 display: flex; 158 display: flex;
154 align-items: center; 159 align-items: center;
155 padding-right: 7px; 160 padding-right: 7px;
156 .operation-tag { 161 .operationTag {
157 text-overflow: ellipsis; 162 text-overflow: ellipsis;
158 white-space: nowrap; 163 white-space: nowrap;
159 overflow: hidden; 164 overflow: hidden;
160 flex-grow: 1; 165 flex-grow: 1;
161 cursor: pointer; 166 cursor: pointer;
162 } 167 }
163 .operation-btns { 168 .operationBtns {
164 padding: 2px 7px; 169 padding: 2px 7px;
165 cursor: pointer; 170 cursor: pointer;
166 } 171 }