Add responsive limit for displayed items on personalized shelves on home page

This commit is contained in:
Greg Lorenzen 2024-07-14 05:25:56 +00:00 committed by Greg Lorenzen
parent 43b7ccd61a
commit 618e69775c

View File

@ -167,8 +167,19 @@ export default {
this.loaded = true
},
async fetchCategories() {
// Sets the limit for the number of items to be displayed based on the viewport width.
const viewportWidth = window.innerWidth
let limit
if (viewportWidth >= 3240 && viewportWidth <= 3440) {
limit = 15
} else if (viewportWidth >= 2880 && viewportWidth < 3240) {
limit = 12
}
const limitQuery = limit ? `&limit=${limit}` : ''
const categories = await this.$axios
.$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete,share`)
.$get(`/api/libraries/${this.currentLibraryId}/personalized?include=rssfeed,numEpisodesIncomplete,share${limitQuery}`)
.then((data) => {
return data
})