refactor: change main scrollbar to perfect-scrollbar

Signed-off-by: Stefan Dej <meteyou@gmail.com>
This commit is contained in:
Stefan Dej 2021-10-31 01:54:51 +02:00
parent 581cd2b306
commit 03b8b591b4
2 changed files with 13 additions and 3 deletions

View File

@ -15,6 +15,10 @@
.v-btn:not(.v-btn--outlined).primary { .v-btn:not(.v-btn--outlined).primary {
color: var(--v-btn-text-primary) color: var(--v-btn-text-primary)
} }
.main-content-scrollbar {
height: calc(100vh - 64px);
}
</style> </style>
<template> <template>
@ -24,9 +28,11 @@
<the-topbar></the-topbar> <the-topbar></the-topbar>
<v-main id="content" :style="mainStyle"> <v-main id="content" :style="mainStyle">
<v-container fluid id="page-container" class="container px-3 px-sm-6 py-sm-6 mx-auto"> <perfect-scrollbar class="main-content-scrollbar" :options="{ suppressScrollX: true }">
<router-view></router-view> <v-container fluid id="page-container" class="container px-3 px-sm-6 py-sm-6 mx-auto">
</v-container> <router-view></router-view>
</v-container>
</perfect-scrollbar>
</v-main> </v-main>
<the-select-printer-dialog v-if="remoteMode"></the-select-printer-dialog> <the-select-printer-dialog v-if="remoteMode"></the-select-printer-dialog>
<the-connecting-dialog v-else></the-connecting-dialog> <the-connecting-dialog v-else></the-connecting-dialog>

View File

@ -1,3 +1,7 @@
html {
overflow: auto;
}
body { body {
background: #121212; background: #121212;
} }