Front End styling tidied up for Search Bar and Nav Links in the Header #266
Conversation
…lutely positions over the top of the nav
|
Can you add a before/after screenshot for easier review? |
|
Sure Before (unfocused search)
Before (focused search) After (focused search) When I get half an hour I'll put in a more solid fix as there's some other funky stuff going on with the nav when there's a tonne of nav items, it would be better to drop them onto another line that was it's infinitely scalable Cheers |
lib/default-theme/SearchBox.vue
Outdated
| cursor text | ||
| width 10rem | ||
|
|
||
| @media (min-width: $MQMobile) and (max-width: $MQNarrow) |
There was a problem hiding this comment.
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.
| @@ -184,17 +184,40 @@ export default { | |||
| a | |||
| color $accentColor | |||
|
|
|||
| @media (max-width: $MQNarrow) | |||
| @media (max-width: $MQMobile) | |||
There was a problem hiding this comment.
This should be merged with the media query on line 228
lib/default-theme/SearchBox.vue
Outdated
| background-color white | ||
| z-index 10 | ||
| left 0 | ||
| top: 0 |
|
@yyx990803 - changes pushed and ready for review |
ulivz
force-pushed
the
master
branch
3 times, most recently
from
14d9013 to
c7c0cd9
Compare
ulivz
force-pushed
the
master
branch
5 times, most recently
from
c992e38 to
c2eaff3
Compare
ulivz
force-pushed
the
master
branch
4 times, most recently
from
0c3bc3a to
cf1e6fc
Compare
|
@michalsnik @shentao This is affecting a lot of Vue docs. Would either of you be able to help take over this PR and push it to completion? 🙂 |
|
@chrisvfritz Sorry for the delay, I have fixed this issue but I need more condition-coverage test, will try to release it at ASAP. |
|
@ulivz Thank you! I appreciate your work. 🙂 |
|
Closing it since we had a better fix at #714. |
I noticed the nav in the header had a few small issues at narrow sizes (740px etc) where the Nav Links are overlapping the logo, and focusing the Search Bar breaks out of the layout.
I've reduced the size of the padding on the Nav Links and changed the styling of the focused Search Bar to absolutely position over the top of the Nav at Narrow breakpoints.
Let me know what you think. Cheers