| 1 | <template> |
| 2 | <div class="page flex grow flex-col" :class="{ 'limit-height': licenseKey }"> |
| 3 | <LicenseViewer |
| 4 | class="grow" |
| 5 | :class="{ 'overflow-hidden': licenseKey }" |
| 6 | @license-key-loaded="licenseKey = $event" |
| 7 | /> |
| 8 | </div> |
| 9 | </template> |
| 10 | |
| 11 | <script setup lang="ts"> |
| 12 | import type { LicenseKey } from "@/types/license.d" |
| 13 | import { ref } from "vue" |
| 14 | import LicenseViewer from "@/components/license/LicenseViewer.vue" |
| 15 | |
| 16 | const licenseKey = ref<LicenseKey | undefined>(undefined) |
| 17 | </script> |
| 18 | |
| 19 | <style lang="scss" scoped> |
| 20 | .page { |
| 21 | &.limit-height { |
| 22 | @media (min-width: 801px) { |
| 23 | max-height: calc(100dvh - var(--toolbar-height) - var(--view-padding) - var(--header-bar-height) - 66px); |
| 24 | overflow: hidden; |
| 25 | } |
| 26 | } |
| 27 | } |
| 28 | </style> |