Oneric/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests Activity

fixed autocomplete lacking highlight

Browse source
This commit is contained in:
Henry Jameson 2018-05-12 15:16:54 +03:00
parent 55aeb5b4b2
commit 4c3d62da04
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/post_status_form/post_status_form.vue
View file

@ -22,12 +22,7 @@
<div style="position:relative;" v-if="candidates"> <div style="position:relative;" v-if="candidates">
<div class="autocomplete-panel"> <div class="autocomplete-panel">
<div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))"> <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))">
<div v-if="candidate.highlighted" class="autocomplete"> <div class="autocomplete" :class="{ highlighted: candidate.highlighted }">
<span v-if="candidate.img"><img :src="candidate.img"></span>
<span v-else>{{candidate.utf}}</span>
<span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
</div>
<div v-else class="autocomplete">
<span v-if="candidate.img"><img :src="candidate.img"></img></span> <span v-if="candidate.img"><img :src="candidate.img"></img></span>
<span v-else>{{candidate.utf}}</span> <span v-else>{{candidate.utf}}</span>
<span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span> <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span>
@ -182,8 +177,8 @@
z-index: 1; z-index: 1;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
min-width: 75%; min-width: 75%;
background: $fallback--btn; background: $fallback--bg;
background: var(--btn, $fallback--btn); background: var(--bg, $fallback--bg);
color: $fallback--lightFg; color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg); color: var(--lightFg, $fallback--lightFg);
} }
@ -212,6 +207,11 @@
color: $fallback--faint; color: $fallback--faint;
color: var(--faint, $fallback--faint); color: var(--faint, $fallback--faint);
} }
&.highlighted {
background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn);
}
} }
} }
</style> </style>