xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-15 08:13:29 -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>
<b-container v-if="characters" :fluid=true>
<b-row cols="12">
<b-col sm="1" v-for="character in characters" :key="character.name">
<b-button squared class="mx-1" variant="dark" size="sm" :id="`character-${character.id}`">
{{ character.name }}
</b-button>
<b-popover boundary-padding="2" :target="`character-${character.id}`" triggers="hover" placement="top"
:content="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`">
</b-popover>
</b-col>
</b-row>
</b-container>
<div class="pt-2" v-if="characters" :fluid=true>
<b-button squared class="mx-2 my-1 character-button" size="sm"
v-for="character in characters" :key="character.name" :id="`character-${character.id}`"
:title="`${character.appearances} Quote${character.appearances > 1 ? 's' : ''}`"
>
{{ character.name }}
<b-badge class="ml-1">{{ character.appearances}}</b-badge>
</b-button>
</div>
</template>
<style lang="scss">
@@ -20,6 +17,33 @@
&: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 {*/
/* &:not(:disabled), &:not {*/
/* */