fix repl scrolling

yyx990803 · yyx990803 · commit 6278450a204c · 2021-12-25T22:31:02.000+08:00
diff --git a/package.json b/package.json
@@ -6,7 +6,7 @@
   },
   "dependencies": {
     "@vue/repl": "^0.4.8",
-    "@vue/theme": "^0.1.27",
+    "@vue/theme": "^0.1.28",
     "dynamics.js": "^1.1.5",
     "gsap": "^3.9.0",
     "vitepress": "^0.20.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/examples/ExampleRepl.vue b/src/examples/ExampleRepl.vue
@@ -49,13 +49,15 @@ function updateExample() {
 .vue-repl {
   max-width: 1105px;
   border-right: 1px solid var(--vt-c-divider-light);
-  height: calc(100vh - var(--vt-nav-height));
+  height: calc(100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px));
 }
 
 @media (max-width: 960px) {
   .vue-repl {
     border: none;
-    height: calc(100vh - var(--vt-nav-height) - 48px);
+    height: calc(
+      100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px) - 48px
+    );
   }
 }
 </style>
diff --git a/src/tutorial/TutorialRepl.vue b/src/tutorial/TutorialRepl.vue
@@ -134,13 +134,19 @@ a {
 }
 
 .vue-repl {
-  height: calc(100vh - var(--vt-nav-height) - var(--ins-height));
+  height: calc(
+    100vh - var(--vt-nav-height) - var(--ins-height) -
+      var(--vt-banner-height, 0px)
+  );
 }
 
 @media (max-width: 960px) {
   .vue-repl {
     border: none;
-    height: calc(100vh - var(--vt-nav-height) - var(--ins-height) - 48px);
+    height: calc(
+      100vh - var(--vt-nav-height) - var(--ins-height) -
+        var(--vt-banner-height, 0px) - 48px
+    );
   }
 }
 

Original file line number	Diff line number	Diff line change
`@@ -49,13 +49,15 @@ function updateExample() {`
`49`	`49`	`.vue-repl {`
`50`	`50`	`max-width: 1105px;`
`51`	`51`	`border-right: 1px solid var(--vt-c-divider-light);`
`52`		`- height: calc(100vh - var(--vt-nav-height));`
	`52`	`+ height: calc(100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px));`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`@media (max-width: 960px) {`
`56`	`56`	`.vue-repl {`
`57`	`57`	`border: none;`
`58`		`- height: calc(100vh - var(--vt-nav-height) - 48px);`
	`58`	`+ height: calc(`
	`59`	`+ 100vh - var(--vt-nav-height) - var(--vt-banner-height, 0px) - 48px`
	`60`	`+ );`
`59`	`61`	`}`
`60`	`62`	`}`
`61`	`63`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -134,13 +134,19 @@ a {`
`134`	`134`	`}`
`135`	`135`
`136`	`136`	`.vue-repl {`
`137`		`- height: calc(100vh - var(--vt-nav-height) - var(--ins-height));`
	`137`	`+ height: calc(`
	`138`	`+ 100vh - var(--vt-nav-height) - var(--ins-height) -`
	`139`	`+ var(--vt-banner-height, 0px)`
	`140`	`+ );`
`138`	`141`	`}`
`139`	`142`
`140`	`143`	`@media (max-width: 960px) {`
`141`	`144`	`.vue-repl {`
`142`	`145`	`border: none;`
`143`		`- height: calc(100vh - var(--vt-nav-height) - var(--ins-height) - 48px);`
	`146`	`+ height: calc(`
	`147`	`+ 100vh - var(--vt-nav-height) - var(--ins-height) -`
	`148`	`+ var(--vt-banner-height, 0px) - 48px`
	`149`	`+ );`
`144`	`150`	`}`
`145`	`151`	`}`
`146`	`152`