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

Fix: navigation buttons shouldn't cover scrollbar #838

Merged
merged 5 commits into from
Aug 31, 2018
Merged

Fix: navigation buttons shouldn't cover scrollbar #838

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1bedcc3
Fix: navigation buttons shouldn't cover scrollbar
Aug 28, 2018
de9445a
Fix: retain size of navigation buttons but offset
Aug 29, 2018
39f2ec6
Fix: changing the offset to be 20px
Aug 29, 2018
5102ddd
Fix: removing unnecessary width of svg
Aug 29, 2018
14f3110
Merge branch 'master' into navigation-overlapping-scrollbar
Aug 31, 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
10 changes: 8 additions & 2 deletions src/lib/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
$navigationBtnWidth: 50px;
$navigationBtnWidth: 40px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Why reduce the button width? What if you left everything the same, but changed the left and right of .bp-navigate-left and .bp-navigate-right, would that work?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, you're right I could keep the button width the same, I guess I was just trying to keep the button about in the same place as it ever was (though what is 5px vs 10px really)


.bp-is-fullscreen .bp-navigate {
display: none;
Expand Down Expand Up @@ -39,6 +39,11 @@ $navigationBtnWidth: 50px;
box-shadow: none;
outline: none;
}

& > svg {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Is this still necessary?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

nope it is not, will remove

margin-left: -5px;
Copy link
Contributor

Choose a reason for hiding this comment

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

Is this due to spacing built into the SVG?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is to center the SVG within the now 40px button, stand by for screenshots

width: 50px;
}
}

.bp-is-navigation-visible .bp-navigate {
Expand All @@ -52,9 +57,10 @@ $navigationBtnWidth: 50px;
.bp-navigate-left {
border-radius: 0 2px 2px 0;
left: 0;
Copy link
Contributor

Choose a reason for hiding this comment

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

remove this?

left: 10px;
}

.bp-navigate-right {
border-radius: 2px 0 0 2px;
right: 0;
right: 10px;
}