From 618e69775c04da8211e9f20a5c7a58b344ac9d93 Mon Sep 17 00:00:00 2001 From: Greg Lorenzen Date: Sun, 14 Jul 2024 05:25:56 +0000 Subject: [PATCH 1/2] Add responsive limit for displayed items on personalized shelves on home page --- client/components/app/BookShelfCategorized.vue | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/client/components/app/BookShelfCategorized.vue b/client/components/app/BookShelfCategorized.vue index c8a70a2a09..23f9bc67f9 100644 --- a/client/components/app/BookShelfCategorized.vue +++ b/client/components/app/BookShelfCategorized.vue @@ -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 }) From ea11153032fc3ef0113ee0e9845253e326b3e2e1 Mon Sep 17 00:00:00 2001 From: Greg Lorenzen Date: Mon, 15 Jul 2024 15:15:06 +0000 Subject: [PATCH 2/2] Update responsive limit for displayed items on personalized shelves on home page --- client/components/app/BookShelfCategorized.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/components/app/BookShelfCategorized.vue b/client/components/app/BookShelfCategorized.vue index 23f9bc67f9..d7d850d5c1 100644 --- a/client/components/app/BookShelfCategorized.vue +++ b/client/components/app/BookShelfCategorized.vue @@ -170,7 +170,7 @@ export default { // 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) { + if (viewportWidth >= 3240) { limit = 15 } else if (viewportWidth >= 2880 && viewportWidth < 3240) { limit = 12