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

change all router link to= props into object based references, fix unfinished sceneIndex var refactor, separate quoteList href/hover highlights

Browse Source
This commit is contained in:
Xevion
2020-09-05 20:23:05 -05:00
parent b5a3499ef1
commit 62f4019666
5 changed files with 101 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,7 +3,7 @@
<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="`/character/${character.id}`"
:to="{ name: 'Character', params: { character: character.id } }"
>
{{ character.name }}
<b-badge class="ml-1">{{ character.appearances}}</b-badge>

4
client/src/components/Episode.vue
View File

@@ -8,7 +8,7 @@
<CharacterList v-if="episode && episode.characters" :characters="episode.characters"></CharacterList>
</b-card>
<div v-if="episode != null">
<b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`" :id="scene_index"
<b-card v-for="(scene, sceneIndex) in episode.scenes" :key="`scene-${sceneIndex}`"
class="mb-1" body-class="p-0">
<b-card-text class="my-2">
<QuoteList :quotes="scene.quotes" :sceneIndex="sceneIndex"></QuoteList>
@@ -61,7 +61,7 @@ ${this.$route.params.season}/${this.$route.params.episode}/`;
if (this.$route.hash) {
this.$nextTick(() => {
const section = document.getElementById(this.$route.hash.substring(1));
this.$scrollTo(section, 500, { easing: 'ease-in', offset: 0 });
this.$scrollTo(section, 500, { easing: 'ease-in' });
});
}
})

7
client/src/components/QuoteList.vue
View File

@@ -22,9 +22,12 @@
.quote-list > tr {
white-space: nowrap;
&:hover, &.highlight {
&:hover {
background-color: $grey-4;
}
&.highlight {
background-color: $grey-5 !important;
}
}
.quote-text {
@@ -64,7 +67,7 @@ export default {
},
quotes: {
required: true,
type: Object,
type: Array,
},
},
methods: {

3
client/src/components/SearchResult.vue
View File

@@ -31,7 +31,8 @@
</tr>
</table>
<router-link v-if="expanded" class="no-link search-result-link w-100 text-muted mb-2 ml-2"
:to="`/${item.season}/${item.episode_rel}#${item.section_rel - 1}-${item.quote_rel - 1}`">
:to="{ name: 'Episode', params: { season: item.season, episode: item.episode_rel },
hash: `#${item.section_rel - 1}-${item.quote_rel - 1}` }">
Season {{ item.season }} Episode {{ item.episode_rel }} Scene {{ item.section_rel }}
</router-link>
</b-card-text>

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

@@ -16,8 +16,9 @@
<b-list-group-item class="no-link episode-item"
:id="`s-${season.season_id}-ep-${episode.episode_id}`"
:key="`rl-${episode.episode_id}`"
:to="`/${season.season_id}/${episode.episode_id}`">
Episode {{ episode.episode_id }} - "{{ episode.title }}"
:to="{ name: 'Episode', params: { season: season.season_id,
episode: episode.episode_id} }">
Episode {{ episode.episode_id }} - "{{ episode.title }}"
</b-list-group-item>
<b-popover show :key="`bpop-${episode.episode_id}`" variant="secondary" delay="25"
:target="`s-${season.season_id}-ep-${episode.episode_id}`"
@@ -34,97 +35,106 @@
</template>
<style lang="scss">
@import "../assets/scss/_variables";
@import "../assets/scss/_variables";
// Make all season cards 'clickable'
.season-item > .card-body > .card-header {
cursor: pointer;
// Make all season cards 'clickable'
.season-item > .card-body > .card-header {
cursor: pointer;
}
// Make all chevron icons rotate 180 when clicked
.bi-chevron-down {
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.not-collapsed > .bi-chevron-down {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
// White popovers use white background on top left/right corners, this disables it.
.b-popover {
background: transparent;
}
// Dark theme popover
.popover-header {
background-color: darken($grey-2, 2.1%);
border-color: $grey-1;
color: $grey-11;
}
// Dark theme popover, arrow-right fix
.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
border-top-color: darken($grey-3, 2%);
}
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
border-bottom-color: darken($grey-3, 2%);
}
.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
border-left-color: darken($grey-3, 2%);
}
.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
border-right-color: darken($grey-3, 2%);
}
.season-item .list-group-item:first-child {
border-radius: 0;
}
// Dark theme popover body
.popover-body {
color: $grey-10;
background-color: darken($grey-3, 2%);
}
.season-title {
color: $grey-8;
cursor: pointer;
}
// Season Card Background Color
.season-item {
.card-body {
padding: 0;
}
// Make all chevron icons rotate 180 when clicked
.bi-chevron-down {
-moz-transition: all 0.25s ease-in-out;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
.card-header {
background-color: darken($grey-2, 1.5%);
color: $grey-9;
border-bottom: 1px solid $grey-0;
font-family: 'Montserrat', sans-serif;
}
}
.not-collapsed > .bi-chevron-down {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.episode-item {
border-color: $grey-2;
background-color: darken($grey-3, 2%);
color: $grey-8 !important;
border-left-width: 0;
border-right-width: 0;
// White popovers use white background on top left/right corners, this disables it.
.b-popover {
background: transparent;
&:hover, &:active, &:focus {
background-color: darken($grey-1, 0.75%);
}
}
// Dark theme popover
.popover-header {
background-color: darken($grey-2, 2.1%);
border-color: $grey-1;
color: $grey-11;
}
.no-link {
color: inherit;
text-decoration: none;
// Dark theme popover, arrow-right fix
.bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
border-top-color: darken($grey-3, 2%);
}
.bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
border-bottom-color: darken($grey-3, 2%);
}
.bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
border-left-color: darken($grey-3, 2%);
}
.bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
border-right-color: darken($grey-3, 2%);
}
.season-item .list-group-item:first-child {
border-radius: 0;
}
// Dark theme popover body
.popover-body {
color: $grey-10;
background-color: darken($grey-3, 2%);
}
.season-title { color: $grey-8; cursor: pointer; }
// Season Card Background Color
.season-item {
.card-body {
padding: 0;
}
.card-header {
background-color: darken($grey-2, 1.5%);
color: $grey-9;
border-bottom: 1px solid $grey-0;
font-family: 'Montserrat', sans-serif;
}
}
.episode-item {
border-color: $grey-2;
background-color: darken($grey-3, 2%);
color: $grey-8 !important;
border-left-width: 0;
border-right-width: 0;
&:hover, &:active, &:focus { background-color: darken($grey-1, 0.75%); }
}
.no-link {
&:hover {
color: inherit;
text-decoration: none;
&:hover {
color: inherit;
text-decoration: none;
}
}
}
</style>
<script>