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

router.beforeEach clarifying comment, reduce XL viewport SeasonList/AIS-Search columns, add Skeleton outer skeleton with padding + animation speed adjustments, begin reformatting files to preferred format

Browse Source
This commit is contained in:
Xevion
2020-09-12 16:36:22 -05:00
parent e6844df2d7
commit 67f8c5ed08
5 changed files with 22 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/App.vue
View File

@@ -35,7 +35,7 @@
>
<b-container :fluid="true" class="py-2 px-lg-5 px-md-4">
<b-row class="my-3 pl-1" cols="12">
<b-col lg="3" xl="3" md="12">
<b-col lg="3" xl="2" md="12">
<ais-search-box
@keydown.native="showResults"
ref="searchbox"
@@ -44,7 +44,7 @@
</b-col>
</b-row>
<b-row align-h="start" cols="12">
<b-col lg="3" xl="3" md="12">
<b-col lg="3" xl="2" md="12">
<SeasonList></SeasonList>
</b-col>
<b-col lg="8" xl="7" md="12" class="pt-md-2 pt-lg-0">

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

@@ -1,15 +1,8 @@
<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' : ''
}`"
<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 }}

36
client/src/components/SeasonList.vue
View File

@@ -1,15 +1,7 @@
<template>
<div class="accordion" role="tablist">
<b-card
class="season-item"
v-for="season in seasons"
:key="season.season_id"
>
<b-card-header
header-tag="header"
role="tab"
v-b-toggle="'accordion-' + season.season_id"
>
<b-card class="season-item" v-for="season in seasons" :key="season.season_id">
<b-card-header header-tag="header" role="tab" v-b-toggle="'accordion-' + season.season_id">
<a class="no-link align-items-center justify-content-between d-flex" v-if="isPreloaded">
<h5 class="mb-0 pu-0 mu-0 season-title">
Season {{ season.season_id }}
@@ -18,30 +10,18 @@
</a>
<Skeleton v-else></Skeleton>
</b-card-header>
<b-collapse
:id="'accordion-' + season.season_id"
accordion="accordion-season-list"
>
<b-collapse :id="'accordion-' + season.season_id" accordion="accordion-season-list">
<b-card-body class="h-100 px-0">
<b-list-group>
<template v-for="(episode, index) in seasons[season.season_id - 1].episodes">
<template v-if="isPreloaded">
<b-list-group-item
class="no-link episode-item"
:id="`s-${season.season_id}-ep-${episode.episode_id}`"
:key="`rl-${episode.episode_id}`"
:to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }"
>
<b-list-group-item class="no-link episode-item" :key="`rl-${episode.episode_id}`"
:to="{name: 'Episode', params: { season: season.season_id, episode: episode.episode_id }, }"
:id="`s-${season.season_id}-ep-${episode.episode_id}`">
Episode {{ episode.episode_id }} - "{{ episode.title }}"
</b-list-group-item>
<b-popover
show="true"
:key="`bpop-${episode.episode_id}`"
delay="25"
:target="`s-${season.season_id}-ep-${episode.episode_id}`"
triggers="hover"
placement="right"
>
<b-popover show="true" :key="`bpop-${episode.episode_id}`" triggers="hover"
placement="right" delay="25" :target="`s-${season.season_id}-ep-${episode.episode_id}`">
<template v-slot:title>
{{ episode.title }}
</template>

11
client/src/components/Skeleton.vue
View File

@@ -1,11 +1,13 @@
<template>
<div class="skeleton"></div>
<div class="outer-skeleton">
<div class="skeleton"></div>
</div>
</template>
<style lang="scss" scoped>
.skeleton {
background-color: $grey-4;
background-image: linear-gradient(90deg, $grey-4, $grey-6, $grey-4);
animation: 1.5s ease-in-out 0s infinite normal none running SkeletonLoading;
animation: 1.25s ease-in-out 0s infinite normal none running SkeletonLoading;
width: 100%;
display: block;
line-height: 1;
@@ -14,9 +16,12 @@
border-radius: 3px;
}
.outer-skeleton {
padding: 0.2em 0;
}
@-webkit-keyframes SkeletonLoading {
0% {
background-position: -200px 0;
background-position: 0px 0;
}
100% {
background-position: calc(200px + 100%) 0;

1
client/src/main.js
View File

@@ -16,6 +16,7 @@ Vue.use(VueClipboard)
Vue.config.productionTip = false;
// Prevent invalid episodes, seasons and characters from being accessed
router.beforeEach((to, from, next) => {
// eslint-disable-next-line no-constant-condition
if (from.name !== null && to.name === "Character" && false) next(false);