From 4d91572379767676d82b5c8ea140f2c495b91e35 Mon Sep 17 00:00:00 2001 From: Mike Lei Date: Wed, 14 Dec 2022 22:13:12 +0000 Subject: [PATCH] fix(screenshot): fix the layout of screenshot list in different modes --- .../player/screenshot/VideoScreenshotContainer.vue | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/registry/lib/components/video/player/screenshot/VideoScreenshotContainer.vue b/registry/lib/components/video/player/screenshot/VideoScreenshotContainer.vue index 372e9678b..05c5e9173 100644 --- a/registry/lib/components/video/player/screenshot/VideoScreenshotContainer.vue +++ b/registry/lib/components/video/player/screenshot/VideoScreenshotContainer.vue @@ -101,13 +101,17 @@ export default Vue.extend({ margin-right: 4px; } } + .bpx-player-container[data-screen='web'] &, + .bpx-player-container[data-screen='full'] & { + bottom: calc(73px + var(--thumbnail-margin-vertical)); + } } .video-screenshot-list { position: fixed; - top: 0; + top: 64px; right: 0; margin: var(--thumbnail-margin-vertical) var(--thumbnail-margin-horizontal); - max-height: calc(100% - 3 * var(--thumbnail-margin-vertical) - 37px); + max-height: calc(100% - 3 * var(--thumbnail-margin-vertical) - 98px); width: var(--screenshot-list-width); background-color: #000c; border-radius: 8px; @@ -124,6 +128,11 @@ export default Vue.extend({ opacity: 0; transform: translateX(var(--screenshot-width)); } + .bpx-player-container[data-screen='web'] &, + .bpx-player-container[data-screen='full'] & { + top: 0; + max-height: calc(100% - 3 * var(--thumbnail-margin-vertical) - 107px); + } } }