Skip to content

Fix weird layout workflow issues on firefox #358

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

Merged
merged 2 commits into from
Jul 22, 2019
Merged

Fix weird layout workflow issues on firefox #358

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
be33df9
Fix weird layout workflow issues on firefox
GuillaumeGomez May 20, 2019
598810a
Fix right scrollbar position
GuillaumeGomez Jun 5, 2019
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
21 changes: 12 additions & 9 deletions templates/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ $color-lifetime-incode: #B76514; // orangish
$color-comment-in-code: #8E908C; // light gray
$color-background-code: #F5F5F5; // lighter gray
$color-border: #ddd; // gray

$top-navbar-height: 32px; // height of the floating top navbar


// pure compatible media queries
Expand Down Expand Up @@ -58,7 +58,7 @@ div.rustdoc {

.sidebar {
@media (min-width: 701px) {
padding-top: 32px;
margin-top: $top-navbar-height;
}

.block > ul > li {
Expand All @@ -67,7 +67,7 @@ div.rustdoc {
}

#source-sidebar {
top: 32px;
top: $top-navbar-height;
}

#sidebar-toggle {
Expand All @@ -76,14 +76,14 @@ div.rustdoc {

@media (max-width: 700px) {
.sidebar.mobile {
top: 32px;
top: $top-navbar-height;

.sidebar-elems.show-it {
top: 77px;
}

#sidebar-filler {
top: 32px;
top: $top-navbar-height;
}
}
}
Expand All @@ -92,14 +92,16 @@ div.rustdoc {
position: absolute;
left: 0;
right: 0;
top: 32px;
top: $top-navbar-height;
overflow-y: auto;
max-height: calc(100vh - #{$top-navbar-height});
}

body {
padding: 0;
margin: 0;
// Since top navbar is fixed, we need to add padding to the body content.
padding-top: 32px;
padding-top: $top-navbar-height;
}


Expand Down Expand Up @@ -141,14 +143,13 @@ div.container {
}

div.container-rustdoc {
max-width: 1200px;
Copy link
Member

Choose a reason for hiding this comment

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

What does removing this rule do?

Copy link
Member

Choose a reason for hiding this comment

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

After talking with Guillaume on Discord, it seems like this was the thing causing the bug Onur had seen, with the scrollbar appearing next to the content rather than on the edge of the viewpoint. However, removing this also causes the "crate search" box in the docs.rs navbar to move all the way to the side:

image

Maybe we can move this rule to div.nav-container-rustdoc instead, rather than deleting it entirely? The value itself may need to be changed, since the rustdoc content is a little wider than 1200px.

text-align: left;
}

div.nav-container {
// Nothing is supposed to be over or hovering the top navbar. Maybe add a few others '('? :)
z-index: 999;
height: 32px;
height: $top-navbar-height;
border-bottom: 1px solid $color-border;
background-color: #fff;
left: 0;
Expand All @@ -175,6 +176,8 @@ div.nav-container {
}

form.landing-search-form-nav {
max-width: 1200px;

input.search-input-nav {
float: right;
max-width: 200px;
Expand Down