fix(ui): fix navbar cover

witnet · Mar 7, 2022 · 92ed6bb · 92ed6bb
1 parent 96991b1
commit 92ed6bb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/packages/ui/components/MainSection.vue b/packages/ui/components/MainSection.vue
@@ -3,6 +3,7 @@
     <div class="main-section">
       <slot name="navbar"></slot>
       <slot name="breadcrumbs"></slot>
+      <slot name="cover"></slot>
       <slot name="content"></slot>
       <ThemeSwitch class="theme-switch" />
     </div>

diff --git a/packages/ui/components/chart/ChartMovingTooltip.vue b/packages/ui/components/chart/ChartMovingTooltip.vue
@@ -39,7 +39,7 @@ export default {
   padding: 8px 16px;
   border-radius: 4px;
   color: var(--text);
-  z-index: 1000;
+  z-index: 13;
   .value {
     font-size: var(--text-size);
   }

diff --git a/packages/ui/layouts/default.vue b/packages/ui/layouts/default.vue
@@ -2,9 +2,10 @@
   <div class="background" :class="{ 'hide-scroll': hideScroll }">
     <MainSection>
       <NavBar slot="navbar" @scroll="handleScroll" />
-      <BreadCrumbs v-if="!hideScroll" slot="breadcrumbs" />
-      <Nuxt v-if="!hideScroll" slot="content" />
-      <Footer v-if="!hideScroll" slot="footer" />
+      <div slot="cover" class="cover" :class="{ show: hideScroll }"></div>
+      <BreadCrumbs slot="breadcrumbs" />
+      <Nuxt slot="content" />
+      <Footer slot="footer" />
     </MainSection>
   </div>
 </template>
@@ -44,6 +45,19 @@ html {
   height: 100vh;
   position: absolute;
   overflow-y: hidden;
+  background: var(--bg);
+}
+
+.cover {
+  display: none;
+  &.show {
+    display: block;
+    min-height: 100%;
+    min-width: 100vw;
+    position: absolute;
+    background: var(--bg);
+    z-index: 14;
+  }
 }
 
 html,