fix(theme): broken layout on thinner viewports

vuejs · Oct 25, 2022 · 640ee26 · 640ee26
1 parent fd609f5
commit 640ee26
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 15 deletions.
diff --git a/src/client/theme-default/components/VPContent.vue b/src/client/theme-default/components/VPContent.vue
@@ -52,7 +52,7 @@ const NotFound = inject('NotFound')
 .VPContent {
   flex-grow: 1;
   flex-shrink: 0;
-  margin: 0 auto;
+  margin: var(--vp-layout-top-height, 0) auto 0;
   width: 100%;
 }
 
@@ -61,13 +61,17 @@ const NotFound = inject('NotFound')
   max-width: 100%;
 }
 
+.VPContent.has-sidebar {
+  margin: 0;
+}
+
 @media (min-width: 960px) {
   .VPContent {
-    padding-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px));
+    padding-top: var(--vp-nav-height);
   }
 
   .VPContent.has-sidebar {
-    margin: 0;
+    margin: var(--vp-layout-top-height, 0) 0 0;
     padding-left: var(--vp-sidebar-width);
   }
 }

diff --git a/src/client/theme-default/components/VPDoc.vue b/src/client/theme-default/components/VPDoc.vue
@@ -120,8 +120,8 @@ provide('onContentUpdated', onContentUpdated)
 .aside-container {
   position: sticky;
   top: 0;
-  margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px)) * -1 - 32px);
-  padding-top: calc(var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px);
+  margin-top: calc((var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0)) * -1 - 32px);
+  padding-top: calc(var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0) + 32px);
   height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
@@ -144,7 +144,7 @@ provide('onContentUpdated', onContentUpdated)
 .aside-content {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0px) + 32px));
+  min-height: calc(100vh - (var(--vp-nav-height-desktop) + var(--vp-layout-top-height, 0) + 32px));
   padding-bottom: 32px;
 }
 

diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
@@ -119,7 +119,7 @@ function onBlur() {
 }
 
 .option-icon {
-  margin-right: 0px;
+  margin-right: 0;
   width: 16px;
   height: 16px;
   fill: currentColor;

diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
@@ -53,19 +53,19 @@ defineProps<{
 
 <style scoped>
 .VPHero {
-  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);
-  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
+  margin-top: calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0)) * -1);
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0) + 48px) 24px 48px;
 }
 
 @media (min-width: 640px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0) + 80px) 48px 64px;
   }
 }
 
 @media (min-width: 960px) {
   .VPHero {
-    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0) + 80px) 64px 64px;
   }
 }
 

diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
@@ -48,6 +48,7 @@ function scrollToTop() {
   width: 100%;
   background-color: var(--vp-c-bg);
   transition: border-color 0.5s, background-color 0.5s;
+  margin-top: var(--vp-layout-top-height, 0);
 }
 
 @media (min-width: 960px) {

diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
@@ -29,7 +29,7 @@ provide('close-screen', closeScreen)
 <style scoped>
 .VPNav {
   position: relative;
-  top: var(--vp-layout-top-height, 0px);
+  top: var(--vp-layout-top-height, 0);
   left: 0;
   z-index: var(--vp-z-index-nav);
   width: 100%;

diff --git a/src/client/theme-default/components/VPNavScreen.vue b/src/client/theme-default/components/VPNavScreen.vue
@@ -43,7 +43,7 @@ function unlockBodyScroll() {
 <style scoped>
 .VPNavScreen {
   position: fixed;
-  top: calc(var(--vp-nav-height-mobile) + var(--vp-layout-top-height, 0px));
+  top: calc(var(--vp-nav-height-mobile) + var(--vp-layout-top-height, 0));
   right: 0;
   bottom: 0;
   left: 0;

diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
@@ -107,7 +107,7 @@ function toggle() {
 }
 
 .group:first-child {
-  padding-top: 0px;
+  padding-top: 0;
 }
 
 .group + .group,

diff --git a/src/client/theme-default/components/VPSidebar.vue b/src/client/theme-default/components/VPSidebar.vue
@@ -59,7 +59,7 @@ watchPostEffect(async () => {
 <style scoped>
 .VPSidebar {
   position: fixed;
-  top: var(--vp-layout-top-height, 0px);
+  top: var(--vp-layout-top-height, 0);
   bottom: 0;
   left: 0;
   z-index: var(--vp-z-index-sidebar);