From 7b1ba0b0739095f9301f12492a2a36c840a77b42 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Sun, 26 Sep 2021 18:52:16 +0800 Subject: [PATCH] fix: improve overview breakpoints --- packages/client/internals/SlidesOverview.vue | 6 +++--- packages/client/state/index.ts | 5 ++++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/client/internals/SlidesOverview.vue b/packages/client/internals/SlidesOverview.vue index 5376d4e8f8..8bde1b72dc 100644 --- a/packages/client/internals/SlidesOverview.vue +++ b/packages/client/internals/SlidesOverview.vue @@ -22,15 +22,15 @@ function go(page: number) { close() } +const xs = breakpoints.smaller('xs') const sm = breakpoints.smaller('sm') -const md = breakpoints.smaller('md') const padding = 4 * 16 * 2 const gap = 2 * 16 const cardWidth = computed(() => { - if (sm.value) + if (xs.value) return windowSize.width.value - padding - else if (md.value) + else if (sm.value) return (windowSize.width.value - padding - gap) / 2 return 300 }) diff --git a/packages/client/state/index.ts b/packages/client/state/index.ts index 5da384a468..b8343a9aa9 100644 --- a/packages/client/state/index.ts +++ b/packages/client/state/index.ts @@ -8,7 +8,10 @@ export const showInfoDialog = ref(false) export const showGotoDialog = ref(false) export const shortcutsEnabled = ref(true) -export const breakpoints = useBreakpoints(breakpointsTailwind) +export const breakpoints = useBreakpoints({ + xs: 460, + ...breakpointsTailwind, +}) export const windowSize = useWindowSize() export const magicKeys = useMagicKeys() export const isScreenVertical = computed(() => windowSize.height.value - windowSize.width.value / slideAspect > 180)