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

fix SeasonList accordion item/router link hitbox boundaries for more reliable clicks

Browse Source
This commit is contained in:
Xevion
2020-09-04 18:02:52 -05:00
parent ba19e8be5b
commit 84715066ac
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,8 @@
<template> <template>
<div class="accordion" role="tablist"> <div class="accordion" role="tablist">
<b-card class="season-item" v-for="season in seasons" :key="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"> <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" <a class="no-link align-items-center justify-content-between d-flex">
v-b-toggle="'accordion-' + season.season_id">
<h5 class="mb-0 pu-0 mu-0 season-title"> <h5 class="mb-0 pu-0 mu-0 season-title">
Season {{ season.season_id }} Season {{ season.season_id }}
</h5> </h5>
@@ -14,13 +13,11 @@
<b-card-body class="h-100 px-0"> <b-card-body class="h-100 px-0">
<b-list-group> <b-list-group>
<template v-for="episode in season.episodes"> <template v-for="episode in season.episodes">
<b-list-group-item class="episode-item" <b-list-group-item class="no-link episode-item"
:id="`s-${season.season_id}-ep-${episode.episode_id}`" :id="`s-${season.season_id}-ep-${episode.episode_id}`"
:key="`rl-${episode.episode_id}`"> :key="`rl-${episode.episode_id}`"
<router-link class="no-link" :to="`/${season.season_id}/${episode.episode_id}`">
:to="`/${season.season_id}/${episode.episode_id}`">
Episode {{ episode.episode_id }} - "{{ episode.title }}" Episode {{ episode.episode_id }} - "{{ episode.title }}"
</router-link>
</b-list-group-item> </b-list-group-item>
<b-popover show :key="`bpop-${episode.episode_id}`" variant="secondary" delay="25" <b-popover show :key="`bpop-${episode.episode_id}`" variant="secondary" delay="25"
:target="`s-${season.season_id}-ep-${episode.episode_id}`" :target="`s-${season.season_id}-ep-${episode.episode_id}`"
@@ -71,6 +68,15 @@
} }
// Dark theme popover, arrow-right fix // 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 { .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
border-right-color: darken($grey-3, 2%); border-right-color: darken($grey-3, 2%);
} }