xevion/the-office
1
0
Fork 0
mirror of https://github.com/Xevion/the-office.git synced 2025-12-06 05:16:47 -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:
this.character !== null && this.character !== undefined
? this.character.name
? this.character.name || this.$route.params.character
: this.$route.params.character,
active: true,
},

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

@@ -1,29 +1,56 @@
<template>
<b-card v-if="ready">
<b-list-group>
<b-list-group-item v-for="(character, character_id) in characters" :key="character_id">
<b-row align-v="start" align-content="start">
<b-col cols="5" md="4" lg="4" xl="3">
<b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
</b-col>
<b-col>
<h4>
{{ character.name || character_id }}
</h4>
<p class="pl-3">{{ character.summary }}</p>
</b-col>
</b-row>
</b-list-group-item>
</b-list-group>
</b-card>
<div>
<b-breadcrumb v-if="ready" :items="breadcrumbs"></b-breadcrumb>
<b-card v-else class="breadcrumb-skeleton mb-3">
<Skeleton style="width: 40%;"></Skeleton>
</b-card>
<b-card v-if="ready">
<b-list-group>
<b-list-group-item v-for="(character, character_id) in characters" :key="character_id">
<b-row align-v="start" align-content="start">
<b-col cols="5" md="4" lg="4" xl="3">
<b-img-lazy fluid-grow class="px-2" src="https://via.placeholder.com/250"></b-img-lazy>
</b-col>
<b-col>
<h4>
{{ character.name || character_id }}
<router-link class="no-link"
: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>
<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>
<script>
import {types} from "@/mutation_types";
import Skeleton from "@/components/Skeleton.vue";
export default {
components: {
Skeleton
},
created() {
this.$store.dispatch(types.PRELOAD_CHARACTER)
.then(() => {
@@ -37,6 +64,12 @@ export default {
},
characters() {
return this.$store.state.characters;
},
breadcrumbs() {
return [
{text: 'Home', to: {name: 'Home'}},
{text: 'Characters', active: true}
]
}
}
}