Fix:Render bookshelf on small screens

components/bookshelf/LazyBookshelf.vue

@@ -173,6 +173,7 @@ export default {
         if (!this.initialized) {
           this.initialized = true
           this.totalEntities = payload.total
+          console.log('Entities per shelf', this.entitiesPerShelf)
           this.totalShelves = Math.ceil(this.totalEntities / this.entitiesPerShelf)
           this.entities = new Array(this.totalEntities)
           this.$eventBus.$emit('bookshelf-total-entities', this.totalEntities)
@@ -309,7 +310,7 @@ export default {
       var { clientHeight, clientWidth } = bookshelf
       this.bookshelfHeight = clientHeight
       this.bookshelfWidth = clientWidth
-      this.entitiesPerShelf = this.showBookshelfListView ? 1 : Math.floor((this.bookshelfWidth - 16) / this.totalEntityCardWidth)
+      this.entitiesPerShelf = Math.max(1, this.showBookshelfListView ? 1 : Math.floor((this.bookshelfWidth - 16) / this.totalEntityCardWidth))
       this.shelvesPerPage = Math.ceil(this.bookshelfHeight / this.shelfHeight) + 2
       this.bookshelfMarginLeft = (this.bookshelfWidth - this.entitiesPerShelf * this.totalEntityCardWidth) / 2
 

components/cards/LazySeriesCard.vue

@@ -61,10 +61,6 @@ export default {
     },
     seriesId() {
       return this.series ? this.series.id : null
-    },
-    hasValidCovers() {
-      var validCovers = this.books.map((bookItem) => bookItem.book.cover)
-      return !!validCovers.length
     }
   },
   methods: {

pages/bookshelf/series/index.vue

@@ -5,94 +5,9 @@
 <script>
 export default {
   data() {
-    return {
+    return {}
-      groupsPerRow: 2,
-      booksPerRow: 3,
-      selectedSeriesName: null
-    }
-  },
-  watch: {
-    routeQuery: {
-      handler(newVal) {
-        if (newVal && newVal.series) {
-          console.log('Select series')
-          this.selectedSeriesName = this.$decode(newVal.series)
-        } else {
-          this.selectedSeriesName = null
-        }
-      }
-    }
-  },
-  computed: {
-    routeQuery() {
-      return this.$route.query
-    },
-    series() {
-      return this.$store.getters['audiobooks/getSeriesGroups']()
-    },
-    seriesShelves() {
-      var shelves = []
-      var shelf = {
-        id: 0,
-        groups: []
-      }
-      for (let i = 0; i < this.series.length; i++) {
-        var shelfNum = Math.floor((i + 1) / this.groupsPerRow)
-        shelf.id = shelfNum
-        shelf.groups.push(this.series[i])
-
-        if ((i + 1) % this.groupsPerRow === 0) {
-          shelves.push(shelf)
-          shelf = {
-            id: 0,
-            groups: []
-          }
-        }
-      }
-      if (shelf.groups.length) {
-        shelves.push(shelf)
-      }
-      return shelves
-    },
-    selectedSeries() {
-      if (!this.selectedSeriesName) return null
-      return this.series.find((s) => s.name === this.selectedSeriesName)
-    },
-    seriesBooksShelves() {
-      if (!this.selectedSeries) return []
-      var seriesBooks = this.selectedSeries.books || []
-
-      var shelves = []
-      var shelf = {
-        id: 0,
-        books: []
-      }
-      for (let i = 0; i < seriesBooks.length; i++) {
-        var shelfNum = Math.floor((i + 1) / this.booksPerRow)
-        shelf.id = shelfNum
-        shelf.books.push(seriesBooks[i])
-
-        if ((i + 1) % this.booksPerRow === 0) {
-          shelves.push(shelf)
-          shelf = {
-            id: 0,
-            books: []
-          }
-        }
-      }
-      if (shelf.books.length) {
-        shelves.push(shelf)
-      }
-      return shelves
-    },
-    shelves() {
-      if (this.selectedSeries) {
-        return this.seriesBooksShelves
-      } else {
-        return this.seriesShelves
-      }
-    }
   },
+  computed: {},
   methods: {},
   mounted() {}
 }