Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Front End styling tidied up for Search Bar and Nav Links in the Header #266

Closed
wants to merge 4 commits into from
Closed

Front End styling tidied up for Search Bar and Nav Links in the Header #266

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
24756e2
updated nav links padding so they don't overlap the menu at narrow br…
samuelgoddard Apr 26, 2018
7f52977
updated search box so it doesn't break at narrow viewpoints, now abso…
samuelgoddard Apr 26, 2018
c90dd82
: removed, change request - https://github.com/vuejs/vuepress/pull/26…
samuelgoddard Apr 30, 2018
a235176
multiple media queries merged
samuelgoddard Apr 30, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 7 additions & 2 deletions lib/default-theme/NavLinks.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,10 +117,15 @@ export default {
.repo-link
margin-left 1.5rem

@media (max-width: $MQMobile)
@media (min-width: $MQMobile)
.nav-links
.nav-item, .repo-link
margin-left 0.75rem

@media (min-width: $MQNarrow)
.nav-links
.nav-item, .repo-link
margin-left 0
margin-left 1.5rem

@media (min-width: $MQMobile)
.nav-links a
Expand Down
31 changes: 27 additions & 4 deletions lib/default-theme/SearchBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -184,17 +184,40 @@ export default {
a
color $accentColor

@media (max-width: $MQNarrow)
@media (max-width: $MQMobile)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be merged with the media query on line 228

.search-box
margin-right 0
display inline-block
input
position relative
left 1rem
cursor pointer
width 0
border-color transparent
position relative
left 1rem
background-color white
z-index 10
&:focus
cursor text
width 10rem

@media (min-width: $MQMobile) and (max-width: $MQNarrow)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently there are multiple media queries with duplicated rules that can be merged together. e.g. This is the exact same media query as the one on line 223.

.search-box
position relative
display inline-block
width 30px
height 23px
margin-right 0
input
cursor pointer
width 0
border-color transparent
position absolute
background-color white
z-index 10
left 0
top: 0
Copy link
Member

@meteorlxy meteorlxy Apr 30, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove the :

&:focus
cursor text
left 0
width 10rem

@media (max-width: $MQNarrow) and (min-width: $MQMobile)
Expand Down