Merged in feature/VBV-576-preview-overlap (pull request #228)

Use different content height for preview

Approved-by: Daniel Egger
This commit is contained in:
Christian Cueni 2023-11-02 16:01:42 +00:00 committed by Daniel Egger
commit fbc97195a4
1 changed files with 13 additions and 2 deletions

View File

@ -14,7 +14,13 @@ defineEmits(["exit"]);
<div> <div>
<div class="absolute bottom-0 top-0 w-full bg-white"> <div class="absolute bottom-0 top-0 w-full bg-white">
<CoursePreviewBar v-if="courseSessionsStore.hasCourseSessionPreview" /> <CoursePreviewBar v-if="courseSessionsStore.hasCourseSessionPreview" />
<div class="h-content overflow-y-auto"> <div
:class="{
'h-content': !courseSessionsStore.hasCourseSessionPreview,
'h-content-preview': courseSessionsStore.hasCourseSessionPreview,
}"
class="overflow-y-auto"
>
<header <header
class="relative flex h-12 w-full items-center justify-between bg-white px-4 lg:h-16 lg:px-8" class="relative flex h-12 w-full items-center justify-between bg-white px-4 lg:h-16 lg:px-8"
> >
@ -34,12 +40,17 @@ defineEmits(["exit"]);
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
$nav-height: 86px; $nav-height: 86px; // navigation height
$nav-height-preview: $nav-height + 64px; //navigation height + preview bar height
.h-content { .h-content {
height: calc(100vh - $nav-height); height: calc(100vh - $nav-height);
} }
.h-content-preview {
height: calc(100vh - $nav-height-preview);
}
.nav { .nav {
height: $nav-height; height: $nav-height;
} }