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.

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

fix(navbar): fix styles when navbar is not present #316

Merged
merged 1 commit into from
May 2, 2018

Conversation

Aterbonus
Copy link
Contributor

Before

dektop guide before
mobile guide sidebar before

After

dektop guide after
mobile guide sidebar after

@ulivz
Copy link
Member

ulivz commented May 2, 2018

Can you provide more context? I cannot repro this bug.

@Aterbonus
Copy link
Contributor Author

When a page has no navbar (navbar: false in the front matter) there is a gap where the navbar was.

This is especially evident when we use a Custom Layout and we don't want to have a navbar.

Example:

HomeLayout.vue

<template>
<div class="container">
    <vue-nixie-clock></vue-nixie-clock>
</div>
</template>

<style scoped>
.container {
    align-items: center;
    background-color: #000;
    display: flex;
    height: 100vh;
    justify-content: center;
}

.nixie-clock {
    width: 800px;
}
</style>

README.md

---
layout: HomeLayout
navbar: false
---

Before

screenshot_20180502_023406

After

screenshot_20180502_023738

@meteorlxy
Copy link
Member

Why not add some mark on the snapshots? I even can't find the differences at first...

image
image

Copy link
Member

@ulivz ulivz left a comment

Choose a reason for hiding this comment

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

Checked at my local and LGTM, only a small question.

h1, h2, h3, h4, h5, h6
margin-top 1.5rem
padding-top 0
.sidebar
top 0
Copy link
Member

Choose a reason for hiding this comment

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

Why need reset top: 0 here ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

When there is no navbar, setting top to 0 will cause the sidebar to have 100% height of the viewport on Desktop.

Before

desktop before

After

desktop after

@ulivz
Copy link
Member

ulivz commented May 2, 2018

Thanks for the work!

@ulivz ulivz merged commit 2bdc68e into vuejs:master May 2, 2018
@ulivz ulivz mentioned this pull request May 11, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants