From e965d6302c576d662cd08d25a645ae30d437dc99 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Thu, 23 Jan 2020 17:56:48 +0800
Subject: [PATCH] refactor: carve out code to compute card width

---
 komga-webui/src/functions/grid-utilities.ts | 10 ++++++++++
 komga-webui/src/views/BrowseLibraries.vue   | 12 ++----------
 komga-webui/src/views/BrowseSeries.vue      | 12 ++----------
 3 files changed, 14 insertions(+), 20 deletions(-)
 create mode 100644 komga-webui/src/functions/grid-utilities.ts

diff --git a/komga-webui/src/functions/grid-utilities.ts b/komga-webui/src/functions/grid-utilities.ts
new file mode 100644
index 000000000..64b62f14a
--- /dev/null
+++ b/komga-webui/src/functions/grid-utilities.ts
@@ -0,0 +1,10 @@
+export function computeCardWidth (width: number, breakpoint: string, cardPadding: number = 16): number {
+  switch (breakpoint) {
+    case 'xs':
+      return (width - (cardPadding * 2)) / 2
+    case 'sm':
+      return (width - (cardPadding * 3)) / 3
+    default:
+      return 150
+  }
+}
diff --git a/komga-webui/src/views/BrowseLibraries.vue b/komga-webui/src/views/BrowseLibraries.vue
index e1e3beafe..a33c83740 100644
--- a/komga-webui/src/views/BrowseLibraries.vue
+++ b/komga-webui/src/views/BrowseLibraries.vue
@@ -86,6 +86,7 @@ import EmptyState from '@/components/EmptyState.vue'
 import LibraryActionsMenu from '@/components/LibraryActionsMenu.vue'
 import SortMenuButton from '@/components/SortMenuButton.vue'
 import ToolbarSticky from '@/components/ToolbarSticky.vue'
+import { computeCardWidth } from '@/functions/grid-utilities'
 import { parseQuerySort } from '@/functions/query-params'
 import { LoadState, SeriesStatus } from '@/types/common'
 import Vue from 'vue'
@@ -158,16 +159,7 @@ export default Vue.extend({
   methods: {
     updateCardWidth () {
       const content = this.$refs.content as HTMLElement
-      switch (this.$vuetify.breakpoint.name) {
-        case 'xs':
-          this.cardWidth = (content.clientWidth - (16 * 2)) / 2
-          break
-        case 'sm':
-          this.cardWidth = (content.clientWidth - (16 * 3)) / 3
-          break
-        default:
-          this.cardWidth = 150
-      }
+      this.cardWidth = computeCardWidth(content.clientWidth, this.$vuetify.breakpoint.name)
     },
     parseQuerySortOrDefault (querySort: any): SortActive {
       return parseQuerySort(querySort, this.sortOptions) || this.$_.clone(this.sortDefault)
diff --git a/komga-webui/src/views/BrowseSeries.vue b/komga-webui/src/views/BrowseSeries.vue
index 1129b6f10..32d70dc05 100644
--- a/komga-webui/src/views/BrowseSeries.vue
+++ b/komga-webui/src/views/BrowseSeries.vue
@@ -91,6 +91,7 @@ import Badge from '@/components/Badge.vue'
 import CardBook from '@/components/CardBook.vue'
 import SortMenuButton from '@/components/SortMenuButton.vue'
 import ToolbarSticky from '@/components/ToolbarSticky.vue'
+import { computeCardWidth } from '@/functions/grid-utilities'
 import { parseQuerySort } from '@/functions/query-params'
 import { seriesThumbnailUrl } from '@/functions/urls'
 import { LoadState } from '@/types/common'
@@ -165,16 +166,7 @@ export default Vue.extend({
   methods: {
     updateCardWidth () {
       const content = this.$refs.content as HTMLElement
-      switch (this.$vuetify.breakpoint.name) {
-        case 'xs':
-          this.cardWidth = (content.clientWidth - (16 * 2)) / 2
-          break
-        case 'sm':
-          this.cardWidth = (content.clientWidth - (16 * 3)) / 3
-          break
-        default:
-          this.cardWidth = 150
-      }
+      this.cardWidth = computeCardWidth(content.clientWidth, this.$vuetify.breakpoint.name)
     },
     parseQuerySortOrDefault (querySort: any): SortActive {
       return parseQuerySort(querySort, this.sortOptions) || this.$_.clone(this.sortDefault)