fix: navbar's messy layout at narrow screen (#714)

vuejs · Aug 8, 2018 · 3e1da57 · 3e1da57
1 parent bb48a77
commit 3e1da57
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 6 deletions.
diff --git a/lib/default-theme/NavLinks.vue b/lib/default-theme/NavLinks.vue
@@ -130,6 +130,8 @@ export default {
     display inline-block
     margin-left 1.5rem
     line-height 2rem
+    &:first-child
+      margin-left 0
   .repo-link
     margin-left 1.5rem
 

diff --git a/lib/default-theme/Navbar.vue b/lib/default-theme/Navbar.vue
@@ -13,13 +13,19 @@
         :alt="$siteTitle"
       >
       <span
+        ref="siteName"
         class="site-name"
         v-if="$siteTitle"
         :class="{ 'can-hide': $site.themeConfig.logo }"
       >{{ $siteTitle }}</span>
     </router-link>
 
-    <div class="links">
+    <div
+      class="links"
+      :style="{
+        'max-width': linksWrapMaxWidth + 'px'
+      }"
+    >
       <AlgoliaSearchBox
         v-if="isAlgoliaSearch"
         :options="algolia"
@@ -39,6 +45,26 @@ import NavLinks from './NavLinks.vue'
 export default {
   components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
 
+  data () {
+    return {
+      linksWrapMaxWidth: null
+    }
+  },
+
+  mounted () {
+    const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
+    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
+    const handleLinksWrapWidth = () => {
+      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
+        this.linksWrapMaxWidth = null
+      } else {
+        this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING - this.$refs.siteName.offsetWidth
+      }
+    }
+    handleLinksWrapWidth()
+    window.addEventListener('resize', handleLinksWrapWidth, false)
+  },
+
   computed: {
     algolia () {
       return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
@@ -49,13 +75,23 @@ export default {
     }
   }
 }
+
+function css (el, property) {
+  // NOTE: Known bug, will return 'auto' if style value is 'auto'
+  const win = el.ownerDocument.defaultView
+  // null means not to return pseudo styles
+  return win.getComputedStyle(el, null)[property]
+}
 </script>
 
 <style lang="stylus">
 @import './styles/config.styl'
 
+$navbar-vertical-padding = 0.7rem
+$navbar-horizontal-padding = 1.5rem
+
 .navbar
-  padding 0.7rem 1.5rem
+  padding $navbar-vertical-padding $navbar-horizontal-padding
   line-height $navbarHeight - 1.4rem
   position relative
   a, span, img
@@ -71,14 +107,26 @@ export default {
     color $textColor
     position relative
   .links
+    padding-left 1.5rem
+    box-sizing border-box
+    background-color white
+    white-space nowrap
     font-size 0.9rem
     position absolute
-    right 1.5rem
-    top 0.7rem
+    right $navbar-horizontal-padding
+    top $navbar-vertical-padding
+    display flex
+    .search-box
+      flex: 0 0 auto
+      vertical-align top
+    .nav-links
+      flex 1
 
 @media (max-width: $MQMobile)
   .navbar
     padding-left 4rem
     .can-hide
       display none
+    .links
+      padding-left 1.5rem
 </style>
diff --git a/lib/default-theme/SearchBox.vue b/lib/default-theme/SearchBox.vue
@@ -4,6 +4,7 @@
       @input="query = $event.target.value"
       aria-label="Search"
       :value="query"
+      :class="{ 'focused': focused }"
       autocomplete="off"
       spellcheck="false"
       @focus="focused = true"
@@ -156,7 +157,7 @@ export default {
 .search-box
   display inline-block
   position relative
-  margin-right 0.5rem
+  margin-right 1rem
   input
     cursor text
     width 10rem
@@ -209,7 +210,6 @@ export default {
       width 0
       border-color transparent
       position relative
-      left 1rem
       &:focus
         cursor text
         left 0
@@ -223,6 +223,8 @@ export default {
 @media (max-width: $MQMobile)
   .search-box
     margin-right 0
+    input
+      left 1rem
     .suggestions
       right 0