mirror of
https://github.com/Xevion/the-office.git
synced 2025-12-16 14:13:36 -06:00
copy Character breadcrumb skeleton, apply font to card title
This commit is contained in:
@@ -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';
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user