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

copy link/blue carets from Season.vue to Character, fix unimported Skeleton componenet, fix Season breadcrumbs not showing name for characters with null name fields

Browse Source
This commit is contained in:
Xevion
2020-09-17 14:35:27 -05:00
parent 7ae360a576
commit 496f588f14
2 changed files with 52 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/components/Character.vue
View File

@@ -58,7 +58,7 @@ export default {
{ {
text: text:
this.character !== null && this.character !== undefined this.character !== null && this.character !== undefined
? this.character.name ? this.character.name || this.$route.params.character
: this.$route.params.character, : this.$route.params.character,
active: true, active: true,
}, },

69
client/src/components/Characters.vue
View File

@@ -1,29 +1,56 @@
<template> <template>
<b-card v-if="ready"> <div>
<b-list-group> <b-breadcrumb v-if="ready" :items="breadcrumbs"></b-breadcrumb>
<b-list-group-item v-for="(character, character_id) in characters" :key="character_id"> <b-card v-else class="breadcrumb-skeleton mb-3">
<b-row align-v="start" align-content="start"> <Skeleton style="width: 40%;"></Skeleton>
<b-col cols="5" md="4" lg="4" xl="3"> </b-card>
<b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy> <b-card v-if="ready">
</b-col> <b-list-group>
<b-col> <b-list-group-item v-for="(character, character_id) in characters" :key="character_id">
<h4> <b-row align-v="start" align-content="start">
{{ character.name || character_id }} <b-col cols="5" md="4" lg="4" xl="3">
</h4> <b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
<p class="pl-3">{{ character.summary }}</p> </b-col>
</b-col> <b-col>
</b-row> <h4>
</b-list-group-item> {{ character.name || character_id }}
</b-list-group> <router-link class="no-link"
</b-card> :to="{ name: 'Character', params: {character: character_id} }">
<b-icon class="h6" icon="caret-right-fill"></b-icon>
</router-link>
</h4>
<p class="pl-3">{{ character.summary }}</p>
</b-col>
</b-row>
</b-list-group-item>
</b-list-group>
</b-card>
</div>
</template> </template>
<style scoped>
<style lang="scss" scoped>
h4 {
.b-icon {
font-size: 0.9rem;
vertical-align: middle !important;
position: relative;
top: 3px;
color: #007fe0;
&:hover {
color: darken(#007fe0, 10%);
}
}
}
</style> </style>
<script> <script>
import {types} from "@/mutation_types"; import {types} from "@/mutation_types";
import Skeleton from "@/components/Skeleton.vue";
export default { export default {
components: {
Skeleton
},
created() { created() {
this.$store.dispatch(types.PRELOAD_CHARACTER) this.$store.dispatch(types.PRELOAD_CHARACTER)
.then(() => { .then(() => {
@@ -37,6 +64,12 @@ export default {
}, },
characters() { characters() {
return this.$store.state.characters; return this.$store.state.characters;
},
breadcrumbs() {
return [
{text: 'Home', to: {name: 'Home'}},
{text: 'Characters', active: true}
]
} }
} }
} }