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

dark theme hyperlink color, more reformatting, add navbar + insightsClient to AIS, basic Vuex, VueClipboard import, Router beforeEach guard (currently unused)

Browse Source
This commit is contained in:
Xevion
2020-09-07 23:46:06 -05:00
parent a0d7a78f73
commit c0305ef414
10 changed files with 463 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,72 +1,85 @@
<template>
<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' : ''}`"
:to="{ name: 'Character', params: { character: character.id } }"
<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' : ''
}`"
:to="{ name: 'Character', params: { character: character.id } }"
>
{{ character.name }}
<b-badge class="ml-1">{{ character.appearances}}</b-badge>
<b-badge class="ml-1">{{ character.appearances }}</b-badge>
</b-button>
</div>
</template>
<style lang="scss">
@import "../assets/scss/_variables";
@import "../assets/scss/_variables";
.btn {
.btn {
box-shadow: none;
&:focus {
box-shadow: none;
&:focus { box-shadow: none; }
}
}
.character-button {
color: $grey-10;
background-color: $grey-4;
border-color: $grey-3;
.badge {
color: lighten($grey-11, 8%);
}
.character-button {
color: $grey-10;
background-color: $grey-4;
border-color: $grey-3;
.badge {
color: lighten($grey-11, 8%);
}
}
.character-button {
&:focus {
background-color: $grey-6 !important;
border-color: $grey-4 !important;
&:active { box-shadow: none !important;}
}
&:hover {
background-color: $grey-4 !important;
border-color: $grey-3 !important;
}
.character-button {
&:focus {
background-color: $grey-6 !important;
border-color: $grey-4 !important;
&:active {
background-color: $grey-3 !important;
border-color: $grey-3 !important;
box-shadow: none !important;
}
}
.character-button > .badge {
background-color: $grey-7;
&:hover {
background-color: $grey-4 !important;
border-color: $grey-3 !important;
}
/*.btn-dark {*/
/* &:not(:disabled), &:not {*/
/* */
/* }*/
/*}*/
&:active {
background-color: $grey-3 !important;
border-color: $grey-3 !important;
}
}
/*.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, {*/
/* color: #ffffff;*/
/* background-color: #1d2124;*/
/* border-color: #171a1d;*/
/*}*/
.character-button > .badge {
background-color: $grey-7;
}
/*.btn-dark {*/
/* &:not(:disabled), &:not {*/
/* */
/* }*/
/*}*/
/*.btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active, {*/
/* color: #ffffff;*/
/* background-color: #1d2124;*/
/* border-color: #171a1d;*/
/*}*/
</style>
<script>
export default {
name: 'CharacterList',
props: ['characters'],
name: "CharacterList",
props: ["characters"],
};
</script>