copy Character breadcrumb skeleton, apply font to card title

This commit is contained in:
Xevion
2020-09-14 18:04:08 -05:00
parent 427d4c6b4f
commit 8ed65e7c2d
2 changed files with 19 additions and 3 deletions

View File

@@ -1,6 +1,9 @@
<template> <template>
<div> <div>
<b-breadcrumb :items="breadcrumbs"></b-breadcrumb> <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> <b-card>
<h4 v-if="character">{{ this.$route.params.character }}</h4> <h4 v-if="character">{{ this.$route.params.character }}</h4>
<Skeleton v-else style="max-width: 30%"></Skeleton> <Skeleton v-else style="max-width: 30%"></Skeleton>
@@ -8,6 +11,19 @@
</div> </div>
</template> </template>
<style lang="scss" scoped>
.breadcrumb-skeleton {
background-color: $grey-3;
height: 48px;
& > .card-body {
padding: 0 0 0 1em;
display: flex;
align-items: center;
}
}
</style>
<script> <script>
import Skeleton from './Skeleton.vue'; import Skeleton from './Skeleton.vue';

View File

@@ -6,7 +6,7 @@
</b-card> </b-card>
<b-card class="mb-4"> <b-card class="mb-4">
<template v-if="ready"> <template v-if="ready">
<h3>"{{ episode.title }}"</h3> <h3 class="card-title">"{{ episode.title }}"</h3>
<span>{{ episode.description }}</span> <span>{{ episode.description }}</span>
<CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList> <CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList>
</template> </template>
@@ -48,7 +48,7 @@
<style lang="scss"> <style lang="scss">
.card-title { .card-title {
font-family: "Montserrat", sans-serif; font-family: "Montserrat", sans-serif;
font-weight: 600; font-weight: 500;
} }
.deleted-scene { .deleted-scene {