Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-21 07:56:57 +01:00
Code Issues Projects Releases Wiki Activity

refactor: carve out code to compute card width

Browse source
This commit is contained in:
Gauthier Roebroeck 2020-01-23 17:56:48 +08:00
parent 4787582241
commit e965d6302c
3 changed files with 14 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
komga-webui/src/functions/grid-utilities.ts Normal file
View file

@ -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
}
}

12
komga-webui/src/views/BrowseLibraries.vue
View file

@ -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)

12
komga-webui/src/views/BrowseSeries.vue
View file

@ -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)