Skip to content

Commit

Permalink
fix: navbar's messy layout at narrow screen (#714)
Browse files Browse the repository at this point in the history
  • Loading branch information
ulivz authored Aug 8, 2018
1 parent bb48a77 commit 3e1da57
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 6 deletions.
2 changes: 2 additions & 0 deletions lib/default-theme/NavLinks.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
56 changes: 52 additions & 4 deletions lib/default-theme/Navbar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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 || {}
Expand All @@ -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
Expand All @@ -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>
6 changes: 4 additions & 2 deletions lib/default-theme/SearchBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@input="query = $event.target.value"
aria-label="Search"
:value="query"
:class="{ 'focused': focused }"
autocomplete="off"
spellcheck="false"
@focus="focused = true"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -209,7 +210,6 @@ export default {
width 0
border-color transparent
position relative
left 1rem
&:focus
cursor text
left 0
Expand All @@ -223,6 +223,8 @@ export default {
@media (max-width: $MQMobile)
.search-box
margin-right 0
input
left 1rem
.suggestions
right 0
Expand Down

0 comments on commit 3e1da57

Please sign in to comment.