boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fixed actors and movies pagination scroll.

This commit is contained in:
DebaucheryLibrarian 2021-08-23 01:44:30 +02:00
parent a77d8f4cea
commit 1628e41d09
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/components/actors/actors.vue
View File

@ -237,7 +237,10 @@
<SearchBar :placeholder="`Search ${totalCount} actors`" /> <SearchBar :placeholder="`Search ${totalCount} actors`" />
</nav> </nav>
<div class="tiles"> <div
ref="tiles"
class="tiles"
>
<Actor <Actor
v-for="actor in actors" v-for="actor in actors"
:key="`actor-${actor.id}`" :key="`actor-${actor.id}`"
@ -325,8 +328,7 @@ async function fetchActors(scroll) {
this.topCountries = [...(this.country && !topCountries.includes(this.country) ? [this.country] : []), ...topCountries].map(alpha2 => countriesByAlpha2[alpha2]); this.topCountries = [...(this.country && !topCountries.includes(this.country) ? [this.country] : []), ...topCountries].map(alpha2 => countriesByAlpha2[alpha2]);
if (scroll) { if (scroll) {
this.$refs.content.scrollTop = 0; this.$refs.tiles?.scrollIntoView();
// this.$refs.filter?.scrollIntoView();
} }
} }
@ -440,6 +442,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
overflow-y: auto;
} }
.tiles { .tiles {

13
assets/components/releases/movies.vue
View File

@ -3,7 +3,10 @@
<div class="content-inner"> <div class="content-inner">
<SearchBar :placeholder="`Search ${totalCount} movies`" /> <SearchBar :placeholder="`Search ${totalCount} movies`" />
<div class="tiles"> <div
ref="tiles"
class="tiles"
>
<MovieTile <MovieTile
v-for="movie in movies" v-for="movie in movies"
:key="`movie-${movie.id}`" :key="`movie-${movie.id}`"
@ -42,6 +45,8 @@ async function fetchMovies() {
this.movies = movies; this.movies = movies;
this.totalCount = totalCount; this.totalCount = totalCount;
this.$refs.tiles.scrollIntoView();
} }
async function searchMovies() { async function searchMovies() {
@ -71,7 +76,7 @@ export default {
return { return {
movies: [], movies: [],
totalCount: 0, totalCount: 0,
limit: 30, limit: 5,
}; };
}, },
watch: { watch: {
@ -99,14 +104,14 @@ export default {
} }
.search { .search {
margin: 1rem 0; margin: 1rem 0 0 0;
} }
.tiles { .tiles {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr)); grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
grid-gap: 1rem; grid-gap: 1rem;
margin: 0 0 1rem 0; padding: 1rem 0;
} }
@media(max-width: $breakpoint-kilo) { @media(max-width: $breakpoint-kilo) {