xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-16 10:13:35 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix character list button styling, title attr instead of popover

Browse Source
This commit is contained in:
Xevion
2020-08-09 23:23:31 -05:00
parent da5bf9cee0
commit f27e1501d0
1 changed files with 36 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
client/src/components/CharacterList.vue
View File

@@ -1,16 +1,13 @@
<template> <template>
<b-container v-if="characters" :fluid=true> <div class="pt-2" v-if="characters" :fluid=true>
<b-row cols="12"> <b-button squared class="mx-2 my-1 character-button" size="sm"
<b-col sm="1" v-for="character in characters" :key="character.name"> v-for="character in characters" :key="character.name" :id="`character-${character.id}`"
<b-button squared class="mx-1" variant="dark" size="sm" :id="`character-${character.id}`"> :title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
{{ character.name }} >
</b-button> {{ character.name }}
<b-popover boundary-padding="2" :target="`character-${character.id}`" triggers="hover" placement="top" <b-badge class="ml-1">{{ character.appearances}}</b-badge>
:content="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"> </b-button>
</b-popover> </div>
</b-col>
</b-row>
</b-container>
</template> </template>
<style lang="scss"> <style lang="scss">
@@ -20,6 +17,33 @@
&:focus { box-shadow: none; } &:focus { box-shadow: none; }
} }
.character-button {
background-color: #292929;
border-color: #1d1d1d;
}
.character-button {
&:focus {
background-color: #292929 !important;
border-color: #1d1d1d !important;
&:active { box-shadow: none !important;}
}
&:hover {
background-color: #1d1d1d !important;
border-color: #161616 !important;
}
&:active {
background-color: #1d1d1d !important;
border-color: #161616 !important;
}
}
.character-button > .badge {
background-color: #565656;
}
/*.btn-dark {*/ /*.btn-dark {*/
/* &:not(:disabled), &:not {*/ /* &:not(:disabled), &:not {*/
/* */ /* */